Henri Karhatsu / @karhatsu
Software developer / Scrum master / Agilist / CEO / M.Sc. x 2
~15 years of software development, mainly web applications
Year ago no real experience from modern web development
Twitter: @karhatsu
Development project started 11/2014
Initially Angular
Lead UI wanted React
It's gonna be Angular
We go with React & Fluxible
For him React felt better, it felt right
(Let's see if he was "right"...)
HTML inside Javascript, seriously?
What is the correct way to do thing X in React?
Why does this work only in some cases?
When should we load the data? In what component?
...
Productivity, clarity, our way of working
These tools feel (mostly) really good
(Also JSX)
Annual closings table
What has changed in state that has to be changed in view?
function afterCellClick(company, field) {
if (sameFieldCurrentlyOpen()) {
hideStatusRow(); // HIDE!
} else {
showStatusRow(); // SHOW!
}
}
???
If the application state is difficult to track in logical level, it is also difficult to implement in the UI level.
It is also really difficult to test.
AnnualClosingsTable, HeaderRow, EmptyRow, StatusRow, ModifiableField, UnmodifiableField,...
With the same properties you always get the same view
(Ruby on Rails example using react-rails gem)
Components have their states
⇓
Components send data to child components as props
⇓
User actions change state
⇓
Everything is rerendered according the latest state
AlertBox, BackToHomePageLink, DateInputField, SubmitButton,...
"In React, you simply update a component's state, and then render a new UI based on this new state."
(http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html)
describe('ModifiableStatusCell', function () {
describe('when annual closing report is not sent', function () {
it('renders empty cell');
});
describe('when annual closing report is sent', function () {
it('renders field status');
describe('and cell is clicked', function () {
it('invokes openFieldWrapper callback function');
});
});
});
If React always rerenders the whole DOM..?
Isn't that really slow..?
React maintains a fast in-memory representation of the DOM. React can compute the fastest way to update the browser after the virtual DOM has changed.
https://facebook.github.io/react/docs/working-with-the-browser.html
React components are declarative
Virtual DOM is imperative (towards actual DOM)
Complements React's view components with unidirectional data flow
Complements React's view components with unidirectional data flow
Predictable data with Flux
Predictable UI with React
Store the application data, listen events for data changes
UI using the data in the stores
Fetch and update data, invoke events for stores
CRUD operations on server-side (NodeJS)
Sometimes feels boilerplate
Not much community support
Do not forget the high level tests (we use Robot Framework).
Yes. Feeling matters.
Next time I would definitely choose React myself.
These slides are available:
www.karhatsu.com/capgemini