25: Now With More Elm

Now we have Elm working inside of our react app, its time to pick a spot, feature, or pain point and get to refactoring with Elm. There are several ways to tackle this, we’ll cover a few of the different ones, and what ultimately worked for us in meow notes.

 

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 --user-data-dir=/tmp/foo --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://localhost:3000 And plenty others “If you need to test your offline-first service worker locally, build the application (using npm run build) and run a simple http server from your build directory. After running the build script, create-react-app will give instructions for one way to test your production build locally and the deployment instructions have instructions for using other methods. Be sure to always use an incognito window to avoid complications with your browser cache.”Offline First
Or, after reading a bit of the docs from Create React App, CRA service worker included by default the answer was, it is not enabled by default for development. D’OH! Making a progressive web app Run time caching: If you would like to use a runtime caching strategy for those requests, you can eject and then configure the runtimeCaching option in the SWPrecacheWebpackPlugin section of webpack.config.prod.js. Adding More Elm So after watching Life of a file, it dawned on me, that as soon as I see file of 200 lines or so, I FREAK out. And it was really nice to have Evan explain the sort of core reasoning for that. “As LOC increases, the probability of sneaky mutation approaches one.” Therefore: PREFER SHORTER FILES “Refactoring is very risky. A full rewrite can be cheaper.” Therefore: GET ARCHITECTURE RIGHT FROM THE START

Richard’s 2016 talk

React in 2013 -> Lots of React Elm in React -> slowly grew piece by piece Start with something small and get it to production! Start with the boiler plate Create Elm App. And the idea, is that, there isn’t anything in the Home component that I couldn’t do in Elm. With the exception of the api call, bc awsSigV4Client that is signing all the requests from our API. So that users can temporarily upload to our s3 bucket by verification of the identity of the requester. renderElm() { return ; } Start with modeling your data. OK I’ve got an article that has content, createAt, noteId. And model will be a list of type Note. So we make an type alias to refer to our note object that we get back from the API type alias Note = { content : String , createdAt : Date , noteId : Int } type alias Model = List Note init : ( Model, Cmd Msg ) init = ( [], Cmd.none ) Calling update on init wanting to make a call for the list of notes when elm app is started Commands!!!! //init setup for ports setupPorts(ports) { ports.fetchNotes.subscribe(() => { invokeApig({ path: "/notes", queryParams: { limit: 5 } }) .then(results => ports.notesLoaded.send(results)) .catch(e => console.log(e)); }); } renderElm() { return ; } Picks Elm and the outer world Kent C. Dodds New Context API Resources ReactiveConf 2016 - Richard Feldman: Elm and React in production Life as a file State of Elm Elm Wrapper Node Elm Compiler Service Worker Elm Infinite List View Follow JavaScript to Elm Twitter: @jstoelm
Email: [email protected]
Jesse Tomchak Twitter: @jtomchak