Download as PDF, PPTX
![var nodeExternals = require('webpack-node-externals'); ... module.exports = { ... target: 'node', externals: [nodeExternals()] ... }; Step 4 - Bundle node • target node • webpack-node- externals hint: context](https://image.slidesharecdn.com/jsdc-161023034045/75/Universal-JavaScript-49-2048.jpg)
Uploaded by名辰 洪
Universal JavaScript
Universal JavaScript allows rendering the same JavaScript code on both the server and client. It involves: 1. Server-rendering the initial HTML and JavaScript for faster load times and SEO. 2. Hydrating the server-rendered app with client-side JavaScript to support interactivity. 3. Bundling both server and client code together to share components and logic between server and client rendering.
Universal JavaScript
- 1.
- 2.
- 3. Universal JavaScript • IsomorphicJavaScript • Isomorphic JavaScript Single Page Application Client Server SPA • Universal JavaScript Isomorphic JavaScript • Single Page Application
- 4. Single Page Application(SPA) • (User Experience) • • AJAX, Client-Side Render, Client-Side Router • Gmail, kkbox web player
- 5. Server-rendered Server-rendered +AJAX SPA Load Performance Dev Effort User Experence From: How instagram.com Works
- 6.
- 7.
- 8.
- 9.
- 11.
- 12. class MyTitle extendsComponent { render() { return ( <h1>Hello World</h1> ); } } React
- 13. Vue.component('my-title', { render(h) { return( <h1>Hello World</h1> ); } }) Vue 2 (JSX)
- 14. Vue.component('my-title', { template: '<h1>HelloWorld</h1>' }) Vue 2
- 15. @Component({ selector: 'my-title', template: '<h1>HelloWorld</h1>' }) class MyTitle { } NG 2
- 16. • • • Flux • Redux •Vuex • CSS class scope • CSS module • web component • vue style scpoed • View • Server-Side Render • Native app
- 17. • • • Flux • Redux •Vuex • CSS Class Scope • CSS module • web component • vue style scpoed • View • Server-Side Render • Native app
- 18. • • • Flux • Redux •Vuex • CSS class scope • CSS module • web component • vue style scpoed • View • Server-Side Render • Native app . . .
- 19.
- 20. 3. SEO Universal JavaScript 4.First Time Loading
- 21. Universal JavaScript - React/ Redux
- 22. • SPA ServerTemplate Engine • SPA Function (F)
- 23.
- 24.
- 25. • SPA ServerClient Server • Function (F) • request F HTML • request Client SPA
- 26.
- 32.
- 33.
- 34.
- 35. 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
- 36. 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
- 37. 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>` } });
- 38. 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 •
- 39. Step 2. AJAX •SPA ComponentDidMount AJAX • Server Render ComponentWillMount Render • Server Render AJAX Response Render
- 40. Step 2. AJAX • •Server Render • redux-async-connect • async-props • React-Router onEnter API ( ) • universal-router
- 41. @fetchData((dispatch, state, routeState,replace) => { return dispatch(getAllArticle()); }) class Home extends Component { ... } // fetchData(...)(Home)
- 42. <Route component={ App}> <Route path="/" component={ Home } onEnter={ Home.onEnter(store) }/> </Route>
- 43. // fetchData.js export defaultfetchCall => 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; }
- 44. Step 3. • ServerRender HTML JS Client Render Client Render
- 45. Step 3. • • ServerRender HTML • Client Render (initialState)
- 46. 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>` });
- 47. Step 4. • SPAwebpack JS • css-loader • url-loader • NodeJS
- 48. Step 4. • • webpackbundle server code ( ) • js • • CSS Module css-modules-require-hook
- 49. var nodeExternals = require('webpack-node-externals'); ... module.exports= { ... target: 'node', externals: [nodeExternals()] ... }; Step 4 - Bundle node • target node • webpack-node- externals hint: context
- 50. Step 5. • ServerClient • webpack
- 51. new webpack.DefinePlugin({ 'process.env.BROWSER': true })) newwebpack.DefinePlugin({ 'process.env.BROWSER': false })) webpack-server.config.js webpack.config.js
- 52.
- 53. SEO First TimeLoading
- 54.
- 55. • MVC View •HTML • Universal JavaScript • Client SPA View
- 56.
- 60. CSS Critical RenderPath • CSS • Style head CSS • • Universal JavaScript
- 61. Universal JavaScript • isomorphic-style-loader •Render style head for react-router: https://goo.gl/PYYoLL
- 65.
- 66. CSS Secret LeaVerou CSS in JS ? http://www.ituring.com.cn/article/261344
- 67. – Lea Verou,CSS Secret If all you have is a hammer, everything looks like a nail.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.