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

React Fundamentals - Jakarta JS, Apr 2016

React Fundamentals - Jakarta JS, Apr 2016

This is an intro to React for those of you thinking about starting a front-end project or mobile app, or thinking about rewriting an existing app.

Simon Sturmer

April 05, 2016
Tweet

More Decks by Simon Sturmer

Other Decks in Technology

Transcript

  1. WHAT IS REACT? ▸ So you've heard the hype, but

    what is React? ▸ React is an opinionated View library. ▸ It is a fundamentally different way to build UIs. ▸ It leads to thinking in terms of pure functions and immutability and other good practices.
  2. WHY REACT? ▸ Why are so many top companies choosing

    React? ▸ Netflix, Yahoo, Apple, AirBnB, WhatsApp, CloudFlare, Dropbox, Instagram, Twitter, Uber, WordPress even SaleStock Indonesia ▸ Performance, Testability, Code Reuse ▸ Developer Experience.
  3. WHY REACT? ▸ How is React different from Angular/Ember/etc? ▸

    Everything is a component. ▸ A component is a pure function of application state. ▸ Components can be reused, composed to create other components, isolated for testing. ▸ UI is easy to reason about as state changes over time.
  4. REACT AS A BUSINESS DECISION ▸ Fewer, more versatile software

    engineers! ▸ Same dev team! Web, iOS, Android, Desktop ▸ Improved Testability, Reliability ▸ Performant by Default ▸ Real Code Reuse ▸ Velocity: shorten the edit-reload cycle; less time debugging ▸ Future proof: As your software evolves, replace individual components.
  5. WHY BUSINESSES STILL CHOOSE ANGULAR/EMBER? ▸ New tech can be

    overwhelming. Where to start? ▸ How to train your dev team? ▸ Some have large, legacy code-bases with a lot of resources invested.
  6. WHAT PROBLEM DOES REACT TRY TO SOLVE? ▸ App state

    changing over time is hard to reason about. ▸ UI components get out of sync with each other and it's hard to debug. ▸ When changes happen, we have to reach deep into our view and mutate objects.
  7. SHARED MUTABLE STATE IS THE ROOT OF ALL EVIL Pete

    Hunt, React.js Conf 2015 REACT + REDUX GIVES YOU IMMUTABLE STATE
  8. REMEMBER THE OLD DAYS? ▸ Server-side Rendering ▸ Generating HTML

    views was easy! ▸ Why? … because we had the full application state at one moment in time (a snapshot) ▸ All we have to do is query stuff and generate HTML from that stuff. ▸ When an action happens, re-generate the entire view!
  9. SPRINKLING JS ON TOP ▸ Web apps slowly started doing

    more client-side ▸ DOM Manipulation: jQuery ▸ Client-side templating: mustache, handlebars ▸ Must wire-up events every time you generate new DOM ▸ Still need to manipulate the DOM!
  10. THE PROBLEM: ▸ There's way too much complexity around keeping

    your app in a consistent state. ▸ It's almost impossible to reason about. ▸ The bookkeeping makes for a poor developer experience.
  11. THE SOLUTION: ▸ We never had that problem with server-side

    rendering! ▸ … because we just re-generated the entire view when a piece of state changed (url change). ▸ Can we do the same thing client-side?
  12. VIEW IS A FUNCTION OF STATE: ▸ This means you

    can reason about your view just like you used to do with server-generated views. ▸ Your view is a deterministic function of your state.
 (the same state will always produce the same view) ▸ Even if you serialize that state, save it to disk and restore it next week.
  13. YOU START DISCOVERING BONUS STUFF LIKE: ▸ Trivial undo/redo ▸

    Easy hot-reloading during development ▸ Atomic/Optimistic updates ▸ Imagine if an HTTP request fails, you just load a previously stable state ▸ Time-travel debugging ▸ Imagine stepping back in time through your app state
  14. REACT ELEMENTS ▸ That stuff is JSX and it’s really

    incredible ▸ It looks weird at first, but it is just [optional] sugar. ▸ JSX: ▸ Concise Syntax ▸ Static code analysis ▸ Directly compiles to JS
  15. COMPOSITION OF COMPONENTS ▸ You build view components from other

    view components ▸ This is extremely powerful. ▸ Benefits: ▸ Code Reuse ▸ Separation of Concerns ▸ Clean layers of abstraction
  16. MOST PEOPLE HAVE: ▸ Presentational components: ▸ Purely for layout/styling

    ▸ CSS designers can work on these ▸ Container components: ▸ Know about data structure and logic ▸ Don’t know anything about layout/styling
  17. REACT DRAWBACKS: ▸ Some setup complexity. Choices can be overwhelming.

    ▸ A moderate learning curve ▸ React will change the way you think about your UI. This takes some getting used to. ▸ Rapidly evolving ecosystem.
  18. DEVELOPER EXPERIENCE ▸ Move fast: shorten the edit-reload cycle; spend

    less time debugging ▸ Write testable code! ▸ Iterate with confidence and build more reliable software. ▸ Learn once, write anywhere ▸ Web, iOS, Android, Mac/Windows, even console apps