f: data \rightarrow UI

Szkolenia wewnętrzne:

typescript
webpack
react
redux

spring boot
java 8
docker
git

function sum(orders) {
  let result = 0;
  for (let i = 0; i < orders.length; i++) {
    const order = orders[i];
    if (orders.active) {
      result += order.price;
    }
  }
  return result;
}

const sum = (orders) => orders
    .filter(i => i.active)
    .map(i => i.price)
    .reduce((a, b) => a + b, 0)

Zalety?

Immutability

Niezmienność

f: X \rightarrow Y

Przyporządkowanie każdemu elementowi zbioru X dokładnie jednego elementu zbioru Y

Przewidywalność

const orders = await db.collection("order")
    .find(query)
    .toArray();

const emails = orders
    .map(order => order.customer)
    .map(cust => `${cust.name} <${cust.email}>`)
    .join(';');

Photo credit:

Kym-cdn.com

Funkcyjnie UI?

elm

ReactDOM.render(
  <App input={data}/>, 
  document.getElementById('root')
)

If the React element was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.

const Price = ({value}) => 
  <i>{value.toFixed(2)} zł</i>

<Price value={100/3}/>

33.33 zł

Flux

architecture pattern
unidirectional data flow

Redux

// index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import TodoListContainer 
  from './containers/TodoListContainer'

const store = createStore(rootReducer)

render(
  <Provider store={store}>
    <TodoListContainer />
  </Provider>,
  document.getElementById('root')
)

// components/TodoList.jsx

const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)

export default TodoList;

//TodoListContainer.js 
import { connect } from 'react-redux'
import TodoList from '../components/TodoList'

const mapStateToProps = state => ({
  todos: state.todos.filter(t => !t.completed)
})

const mapDispatchToProps = dispatch => ({
  toggleTodo: id => dispatch({
    id,
    type: 'TOGGLE_TODO'
  })
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

// reducers/index.js

import todos from './todos'
import filter from './filter'

const rootReducer = (state = {}, action) => ({
  filter: 
    filter(state.filter, action),

  todos: todos(state.todos, action)
})

export default rootReducer;

// reducers/todos.js
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, {
          id: action.id,
          text: action.text,
          completed: false
      }]
    case 'TOGGLE_TODO':
      return state.map(todo =>
        (todo.id === action.id)
          ? {...todo, completed: !todo.completed}
          : todo )
    default:
      return state
  }
}
export default todos

{
  "filter": "SHOW_ALL",
  "todos": [
    {
      "id": 4,
      "text": 
        "Buy groceries",
      "completed": false
    },
    {
      "id": 5,
      "text": 
        "Clean up the attic",
      "completed": false
    }
  ]
}

App

FilterContainer

Filter

TodoContainer

TodoList

{
  "filter": "SHOW_ALL",
  "todos": [
    {
      "id": 4,
      "text": 
        "Buy groceries",
      "completed": false
    },
    {
      "id": 5,
      "text": 
        "Clean up the attic",
      "completed": false
    }
  ]
}

<App>
  <Filter/>
  <TodoList/>
</App>

{
  "filter": "SHOW_ALL",
  "todos": [
    {
      "id": 4,
      "text": 
        "Buy groceries",
      "completed": false
    },
    {
      "id": 5,
      "text": 
        "Clean up the attic",
      "completed": false
    }
  ]
}

<App>
  <Filter/>
  <TodoList/>
</App>

UI:=App(store)

firebase
  .firestore()
  .collection("orders")
  .onSnapshot(snapshot =>
    ReactDOM.render(
        <App store={asArray(snapshot)}/>,
        document.querySelector('#root')
    )
);

ReactDOM.render(
  <App store={{orders: []}} />,
  document.getElementById('root')
)

ReactDOM.render(
  <App store={{orders: []}} />,
  document.getElementById('root')
)

firebase.firestore()
  .collection('orders')
  .onSnapshot(snap =>
    console.log(asArray(snap))
  )

function render(data) {
  ReactDOM.render(
    <App store={data} />,
    document.getElementById('root')
  )
}

render({orders: []});

function render(data) {
  ReactDOM.render(
    <App store={data} />,
    document.getElementById('root')
  )
}
render({orders: []});

firebase.firestore()
  .collection('orders')
  .onSnapshot(snap =>
    render({orders: asArray(snap)})
  )

Tracker.autorun(() => {
  const store = {
    orders: Orders.find().fetch()
  });

  ReactDOM.render(
    <App store={store}/>, 
    document.getElementById('root')
  );
});

Meteor

\rightarrow

Przewidywalność
Powtarzalność
Prostota

Koncept

Implementacja

careers@lingaro group .com