Javascript to Elm

Better Ports The actor model concurrent and fault tolerant info in / info out like chatting in slack Erlang / Elixir, web workers Just One Port out going / One Port incoming stop with the JS wrapping api simplify JS down to its data Treating JS as a black box Incoming Data from JS to Elm and Outgoing data for Elm to JS Data will be a new type GenericData {tag: String, data: Json.Encode.Value} Tag will be our pattern match and tell us what to do with the data How does that work in our case with React ? initPorts can be function removed from living in the actual React component, So in rendering another Elm ‘component’ would we want to have separate init methods ? Not really. So don’t for get! “elm lang I cannot find module” "source-directories": ["./src/elm"], port module JSInterop exposing (..) import Note exposing (Note, noteDecoder, noteListDecoder) import Json.Decode exposing (Decoder, decodeValue) import Json.Encode sendData : OutgoingData -> Cmd msg sendData info = cas

Elm is a functional language that compiles to JavaScript. There are a lot of benefits that can be gained from using a functional language, more than just adding types as a super set to existing JavaScript. How about No more null. No “undefined is not a function”, we’ll never see these again! I’ll go over how to leverage this incredible language in our existing React Apps, and some of the challenges of taking this route.  

  Extra Type Alias I had made a type alias Notes = List Note Mostly because the compiler was complaining at one point, and I wasn’t able to see to distill from it that all I needed was some parentheses around List Note to disambiguate it. Tackling the onClick event List.map (\n -> Listgroup.li [ onClick (routeTo "/notes/" ++ n.noteId) ] [ text n.content ]) notes that was my first thought, but.. The 1st argument to function `li` is causing a mismatch. - Function `li` is expecting the 1st argument to be: List (Listgroup.ItemOption msg) But it is: List (Html.Attribute a) grrrrrr List (Html.Attribute msg) But the right side is: Html.Attribute Msg What I finally got Listgroup.button [ Listgroup.attrs { ports.fetchNotes.subscribe(path => { invokeApig({ path: path, queryParams: { limit: 5 } }) .then(results => ports.notesLoaded.send(results)) .catch(e => console.log(e)); }); ports.routeTo.subscribe(url => { this.props.history.push(ur

Status of Meow Notes current customers will soon, very very soon, be able to once again click on a list item and have the app direct you to your know, and also making a return will be the button to add a new note. Thank you for your patients. lol State of Elm Let’s start with State of Elm 2017 Started to get feedback for creating Elm-conf 2016 - 614 2017 - 1,170 2018 - 3,000 is my guess People are staying in Elm, from 0-1 year, to 1-2 roughly the same * Part 1 you “What is your level of experience with functional programming?” mmmmm, beginner? I feel like there is a giant gap between my knowledge in JS and OOP, and my knowledge in FP. So I gave myself a 3 “What is your level of experience with functional programming?” JS, Swift, Objective-C “Where do you go for Elm news and discussion?” Elm subreddit Elm Discourse Twitter Discussions elm-dev Mailing List the Elm Slack Blog Posts Podcasts (Elm Town, JavaScript to Elm) dev.to Facebook Groups HOLY COW we made the list!!!!!! “What resources di

  Data from Ports After being about to do a debug log in the update function that was just a dump of the results from the port function port notesLoaded : (Value -> msg) -> Sub msg This was cause for celebration. Now getting that JSON data into a list. Ok, what is the return payload in ?? Little messed up looking at most examples, bc they were dealing with maybe JSON Result type signature type Result error value = Ok value | Err error A Result is either Ok meaning the computation succeeded, or it is an Err meaning that there was some failure. type Msg = NotesLoaded (Result String Notes) [...] port notesLoaded : (Value -> msg) -> Sub msg Decoding List of Objects. Everyone’s favorite. This is the part I enjoy in programing the sort of gritty, data transformation. incoming JSON is run through the noteListDecoder, which runs decode on a list of Notes. Using map3 we Try three decoders and then combine the result. >> In other words, («) takes 2 functions of types b -> c and a -> b respect

  Conferences Elm Europe is closed for CFPs elm Europe Elm Europe will be a two-day conference dedicated to Elm, taking place at the EFREI Engineering School in Villejuif (near Paris, France) on July, 5-6th 2018. React Rally React Rally is a two day single track conference for developers of all backgrounds using Facebook’s React.js, React Native, and related tools. Speakers will cover topics such as React Native, Flux, ES6, isomorphic universal JavaScript, and so much more CFP The core theme for talks at React Rally is “things that are interesting to React developers.” We want stories about how you built products or experiences with React, stories about overcoming challenges with (or caused by) React, and ideas for solving problems that exist in React today. Sample of good proposals Local ServiceWorkers, because you know….SSL! After searching the inter webs for several possible solutions… Local signed cert Launch Chrome with flags /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome

  Recapping our app We talked a little bit about our app last week, mostly I think we highlighted the backend stack. S3, Lambda functions, DynamoDB blah blah blah. Haven’t added Redux at this point. We’ve got a handle full of containers or smart components that have their own state management. Yeah Yeah Yeah, best I could scramble together in a week, ok? But that gives a unique opportunity. Evan makes a point in Elm at work: Fix a Problem Adding Elm to any project will produce 2 results: “You know that code that was totally fine? It is different now.” OR “You know that crazy code that everyone fears touching? It is simpler now and I resolved some bugs.” So the idea in recapping our app is to hopefully bubble up some of these “opportunities” No offline usage, we had specifically listed this in our beginning features with the release of iOS 11.3 beta that has service workers. I know know, Android for like 2 plus years. All auth is done through aws incognito, so we don’t really have to worry to much about

  Special Thanks to all the listeners I want to thank everyone who reached out Special shout out to Peter Jang Where to go from here ? So, after getting the show out, I did not even look in the general direction of JS to Elm for the rest of the week, which is pretty unusual. For the most part, I chip away at it over the course of the week, read, shore up the notes, record, let that simmer for a day or so, edit it,and often have a spare day before it’s release. Not this week. Nope. For a couple reasons: I did not want to admit that the start to my super duper awesome project, had stuffered a major set back before ever getting off the ground. I would have to face the glaring fact, that I have not retained, learned, absorbed, or internalized nearly as much as I thought about Elm, Types, and functional programming in general. With points 1 and 2, where do I go from here? Rediscovered Empathy for beginners Retooling my own learning Onward and upward as the saying goes. Regaining confidence Let’s pick a proj

  Project: Just do it already Run code in MirrorCode and transpile JS code to AST and compare to answer stored at AST. But the first part is to incorporate the editor, CodeMirrior, and capture the input. That would be the definition of success. Init app, get it running Split page into 50% using CSS Grid, bc fancy Put CodeMirror onto page with Elm The Problem. I need to apply the instance of CodeMirror to the div with id “CodeEditor” After Importing CodeMirror, Embedding the Elm app on the root id tag my “CodeEditor” element is nowhere to be found. Ports Ellie as a template Capture coding input and output Evaluate that JS, safely? Where it all when wrong the midterm Passed or Failed Totally failed at this one. Apply the instance of CodeMirror to the element ID after Elm creates the content Request Animation Frame?? Nope, no idea? The rabbit hole, Elm and Ports Me, Elm, and Compile failures * Realign Expectations, Rethinking learning this stuff Ok, so it’s a larger project I don’t have a good gras

  Parsing Technical details of Meow’s parser Two main ways to tackle parsing top-down building the root node of the AST and then working downward and out When the parser starts constructing the parse tree from the start symbol and then tries to transform the start symbol to the input, it is called top-down parsing. bottom-up goes the other way. lol. As the name suggests, bottom-up parsing starts with the input symbols and tries to construct the parse tree up to the start symbol. Within this are a few variations. Meow will be a recursive descent parser top down operator precedence, called the “Pratt parser”, after Vaughan Pratt Parse Generator Dude, I know, well I didn’t know, but now I vaguely know. Sort of defeats the purpose of learning to just use the off the self parse generator. The actual parsing… starting with ‘let’ valid Meow code let x = 10; let y = 15; let add = fn(a,b){ return a + b; } Statements and Expressions Simply put, expressions produce values - statements don’t

  Compilers aren’t scary. What is it Compiler or Interpreter, what’s the difference? Steps of a Compiler Interpreter What we’re actually building Bit of what Meow Lange will look like Lexical Analysis Defining Tokens Actual Lexer Additional Character Implementation Picks Resources Follow Compilers aren’t scary. Frankly, this topic, for me, above all others, has been wildly unapproachable. And this might be a case where I know more than I think, but I think the reality is, the materials I’ve found explaining compilers come with nothing short of a dump truck of implied knowledge, that I simply do not process. You can check the resources for an extensive list of books that i’ve started with varying degrees of success, one that stuck, that we are going to use extensively is Thorsten Ball’s “Writing an Interpreter in Go.” I know what you’re thinking, Go? I’ll defer to Thorsten’s points. Go standard lib has all the things we need, including built in testing. No 3rd libs needed. Go tooling is pretty gre

  Functions A function takes inputs and ALWAYS returns output I have definitely NOT always done this. Many cases where I’ve initWithId or initWithArray, that all return void. Ewwww Part of this, is the idea that in order to help retrain my thinking. I need to do more functional thinking in my daily javascript * + (void)initialize { if(self == [WhateverClass class]) { ...perform initialization... } } Procedural/Imperative programming simply contain a series of computational steps to be carried out. Any given procedure might be called at any point during a program’s execution, including by other procedures or itself. declarative code communicates more effectively than imperative code. Don’t at me. //imperative function meow(props) { var x = props[0], y = props[1], arr = props.slice(2); //... } //declarative function soup([x, y, ...args] = []) { //.. that's it?? } meow([2, 4, 6]); //i guess I can figure out which is which soup([1, 3, 5])

More Ports Ports, the Actor Model. Ports is not server/http, but rather the Actor Model Talking with messages. Messages In, Messages Out. Erlang/Elixir, webworkers, Scala Let’s just have 1 port. Singular. Let’s NOT wrap the JS API. Murphy’s “Outside Info” of a single pair of ports The Actor Model The actor model is a conceptual model to deal with concurrent computation. The actor is just a thing that receives a message and then does something based on that message. The actor can have private state, that cannot be changed directly by another actor. Actors work in a system of actors. If you only have a single actor, then there’s no one to send messages to or worse, no one to get messages to. In our case, Elm is an actor, and JS is an actor, sending messages back and forth to each other. Messages sent to an actor or processed sequentially. Needs 3 things of computation: getting something done store things be able to communicate Actors can only do one of the following: Create more actors; Send messages to o

  Ports Evan’s call to action So in listening to the latest ElmTown, episode 22, with Evan Help needed: High on the google search results. Blog Posts in dealing with Ports. Similiar to SPA in Elm, more documentation became available. JavaScript alternitive, not a different approach to FrontEnd developement. NOT making JS better as a goal, but rather FrontEnd Better all together. If Ports can’t work for you, then Elm may not be for you, and that’s ok. Love to see Elm on other platforms, is the usual comment. Web Storage, I hear, a more generalized approach, rather than tieing Elm to specific API. Portability. Ecosystem Reliability Forigen Function Interface / Interop ? actual sovling the problem in another way, not just replicating or shoehorning the JS solution into Elm JavaScript Interop Not your regular langague interop. When C++ was designed, it was a consious design choice that all C, was vaild C++, this provides FULL backward compatibility. That is the easy, and popular choice. Java/Scala or JavaSc

Haskell for a greater Elm The more Elm I do, the more I feel like I’m reading a story, and missed a chapter. There feels like some infered knowleadge, that I simply do not possess. Like you missed a key plot point in a movie, and you totally miss the big reveal! You might be a very visual person. That’s awesome. I am not. I often here hear in teaching, that get the students to get something, anything up on the DOM, as soon as possible. This accomplishs a couple things. It gives them a sense of accomplishment, which is great, sucesses, at every level should be celebrated, but it also gives them some visual feedback, a thing,a tangable thing to look at and manipulate. I am not that type of student. I would rather do 20 commandline println "Hello World than a single visual output. And for me, the reason is repitition. I need the quickest, shortest, black and white feedback. I don’t want to switch applicaitons, I don’t even want to switch window focus. I want to type out a thing, and as quickly as I can, get some

  Elm Conf Elm Conf 2017 Closing Q&A NoRedInk - Hired Evan. 2ish years ago. Plans for Evan to live for years working only on Elm. Sweet! And if Richard isn’t worried, neither am I. Common Reasons, blockers for adoption - Mobile, quicker assets, things needed for certain size of business. There is always a list of needs. Expanding core features. Elm meetup 15 peeps. 2 years later 350 peeps at conference. Why is Elm not bigger? Whose using Elm in production, and now it’s dramatically improved. Comparison to like JS, meh. I like the Ruby comparison. Current industery is favoriable to Elm. What are the direct benefits. Not Specs, benefits! Value of helping other in the community, meetups, help out. Creating local markets. Best way for beginners to help out - Run a user group, or conference. Talk to peeps. Open a dialog to the owner or contribuitor. Beginner centric focus on the Elm community. I like Murphy’s phrase, ‘Thought Share’ Accessability - Merged into elm-htlm? maybe not so much, big api ch

  Maybe Type type Maybe a = Just a | Nothing Historical It’s just a union type, nothing scary, right? It’s gonna be Just with a value, or Nothing. Notice that I have typed these with capital letters. They are types, not values. The Maybe type encapsulates an optional value. A value of type Maybe a either contains a value of type a (represented as Just a), or it is empty (represented as Nothing). Using Maybe is a good way to deal with errors or exceptional cases without resorting to drastic measures such as error. The Maybe type is also a monad. It is a simple kind of error monad, where all errors are represented by Nothing. A richer error monad can be built using the Either type. What did you say? Mona-wanta-who-now? Monads in Haskell can be thought of as composable computation descriptions. More info - Lambdacast Practical How do I get something out of this thing to work with ? The maybe module to the rescue! Let’s look at a simple example > fruit = ["apple", "banana", "mango"] ["apple","banana"

  Webassembly Overview Disclaimer: webassembly does not currently support ‘Garbage Collected’(GC) compilations. This means it’s not yet viable for Elm. It will be, however, important to web development ecosystem as a whole, and thus very much worth our time and energy understanding it, and being ready to leverage it as soon as possible. What is webassembly? wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web. Efficient and fast Open and debuggable (pretty print) Part of the open web platform webassembly must currently be loaded and compiled by JavaScript. General Purpose virtual architecture Webassembly is NOT always faster than JavaScript Pace… Inter opt with JavaScript For basic loading, there are three steps: Get the .wasm bytes into a typed array or ArrayBuffer Compile the bytes into a WebAssembly.Module Instantiate the WebAssembly.Module with imports to get the callable exports Linear Memory rather than js objects that will be GC (garbage collecte

  Static v Dynamic Types Definitions First Static type systems perform type checking at compile-time, while dynamic type systems distinguish types at run-time. In our case JS is dynamic and Elm 2.0 which introduced strict null checking. We reviewed our corpus and found that 22 bugs, an increase of 58%, are detectable under TypeScript 2.0 but not under TypeScript 1.8. This result decisively and quantitatively demonstrates the value of TypeScript 2.0’s strict null checking. Free as in Beer nothing comes for free, so what was the cost this study found for developers to add type annotation to their JavaScript code ? Token “The token tax rests on the intuition that each token must be selected, so this proxy measures the number of decisions a programmer must make when adding type annotations” Time That one is pretty self explanitory. lol   Token Tax Mean Token Tax Median Time Tax (s) Mean Time Tax (s) Median Flow 1.7 2 231.4 133 TypeScript 2.4 2 306.8 262 handling modules was the most time-consu

  Finally Decoding But first if we google Elm decoding json, we get these gems Decoding Cheatsheet json decoding in elm is still hard The Json.Decode.decodeString function returns a Result. It has a type of: decodeString : Decoder val -> String -> Result String val so what does that mean? Well, more or less that we need Json.Decode to convert the JSON values into Elm values. And by elm values I mean, types safe, friendly compiler, you are there when I assume you are, and if not, it’s handled accordingly by type values. Json.Decode exposing (..) gives us primitives bool, float, int, string, and null. > decodeString bool "true" Ok True : Result.Result String Bool > decodeString bool "false" Ok False : Result.Result String Bool So Json.Decode has a ‘list’ function that Decoder and a(value) and returns a Decoder of (List a) > import Json.Decode exposing (list, bool, string, int) > list : Json.Decode.Decoder a -> Json.Decode.Decoder (List a) > bool : Json.Decode.Decoder Bool > string : J