Towards component based web UI with ReactJS
-
Upload
oliver-haeger -
Category
Presentations & Public Speaking
-
view
409 -
download
3
Transcript of Towards component based web UI with ReactJS
TOWARDS COMPONENT BASED WEB UI WITH REACTJSOliver Häger, Dextra
DevCamp, 2015, DevRootz15.05.2015, Campinas, Brazil
Hallo!
Eu sou Oliver Hä[email protected]
38 anos na Terra
15 anos na Computação
7 anos no Brasil
5 anos como Papai
2 anos na Dextra
“
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/
“
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/
INTRODUCTION
◦ Library ▫ Not a full stack framework!
◦ Technology Agnostic▫ No dependencies at all
◦ Open & Free▫ Like free beer!
◦ Facebook & Instagram▫ Battle-tested
INTRODUCTION
◦ React on GitHub
source: https://github.com/facebook/react/graphs/contributors
INTRODUCTION
◦ Google Trends
source: https://www.google.com/trends
● new idea
● several smaller projects achieve success
● clean, composable approach to componentization.
INTRODUCTION
◦ Thoughtwork's Radar
TRIALsource: http://www.thoughtworks.com/radar/languages-and-frameworks
CHARACTERISTICS
◦ Mixing Logic & View▫ composable encapsulated
components▫ stateful▫ lifecycle▫ Javascript mixed up with XML
CHARACTERISTICS
> code
https://github.com/ohager/reactdemo/blob/master/jsx/footer.jsx
CHARACTERISTICS
◦ Virtual DOM▫ lightweight in-memory DOM▫ Smart Reconciliation ▫ Reduced DOM updates
◦ Properties▫ data flow downwards the hierarchy
◦ Callbacks▫ data flow upwards
◦ States▫ trigger rendering
COMPOSITION
COMPOSITION
> codehttps://www.devbutze.com/dojo/react/#/example/composition
https://www.devbutze.com/dojo/react/#/example/composition/decoupled
Coupled Composition◦ Pro
▫ Intuitive usage▫ Consistent data flow▫ Better maintainability
◦ Contra▫ More design effort
COMPOSITION
Decoupled Composition◦ Pro
▫ Easy to implement▫ Broadcast
▫ Operability between non-related components
◦ Contra▫ Poor maintainability (Event Hell )
COMPOSITION
◦ Large Applications▫ Flux Architecture
OUTLOOK
source: https://facebook.github.io/flux/docs/overview.html
◦ Integration in existing projects▫ Library with no dependencies▫ i.e. with Backbone, AngularJS
OUTLOOK
> demo
https://www.devbutze.com/dojo/angulardemo/app/
Danke.
Code : github.com/ohager/reactdemo
Live Demo: devbutze.com/dojo/react/