Downloaded 20 times
![Separation of Concerns The value of separation of concerns is simplifying development and maintenance of [components]. When concerns are well-separated, individual sections can be reused, as well as developed and updated independently. “ ”](https://image.slidesharecdn.com/frommvctoreact-150328094305-conversion-gate01/75/From-MVC-to-React-38-2048.jpg)
Uploaded byEric Clemmons
From MVC to React
The document outlines the transition from MVC to React, detailing the history and evolution of the author's web development process since 2010. It emphasizes the benefits of React, such as rapid development, separation of concerns, and community support, while introducing concepts like isomorphic rendering and Flux architecture. Additionally, it provides a high-level overview of how modern JavaScript applications function, particularly in the context of user interactions and data management.
From MVC to React
- 1. From MVC toReact @ericclemmons
- 2. History How this allstarted 2010 Joined CMN.com 2011 Grew team & developed prototype. 2011 Prototype reached peak success.
- 3. Explosive growth &optimization. 2012 Threw away the prototype. 2015
- 4. A/B/x Testing Responsive UI Mobilevs. Desktop assets Performance Biggest impact on revenue.
- 5. Dismantling the Monolith FromPHP to Node Profit?Business LogicAdmin API UI
- 6.
- 7. Requirements 01 02 03 04 Rendering on theserver is just smart. Isomorphic Conceptually easier to understand how logic works. Simple Technology moves fast enough to justify replacing parts within a year. Modular Server responses, rendering, validation. Fast
- 8. The Solution As of2015 React Facebook
- 9. Benefits That match ourrequirements Active F/OSS developers supporting their tools and React in mediums such as Slack pushing Javascript forward. Community Companies with much larger problem sets are leverage React. Adoption Utilizes a Virtual DOM to only render what has changed. Fast Just the View layer, the rest of the architecture is up to you. Simple Server-side & client-side rendering out of the box. Isomorphic
- 10. What does itlook like? Simple Example
- 12. Allows the authorto describe what the UI consists of (e.g. TableGrid, UserProfile, CodeEditor, etc.) rather than how. Components
- 13. Usually shown asHTML-like attributes, these are external values explicitly passed down to components by their parent. Properties
- 14. Internal properties thatchanges how a component is rendered (e.g. "on" vs. "off"). State
- 15. Advanced, scarcely documentedfeature that allows deeply-nested components to opt-in to a shared state for data-sharing and communication. Context
- 16. From MVC... What weknow... Model Domain logic View data Constraints Validation ? Controller Handles request Fetches data Performs logic Renders view Sends response ? View Fast Simple Isomorphic One-way data flow React
- 17. How does ourcurrent app work? High-level overview User wants to adjust what's in their shopping cart. Cart Page A request is made to our server. Request
- 18. The router identifieswhich route(s) can respond to the request. Router Entry-point receives the request. Front Dispatcher The controller fetches the data it designates useful for the view. Controller
- 19. The user interactswith the page (e.g. a form). Interaction Javascript updates the view as the user interacts to save round-trips to the server. Progressive Enhancement The view uses the normalized data from the Controller to present it in a useful manner for the user. View
- 20. Data is sentto controller, validated, and prepared for storage. HTTP POST User finalizes edits & submits the form. Submit
- 21.
- 22. How can ourJavascript app work? High-level overview User wants to adjust what's in their shopping cart. Cart Page Node Request
- 23. Server Router +React Router Router Hapi, Express, Koa, etc. Front Dispatcher Component that handles primarily route layout. Handler
- 24. User triggers actionsthat update props & state. Interaction React re-renders the view accordingly. Progressive Enhancement Deeply-nested components that render the view. Components
- 25. Data is validatedand sent to an API end- point for storage. AJAX POST User finalizes edits & submits the form. Submit
- 26.
- 27. Server Hapi + React+ ES6
- 28. Client & Server Hapi+ React + Browserify + ES6
- 29.
- 30.
- 31. Events Untangling the complexitythat is Progressive Enhancement.
- 32. The Solution ...that noone understood. Flux Facebook
- 33. The Solution ...that makessense. Flux Facebook
- 34.
- 35.
- 36.
- 37.
- 38. Separation of Concerns Thevalue of separation of concerns is simplifying development and maintenance of [components]. When concerns are well-separated, individual sections can be reused, as well as developed and updated independently. “ ”
- 39. Complex Container Separation ofConcerns
- 40. Simple Container Separation ofConcerns Releasing soon: ericclemmons/react-resolver
- 41. Wrapping Up Deliverables Isomorphic Development RapidDevelopment Clearer Code Separation of Concerns Performance Thriving Ecosystem
- 42. Learning http://facebook.github.io/react/ http://conf.reactjs.com/schedule.html https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html https://github.com/ericclemmons/mvc-to-react Getting Started https://github.com/RickWong/react-isomorphic-starterkit https://github.com/rackt/react-router/ Other Environments https://github.com/reactjs/react-rails https://github.com/reactjs/React.NET https://github.com/reactjs/react-python https://github.com/reactjs/react-php-v8js FluxImplementations http://goatslacker.github.io/alt/ https://github.com/acdlite/flummox/ https://facebook.github.io/flux/ http://fluxible.io/ http://martyjs.org/ https://github.com/spoike/refluxjs/ Community http://reactiflux.com/ https://reactiflux.herokuapp.com/ https://join-reactiflux.herokuapp.com/
- 44.