react fundamentals - jakarta js, apr 2016
TRANSCRIPT
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.
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.
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.
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.
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.
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.
SHARED MUTABLE STATE IS THE ROOT OF ALL EVIL
Pete Hunt, React.js Conf 2015
REACT + REDUX GIVES YOU IMMUTABLE STATE
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!
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!
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.
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?
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.
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
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
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
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
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.
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