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.

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