Post on 24-Jan-2017
Universal JavaScript - React
_AGENDA
_AGENDA
CZĘŚĆ 00 _INTRO
CZĘŚĆ 01 _CZYM JEST UNIVERSAL JAVASCRIPT
CZĘŚĆ 02 _UNIVERSAL JAVASCRIPT I REACT
CZĘŚĆ 03 _TRANSMIT
CZĘŚĆ 04 _REDUX
CZĘŚĆ 05 _ZAGROŻENIA I PROBLEMY
- Projekty dla międzynarodowych marek - innowacje, software, web apps
- Prawie 4 lata na rynku, 40 osób na pokładzie
- Zwycięzcy Hacksummit() Global Hackathon
_INTRO
CZYM JEST UNIVERSAL JAVASCRIPT?
_CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
_UNIVERSAL SPA
_CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
_ZALETY
_CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
- Poprawa SEO w przypadku przeglądarek nie wspierających analizy JavaScript (Yandex, Baidu, Bing, Yahoo)
- Przyśpieszenie czasu ładowania strony- Zapobieganie FOUC (Flash of Unstyled Content)
_TECHNOLOGIE
_CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
- React- Transmit- Redux- Universal Angular 2
UNIVERSAL JAVASCRIPT I REACT
_WSPARCIE ZE STRONY REACT
_CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT
- Virtual DOM- react-dom/server- Reużywanie aplikacji
_RENDEROWANIE CLIENT-SIDE
_CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT
import ReactDOM from 'react-dom';import App from './app';
const reactRoot = window.document.getElementById('react-root');
ReactDOM.render(<App/>);
_RENDEROWANIE SERVER-SIDE
_CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT
import {Server} from 'hapi';import ReactDOM from 'react-dom/server';import App from './App';
const server = new Server();server.connection({host: 'localhost', port: '8080'});
server.ext('onPreResponse', (requst, reply) => { reply(`<html> <head></head> <body> <div id="react-root">${ReactDOM.renderToString(< App/>)}</div> </body> </html>`);});
TRANSMIT
_TRANSMIT CONTAINER
_CZĘŚĆ 03: TRANSMIT
import Transmit from 'transmit';import React, {Component} from 'react';
class App extends Component { render() { return <div>Hello {this.props.user}!</div>; }}
export default Transmit.createContainer (App, { fragments: { user: Promise.resolve('John Smith') }});
_TRANSMIT RENDER
_CZĘŚĆ 03: TRANSMIT
Transmit.render(<App/>);
Transmit.renderToString (<App/>);
REDUX
_FETCH COMPONENT DATA
_CZĘŚĆ 04: REDUX
function fetchComponentData(dispatch, components, params) { const needs = components.reduce((prev, current) => { return current ? (current. needs || []).concat(prev) : prev; }, []);
const promises = needs.map(need => dispatch(need(params)));
return Promise.all(promises);}
_PROMISE MIDDLEWARE
_CZĘŚĆ 04: REDUX
function promiseMiddleware() { return next => action => { const {promise, type, ...rest} = action; if (!promise) return next(action);
const SUCCESS = type; const REQUEST = type + '_REQUEST'; const FAILURE = type + '_FAILURE';
next({... rest, type: REQUEST});
return promise .then(res => {next({... rest, res, type: SUCCESS}); return true;}) .catch(error => {next({... rest, error, type: FAILURE}); return false;}); };}
_COMPONENT
_CZĘŚĆ 04: REDUX
class App extends Component { render() { return ( <div>Hello world!</ div> ); }
static needs = [ someAction ];}
_RENDEROWANIE SERVER-SIDE
_CZĘŚĆ 04: REDUX
import {Server} from 'hapi';import ReactDOM from 'react-dom/server';import App from './App';import store from './store';
const server = new Server();server.connection({host: 'localhost', port: '8080'});
server.ext('onPreResponse', (requst, reply) => { reply(`<html> <head></head> <body> <div id="react-root">${ReactDOM.renderToString(< App/>)}</div> </body> <script>window.__INITIAL_STATE__ = ${JSON.stringify(store.getState())}</script> </html>`);});
PROBLEMY I ZAGROŻENIA
_ZAGROŻENIA I PROBLEMY
_CZĘŚĆ 05: ZAGROŻENIA I PROBLEMY
- Zwiększenie skomplikowania architektury aplikacji- Brak window, document, etc. po stronie serwera aplikacji- Trudniejsze debugowanie- Niespójność wyrenderowanych aplikacji
_ZAGROŻENIA I PROBLEMY
_CZĘŚĆ 05: ZAGROŻENIA I PROBLEMY