Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Confidence in the frontend with Elm

Confidence in the frontend with Elm

This talk was given at GeeCON (http://2016.geecon.org/) in May 2016. The talk was recorded, but the video is not online as of yet.

**I have added relevant notes overlaid on the slides so you can get the all the information by reading the slides.**

During the last few years, more and more logic in web applications has shifted to the frontend. Technologies like AngularJS, React and Redux have made it reasonable to build large apps that run in the users' browsers. However, being a fully dynamic language with no guarantees, JavaScript can easily get unwieldy as the project scope grows. With static typing and an incredibly helpful compiler, Elm can alleviate these problems.Elm is a fun contemporary language designed for building UI applications. It compiles to standard JavaScript. With this talk, you will gain an understanding of developing in Elm feels like in practice. In particular, you will learn why using the language leads to an unprecedented confidence in frontend development.

Ossi Hanhinen

May 12, 2016

More Decks by Ossi Hanhinen

Other Decks in Programming


  1. About me Ossi Hanhinen Works at Futurice Nowadays a frontend

    expert Used to do WordPress and Rails Coded in about 16 languages :)
  2. How I came about Elm? - Had heard about it

    and looked at the website - May last year, had a month between projects, decided to learn FP - Made a space invaders type game in Elm, liked it
  3. The project Biggest news site in Finland Arranging the articles

    on frontpage is editorial (manual) work Editorial tool to manage the content
  4. Resounding success, in use right now (24/7) Repercussions - Elm

    in the real world / How Elm made our work better - #1 on HN -> published on HackerBits Magazine - Training at Wunderdog - I’m now probably the only professional Elm trainer in Finland :D - Elm meetup in Helsinki, Elmsinki
  5. LEAN DEVELOPMENT == CONSTANT REFACTORING Lean development - Actually it’s

    just constant refactoring - You have some features done - You gain new insights - Do you adapt the feature or scrap it and make a new from scratch? - Continuously - Elm made it really easy for us to keep rebuilding the features - And stay confident the whole app won’t simply crash in some situations - -
  6. Server-side HTML + jQuery Hello Kraków Kraków event listener change

    When we were using jQuery - Simple page with input and and updating title - Setup event listener for input - Change the title in place DONE! Super simple!
  7. Server-side HTML + jQuery Hello Kraków Kraków event listener change

    Ajax change But as soon as multiple things are happening at the same time - Instant complexity - Race conditions, overridden changes, etc. - State was in the DOM, which made things very hard to keep track of - But still, the possibilities of AJAX and Single Page Apps were too much to pass by
  8. Rise of the JavaScript MV* frameworks This brought a tidal

    wave of libraries and frameworks - All trying to solve the same problem: How to make building complex apps reasonable
  9. React Just the UI Redux Predictable state Fast-forward a few

    years: - React brought a nice abstraction to these problems - Functional style - Easily composable view components - If you check React’s web page, they state React is “Just the UI” - or the “V” in MVC. So what about the other parts of the puzzle? - Redux is the status quo answer. They call it a “predictable state container” - in short: a single state tree which is updated in a controlled way - How does that work?
  10. Single State Model View map - In Redux, every time

    the app state is changed, the single big blob of state (or Model) is what gets updated - Leads to the fact that each view can be a direct result of the current application state
  11. Single Update Message Update View View Model What does a

    single update look like then? Updates atomic: - World frozen upon action/message -> model updates based on the action/message - > new model -> new view - AKA. “game loop”
  12. Single Update Msg Update User View Model View Sometimes we

    forget the User, but in this graph she fits in nicely - User can see the view and interact with it - Her interaction causes an Action in the app - App produces a new view as output
  13. I thought this talk was supposed to be about Elm!?

    You might be wondering why I haven’t really talked about Elm yet... - Well, what I showed you in the previous slide is in fact called The Elm Architecture. - Redux has taken influence from Elm in its patterns. - Let’s take a look at the differences
  14. React is JavaScript React and Redux are written in JavaScript.

    - “1JS”, no versions, can only grow - Originally for scripting - Later OOP - Later FP flavors -> React - Libs for everything (lodash, Immutable.js, RxJS, …) - “JavaScript is like a chainsaw you have in place of a hand” - Brendan Eich
  15. Elm is Elm - Designed for apps - Versions -

    Latest updates have removed confusing parts - to make the language even easier to learn, and use - Solid practices built in - No way to stray
  16. - Elm feels like it has all the necessary parts

    - Not just a collection of libraries, but a cohesive whole
  17. Functional Programming at its best • Small functions that ◦

    Take parameters ◦ Return a response • Super easy to test • Nice to refactor
  18. Is your function pure? - A pure function has no

    effect on the world outside it - It doesn’t have a state of its own - nor does it need to access any state outside it How do you know a function is pure in JS?
  19. Is your function pure? Trick question, you don’t really. -

    First one was pure - Second… not so pure (Real world: e.g. google analytics) - Third subtly not pure: mutates the original user object, maybe unintentionally
  20. In Elm all functions are pure - In Elm, all

    functions are pure - You can rely on the fact - (To have an effect on the outside world, you need to return the commands to be performed, from the function.)
  21. Currying and Partial Application - One really nice part of

    functional programming is something called “currying” - Or rather, the nice part is using partial application. - Strange names, but a simple concept.
  22. Functional Reactive Programming FRP: how to make your functional web

    app actually do something Functional - Small fns that take parameters and return a response and don’t do anything else Reactive - We don’t set anyone’s state, we subscribe to changes and can react - With Elm, it’s not necessary to dive head-first into the wondrous world of signals - We can do quite a lot with just simple functions
  23. Newest version of Elm, 0.17 - Just this week (on

    Tuesday) - No signals anymore - one less things to learn - Replaced by a simpler way of declaring subscriptions and commands
  24. elm Strong static types That don’t get in the way

    JavaScript - Super dynamic typing - Great for hacking - Awful for big projects TypeScript / Flow - Static types for JS - Require quite a bit of setup Elm - Strong static types - Awesome for big projects - Type inference - Write code - compiler gets the types - Write type annotations - compiler checks against them - Also, state of the art error messages
  25. Elm has guarantees - Not another “JS in disguise” language

    (own semantics, no need to know JS) - No null, no undefined - In short, Elm doesn’t let you do something that might fail without handling the failure case.
  26. zero runtime exceptions - I think this merits a slide

    every time - With Elm, you get zero runtime exceptions in production. - Really.
  27. By Bewareircd - Own work, Public Domain, https://commons.wikimedia.org/w/index.php? curid=8497059 Self-repeating

    architecture - Standard Elm Architecture components are always the same - Assume we have a message component - Can be used as the top level / root component - Can be included in a message list component just as well, - which can be included in a messaging app that also has a user choosing component…. -> All components can be developed in isolation! - This is part of the language design
  28. Tools elm make - Build Elm and catch errors ahead

    of time elm package - Package manager that enforces SemVer elm reactor - Development server with automatic rebuilding elm format - Automatic code beautification
  29. “Go and learn Elm. Seriously. It is the simplest language

    I have ever tried, and the team has put a crazy lot of effort into making the developer experience as nice as possible.” @ohanhi