$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Ossi Hanhinen

Other Decks in Programming

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