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

Entering the new era of Front-end development with ReactJS

Rob
March 03, 2016

Entering the new era of Front-end development with ReactJS

Video recording: https://www.youtube.com/watch?v=z9HYmlx6JB8

ReactJS is not just yet another framework to be forgotten after few years, it shifts the concepts of modern front-end development giving us the scalability and control we always strived about.

Robert will guide you through key concepts of ReactJS based applications covering all aspects of full stack development and maintenance. This includes component development approach, deep integrated into ReactJS architecture and React Native, which allows to reuse most of UI code, still using the power of Native UI.

Rob

March 03, 2016
Tweet

More Decks by Rob

Other Decks in Technology

Transcript

  1. ENTERING THE NEW ERA
    OF FRONT-END DEVELOPMENT
    WITH REACTJS
    Robert Haritonov
    @operatino & rhr.me

    View Slide

  2. Front-end Development Lead
    Liberty Global
    Robert Haritonov @operatino

    View Slide

  3. View Slide

  4. View Slide

  5. V
    for the View in traditional MVC
    and for Virtual DOM

    View Slide

  6. React provides a declarative library
    that keeps the DOM in sync with
    your data.

    View Slide

  7. but...

    View Slide

  8. @operatino
    It's all about the ecosystem
    • Supports server and cross-platform rendering
    • React brings the essence of the functional
    programming to UI development
    • Leverages composition
    • Promotes unidirectional data flow

    View Slide

  9. View Slide

  10. @operatino
    “Move fast & break things.
    But fix it before it goes to prod.”
    Christopher Chedeau,
    Talk: Why does React scale?

    View Slide

  11. @operatino
    Why Facebook built React
    • Predictable code execution environment
    • Individual components holds the state
    • Immutable component properties
    • Property type checking
    • Encapsulation and fast debugging

    View Slide

  12. @operatino
    React makes rendering of UI
    as simple as defining a function.

    View Slide

  13. View Slide

  14. View Slide

  15. @operatino

    View Slide

  16. @operatino
    Learn programming not tools.

    View Slide

  17. @operatino
    Why should you care?

    View Slide

  18. @operatino
    And many more...

    View Slide

  19. @operatino
    Because of these benefits
    • Integration flexibility
    • Ease of maintenance
    • Powerful component libraries
    • Isomorphic rendering

    View Slide

  20. @operatino
    Before we jump in...

    View Slide

  21. @operatino

    View Slide

  22. View Slide

  23. View Slide

  24. Stateless Component

    View Slide

  25. View Slide

  26. View Slide

  27. @operatino
    1816 components 2288 components
    http://react-components.com
    http://ngmodules.org

    View Slide

  28. @operatino

    View Slide

  29. @operatino
    Polymer from Google

    View Slide

  30. @operatino
    gl-react

    View Slide

  31. @operatino
    react-canvas

    View Slide

  32. @operatino
    Server
    rendering
    Single page 

    JS app
    First request
    Isomorphic Rendering

    View Slide

  33. As Easy As Calling a Function

    View Slide

  34. @operatino
    Benefits of Isomorphic Rendering
    • Performance
    • Common codebase between FE and BE
    • Good SEO
    • Progressive enhancement

    View Slide

  35. @operatino
    Gluing All Together
    Flux ReactiveX Backbone.JS

    View Slide

  36. @operatino
    Flux

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. @operatino
    React Native

    View Slide

  42. @operatino
    “Learn once, write anywhere..”
    Tom Occhino,
    React Native: Bringing modern web techniques to mobile

    View Slide

  43. @operatino
    JavaScript Everywhere

    View Slide

  44. @operatino

    View Slide

  45. @operatino
    React Native
    • Uses platform native UI
    • Execute JS in native app's separate thread
    • Allows re-using most of code from web/other platforms
    • Instant releases, skipping App Store reviews
    • Great developer experience

    View Slide

  46. @operatino
    Tools

    View Slide

  47. Native Hot Reload

    View Slide

  48. Native Playground

    View Slide

  49. Redux Time Travel

    View Slide

  50. Living Style Guide

    View Slide

  51. @operatino
    Starting You React Path
    • Official React tutorials
    • https://github.com/petehunt/react-howto
    • https://camjackson.net/post/9-things-every-reactjs-
    beginner-should-know

    View Slide

  52. Robert Haritonov
    @operatino & rhr.me
    Thank you!

    View Slide