On Simplicity

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

Transcript

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

   View Slide

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

   View Slide

3. COMPLEXITY
   • Things to know by heart - language, framework
   • Things to remember - project
   • Things to handle when _______
   

   View Slide

4. SIMPLICITY
   • Less cognitive load
   • Less things to go wrong
   • Focus
   

   View Slide

5. CODE QUALITY
   • Code style
   • Modularity, separation of concerns
   • Tests
   • Code reviews
   • Quick hacks
   

   View Slide

6. WEB FRONTEND
   

   View Slide

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

   View Slide

8. –Brendan Eich at O'Reilly Fluent 2014
   JavaScript is like a chainsaw
   you have in place of a hand
   

   View Slide

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.
   

   View Slide

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…
    

    View Slide

11. → Transpile to ES5
    

    View Slide

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
    

    View Slide

13. VISIONS OF THE FUTURE
    

    View Slide

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”
    

    View Slide

15. http://www.sitepoint.com/future-programming-webassembly-life-after-javascript/
    –Eric Elliot
    

    View Slide

16. ELM
    

    View Slide

17. • Immutability
    • Static Types & Records
    • Functional
    • Reactive - Signals
    • Minimal syntax
    • Compiles to ES5
    

    View Slide

18. COMPILATION ERRORS
    http://elm-lang.org/blog/compiler-errors-for-humans
    

    View Slide

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!
    

    View Slide

20. RESOURCES
    Richard Feldman - Shipping a Production Web App in Elm
    Chris Wilson - Elm for the Frontend, Right Now
    elm-lang.org - /examples
    

    View Slide

21. –André Medeiros
    Ignore the popularity
    of a solution.
    Stay close to the Science.
    

    View Slide

22. Thoughts?
    

    View Slide