Download as PDF, PPTX
![Content API { "kind": ["image", "diagram"], "imageUrl": “http://example.com/diagram.png" "caption": “Super Cool Diagram" }](https://image.slidesharecdn.com/content-driven-apps-with-react-20161017-161018075032/75/Content-Driven-Apps-with-React-49-2048.jpg)
![Content API { "kind": [“image”, “diagram”, “interactive”], “dataUrl”: “https://example.com/data/diagram.json”, "imageUrl": “https://example.com/diagram.png" "caption": “Super Cool Diagram" }](https://image.slidesharecdn.com/content-driven-apps-with-react-20161017-161018075032/75/Content-Driven-Apps-with-React-51-2048.jpg)
![Notes Content API New sub-type ‘interactive’ Data URL for loading the data for the diagram But the component is also an [‘image’, ‘diagram’] with ‘imageUrl’ and ‘caption’ If a client does not support ‘interactive’ yet, the component can also just be rendered as an image/diagram](https://image.slidesharecdn.com/content-driven-apps-with-react-20161017-161018075032/75/Content-Driven-Apps-with-React-52-2048.jpg)
Uploaded byNetcetera
Content-Driven Apps with React
The document discusses the architecture and development of content-driven mobile applications using React, highlighting the transition from a hybrid app based on Cordova and Angular to a more performant React-based solution. It outlines the key concepts of React, Redux, and immutable data, emphasizing how these technologies enhance user experience and app efficiency while allowing for code reusability and customization. Additionally, it introduces 'Girders Elements,' a framework derived from their experiences, which is still under development and aims to facilitate further app customization.
Content-Driven Apps with React
- 1. Content-Driven Apps withReact Corsin Decurtins, Netcetera 2016-10-17 /Bern BärnerJS
- 2. Notes Content-Driven Apps withReact This talk is a story about a family of projects or apps Actually not just individual apps, but app platforms Same team, same technology (roughly) Multiple projects, multiple apps, multiple customers But the same kind of app or actually app platform Mobile app, heavily content driven Customers are publishers, users are readers It all started with a proof-of-concept…
- 4. Notes Proof of Concept Customerhad a hybrid mobile app, Cordova and Angular (1) It was too slow for them, which resulted in a bad UX PoC done with React to see if we can improve the performance In particular the performance of the home page / start screen PoC showed, that we can Goal was a 50% improvement, he had up to 80% improvement This talk is about the app architecture that started with this PoC But it will be about anything but performance
- 5.
- 6. Notes Disclaimers I’m just theperson giving the talk; other people did the actual work If something is wrong or does not make sense, it’s probably me who messed it up I’m familiar with the architecture, design and technologies If you have very detailed questions about the implementation, I will refer you to my colleagues
- 7. Ognen Ivanovski, Netcetera PrincipalArchitect Andon Sikavica, Netcetera Senior Software Engineer
- 8. Notes Who are you? Whois already familiar with… … React … React Native … Redux … Immutable Data, ImmutableJS … Pure Functions, Functional Programming
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. Notes Web-Based Hybrid MobileApps Mobile apps for smartphones and tablets Hybrid, i.e. one code base for all the platforms Based on web technologies, i.e. HTML, Javascript, CSS and JSON Based on web tooling (debuggers, CSS, NPM, gulp, ECMAScript, …) Cordova is the most common runtime platform for creating packaged apps that can be delivered to the app store
- 17.
- 18. Notes Web-Based Hybrid MobileApps Web based can be interpreted loosely Instead of HTML, other markup is possible, including markup for native components Also not restricted to mobile apps, you can build other apps as well Not even restricted to apps, can be used for “websites”
- 19.
- 20. Notes Content-Driven Apps Mobile appsthat are mostly used to consume and browse through content News apps for example Get content from a server Content from the server determines the screens, the interaction and the navigation The browser is probably the ultimate example
- 21. Notes Content-Driven Apps We startedout with news apps for publishers But there are a lot of other examples
- 22.
- 23.
- 24. Notes Architecture Client App, JS,packaged with Cordova Libraries, Widgets, Generic Platform Code These are part of the platform and the same for all the apps of the platform App-specific configuration and skinning Content is retrieved from the server-side through an API Abstracts various backend systems such as the CMS, DAM, … API might have a server-side cache
- 25. Notes Challenges App Platform vs.just an app Reuse of code, platform, configuration, customising, skinning API Evolution Apps are deployed, no instant updates Performance, User Experience (UX) Time-To-Market and Price
- 26.
- 27.
- 29. Notes React Components Tree ofReact Components JS objects, can be as simple as one function Every component has a render() function Can be static (children are hard-coded in the parent) or dynamic (children are added based on data of the parent- components)
- 31. Notes State Every React componentcan have an inner state State is optional State must only be manipulated through an defined interface Gives React a chance to know when the state has changed and the component needs to be re-rendered
- 33. Notes Attributes In addition tothe internal state, React components can also receive data from parent components through attributes Can be used for rendering Can be used for initialising state
- 34. const CommentForm =React.createClass({ getInitialState: () => { return {author: '', text: ''}; }, handleAuthorChange: (e) => { this.setState({author: e.target.value}); }, handleTextChange: (e) => { this.setState({text: e.target.value}); }, handleSubmit: (e) => { e.preventDefault(); // do something }, ... });
- 35. const CommentForm =React.createClass({ ... render: function() { return ( <form className="commentForm" onSubmit={this.handleSubmit}> <input type=“text" placeholder="Your name" value={this.state.author} onChange={this.handleAuthorChange} /> <input type=“text" placeholder="Say something..." value={this.state.text} onChange={this.handleTextChange} /> <input type="submit" value="Post" /> </form> ); } });
- 36. React Components VirtualDOM DOM
- 37. Notes React Rendering React Componentshave a render() function that produces HTML Actually it produces a tree of objects that correspond to HTML The React Components are rendered into a Virtual DOM first The Virtual DOM is then rendered into the actual DOM
- 38. Notes React Rendering Pure Functionsfor the transformations (aka rendering) Events flow in reverse to the transformation flow React Optimisations Propagate diffs rather than new trees Lots and lots of checks for changes for trees and subtrees Modify data (state or attributes) only through well-defined interfaces
- 39.
- 40. React Components VirtualDOM DOM
- 41. Notes Immutable Data Data cannotbe changed Every change results in a new copy of a data structure Optimisation: Data structure can contain references to data of other data structures (since they can never change) Equality check with immutable data becomes very efficient Check if the reference is the same React change check (shouldComponentUpdate) can be implemented very efficiently
- 42.
- 43. Dan Abramov Hot Reloadingwith Time Travel https://youtu.be/xsSnOQynTHs
- 44.
- 45. const newsReducer =(state = {}, action) => { if (action.type === ‘NEWS_UPDATE’) { return Object.assign( {}, state, {stories: action.stories} ); } return state; };
- 46. Notes Redux Application state consistsof one state object React components do not have a state anymore Application state is passed into React as an attribute Reducers handle all the events and transfer the app from one state into another Creation of the React Component tree is a pure function Rendering of the React Component tree is a pure function Reducers are pure functions
- 47.
- 48. Notes Loading Content from theServer (or from a local cache)
- 49. Content API { "kind": ["image","diagram"], "imageUrl": “http://example.com/diagram.png" "caption": “Super Cool Diagram" }
- 50. Notes Content API Objects inthe content tree are called elements Kind describes the (hierarchical) type of an element Additional type-specific attributes are part of the element Above example is the element description for an image Can for example be a nice diagram Customer wants to add support for an interactive diagram (zoom and pan, play around with values, …) Create a new element, support on the CMS and in the app Create the new element as an extension/refinement of the old one
- 51. Content API { "kind": [“image”,“diagram”, “interactive”], “dataUrl”: “https://example.com/data/diagram.json”, "imageUrl": “https://example.com/diagram.png" "caption": “Super Cool Diagram" }
- 52. Notes Content API New sub-type‘interactive’ Data URL for loading the data for the diagram But the component is also an [‘image’, ‘diagram’] with ‘imageUrl’ and ‘caption’ If a client does not support ‘interactive’ yet, the component can also just be rendered as an image/diagram
- 53.
- 54. Notes Loading Content (Simplified) Reducertriggers a request for loading content Technically, this is a side-effect and the reducer is not a pure function anymore Side-Effect is on an external system, asynchronous handling When the data arrives, that triggers a new event for the reducers Data passes through a series of transformers (“pure” functions) that transform the received data into data that can be incorporated into the application state … as well as side-effect events for loading additional data
- 55. Notes React / Redux/ Immutable Pure functions everywhere Logically, everything is immutable and pure functions Physically, React makes optimisations
- 56. Notes Interesting Properties Serialisable applicationstate Testing Time-Machine Performance Code Quality Code Reuse
- 57.
- 58.
- 59. Notes Web Applications Nothing mentionedabove is specific to mobile apps You can also use the architecture for “normal” web applications Desktop web applications, mobile apps, responsive apps, …
- 60.
- 61. React React DOM ReactNative
- 62. Notes React Native Relatively recentextension of the React Framework Everything remains the same, React Components and if you use it Redux, … Instead of rendering HTML objects (using ReactDOM and JSX), you render markup for Native Components Native Runtime, Native Apps, Javascript as Scripting Engine Native Performance, but still Hybrid
- 63.
- 64. React Components VirtualDOM HTML Document HTML
- 65. Notes Server-Side Rendering React Componentscan be rendered into a string HTML code only HTML code is dead, i.e. it does not contain any active parts (Javascript) Can be used for pre-rendering on the server-side Make content available for search engine and other non-browser clients Testing
- 66.
- 67.
- 68.
- 69. Notes Technologies and Concepts Technologychoices have a big impact on design and fundamental concepts React, Redux and other members of this family have a clear heritage of functional programming This has a learning curve It takes some time until you “get it” And then it takes some more time until you really “get it” Concepts are very different from what our developers were used too There was a learning curve until it really clicks
- 70. Notes Technologies and Concepts Somethings seem unnecessarily complicated and limiting Most of the time, they are actually not They seem complicated, because they are unfamiliar and you have not started to think in a React/Redux/Functional way Code Base in the end is much more fragmented More small granular components than with other core technologies Complexity is still smaller though, because the small components follow very clear, simple and orthogonal concepts
- 71. Notes Technologies and Concepts Concepts(and technologies) allow for really cool and helpful things Testing, Time-Machine, React DevTools Clean, simple, well-abstracted and clean code Reusable and extensible code Content API allows for very powerful customisation and extension … of existing apps and use cases
- 72.
- 73. Notes Girders Elements We hadthe chance to go through multiple iterations with the described architecture Both with React DOM and React Native One of the current customers gave us the chance to extract the core framework of the architecture and open-source it This is called Girders Elements It is currently being developed … in parallel with the platform and some apps for the mentioned customer Not production-ready yet
- 74. Notes Girders Elements React, ReactDOM or React Native, Redux and other core libraries Framework, Wiring, Configuration, UI Widgets (Customisable, Skinnable)
- 75. Notes Girders Elements If youare very familiar with the concepts and libraries that I mentioned -> use it and contribute to it If you are not familiar with the concepts and libraries yet -> wait for a few months Girders Elements is still under development Documentation is not there yet But we will get there eventually
- 76. Corsin Decurtins, Netcetera ChiefTechnology Officer corsin.decurtins@netcetera.com @corsin
- 77.
- 78. Content-Driven Apps withReact Corsin Decurtins, Netcetera 2016-10-17 /Bern BärnerJS