Universal JavaScript with React
•
0 j'aime•398 vues
Pisanie aplikacji typu SPA za pomocą Reacta i Reduxa i renderowanie ich na backendzie dzięki NodeJS pozwala na znaczące obniżenie czasu ładowania strony i automatyczne indeksowanie przez przeglądarki takie jak Bing, Yahoo, Baidu czy Yandex. Prezentacja została omówiona podczas spotkania meet.js Poznań. Writing an SPA using React and Transmit, and rendering these apps via NodeJS server speeds up the loading process and allows for the web page to be automatically indexed even by browsers such as Bing, Yahoo, Baidu and Yandex.
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
Universal JavaScript with React
- 1. Universal JavaScript - React
- 2. _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
- 3. - 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
- 5. _CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
- 6. _UNIVERSAL SPA _CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
- 7. _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)
- 8. _TECHNOLOGIE _CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT - React - Transmit - Redux - Universal Angular 2
- 10. _WSPARCIE ZE STRONY REACT _CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT - Virtual DOM - react-dom/server - Reużywanie aplikacji
- 11. _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/>);
- 12. _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>`); });
- 13. TRANSMIT
- 14. _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') } });
- 15. _TRANSMIT RENDER _CZĘŚĆ 03: TRANSMIT Transmit.render(<App/>); Transmit.renderToString (<App/>);
- 16. REDUX
- 17. _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); }
- 18. _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;}); }; }
- 19. _COMPONENT _CZĘŚĆ 04: REDUX class App extends Component { render() { return ( < div>Hello world!</ div> ); } static needs = [ someAction ]; }
- 20. _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>`); });
- 22. _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
- 23. _ZAGROŻENIA I PROBLEMY _CZĘŚĆ 05: ZAGROŻENIA I PROBLEMY
- 24. PYTANIA?