![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](https://image.slidesharecdn.com/jakartajs-react-fundamentals-160406025502/85/React-Fundamentals-Jakarta-JS-Apr-2016-31-320.jpg)
React Fundamentals - Jakarta JS, Apr 2016
- 2. Simon Sturmer : @sstur_ CTO / Fouder - KodeFox
- 4. 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.
- 5. 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.
- 6. 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.
- 7. REACT IS A BUSINESS DECISION, NOT JUST A TECHNOLOGY CHOICE!
- 8. 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.
- 9. 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.
- 10. HOW IS REACT DIFFERENT? Part Two
- 11. 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.
- 12. SHARED MUTABLE STATE IS THE ROOT OF ALL EVIL Pete Hunt, React.js Conf 2015 REACT + REDUX GIVES YOU IMMUTABLE STATE
- 13. 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!
- 15. 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!
- 17. 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.
- 18. 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?
- 22. THAT'S EXACTLY HOW REACT WORKS.
- 23. 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.
- 24. MORE EXCELLENT THINGS WILL FOLLOW Once you start down this path…
- 25. 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
- 26. LET'S LOOK AT SOME REACT CODE…
- 27. REACT VERSION OF PREVIOUS EXAMPLE
- 28. EVENTS JUST UPDATE STATE!
- 29. …but there are <div>s in your JS!
- 30. IN REALITY IT WILL LOOK MORE LIKE THIS:
- 31. 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
- 32. 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
- 33. React leaves it up to you to separate concerns however you like.
- 34. 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
- 35. So what's the price you pay for using React?
- 36. 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.
- 37. VASTLY OUTWEIGHS THE COST. But what you get in return…
- 38. 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