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

On Simplicity

On Simplicity

My personal reasoning about building the modern Web app frontend. Featuring functional reactive programming (FRP) and Elm.


Ossi Hanhinen

July 03, 2015

More Decks by Ossi Hanhinen

Other Decks in Programming


  1. ON SIMPLICITY Futurice WWWeeklies July 3, 2015 @ohanhi

  2. –Richard Feldman at MLOC.js 2015 FAMILIARITY GROWS OVER TIME ...but

    complexity is forever
  3. COMPLEXITY • Things to know by heart - language, framework

    • Things to remember - project • Things to handle when _______
  4. SIMPLICITY • Less cognitive load • Less things to go

    wrong • Focus
  5. CODE QUALITY • Code style • Modularity, separation of concerns

    • Tests • Code reviews • Quick hacks

  7. https://www.youtube.com/watch?v=aZqhRICne_M

  8. –Brendan Eich at O'Reilly Fluent 2014 JavaScript is like a

    chainsaw you have in place of a hand
  9. –Chris Wilson, http://bendyworks.com/ Mutability is a kind of Chekhov’s gun,

    it will go off by the third act simply because it is there.
  10. WHAT WE DO • Forbid language features - ESLint etc.

    • Agree on code style - JSCS etc. • Add functional and reactive abstractions - lodash, RxJS… • Switch out the language - Coffee, Clojure, JSX… • Add static types - AtScript, TypeScript, Flow… • Add immutable structures - Immutable.js, mori…
  11. → Transpile to ES5

  12. FUNCTIONAL REACTIVE PROGRAMMING • Use immutable structures and global state

    • Describe what to do in pure functions • Subscribe to streams of input • Handle input safely

  14. –Jeremy Ashkenas, “Rise of the Transpilers” “Someone is going to

    unify these three different syntaxes and write a language that just addresses the web-platform directly and it’s going to be insanely popular”
  15. http://www.sitepoint.com/future-programming-webassembly-life-after-javascript/ –Eric Elliot

  16. ELM

  17. • Immutability • Static Types & Records • Functional •

    Reactive - Signals • Minimal syntax • Compiles to ES5
  18. COMPILATION ERRORS http://elm-lang.org/blog/compiler-errors-for-humans

  19. –Richard Feldman at MLOC.js I keep having this experience where

    I make a major breaking refactor, recompile, fix all the compiler errors...and when I bring up Dreamwriter, everything still works! No regressions! This experience makes refactoring SO much fun!
  20. RESOURCES Richard Feldman - Shipping a Production Web App in

    Elm Chris Wilson - Elm for the Frontend, Right Now elm-lang.org - /examples
  21. –André Medeiros Ignore the popularity of a solution. Stay close

    to the Science.
  22. Thoughts?