Presentation of ReactJs Meetup Mannheim - 04.10.2018

1. Hello I am
Andreas Schmidt

3. OurProducts

4. A long time ago we used
JQuery & Bootstrap

5. <div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
function onButtonClick(e) {
$('.buttonId')
.addClass('inactive')
.props('disabled', true)
.find('.label')[0]
.text('Loading...');
//Do Something with Ajax (Don‘t
forget the callback hell…)
$('.buttonId')
.removeClass('inactive')
.props('disabled', false)
.find('.label')[0]
.text('Submit');
}
JQuery&Bootstrap

6. Pros
– Cross Browser
– Reusable components
Cons
– Mixed JS and HTML  Difficult to refactor
– Required a lot of discipline
– 100 different ways to do the same thing
– Poor tooling
JQuery&Bootstrap

7. Our first real framework
Knockout.js

8. <table>
<thead>
<tr>
<th>Option</th>
<th>Importance</th>
</tr>
</thead>
<tbody data-bind="foreach: options">
<tr>
<td data-bind="text: optionText“ ></td>
<td><select data-bind="options: [1,2,3,4,5]
, value: priority"></select></td>
</tr>
</tbody>
</table>
<button type="button" data-
bind="click:onSubmit" class="btn btn-
secondary">Submit</button>
function SurveyViewModel() {
this.options = ko.observableArray([
{
optionsText: 'Did you like this example?‘,
priority: 0
}, {
optionsText: 'Do you like your neighbour to the right?‘,
priority: 0
}
]);
this.onSubmit = function () {
alert('Submit survey‘);
}
}
Knockout.js

9. Pros
– HTML and JS separated
– Reusable components
– Easier to refactor
– Consistent UI state
Cons
– Still poor tooling
– Non-standard html binding syntax
– No active community
Knockout.js

10. OR

11. We didn‘t like React at
first

12. JSX: HTML in Javascript?!?
Didn’t we leave that behind us?
render() {
return (
<div>
<FieldLabel
isRequired={this.props.isRequired}
>
{this.props.label}
</FieldLabel>
<div onClick={this._handleClick}>
<DatePicker
value={this.props.value}
onChange={this.props.onChange}
isOpen={this.state.isOpen}
onBlur={this._onBlur}
/>
</div>
</div>);

13. – JSX works great and consistent  One source
of truth
– Huge community
– Small framework for just the UI.You have to choose
your own boilerplate: Router, State
Management, Caching, Ajax, …
– Easy to get started
– For us: delivers quick results
ReactJS

14. Changethemindset
JS
CSS
HTML
Seperation of Concerns Seperation of Concerns
(only from a different point of view)
Button
Datepicker
Modal
List
List-item
Media

15. – Practise on a small PoC
– Move component by component – screen by
screen
– Focus on stateless components
– Plan ahead on features you need
– Don‘t migrate 1:1
– UseTypescript 
Howtomove
toReactJs

16. DeepDive:Stateless
components
Not Stateless – different
output for same input
Stateless – same output
for same input
render() {
return <div>
{new Date().toISOString()}
</div>
};
render() {
return <div>
{this.props.currentDate.toISOString()}
</div>
};

17. Architecture
Stateless UI Components
Persistency
Models with business logic
(Redux)-Store

18. – Easy to test
– Excellent tooling
– Extensive error logging
– Type safety
– Global state management
Architecture

19. It really pays off

20. We’re hiring!