Javascript to Elm

Convert all the Components Things I did before I got started updated Typora, my markdown writer updated VSCODE messed around with my Hyper Terminal Settings - side note, i now have tabbed terminal windows which was driving me nuts for the longest time. See so not always a total waste. lol installed powerline fonts? Login Signup Notes bc it’s the biggest. I feel like if we get to the top of this hill, and quickly, it’s all downhill from here. Meaning the momentum should allow us to plow through login and signup bring over needed Elm pieces to react container create route ‘Note’ save create case for Note on view based on route AH DAMN IT now i need the note id from the url url parser ? elm package install evancz/url-parser route : Url.Parser (Route -> a) a the type ‘a’ of ‘a’ throws me off. Url.Parser is a type that take an argument, a function that takes Route and return something, and the product of that function Url.Parser and Route -> a takes another of type a. NOPE Url.Parser t

All the things Learning Haskell Better Type and Functional understanding Better understanding of Elm and the Elm compiler Learning Rust Micro Blog Micro Casting Job Prospects Another Podcast Everything but… things we’ve done to actively avoid routing Exlir and Phoenix Web Framework AST with Kent C Dodds on Frontend Masters Babel 7 with babel macros Haskell webframe works scotty Typescript 3 Dockerize haskell project cool, now run it in the cloud like Google Cloud Kent’s Newsletter Picks Resources Kent C Dodds Newsletter Through the (open source) looking glass JavaScript to Haskell Follow JavaScript to Elm Twitter: @jstoelm Email: jesse@jstoelm.com Jesse Tomchak Twitter: @jtomchak  

Web Components..still We’re gonna get it this time…promise Remember the Goals Create custom element Get Elm to see and use custom ‘text’ element Upgrade ‘text’ element with Markdown-ness Be Awesome Also Luke made it look super easy in his talk. The failure According to the web component specification, browsers ignore any tags in the shadow DOM, treating them The shadow dom is a lie. Picks Babel 7 Through the (open source) looking glass Resources SimpleMDE Luke’s code-editor Red Square Shadowdom Codemirror Follow JavaScript to Elm Twitter: @jstoelm Email: jesse@jstoelm.com Jesse Tomchak Twitter: @jtomchak  

It’s Here, the release of Elm 0.19 Elm-Conf is soon!!!! Come join me Quick Hits function-level dead code elimination Across the entire ecosystem faster compile times, by a lot Nicer Parse Errors Better Docs on types, interop, and SPA packages elm/time elm/url elm/json elm/browser Html.beginner becomes Browser.element and Browser.document Single elm binary so elm-make is now just elm make Other renaming elm-package.json is now just elm.json Encode and Decode are now under elm/json all elm-lang are now just elm/* Removed User-Defined Operators Perf for collections on foldr which is gonna be List, Array, Dic, and Set getViewport The build up You can see the outline of that learning path in the Browser module. It lets you create Elm programs with the following functions: sandbox — react to user input, like buttons and checkboxes element — talk to the outside world, like HTTP and JS interop document — control the and application — create single-page apps It’s really really small!!! elm-core

House Keeping merge to master, keep better branches even for projects of 1 Doin' code reviews on yourself Actually Using A Web Component The goal is to incorporate a markdown text editor into meow notes Oh look one that uses codemirror Create custom element Get Elm to see and use custom ‘text’ element Upgrade ‘text’ element with Markdown-ness Be Awesome ERRORS “Please use the ‘new’ operator, this DOM object constructor cannot be called as a function. ” Issues MORE Errors Binding namespace already exists ? Picks Luke’s Talk! Resources SimpleMDE Luke’s code-editor Red Square Follow JavaScript to Elm Twitter: @jstoelm Email: jesse@jstoelm.com Jesse Tomchak Twitter: @jtomchak  

buckle script 3.2 OCaml to JS compiler Babel for oCaml Reason is a transformer FFI Two way transpire ?!? PPX’s First class support for JSX ? Syntax extensions, mmmmm Lacking interpolation in Elm Optional explicit type. Can’t say I’m a fan. The sort of explicit mental exercise of typing it out is helpful for me. Interop @bs.val or @bs.val Binding to existing JS API by name React Reason ? Labeled Arguments with ‘~’ React - Lite Shipped in 4.0 Embedded web socket Maybe Serbia hard for me bc of obj but man, that’s rough to look at. Lol Resources ReasonML Bindings BS-Express Reason on the server? ReasonML the what and why Follow JavaScript to Elm Twitter: @jstoelm Email: jesse@jstoelm.com Jesse Tomchak Twitter: @jtomchak  

What is web component Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. Build on 4 specifications Custom Element specifications Shadow DOM You can think of shadow DOM as a scoped subtree inside your element. HTML Imports HTML Template Libs to help build custom web elements Bosonic is a collection of components designed to meet the everyday needs of web developers. Polymer provides a set of features for creating custom elements. SkateJS is a JavaScript library for writing web components with a small footprint. Slim.js is an opensource lightweight web component library that provides data-binding and extended capabilities for components, using es6 native class inheritance. Stencil is an opensource compiler t

Do it already?!?!? What's the hold up? I needed to make a list. So here it is, let's go through it.   Elm Conf Site Videos from last year Speaker List    What's the hold up Shut up, where's my diagram? You promised me a diagram twice, and have failed to deliver both time. And that's not what we want to do on this show. Truth be told, I was pretty sure it was inaccurate at best, or worst just flat out wrong. So I made a new version and it is posted BEFORE I recorded the show. Json Encode Maybe POST over Ports. The trifecta of learning Elm. PORTS. Even if you aren't super leveraging PORTS, you'll need to get along with PORTS Json Decoders Maybe Types Fix image preview size At this point I'm frustrated that I can't "peer" into the Elm code, the way I can in JS. This is a very difficult habit to break. HAHAH, Ports kicking our but Decoding Json, I like it. There I said it. Encoding is a bit of a trip, but I think....I get it. Encoding nested records into JS Object Values!!!!!!!

Little Details We've done some great refactor work, but forgot one of the rules to our project. Keep it working, keep it in production. And our elm branch for new Notes is neither in production, or even fully functionaly in our dev environment. We always fine some small gotcha's when we have to double back, let's get to them! POST over Ports Encode object, it’s really a List (String, Value) Docs Struggle with maybes continues I know what I need to do. unwrap it. I keep trying to jump to step 3, which I’m clearly not there yet. That’s weird why isn’t the refactor loading the right page? always loading the welcome page, that’s weird maybe it’s because new notes needs to know auth situation, and our Elm app is still being torn down and init on every route. D ‘OH PROD at this point I’ve forgotten how to get this into prod good thing there is an npm script if you recall, that’s where i was headed in my docker build Should be able to NOT have pushed code in like 4 weeks, and still be able to do it

Steps Get it working Get onSubmit to POST to the API And onChange for the file input to do the PORT access to FileRead() that we build. Remember we need to use ports to read in the file in base 64 Then pass it back to our Elm app until the user submits the note Then off it goes, back over ports to the the api via POST, The page is popped back to the list, which fetches the whole thing — again. And around and around we go. Let’s see the model type alias CreateNote = { content : String , imageFile : Maybe Image } type alias Model = { notes : List Note , isAuthenticated : Bool , route : Route , createNote : CreateNote } type alias Flags = { route : String } So things have gotten a bit convoluted over time. Refactor the model Thinking about the state of your app We have Logged In Anonymous For each of these states, whether there is a List of type Note or not is predetermined. Now within Logged in we have a variety of of possible states, no notes, fetc

Rust from local to prod Get Docker installed Sounds simple right? WSL install. Windows damon, linux subsystem doesn’t actually need a VM! If you get an error the next time you start your WSL terminal don’t freak out. It’s a bug with 18.03 and you can easily fix it. Hit CTRL+Shift+ECS to open task manager, goto the “Services” tab, find the “LxssManager” service and restart it. Well that is quite a ride, isn’t it. we haven’t even started up a container yet! Get Rocket Running in Docker locally Gonna need a dockerfile Need to make sure the DNS for pulling docker image is set ? I remember sysAdmin, it’s like trying a 1,000 keys, and it’s always the 889th key that works docker build -t friendlyhello . # Create image using this directory's Dockerfile docker run -p 4000:80 friendlyhello # Run "friendlyname" mapping port 4000 to 80 docker run -d -p 4000:80 friendlyhello # Same thing, but in detached mode docker container ls # List all running containers docker

Rust Up? The goal: can I get a server up and running with a simple endpoint that returns hello world, and better still, read params and get “Hello whatever” back? Chose Rocket for quick up and running, paired with Diesel (from the developer that built active record!) Seems like such a versatile language, Stability and Tooling!! cargo is sweet and rustup makes install and project management pretty straight forward. Questions around deployment ?? I like aws lambda, but I’m not feeling super confident of my backend JS without the warm blanket of a type system. Meow Notes’ backend is all JS, and as we refactor it into Elm, I can’t help but think, what runtime errors are lurking in the backend ? With that, I don’t really want to be in the sysAdmin role. I want single command deployment, and don’t want to be responsible for the server up keep anymore. I don’t want to have to deal with proxy’s and configs. Blarf! I’ve used docker in the past, and once it’s all set up, it’s pretty straight forward,

# 38: Elm File Upload ## Elm File Upload * Setup Interops with fileSelected outgoing * Adding an Outgoing Data type for 'File Selected' and matching case statement for sendData that takes type OutgoingData and returns a Cmd msg * Preventing default * It's seems so easy bc I already know it * Reminding myself about the relearning, deeper learning cycle * onWithOptions, oh boy * Json.Decoder.success - Ignore the JSON and produce a certain Elm value. * wowzer that's a lot * Setup Interops with fileRead incoming * function to read in file using FileReader API * take value and send it back as JSON * decode incoming data and pipe to update function, with pattern match on incoming data case * You need to account for the following values: JSInterop.FileReadImage _ Add a branch to cover this pattern! * Totally always get when I forget to add the pattern match. ### Success        ## Picks ## Resources * [Using Ports with Files](https://www.paramander.com/blog/using-port

A special live recording of my talk at Elm Eug on Elm View, the showdown. A continuation of the first and second blog 'Blazing Fast HTML' Parts 1 and 2, comparing Elm render time and optimizations against other frameworks out there.

Building that Second Component New Machine npm install FOREVER Windows is pretty nice WSL is super duper awesome Oh yeah, that’s the linux subsystem on windows Finishing up the form Sending out the data for a proper POST We need to Port across to use the ReadFile API redirect to the main page, render list New Gig Chance to start something new and exciting Vertical Development As a developer you own the feature from User Story to production. So if it breaks, they pick of the phone and call YOU! Secret hopes of bringing up Elm and slowing making converts at work! It was great to teach for the past year, I mean, that’s what started me on the path for this show!! Picks Elm Europe Elm Conf React Rally Resources Elm s3 Uploads Follow JavaScript to Elm Twitter: @jstoelm Email: hello@jstoelm.com Jesse Tomchak Twitter: @jtomchak

Elm Forms But first a bit about where we stand. Once we get those pieces in Elm, I’d like to take the oppurtunity to push our app in a bit of different direction. I’ve noticed that on a on daily basis, I don’t really open meow notes, I don’t dog food my own side project. Now originally that wasn’t the point of Meow Notes. It’s purpose, if you’ve stuck with us this long bare with me, was to learn Elm really well by actually refactoring an existing project of a pretty good size. That’s Meow Notes. Now as we continue down this path, it’s served it’s functionality very well. We’ve mocked out a pretty successful side project. Complete with HTTPS, service workers, and a backend built entirely in lambda functions on aws. So, what do I use everyday? Well, twitter. Let’s make a twitter clone out of meow notes. mmmmmm, nah. But what if we turn it into a micro pub application? That could be kinda cool. Then even down the road we could add cross posting to twitter from our micro pub app? That sounds pretty cool. So let

Elm With Flags - A simpler way. The idea here is we can instantiate our Elm app anywhere in with our React architecture and pass to it a flag of the Route is should use to determine what view to render. Get the Route passed in to the Elm init as a flag Get the Elm app to pattern match on that route passed it to determine what view to render. Take over the world. Updating Elm Program to take a a flag of our intended route Probably not gonna be Home anymore, but all things, so let’s call it Main.Elm this will communicate that this is the entry point of our Elm app. Starting with this: main : Program Never Model Msg main = Html.program { view = view , init = init , update = update , subscriptions = subscriptions } And Ending up with this: main : Program Flags Model Msg main = Html.programWithFlags { view = view , init = init , update = update , subscriptions = subscriptions } This also means our init

Update to Prod isAuthenticated not updating oh so SOMEONE hardcoded true to the incoming update case for isAuthenticated! So we had only sort of build the JS Interop stuff, we didn’t really see it all the way through! sendData({ tag: "IsAuthenticated", data: this.props.isAuthenticated }); Then just ignoring it. D’oh IncomingData Union Type where UpdateAuth is now Result and String or Bool This is because we need to decode the incoming JSON payload and make sure it is what what we say it is, or we need Result to Err, instead of OK. type IncomingData = NotesLoaded (Result String (List Note)) | UpdateAuth (Result String Bool) onCLick events pushing history without react components ugh, so I have meaningfully avoided this for a while now and I thought I was ramping up to face it head on last week with a look at routing. So, with help from friend of the show, we probably want to handle routing last. Let react router Dom handle it BUT we need to be able to trigger a route change from Elm. So a

Routing Elm SPA’s For some reason, this general goal is called “Single Page Apps” or SPAs in the JavaScript world. It is odd in that the essence is that you want to manage multiple pages intelligently, and maybe “asset management” would have been clearer, but that ship has sailed. The core functionality is the ability to “navigate” to new URLs, changing the address bar of the browser without the browser kicking off a request to your servers. Instead, you manage the changes yourself in Elm. Handling Routing in Elm First and foremost, NO HASHES Will need to be a navigation program, that will handle the initial incoming Route with the app it instantiated. Gonna need some helpful libraries Elm Navigation Install elm-lang/navigation Came out recently with 0.17 release program function from Navigation package is defined as: This sets up our Elm app to get updates when the url or location changes. program : (Location -> msg) -> { init : Location -> (model, Cmd msg) , update :

C Lang JavaScript operating systems everywhere the web everywhere Compile Target Compile Target Null references Undefined Performance Yeah, JS is stupid fast too JavaScript is the new C JavaScript is Dead, long live JavaScript Used to be really straight forward to get started with JS. Open a text editor / browser and write some code. JS ecosystem now has task runners, bundlers, transformers, CommonJS / ES Modules, minify, source maps, package management w/ npm, dev servers, prod performance builds, virtual DOM rendering, V8 performance, I would contest that JS has never been an is “easy” language to master, but an easy platform to be productive in. With the list above, I believe that easability is now gone. Languages that interact with C, but would you want to write your next application in C? C++ Java Golang C# Python Haskell Objective C Languages that interact with JS, but would you want to write your next application in JS? Elm. Elm is a purely functional programming language that c