Towards component based web UI with ReactJS
2 likes2,403 views
The document discusses React, a JavaScript library for building user interfaces, highlighting its characteristics such as component-based architecture, virtual DOM, and isomorphic capabilities. It explains the composition of React components, emphasizing data flow and the pros and cons of coupled versus decoupled composition. Lastly, it outlines future developments for React including the implementation of Flux architecture and React Native for mobile applications.
Towards component based web UI with ReactJS
- 1. TOWARDS COMPONENT BASED WEB UI WITH REACTJS Oliver Häger, Dextra DevCamp, 2015, DevRootz 15.05.2015, Campinas, Brazil
- 2. Hallo! Eu sou Oliver Häger [email protected] 38 anos na Terra 15 anos na Computação 7 anos no Brasil 5 anos como Papai 2 anos na Dextra
- 3. TABLE OF CONTENT ◦ Introduction ◦ Characteristics ◦ Composition ◦ Outlook
- 5. “ Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project. From https://facebook.github.io/react/
- 6. “ Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project. From https://facebook.github.io/react/
- 7. INTRODUCTION ◦ Library ▫ Not a full stack framework! ◦ Technology Agnostic ▫ No dependencies at all ◦ Open & Free ▫ Like free beer! ◦ Facebook & Instagram ▫ Battle-tested
- 8. INTRODUCTION ◦ React on GitHub source: https://github.com/facebook/react/graphs/contributors
- 9. INTRODUCTION ◦ Google Trends source: https://www.google.com/trends
- 10. ● new idea ● several smaller projects achieve success ● clean, composable approach to componentization. INTRODUCTION ◦ Thoughtwork's Radar TRIAL source: http://www.thoughtworks.com/radar/languages-and-frameworks
- 11. CHARACTERISTICS What makes React different? 2
- 12. CHARACTERISTICS ◦ Mixing Logic & View ▫ composable encapsulated components ▫ stateful ▫ lifecycle ▫ Javascript mixed up with XML
- 14. CHARACTERISTICS ◦ Virtual DOM ▫ lightweight in-memory DOM ▫ Smart Reconciliation ▫ Reduced DOM updates
- 16. CHARACTERISTICS ◦ Isomorphic ▫ Run same code on server & client ▫ Faster app startup ▫ SEO friendly
- 17. CHARACTERISTICS
- 18. COMPOSITION How to deal with components? 3
- 20. ◦ Properties ▫ data flow downwards the hierarchy ◦ Callbacks ▫ data flow upwards ◦ States ▫ trigger rendering COMPOSITION
- 21. ◦ Composition Modalities ▫ coupled ▫ decoupled COMPOSITION
- 23. Coupled Composition ◦ Pro ▫ Intuitive usage ▫ Consistent data flow ▫ Better maintainability ◦ Contra ▫ More design effort COMPOSITION
- 24. Decoupled Composition ◦ Pro ▫ Easy to implement ▫ Broadcast ▫ Operability between non-related components ◦ Contra ▫ Poor maintainability (Event Hell ) COMPOSITION
- 26. ◦ Large Applications ▫ Flux Architecture OUTLOOK source: https://facebook.github.io/flux/docs/overview.html
- 27. ◦ React Native ▫ iOS, Android and future platforms OUTLOOK
- 28. ◦ Testing Components ▫ TestUtils Addon ▫ Based on Jest OUTLOOK
- 29. ◦ Integration in existing projects ▫ Library with no dependencies ▫ i.e. with Backbone, AngularJS OUTLOOK > demo https://www.devbutze. com/dojo/angulardemo/app/
- 30. Danke. QUESTIONS! [email protected] [email protected] Code : github.com/ohager/reactdemo Live Demo: devbutze.com/dojo/react/