Cafemøde d. 21. september - BestBrains København

1. React and Redux
Lars Thorup, Triggerz
August, 2016

2. Lars Thorup
● Software developer/architect
● JavaScript, C#
● Test Driven Development
● Coach
● Agile engineering practices
● Founder
● BestBrains
● ZeaLake
● Triggerz
● @larsthorup

3. Agenda
● Our current MVP architecture
● React
● Diagram
● Demo: <Signin />
● D3
● Discussion
● Redux
● Diagram
● Code
● Discussion
● create-react-app

4. MVP architecture
JavaScript
React
Redux
Ramda
Webpack
CSS
Node.js
Restify
Knex
Cryptex
Co
PostgreSQL
● Demo!
Ajax &
WebSockets
SQL

5. React - Diagram

6. React - Demo
<Signin signingIn={({account}) => alert(account)}/>
// ----
render () {
return (
<form onSubmit={this.onSubmit}>
<input type="text" onChange={this.onChange}/>
<button type="submit">Sign In</button>
</form>
);
}
https://github.com/larsthorup/react-signin-sample

7. React - Discussion
● Mandatory
● Virtual DOM - decoupled from browser DOM
● Avoid
● HTML, browser DOM, jQueue, D3?
● Optional
● ES6
● JSX
● Webpack
● Stateful and stateless components
● Server-side rendering
● Routing

8. React - D3
● Competing DOM
manipulation
● We use plain SVG
● And CSS transforms
● Example: gauge.js
● A react-friendly D3?

9. Redux - Motivation
● Distributed state ● Centralized state

10. Redux - Overview

11. Redux - Examples
● State shape
● Auth reducers
● Auth saga: signingIn

12. Redux - Discussion
● Design patterns
● command
● singleton
● same data flow as server side pages before Ajax!
● Modularity
● State shape
● Testability
● Higher-order functions
● connect(mapStateToProps)(Component)

13. create-react-app
$ npm install -g create-react-app
$ create-react-app my-first-app # takes 5 min(!)
$ cd my-first-app
$ npm start
# ToDo: hack my-first-app
# https://github.com/larsthorup/react-signin-sample

14. Questions!