Tweet
Tweet

Slide 1

Slide 1 text

Universal JavaScript ? 肬禂 SOHO ෟ螲᪠螂 ၒݷ蜤(Jerry-Hong)

Slide 2

Slide 2 text

Ջ讕ฎ Universal JavaScript ?

Slide 3

Slide 3 text

Universal JavaScript • ኧ Isomorphic JavaScript Ӟ扃ᘒ㬵 • Isomorphic JavaScript 墋㻌藯ฎ ಩ Single Page Application و ݶ᪒ࣁ Client 现 Server Ӥ牧㬵薹究 SPA 癲㬵ጱ皃㮆㺔氂牐 • Universal JavaScript 蚤 Isomorphic JavaScript 磪Ջ讕癩獨牫 • ஑ض藳藳 Single Page Application

Slide 4

Slide 4 text

Single Page Application (SPA) • አ䜛誢涢 (User Experience) • 翕殷䛑አ纷ୗ玕 • 橕棎ਁ物 AJAX, Client-Side Render, Client-Side Router • ֺৼ物 Gmail, kkbox web player

Slide 5

Slide 5 text

Server-rendered Server-rendered + AJAX SPA Load Performance Dev Effort User Experence From: How instagram.com Works

Slide 6

Slide 6 text

匍ࣁ獮ᒒૡ纷䒍᮷ᥝٍ猋 SPA ጱ樄咳妿涢

Slide 7

Slide 7 text

螭䷱樄咳螂 SPA 䌕礯牧皃㮆ଉ憎ጱܻࢩ

Slide 8

Slide 8 text

1. 襑穩犋ᒧ 嘦䋿礓犚觊ࣳጱ䌕礯犋螕ݳ

Slide 9

Slide 9 text

2. 獮ᒒದ蔩虋矦ॡ盠牧 犋Ꭳ螇ᥝ䋊ߺӞॺ牦

Slide 10

Slide 10 text

䋿褬Ӥ匍ࣁ 獮ᒒ໛礍ጱݶ搡玕纷ଶ᩼㬵᩼ṛ牦

Slide 11

Slide 11 text

• زկ玕

Slide 12

Slide 12 text

class MyTitle extends Component { render() { return (

Hello World

); } } React زկ

Slide 13

Slide 13 text

Vue.component('my-title', { render(h) { return (

Hello World

); } }) Vue 2 زկ(JSX)

Slide 14

Slide 14 text

Vue.component('my-title', { template: '

Hello World

' }) Vue 2 زկ

Slide 15

Slide 15 text

@Component({ selector: 'my-title', template: '

Hello World

' }) class MyTitle { } NG 2 زկ

Slide 16

Slide 16 text

• زկ玕 • 㻌ݻ虻碘窕 • Flux • Redux • Vuex • CSS class scope • CSS module • web component • vue style scpoed • View 䍅羷ጱು虡玕 • Server-Side Render • Native app

Slide 17

Slide 17 text

• زկ玕 • 㻌ݻ虻碘窕 • Flux • Redux • Vuex • CSS Class Scope • CSS module • web component • vue style scpoed • View 䍅羷ጱು虡玕 • Server-Side Render • Native app

Slide 18

Slide 18 text

• زկ玕 • 㻌ݻ虻碘窕 • Flux • Redux • Vuex • CSS class scope • CSS module • web component • vue style scpoed • View 䍅羷ጱು虡玕 • Server-Side Render • Native app . . .

Slide 19

Slide 19 text

ྯॺአጱ薪盢犋䨝癩盄ग़牧疰೴㮆ࡅ稭ጱމ 2. 獮ᒒದ蔩虋矦ॡ盠牧犋Ꭳ螇ᥝ䋊 ߺӞॺ牦

Slide 20

Slide 20 text

3. SEO 㺔氂 Universal JavaScript 4. First Time Loading

Slide 21

Slide 21 text

Universal JavaScript - 犥 React / Redux 傶ֺ

Slide 22

Slide 22 text

च๜禊盢 • SPA ᑏ༙ک Server Ӥ吚狶 Template Engine 䁆ᤈ • ಩ SPA మ猟౮Ӟ㮆य़ Function (F)

Slide 23

Slide 23 text

F(n)

Slide 24

Slide 24 text

F(n) => HTML

Slide 25

Slide 25 text

च๜禊盢 • SPA ᑏ༙ک Server Ӥ䁆ᤈ牧Client 蚤 Server 䨝وአ蟂獤ጱ纷ୗ嘨 • ಩獮ᒒ໛礍మ猟౮Ӟ㮆 Function (F) • Ӟ㮆 request 蝱㬵䁆ᤈӞ稞 F 簁盅ࢧ㯽 HTML • ᒫӞ稞 request ԏ盅牧Client ᒒᤈ傶膏 SPA Ӟ膌

Slide 26

Slide 26 text

ই֜಩ SPA 硬౮ Universal JS? Բ㮆ྍ詽

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

ࢩ傶犋ݢ胼奞拻牧ಅ犥᯿讨硯ࣁ • य़膌ጱྍ詽 (1~ 5) • ଉ蝽憎ጱ㺔氂 • 斃֯ጱ薹究ොဩ

Slide 33

Slide 33 text

樄咳 Universal JS - Բ㮆ྍ詽

Slide 34

Slide 34 text

Step 1. 蒂ቘ Router

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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 = ( ); const content = ReactDOMServer.renderToString(component); ctx.response.type = 'text/html'; ctx.body = ` ... ${content}...` } });

Slide 38

Slide 38 text

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 • 磧盅狶梊藮蒂ቘ

Slide 39

Slide 39 text

Step 2. 蒂ቘ AJAX 㺔氂 • SPA ጱ礍䯤牧౯㮉䨝ࣁزկኞ޸蝰๗ ComponentDidMount 咳 AJAX • Server Render ݝ䨝䁆ᤈ ComponentWillMount 蚤 Render • Server Render ஠殾嘦狒 AJAX Response ಍䁆ᤈ Render

Slide 40

Slide 40 text

Step 2. 蒂ቘ AJAX 㺔氂 • 薹究ොဩҁ䢔Ӟ҂ • ࣁ Server Render 獮瞟ڊྯ㮆殷ᶎزկጱ覌眲痀௔ • redux-async-connect • async-props • ڥአ React-Router ጱ onEnter 痀௔咳 API (വ萃) • 硬አ universal-router

Slide 41

Slide 41 text

@fetchData((dispatch, state, routeState, replace) => { return dispatch(getAllArticle()); }) class Home extends Component { ... } // fetchData(...)(Home)

Slide 42

Slide 42 text

Slide 43

Slide 43 text

// 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; }

Slide 44

Slide 44 text

Step 3. 蒂ቘ虻碘ݶྍ㺔氂 • 吚౯㮉 Server Render ਠ牧HTML 㯽ࢧ倵薩瑊牧倵薩瑊䁆ᤈਠ JS 䨝 ࣁ Client Render Ӟ稞牧֕種碻 Client ䷱磪ਠ碉虻碘牧䨝蝨౮ Render 犋Ӟ膌

Slide 45

Slide 45 text

Step 3. 蒂ቘ虻碘ݶྍ㺔氂 • 薹究ොဩ • Server Render 碻牧಩虻碘लک HTML • Client Render ԏ獮牧玲ڊ虻碘֢傶䛑አ纷ୗጱ ڡত制眲 (initialState)

Slide 46

Slide 46 text

const store = createStore(); const childRoutes = createRoute(store); match({ routes: childRoutes, location: ctx.request.url }, (error, redirectLocation, renderProps) => { ... ctx.body = ` ... ${content}... window.reduxState = ${JSON.stringify(store.getState())
 ` });

Slide 47

Slide 47 text

Step 4. 蒂ቘ 覌眲䲆礯秇奲 㺔氂 • 樄咳 SPA ֵአ webpack 碻牧䨝಩覌眲䲆礯吚֢ JS ጱ秇奲ֵአ • css-loader • url-loader • NodeJS ䷱旰ဩ斉獈蝡犚䲆礯

Slide 48

Slide 48 text

Step 4. 蒂ቘ 覌眲䲆礯秇奲 㺔氂 • 薹究ොဩҁ䢔Ӟ҂ • አ webpack bundle server code (വ萃) • 硯祌ࣁ js Ӿ斉獈瑽䲆 • 瑽䲆ፗ矑妔᪠䕩 • CSS Module物 ے獈 css-modules-require-hook

Slide 49

Slide 49 text

var nodeExternals = require('webpack-node-externals'); ... module.exports = { ... target: 'node', externals: [nodeExternals()] ... }; Step 4 - Bundle node • 戔ਧ target 傶 node • ے獈 webpack-node- externals hint:ᥝ戔ਧ context 痀௔

Slide 50

Slide 50 text

Step 5. 戔ਧ 絑ह虋碍 • ࢩ傶纷ୗ嘨ݶ碻᪒ࣁ Server 蚤 Client牧ࣁ蒂ቘ礓犚㺔氂碻襑ᥝ狅ᆙಅ ࣁ絑ह狶犋ݶ蒂ቘ • 蝚螂 webpack 戔ਧ絑ह虋碍

Slide 51

Slide 51 text

new webpack.DefinePlugin({ 'process.env.BROWSER': true })) new webpack.DefinePlugin({ 'process.env.BROWSER': false })) webpack-server.config.js webpack.config.js

Slide 52

Slide 52 text

狅ᆙ蝡Բ㮆ྍ詽牧疰ݢ犥ਠ౮
 च๜ጱ Universal JavaScript 䌕礯

Slide 53

Slide 53 text

狶ԧ蝡讕ग़Ԫ眐牧疰傶ԧ薹究 
 SEO 蚤 First Time Loading 独஑㻟牫

Slide 54

Slide 54 text

ٌ䋿 Universal JavaScript ฎ 愆᪃ԧ盅ᒒ MVC ጱ View

Slide 55

Slide 55 text

ๅঅጱزկ੗蕕 • 盅ᒒ MVC View ጱزկ੗蕕㺔氂 • 盅ᒒ樄咳Ո㹓䌕ဳࣁ虻碘牧盄櫞ဳ఺ک HTML 奾䯤 • Universal JavaScript • 蚤 Client SPA وአ View牧ᤩ䔶蝁狶অزկ獥獹

Slide 56

Slide 56 text

Critical Render Path

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

CSS Critical Render Path • 傶 CSS 㯽蝑蝱ᤈ磧֯玕蒂ቘ • 疥吚獮殷ᶎአکጱ Style 硯ک head牧㪔皤螛斉獈碉۱ CSS • 㯽翄ጱ㵕眲翕ᒊӞፗ᮷䷱磪盄অጱ薹究ො礯 • Universal JavaScript 斕誫薹究

Slide 61

Slide 61 text

Universal JavaScript 薹究ොဩ • 䟖አ isomorphic-style-loader • ࣁ Render 獮硩褸๜殷ᶎጱ style 㪔लک head for react-router: https://goo.gl/PYYoLL

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

磧盅...

Slide 66

Slide 66 text

̽CSS Secret̾ጱ֢ᘏ Lea Verou ࣁ我藳 Ӿ൉现牧ই֜፡盃 CSS in JS ? 我藳蝫奾物http://www.ituring.com.cn/article/261344

Slide 67

Slide 67 text

– Lea Verou, CSS Secret ֢ᘏ ̿If all you have is a hammer, everything looks like a nail.̀

Slide 68

Slide 68 text

෎腭瑿藯牧Lea Verou 梊ԧ

Slide 69

Slide 69 text

㪔犋ฎࢩ傶
 ౯㮉磪Ӟ಩袊ৼ牧ಅ犥፡Ջ讕᮷猟朸ৼ

Slide 70

Slide 70 text

ᘒฎ JavaScript 胼狶کጱԪ眐ॡग़ԧ 猟ฎӞݣ́ 3D 玢蔭秚͂

Slide 71

Slide 71 text

ᘒ HTML 蚤 CSS 疰ฎ蝡ݣ 3D 玢蔭秚ጱᔰ๭

Slide 72

Slide 72 text

猟ฎ౯㮉獮ᶎ൉ጱ CSS-Module

Slide 73

Slide 73 text

螭磪 React-Native 犖ฎ㮆盄অጱֺৼ

Slide 74

Slide 74 text

盅㬵౯㮉妔ԧ蝡ݣ 3D 玢蔭秚Ӟ㮆ݷਁ

Slide 75

Slide 75 text

Universal JavaScript

Slide 76

Slide 76 text

眤蘛肔肯牧Q&A