React Fundamentals - Jakarta JS, Apr 2016

download React Fundamentals - Jakarta JS, Apr 2016

of 39

  • date post

    12-Apr-2017
  • Category

    Technology

  • view

    565
  • download

    0

Embed Size (px)

Transcript of React Fundamentals - Jakarta JS, Apr 2016

  • REACT FUNDAMENTALSJAKARTA JS

  • Simon Sturmer : @sstur_

    CTO / Fouder - KodeFox

  • WHY REACT?

    Part One

  • 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 IS A BUSINESS DECISION, NOT JUST A TECHNOLOGY CHOICE!

  • 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.

  • HOW IS REACT DIFFERENT?

    Part Two

  • 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!

  • SERVER-SIDE RENDERING

  • 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!

  • EVENTS UPDATING VIEW

  • 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?

  • CLIENT-SIDE FULL RE-RENDER

  • EVENTS UPDATING STATE

  • THAT'S EXACTLY HOW REACT WORKS.

  • 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.

  • MORE EXCELLENTTHINGS WILL FOLLOW

    Once you start down this path

  • 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

  • LET'S LOOK ATSOME REACT CODE

  • REACT VERSION OF PREVIOUS EXAMPLE

  • EVENTS JUST UPDATE STATE!

  • but there are s in your JS!

  • IN REALITY IT WILL LOOK MORE LIKE THIS:

  • REACT ELEMENTS

    That stuff is JSX and its 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

  • React leaves it up to you to separate concerns however you like.

  • MOST PEOPLE HAVE:

    Presentational components:

    Purely for layout/styling

    CSS designers can work on these

    Container components:

    Know about data structure and logic

    Dont know anything about layout/styling

  • So what's the price you pay for using React?

  • 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.

  • VASTLY OUTWEIGHS THE COST.

    But what you get in return

  • 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

  • : @sstur_

    https://kodefox.com

    Simon Sturmer

    Thanks!

    https://kodefox.com