This document discusses React fundamentals and why React is a good choice for building user interfaces. It explains that React uses a component-based approach where each component is a pure function of state. This makes the UI easy to reason about and improves testability, performance, and code reuse. It also notes that React uses immutable data structures and re-renders the entire UI when state changes, similar to how server-side rendering works. This avoids issues with directly manipulating the DOM and helps developers build more reliable software faster.

1. REACT FUNDAMENTALS
JAKARTA JS

2. Simon Sturmer
: @sstur_
CTO / Fouder - KodeFox

3. WHY REACT?
Part One

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!

14. SERVER-SIDE RENDERING

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!

16. EVENTS UPDATING VIEW

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?

19. CLIENT-SIDE FULL RE-RENDER

21. EVENTS UPDATING STATE

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

39. : @sstur_
https://kodefox.com
Simon Sturmer
Thanks!