React is a JavaScript library for building user interfaces that uses a component-based approach. Components allow the user interface to be split into independent, reusable pieces. Data flows in one direction through the application via actions and a centralized state, rather than having two-way data binding. This unidirectional data flow model helps avoid bugs and makes the app more predictable and efficient. React uses a virtual DOM for rendering components, allowing it to efficiently update the real DOM when data changes.

1. CONCEPTS OF
REACT

2. Johannes Reuter
Master student HS Karlsruhe
&
Student employee @ inovex lab
jreuter@inovex.de
evaluation of new (web-)technologies

3. React Facts
> Library (NOT a framework)
> Is only the view-part of the application
> Open source
> Developed (and used) by facebook

4. Coming from layers...
Structure (HTML)
Appearance (CSS)
Behavior (JS)

5. Component
...to components
JS + JSX
Component Component
...
separation of concerns
APIAPI API
JS + JSX JS + JSX

7. Hierarchical structuring
DATA

8. App state vs. UI-state
DATA a.k.a. app state
UI-state

9. On new data
> Complete re-evaluation
> Comparison of result to displayed components
> Calculation of minimal set of changes
> Execution of changes
JS (fast)
DOM (slow)

10. How to define
Components?

11. Example Todo-App

12. 0. Data modelling
{
“todos”: [
{
“name”: “Eat”,
“completed”: false
},
{
“name”: “Pray”,
“completed”: false
},
{
“name”: “Love”,
“completed”: false
},
]
}

13. 1. Separate

14. Header
List
Footer

15. 2. Define and
connect

16. TodoApp
Header List Footer
todos todos.length
data selectively passed down
onFilterChange

17. 3. Zoom in

18. Count-label Visibility radio buttons

19. 4. Repeat

20. TodoApp
Header List Footer
InputCheckbox ListItem CountLabel RadioButton
DATA
Checkbox Label

21. The bigger picture
DATA
how does this part work?

22. React leverages
reactive programming
> Modelling of data-flow
> Data-changes are propagated automatically
+ No need to synchronize model <-> view (data-binding)

23. On application level (Excel)

24. On code level (RxJS)
const subscription = todos
.filter(todo => !todo.completed)
.count()
.subscribe(
count => console.log(`There are ${count} uncompleted todos`),
err => console.log(`Something went wrong: ${err.message}`);
);
functional
programming

25. On architecture level (Angular 1)
http://tutorials.jenkov.com/images/angularjs/angularjs-critique-3.png
Data Service
Scope
ViewValidator
Controller

26. Problem: Loops in the flow
Error: [$rootScope:infdig] 10 $digest() iterations reached.
Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.4.3/$rootScope/infdig?p0=10&p1=%
at angular.js:68
...
450 Questions on Stackoverflow

27. Something changes
something changes
something...

28. Solution:
Unidirectional dataflow

29. App-state is managed
in centralized place

30. Action
https://facebook.github.io/flux/docs/overview.html
StoreDispatcher
Action
View
Flux
Store
Store
View
View
on user input
on async event
app state

31. State
http://staltz.com/unidirectional-user-interface-architectures.html
Alternative (Redux)
Reducer I
Action
View
Reducer II
Reducer x
View
View
...
on user input

32. https://medium.com/@AdamRNeary/unidirectional-data-flow-yes-flux-i-am-not-so-sure-b4acf988196c
Alternative
Event Stream (Server side)
View
Aggregated
Database-View
push
Action
on user input

33. And much, much more
> Cerebral www.cerebraljs.com/
> NuclearJS optimizely.github.io/nuclear-js/
> Alt alt.js.org/
> FluxThis www.fluxthis.io/
> Microcosm github.com/vigetlabs/microcosm
> ...

34. Integration in existing architectures
> Serverside rendering + glue code
> BackboneJS
> ...

35. http://winterbe.com/posts/2015/08/24/integrate-reactjs-into-jquery-webapps/
Serverside rendering + glue code
Server
jQuery
DOM
HTML
$(...).html(response);
Event
AJAX
Templating
Engine

36. http://winterbe.com/posts/2015/08/24/integrate-reactjs-into-jquery-webapps/
Server
React
DOM
JSON
React.render(...);
Event
AJAX
json_encode
Serverside rendering + glue code

37. https://blog.engineyard.com/2015/integrating-react-with-backbone
BackboneJS
react.backbone
> Auto-rerenders on model/collection-change
> Place react components into backbone views
Backbone
Model
Backbone
View
React
Component
on*-Event

38. Angular
DON’T
> Already has a view-engine in place
> Big JS-files even for small apps
> Boilerplate-code

39. Upshot
> Hierarchical components defined by interfaces
> Data is passed selectively top to bottom
> Complete re-evaluation on each action
> Unidirectional data flow
> Centralized place for storage of app-state

40. Questions?
inovexperts.de
blog.inovex.de
@inovexGmbH
#inovexmeetup