Framework-agnostic Web Applications with Redux

Framework-agnostic web applications with Redux (or how to ﬁght Javascript
Fatigue Fatigue) @lucalanca

Angular 1

Angular 2

Nobody cares. Is there a way to create framework-agnostic code?

views how does it look application logic what happens if
I click here business logic how do we change data Framework-agnostic Webapps routes what pages do we have, when do we navigate between pages. talking to a server get, store and update data. data validation what is valid data? what is invalid data?

Today build a Kanban board in 3 frameworks and reuse
as much code as possible.

Today build a Kanban board in 3 frameworks and reuse
as much code as possible. 2

How code is displayed from now on. vanilla react angular
2

(change to browser now)

Redux predictable state container for JavaScript apps.

const state = { counter: 0 };

const state = { counter: 0 }; const action1 =
{ type: 'INCREMENT' } const action2 = { type: 'DECREMENT' } const action3 = { type: 'INCREMENT_BY', payload: 3}

const state = { counter: 0 }; const action1 =
{ type: 'INCREMENT' } const action2 = { type: 'DECREMENT' } const action3 = { type: 'INCREMENT_BY', payload: 3} function reducer(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state - 1 case 'INCREMENT_BY': return state + payload default: return state } }

reducer(state, action); // newState

reducer(state, action); // newState reducer({ counter: 0 }, { type:
‘INCREMENT’ }); // { counter: 1 }

reducer(state, action); // newState reducer({ counter: 0 }, { type:
‘INCREMENT’ }); // { counter: 1 } reducer({ counter: 5 }, { type: ‘INCREMENT_BY', payload: 10 }); // { counter: 15 }

import { createStore } from 'redux' let store = createStore(reducer)
// initial state set to { counter: 0 }

// initial state set to { counter: 0 } store.subscribe(() => console.log('new state is', store.getState()) )

// initial state set to { counter: 0 } store.subscribe(() => console.log('new state is', store.getState()) ) store.dispatch({ type: 'INCREMENT' }) // new state is { counter: 1 }

// initial state set to { counter: 0 } store.subscribe(() => console.log('new state is', store.getState()) ) store.dispatch({ type: 'INCREMENT' }) // new state is { counter: 1 } store.dispatch({ type: 'DECREMENT' }) // new state is { counter: 0 }

// initial state set to { counter: 0 } store.subscribe(() => console.log('new state is', store.getState()) ) store.dispatch({ type: 'INCREMENT' }) // new state is { counter: 1 } store.dispatch({ type: 'DECREMENT' }) // new state is { counter: 0 } store.dispatch({ type: ‘INCREMENT_BY', payload: 3}) // new state is { counter: 3 }

import React from 'react' import { render } from 'react-dom'
import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import { MyComponent } from './components/MyComponent'; const store = createStore(reducer); render( <Provider store={store}> <MyComponent /> </Provider>, document.getElementById('root') )

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import { MyComponent } from './components/MyComponent'; const store = createStore(reducer); render( <Provider store={store}> <MyComponent /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import { MyComponent } from ‘./components/MyComponent'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [MyComponent] }) export class AppModule { }

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import { MyComponent } from './components/MyComponent'; const store = createStore(reducer); render( <Provider store={store}> <MyComponent /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import { MyComponent } from ‘./components/MyComponent'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [MyComponent] }) export class AppModule { } ⛔

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import { MyComponent } from './components/MyComponent'; const store = createStore(reducer); render( <Provider store={store}> <MyComponent /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import { MyComponent } from ‘./components/MyComponent'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [MyComponent] }) export class AppModule { } ✅

import { Provider } from 'react-redux' import { createStore } from 'redux' import reducer from './reducers'; import { MyComponent } from './components/MyComponent'; const store = createStore(reducer); render( <Provider store={store}> <MyComponent /> </Provider>, document.getElementById('root') ) import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import reducer from ‘./reducers'; import { MyComponent } from ‘./components/MyComponent'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, StoreModule.provideStore(reducer) ], bootstrap: [MyComponent] }) export class AppModule { }

import React, { Component } from 'react' import { connect
} from 'react-redux' import * as actions from '../actions' export class MyComponent extends Component { render() { return <span className="counter">counter is: { this.props.counter }</span> } } const mapStateToProps = (state, ownProps) => ({ counter: state.counter }) export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

} from 'react-redux' import * as actions from '../actions' export class MyComponent extends Component { render() { return <span className="counter">counter is: { this.props.counter }</span> } } const mapStateToProps = (state, ownProps) => ({ counter: state.counter }) export default connect(mapStateToProps, mapDispatchToProps)(MyComponent) import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import 'rxjs/add/operator/map'; import * as actions from '../actions'; @Component({ selector: 'my-component', template: `<span class="counter">counter is: {{ counter }}</span>` }) export class MyComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => this.counter = state.counter); } }

} from 'react-redux' import * as actions from '../actions' export class MyComponent extends Component { render() { return <span className="counter">counter is: { this.props.counter }</span> } } const mapStateToProps = (state, ownProps) => ({ counter: state.counter }) export default connect(mapStateToProps, mapDispatchToProps)(MyComponent) import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import 'rxjs/add/operator/map'; import * as actions from '../actions'; @Component({ selector: 'my-component', template: `<span class="counter">counter is: {{ counter }}</span>` }) export class MyComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => this.counter = state.counter); } } ⛔

} from 'react-redux' import * as actions from '../actions' export class MyComponent extends Component { render() { return <span className="counter">counter is: { this.props.counter }</span> } } const mapStateToProps = (state, ownProps) => ({ counter: state.counter }) export default connect(mapStateToProps, mapDispatchToProps)(MyComponent) import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import 'rxjs/add/operator/map'; import * as actions from '../actions'; @Component({ selector: 'my-component', template: `<span class="counter">counter is: {{ counter }}</span>` }) export class MyComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => this.counter = state.counter); } } ✅

} from 'react-redux' import * as actions from '../actions' export class MyComponent extends Component { render() { return <span className="counter">counter is: { this.props.counter }</span> } } const mapStateToProps = (state, ownProps) => ({ counter: state.counter }) export default connect(mapStateToProps, mapDispatchToProps)(MyComponent) import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import 'rxjs/add/operator/map'; import * as actions from '../actions'; @Component({ selector: 'my-component', template: `<span class="counter">counter is: {{ counter }}</span>` }) export class MyComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => this.counter = state.counter); } }

} from 'react-redux' import * as actions from '../actions' export class MyComponent extends Component { render() { return <span className="counter">counter is: { this.props.counter }</span> } } const mapStateToProps = (state, ownProps) => ({ counter: state.counter }) export default connect(mapStateToProps, mapDispatchToProps)(MyComponent) import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import 'rxjs/add/operator/map'; import * as actions from '../actions'; @Component({ selector: 'my-component', template: `<span class="counter">counter is: {{ counter }}</span>` }) export class MyComponent { constructor(store: Store<any>){ this.store = store; this.actions = actions; store.subscribe(state => this.counter = state.counter); } } ✅

Redux Kanban Board a more realistic example. github.com/lucalanca/redux-talk

// state de-normalised as a dictionary (e.g. json api ==>
firebase) const kanbanState = { columns: { "47749e5": { name: “Todo” , index: 0 }, "dde4872": { name: “Doing", index: 1 }, "dde4872": { name: “Done” , index: 2 } } }

// state de-normalised as a dictionary (e.g. json api ==>
firebase) const kanbanState = { columns: { "47749e5": { name: “Todo” , index: 0 }, "dde4872": { name: “Doing", index: 1 }, "dde4872": { name: “Done” , index: 2 } } } // selectors: normalise data so it’s easier to display it later. import { sortBy } from 'lodash'; const arrayfyObject = (obj) => Object.keys(obj).map(id => ({ ...obj[id], id })) export function getSortedColumns(state) { const columns = arrayfyObject(state.columns || {}); return sortBy(columns, 'index'); }

const kanbanState = { columns: { "47749e5": { name: “Todo”
, index: 0 }, "dde4872": { name: “Doing", index: 1 }, "dde4872": { name: “Done” , index: 2 } } } getSortedColumns(kanbanState); // [ // { id: "47749e5", name: "Todo" , index: 0 }, // { id: "dde4872", name: "Doing", index: 1 }, // { id: "dde4872", name: "Done" , index: 2 } // ]

// actions.js export const RENAME_COLUMUN = 'RENAME_COLUMUN' export const renameColumn
= (id, name) => ({ type: RENAME_COLUMUN, payload: {id, name} })

// actions.js export const RENAME_COLUMUN = 'RENAME_COLUMUN' export const renameColumn
= (id, name) => ({ type: RENAME_COLUMUN, payload: {id, name} }) // reducers.js export default function columns (state = {}, { type, payload }) { if (type === RENAME_COLUMUN) { return Object.assign({}, state, { [payload.id]: Object.assign({}, state[payload.id], { name: payload.name }) }); } return state; } // selectors go usually here

columns(kanbanState, renameColumn("ac32fcc", "Shipped")); // newKanbanState: { // columns: { //
"47749e5": { // "name": "Todo", // "index": 0 // }, // "dde4872": { // "name": "Doing", // "index": 1 // }, // "ac32fcc": { // "name": "Shipped", // "index": 2 // } // } // }

Presentational Components Container Components Presentational and Container Components by Dan
Abramov

Presentational Components Container Components concern how things look how things
work Presentational and Container Components by Dan Abramov

work dependencies — actions and store Presentational and Container Components by Dan Abramov

work dependencies — actions and store logic — data loading and mutation Presentational and Container Components by Dan Abramov

work dependencies — actions and store logic — data loading and mutation state stateless (pure) stateful Presentational and Container Components by Dan Abramov

work dependencies — actions and store logic — data loading and mutation state stateless (pure) stateful Presentational and Container Components by Dan Abramov visual interaction

export default const Column = ({ id, name, onAddTask })
=> <div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div>

export default const Column = ({ id, name, onAddTask })
=> <div> <span>{name}</span> <button onClick={onAddTask}> Add Task </button> </div> @Component({ selector: 'column', template: ` <div> <span>{{ column.name }}</span> <button (click)="onAddTask.emit()"> Add Task </button> </div>` }) export class ColumnComponent { @Input() column; @Output() onAddTask = new EventEmitter(); }

import { connect } from 'react-redux' import * as actions
from "../actions" import { getColumnsWithTasks } from "../reducers" @connect( (state) => ({ columns: getColumnsWithTasks(state) }), actions ) class Board extends Component { render() { const { addTask, columns } = this.props; return ( <div> { columns.map(column => <Column {...column} onAddTask={ () => addTask(column.id) } /> )} </div> ) } } 

import { connect } from 'react-redux' import * as actions
from "../actions" import { getColumnsWithTasks } from "../reducers" @connect( (state) => ({ columns: getColumnsWithTasks(state) }), actions ) class Board extends Component { render() { const { addTask, columns } = this.props; return ( <div> { columns.map(column => <Column {...column} onAddTask={ () => addTask(column.id) } /> )} </div> ) } }  import { Store } from '@ngrx/store'; import * as actions from '../actions'; import { getColumnsWithTasks } from '../reducers'; @Component({ selector: 'app-board', template: ` <div> <column *ngFor="let column of columns" [column]="column" (onAddTask)="this.store.dispatch( actions.addTask(column.id) )" /> </div>` }) export class Board { constructor(store: Store<any>){ this.actions = actions; this.store = store; store.subscribe(state => this.columns = getColumnsWithTasks(state) ); } }

I click here business logic how do we change data Framework-agnostic Webapps routes what pages do we have, when do we navigate between pages. talking to a server get, store and update data. data validation what is valid data? what is invalid data?

I click here business logic how do we change data Framework-agnostic Webapps routes what pages do we have, when do we navigate between pages. talking to a server get, store and update data. data validation what is valid data? what is invalid data? ⛔

I click here business logic how do we change data Framework-agnostic Webapps routes what pages do we have, when do we navigate between pages. talking to a server get, store and update data. data validation what is valid data? what is invalid data? ✅ ⛔

I click here business logic how do we change data Framework-agnostic Webapps routes what pages do we have, when do we navigate between pages. talking to a server get, store and update data. data validation what is valid data? what is invalid data? ✅ ✅ ⛔

I click here business logic how do we change data Framework-agnostic Webapps routes what pages do we have, when do we navigate between pages. talking to a server get, store and update data. data validation what is valid data? what is invalid data? ✅ ✅ ✅ ⛔

I click here business logic how do we change data Framework-agnostic Webapps routes what pages do we have, when do we navigate between pages. talking to a server get, store and update data. data validation what is valid data? what is invalid data? ✅ ✅ ⛔ ✅ ✅

I click here business logic how do we change data Framework-agnostic Webapps routes what pages do we have, when do we navigate between pages. talking to a server get, store and update data. data validation what is valid data? what is invalid data? ✅ ✅ ✅ ✅ ⛔

The exploration goes on… Implement a Vue.js kanban (through Vuex)
Add asynchronous actions (e.g.: store on ﬁrebase) Add routes (create a timeline view) Implement an Aurelia kanban (through aurelia-redux)

If you want to dig more: Getting Started with Redux
Course by Dan Abramov Building React Applications with Idiomatic Redux by Dan Abramov Build Redux Applications with Angular2, RxJS, and ngrx/store by John Lindquist Vuex — Vue.js State Management Pattern (inspired by redux)

@lucalanca

Framework-agnostic Web Applications with Redux

Framework-agnostic Web Applications with Redux

More Decks by João Figueiredo

Other Decks in Programming

Featured

Transcript