towards component based web ui with reactjs
TRANSCRIPT
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
TABLE OF CONTENT
◦ Introduction◦ Characteristics◦ Composition◦ Outlook
INTRODUCTIONWhat is React?
1
“
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
CHARACTERISTICSWhat makes React different?
2
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
CHARACTERISTICS
source: https://facebook.github.io/react/docs/
CHARACTERISTICS
◦ Isomorphic▫ Run same code on server & client▫ Faster app startup▫ SEO friendly
CHARACTERISTICS
COMPOSITIONHow to deal with components?
3
COMPOSITION
◦ Lifecycle
◦ Properties▫ data flow downwards the hierarchy
◦ Callbacks▫ data flow upwards
◦ States▫ trigger rendering
COMPOSITION
◦ Composition Modalities▫ coupled▫ decoupled
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
OUTLOOKWhat’s coming next?
4
◦ Large Applications▫ Flux Architecture
OUTLOOK
source: https://facebook.github.io/flux/docs/overview.html
◦ React Native ▫ iOS, Android and future platforms
OUTLOOK
◦ 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/