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
2. Front-end Development Lead Liberty Global Robert Haritonov @operatino
5. V for the View in traditional MVC and for Virtual DOM
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
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.
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
24. Stateless Component
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
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!