Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Universal JavaScript

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
You will learn RxJS in 2017
You will learn RxJS in 2017
Cargando en…3
×

Eche un vistazo a continuación

1 de 76 Anuncio
Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a Universal JavaScript (20)

Anuncio

Más reciente (20)

Universal JavaScript

  1. 1. Universal JavaScript ? SOHO (Jerry-Hong)
  2. 2. Universal JavaScript ?
  3. 3. Universal JavaScript • Isomorphic JavaScript • Isomorphic JavaScript Single Page Application Client Server SPA • Universal JavaScript Isomorphic JavaScript • Single Page Application
  4. 4. Single Page Application (SPA) • (User Experience) • • AJAX, Client-Side Render, Client-Side Router • Gmail, kkbox web player
  5. 5. Server-rendered Server-rendered + AJAX SPA Load Performance Dev Effort User Experence From: How instagram.com Works
  6. 6. SPA
  7. 7. SPA
  8. 8. 1.
  9. 9. 2.
  10. 10.
  11. 11. class MyTitle extends Component { render() { return ( <h1>Hello World</h1> ); } } React
  12. 12. Vue.component('my-title', { render(h) { return ( <h1>Hello World</h1> ); } }) Vue 2 (JSX)
  13. 13. Vue.component('my-title', { template: '<h1>Hello World</h1>' }) Vue 2
  14. 14. @Component({ selector: 'my-title', template: '<h1>Hello World</h1>' }) class MyTitle { } NG 2
  15. 15. • • • Flux • Redux • Vuex • CSS class scope • CSS module • web component • vue style scpoed • View • Server-Side Render • Native app
  16. 16. • • • Flux • Redux • Vuex • CSS Class Scope • CSS module • web component • vue style scpoed • View • Server-Side Render • Native app
  17. 17. • • • Flux • Redux • Vuex • CSS class scope • CSS module • web component • vue style scpoed • View • Server-Side Render • Native app . . .
  18. 18. 2.
  19. 19. 3. SEO Universal JavaScript 4. First Time Loading
  20. 20. Universal JavaScript - React / Redux
  21. 21. • SPA Server Template Engine • SPA Function (F)
  22. 22. F(n)
  23. 23. F(n) => HTML
  24. 24. • SPA Server Client Server • Function (F) • request F HTML • request Client SPA
  25. 25. SPA Universal JS?
  26. 26. • (1~ 5) • •
  27. 27. Universal JS -
  28. 28. Step 1. Router
  29. 29. app .use(compress()) .use(serve('./static'))) .use(router.routes()) .use(serverRender) .use(errorBoot) .listen(process.env.PORT || 8080, () => { console.log('listen 3000') }); Step 1 - Router • Server Router API
  30. 30. app .use(compress()) .use(serve('./static'))) .use(router.routes()) .use(serverRender) .use(errorBoot) .listen(process.env.PORT || 8080, () => { console.log('listen 3000') }); Step 1 - Router • Server Router API • Server Render
  31. 31. const store = createStore(); const childRoutes = createRoute(store); match({ routes: childRoutes, location: ctx.request.url }, (error, redirectLocation, renderProps) => { if (error) { // 500 } else if (redirectLocation) { // 300 } else if (renderProps) { const component = ( <Provider store={ store }> <RouterContext { ...renderProps }/> </Provider> ); const content = ReactDOMServer.renderToString(component); ctx.response.type = 'text/html'; ctx.body = `<!DOCTYPE html> ... ${content}...</html>` } });
  32. 32. app .use(compress()) .use(serve('./static'))) .use(router.routes()) .use(serverRender) .use(errorBoot) .listen(process.env.PORT || 8080, () => { console.log('listen 3000') }); Step 1 - Router • Server Router API • Server Render •
  33. 33. Step 2. AJAX • SPA ComponentDidMount AJAX • Server Render ComponentWillMount Render • Server Render AJAX Response Render
  34. 34. Step 2. AJAX • • Server Render • redux-async-connect • async-props • React-Router onEnter API ( ) • universal-router
  35. 35. @fetchData((dispatch, state, routeState, replace) => { return dispatch(getAllArticle()); }) class Home extends Component { ... } // fetchData(...)(Home)
  36. 36. <Route component={ App }> <Route path="/" component={ Home } onEnter={ Home.onEnter(store) }/> </Route>
  37. 37. // fetchData.js export default fetchCall => Component => { Component.onEnter = (store) => (nextState, replace, callback) => { const result = fetchCall( store.dispatch, store.getState(), nextState, replace) || Promise.resolve(true); if(typeof window === 'undefined') { result.then(() => callback()) .catch((error) => callback(error)) } else { callback(); } } return Component; }
  38. 38. Step 3. • Server Render HTML JS Client Render Client Render
  39. 39. Step 3. • • Server Render HTML • Client Render (initialState)
  40. 40. const store = createStore(); const childRoutes = createRoute(store); match({ routes: childRoutes, location: ctx.request.url }, (error, redirectLocation, renderProps) => { ... ctx.body = `<!DOCTYPE html> ... ${content}... <script> window.reduxState = ${JSON.stringify(store.getState())
 </script> </html>` });
  41. 41. Step 4. • SPA webpack JS • css-loader • url-loader • NodeJS
  42. 42. Step 4. • • webpack bundle server code ( ) • js • • CSS Module css-modules-require-hook
  43. 43. var nodeExternals = require('webpack-node-externals'); ... module.exports = { ... target: 'node', externals: [nodeExternals()] ... }; Step 4 - Bundle node • target node • webpack-node- externals hint: context
  44. 44. Step 5. • Server Client • webpack
  45. 45. new webpack.DefinePlugin({ 'process.env.BROWSER': true })) new webpack.DefinePlugin({ 'process.env.BROWSER': false })) webpack-server.config.js webpack.config.js
  46. 46. 
 Universal JavaScript
  47. 47. 
 SEO First Time Loading
  48. 48. Universal JavaScript MVC View
  49. 49. • MVC View • HTML • Universal JavaScript • Client SPA View
  50. 50. Critical Render Path
  51. 51. CSS Critical Render Path • CSS • Style head CSS • • Universal JavaScript
  52. 52. Universal JavaScript • isomorphic-style-loader • Render style head for react-router: https://goo.gl/PYYoLL
  53. 53. ...
  54. 54. CSS Secret Lea Verou CSS in JS ? http://www.ituring.com.cn/article/261344
  55. 55. – Lea Verou, CSS Secret If all you have is a hammer, everything looks like a nail.
  56. 56. Lea Verou
  57. 57.
  58. 58. JavaScript 3D
  59. 59. HTML CSS 3D
  60. 60. CSS-Module
  61. 61. React-Native
  62. 62. 3D
  63. 63. Universal JavaScript
  64. 64. Q&A

×