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

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
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. TABLE OF CONTENT
◦ Introduction
◦ Characteristics
◦ Composition
◦ Outlook

4. INTRODUCTION
What is React?
1

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

13. CHARACTERISTICS
> code
https://github.
com/ohager/reactdemo/blob/maste
r/jsx/footer.jsx

14. CHARACTERISTICS
◦ Virtual DOM
▫ lightweight in-memory DOM
▫ Smart Reconciliation
▫ Reduced DOM updates

15. CHARACTERISTICS
source: https://facebook.github.io/react/docs/

16. CHARACTERISTICS
◦ Isomorphic
▫ Run same code on server & client
▫ Faster app startup
▫ SEO friendly

17. CHARACTERISTICS

18. COMPOSITION
How to deal with components?
3

19. COMPOSITION
◦ Lifecycle

20. ◦ Properties
▫ data flow downwards the hierarchy
◦ Callbacks
▫ data flow upwards
◦ States
▫ trigger rendering
COMPOSITION

21. ◦ Composition Modalities
▫ coupled
▫ decoupled
COMPOSITION

22. COMPOSITION
> code
https://www.devbutze.
com/dojo/react/#/example/compos
ition
https://www.devbutze.
com/dojo/react/#/example/compos
ition/decoupled

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

25. OUTLOOK
What’s coming next?
4

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!
oliver.hager@dextra-sw.com
oliver@devbutze.com
Code : github.com/ohager/reactdemo
Live Demo: devbutze.com/dojo/react/