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

Entering the new era of Front-end development with ReactJS

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.


Robert Haritonov

March 03, 2016

More Decks by Robert Haritonov

Other Decks in Technology



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

  3. None
  4. None
  5. V for the View in traditional MVC and for Virtual

  6. React provides a declarative library that keeps the DOM in

    sync with your data.
  7. but...

  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
  9. None
  10. @operatino “Move fast & break things. But fix it before

    it goes to prod.” Christopher Chedeau, Talk: Why does React scale?
  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
  12. @operatino React makes rendering of UI as simple as defining

    a function.
  13. None
  14. None
  15. @operatino

  16. @operatino Learn programming not tools.

  17. @operatino Why should you care?

  18. @operatino And many more...

  19. @operatino Because of these benefits • Integration flexibility • Ease

    of maintenance • Powerful component libraries • Isomorphic rendering
  20. @operatino Before we jump in...

  21. @operatino

  22. None
  23. None
  24. Stateless Component

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

  28. @operatino

  29. @operatino Polymer from Google

  30. @operatino gl-react

  31. @operatino react-canvas

  32. @operatino Server rendering Single page 
 JS app First request

    Isomorphic Rendering
  33. As Easy As Calling a Function

  34. @operatino Benefits of Isomorphic Rendering • Performance • Common codebase

    between FE and BE • Good SEO • Progressive enhancement
  35. @operatino Gluing All Together Flux ReactiveX Backbone.JS

  36. @operatino Flux

  37. None
  38. None
  39. None
  40. None
  41. @operatino React Native

  42. @operatino “Learn once, write anywhere..” Tom Occhino, React Native: Bringing

    modern web techniques to mobile
  43. @operatino JavaScript Everywhere

  44. @operatino

  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
  46. @operatino Tools

  47. Native Hot Reload

  48. Native Playground

  49. Redux Time Travel

  50. Living Style Guide

  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
  52. Robert Haritonov @operatino & rhr.me Thank you!