Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TOWARDS
COMPONENT
BASED WEB UI
WITH REACTJS
Oliver Häger, Dextra
DevCamp, 2015, DevRootz
15.05.2015, Campinas, Brazil
Hallo!
Eu sou Oliver Häger
oliver.hager@dextra.com.br
38 anos na Terra
15 anos na Computação
7 anos no Brasil
5 anos como ...
TABLE OF CONTENT
◦ Introduction
◦ Characteristics
◦ Composition
◦ Outlook
INTRODUCTION
What 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...
“
Lots of people use React as the V in
MVC. Since React makes no
assumptions about the rest of your
technology stack, it's...
INTRODUCTION
◦ Library
▫ Not a full stack framework!
◦ Technology Agnostic
▫ No dependencies at all
◦ Open & Free
▫ Like f...
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
◦ Tho...
CHARACTERISTICS
What makes React different?
2
CHARACTERISTICS
◦ Mixing Logic & View
▫ composable encapsulated
components
▫ stateful
▫ lifecycle
▫ Javascript mixed up wi...
CHARACTERISTICS
> code
https://github.
com/ohager/reactdemo/blob/maste
r/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
COMPOSITION
How 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
> code
https://www.devbutze.
com/dojo/react/#/example/compos
ition
https://www.devbutze.
com/dojo/react/#/exam...
Coupled Composition
◦ Pro
▫ Intuitive usage
▫ Consistent data flow
▫ Better maintainability
◦ Contra
▫ More design effort
...
Decoupled Composition
◦ Pro
▫ Easy to implement
▫ Broadcast
▫ Operability between
non-related components
◦ Contra
▫ Poor m...
OUTLOOK
What’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
◦ Testing Components
▫ TestUtils Addon
▫ Based on Jest
OUTLOOK
◦ Integration in existing projects
▫ Library with no dependencies
▫ i.e. with Backbone, AngularJS
OUTLOOK
> demo
https://w...
Danke.
QUESTIONS!
oliver.hager@dextra-sw.com
oliver@devbutze.com
Code : github.com/ohager/reactdemo
Live Demo: devbutze.co...
Upcoming SlideShare
Loading in …5
×

Towards component based web UI with ReactJS

2,107 views

Published on

Presentation "Towards component based web UI with ReactJS" hold at the largest developer meeting in the interior of São Paulo in Campinas: DevCamp 2015

#DevCamp2015

  • Be the first to comment

Towards component based web UI with ReactJS

  1. 1. TOWARDS COMPONENT BASED WEB UI WITH REACTJS Oliver Häger, Dextra DevCamp, 2015, DevRootz 15.05.2015, Campinas, Brazil
  2. 2. Hallo! Eu sou Oliver Häger oliver.hager@dextra.com.br 38 anos na Terra 15 anos na Computação 7 anos no Brasil 5 anos como Papai 2 anos na Dextra
  3. 3. TABLE OF CONTENT ◦ Introduction ◦ Characteristics ◦ Composition ◦ Outlook
  4. 4. INTRODUCTION What is React? 1
  5. 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. 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. 7. INTRODUCTION ◦ Library ▫ Not a full stack framework! ◦ Technology Agnostic ▫ No dependencies at all ◦ Open & Free ▫ Like free beer! ◦ Facebook & Instagram ▫ Battle-tested
  8. 8. INTRODUCTION ◦ React on GitHub source: https://github.com/facebook/react/graphs/contributors
  9. 9. INTRODUCTION ◦ Google Trends source: https://www.google.com/trends
  10. 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. 11. CHARACTERISTICS What makes React different? 2
  12. 12. CHARACTERISTICS ◦ Mixing Logic & View ▫ composable encapsulated components ▫ stateful ▫ lifecycle ▫ Javascript mixed up with XML
  13. 13. CHARACTERISTICS > code https://github. com/ohager/reactdemo/blob/maste r/jsx/footer.jsx
  14. 14. CHARACTERISTICS ◦ Virtual DOM ▫ lightweight in-memory DOM ▫ Smart Reconciliation ▫ Reduced DOM updates
  15. 15. CHARACTERISTICS source: https://facebook.github.io/react/docs/
  16. 16. CHARACTERISTICS ◦ Isomorphic ▫ Run same code on server & client ▫ Faster app startup ▫ SEO friendly
  17. 17. CHARACTERISTICS
  18. 18. COMPOSITION How to deal with components? 3
  19. 19. COMPOSITION ◦ Lifecycle
  20. 20. ◦ Properties ▫ data flow downwards the hierarchy ◦ Callbacks ▫ data flow upwards ◦ States ▫ trigger rendering COMPOSITION
  21. 21. ◦ Composition Modalities ▫ coupled ▫ decoupled COMPOSITION
  22. 22. COMPOSITION > code https://www.devbutze. com/dojo/react/#/example/compos ition https://www.devbutze. com/dojo/react/#/example/compos ition/decoupled
  23. 23. Coupled Composition ◦ Pro ▫ Intuitive usage ▫ Consistent data flow ▫ Better maintainability ◦ Contra ▫ More design effort COMPOSITION
  24. 24. Decoupled Composition ◦ Pro ▫ Easy to implement ▫ Broadcast ▫ Operability between non-related components ◦ Contra ▫ Poor maintainability (Event Hell ) COMPOSITION
  25. 25. OUTLOOK What’s coming next? 4
  26. 26. ◦ Large Applications ▫ Flux Architecture OUTLOOK source: https://facebook.github.io/flux/docs/overview.html
  27. 27. ◦ React Native ▫ iOS, Android and future platforms OUTLOOK
  28. 28. ◦ Testing Components ▫ TestUtils Addon ▫ Based on Jest OUTLOOK
  29. 29. ◦ Integration in existing projects ▫ Library with no dependencies ▫ i.e. with Backbone, AngularJS OUTLOOK > demo https://www.devbutze. com/dojo/angulardemo/app/
  30. 30. Danke. QUESTIONS! oliver.hager@dextra-sw.com oliver@devbutze.com Code : github.com/ohager/reactdemo Live Demo: devbutze.com/dojo/react/

×