2017年 WebFrontendの今後と変化への対応(社内向け)

Slide 1

Slide 1 text

2017 Guide of Web Frontend

Slide 2

Slide 2 text

せ⵸: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn

Slide 3

Slide 3 text

ؿٗٝزؒٝسך ➙ה➙䖓׾鷄ֲ⵸ח 湡תּ׷׃ֻ㢌׻׷ؿٗٝزؒٝسך䪮遭٥زٖٝس׾׬װ׫ח 鷄ְַֽ׷⵸חծ剑׮㣐✲זֿהָ֮׷կ ׉׸כ㛇燉ד֮׷կ ו׿ז鹌⻉٥㢌⻉׮㛇燉ך琎׫ꅾיד׃ַזְկ 䪮遭٥زٖٝسך葺׃䝤׃׾鋅䫙ֻ׋׭ח׮ javascript٥css٥htmlך㛇燉׾׃׏ַ׶㔿׭׷ֿהկ ؿٗٝزؒٝسָ晙䩛꟦ך儗➿כ傀ח穄׻׏גְ׷կ

Slide 4

Slide 4 text

؝،䪮遭

Slide 5

Slide 5 text

ServiceWorker Service Wokerהכծwhatwgח״׏ג㹀纏ׁ׸׋Webך➬圫דծ Webل٦آךغحؙؚٓؐٝسד⹛⡲ׅ׷➬穈׫կ ServiceWorker׾ⵃ欽ׅ׷ֿהדծַאגכjavascriptַ׵鍗׸ ׷ֿהךדֹזַ׏׋ծـٓؐؠךطحزٙ٦ؙؙٔؒأزח ➜Ⰵׅ׷ֿהָדֹ׷״ֲחז׏׋կ ת׋䖓鶢ׅ׷PWAהְֲ罋ִ倯ך؝،הז׷䪮遭ד֮׶ծ ➙䖓妀ַׇזְ䪮遭הז׷〳腉䚍ָ넝ְկ

Slide 6

Slide 6 text

Browser ServiceWorker Server fetch event fetch if no cache Caced response response Browser ServiceWorker install event waiting ⴱ㔐 ✳㔐湡⟃꣬

Slide 7

Slide 7 text

ES6 Modules ES6 ModulesכEcmascript 6ד㹀纏ׁ׸׋ծ javascriptךٌآُ٦ٕ➬圫կ ֿ׸תד窟♧ׁ׸׋ٌآُ٦ٕ➬圫ָ㶷㖈׃זַ׏׋ javascript⚅歲חאְח窟♧涸זٌآُ٦ٕ➬圫ָ㹋鄲ׁ׸׋կ 植㖈Safari٥Google Chrome Canary M60+ד⹛⡲ׅ׷կ script type="module"׮鷄⸇ׁ׸׋կ

Slide 8

Slide 8 text

import fs from 'fs'; import util from '../util'; import { Anything } from '../something'; export class MainClass { }

Slide 9

Slide 9 text

import './Bmodule' import './Dmodule' Module A import './Cmodule' Module B Module C Module D

Slide 10

Slide 10 text

ES2017 Ecmascriptך剑倜➬圫կ 2017/07/03ٔٔ٦أկ async٥await瘝ךꬊず劍Ⳣ椚堣腉ծ Object.entries瘝ךِ٦ذ؍ٔذ؍ ך鷄⸇կ Atomic/SharedArrrayBuﬀer瘝ךوٕ ثأٖحس㹋鄲ך鷄⸇կ 暴חasync٥awaitכֿ׸ַ׵ךꬊず劍Ⳣ椚ך⚥呌הז׏גֻ׷׮ךז ךדծ椚鍑כ䗳갭կ

Slide 11

Slide 11 text

async function request() {! return await fetch('https://ex.com/');! }! ! async function main() {! const result = await request();! const json = await result.json();! console.log(json);! }! ! main();!

Slide 12

Slide 12 text

Typescript & Flowtype 㘗➰ֹךjavascript׾鎸鶢דֹ׷կ Typescriptכjavascriptה✼䳔䚍כ֮ ׷ָծ ⴽ鎉铂ה׃ג杝甧׃ג㶷㖈׃ծ Flowtypeכ傀㶷ךjavascriptח䖓➰ ד㘗׾㹀纏ׅ׷ֿהָדֹ׷կ

Slide 13

Slide 13 text

WebAssembly ـٓؐؠ♳ד㹋遤〳腉זغ؎ز؝٦سך➬圫կ 植㖈GoogleChromeד㹋遤〳腉կ C++װRustַ׵؝ٝػ؎ٕׅ׷ֿהדـٓؐؠ♳ד㹋遤〳腉זغ ؎شٔ׾欰䧭ׅ׷ֿהָדֹ׷կ 鸞䏝כת׌涪㾜鷿♳׌ָծ♧鿇ـٓؐؠ؜٦ي瘝ח׮䱰欽ׁ׸㨣 ׭גְ׷կ

Slide 14

Slide 14 text

HTTP/2.0 HTTP/2.0כGoogleךspdyָ⵸魦ה ז׏׋ծHTTP/1.1ך䖓竰կ Webך넝鸞⻉׾湡䭷׃ג㹋鄲ׁ׸ծ 2015䎃ח➬圫ָ䪫钠ׁ׸׋կ HTTP/1.1ך剑㣐ך㉏겗ד֮׏׋1䱸竲֮׋׶ךػؿؓ٦وٝأ׾何㊣ ׅ׷׋׭ծ أزٔ٦ي׾ⵃ欽׃ծ䱸竲׾㢳ꅾ ⻉ׅ׷ֿהדծ넝鸞ז鷏「⥋׾〳腉ח׃׋կ

Slide 15

Slide 15 text

Client Server Client Server Client request style.css response style.css request index.js response index.js HTTP/1.1 Client Server1 Client request style.css request index.js response style.css response index.js HTTP/2.0

Slide 16

Slide 16 text

PWA Progressive Web Application Progressive Web ApplicationהכծGoogleח״׏ג䲿㈖ׁ׸׋ ״׶،فٔٓ؎ؙזWeb،فٔ؛٦ءّٝךֿהדծ ServiceWorkerח״׷؝ٝذٝخٍؗحءُװApp Shellػة٦ ٝ׾ⵃ欽׃׋鏣鎘׾遤ֲֿהדծ״׶넝鸞ד،فٔך״ֲח澓儗חل٦آ׾邌爙ׅ׷ֿהָ〳腉חז׷կ 暴חApp Shellח꫼涸ז邌爙銲稆׾תה׭גServiceWorkerד Cacheׅ׷ֿהד㛇劤涸זٖ؎،ؐزָ澓儗ח圓眠ׁ׸׷״ֲ חז׷կ

Slide 17

Slide 17 text

Endpoint 1 Endpoint 2 Endpoint 3 ServiceWorker Browser Content Server index.html Navigation Header Footer App shell Reuqest if not cached Precache other pages Get content Get cached content Minimum stable static content

Slide 18

Slide 18 text

AMP accelerated mobile pages AMPהכGoogleח״׏ג㹋鄲٥䱿㤺ׁ׸גְ׷넝鸞זٌغ؎ٕ ل٦آךֿהדծ鸐䌢ךjavascript٥htmlכ⢪欽דֹזְ➿׻׶ חծ澓儗חل٦آָ邌爙ׁ׸׷圫ז넝鸞זل٦آ׾⡲䧭〳腉ז 䪮遭կ ׋׌׃ծGoogleח钠㹀ׁ׸׋ةؚ٥js׃ַ⹛ַזְךדծ Googleח㔲ְ鴥ת׸׋䪮遭ד֮׷הְֲ钠陎כ׃גְֶ׋倯ָ ְְկ

Slide 19

Slide 19 text

ׁ׵ח劢勻פ

Slide 20

Slide 20 text

Foreign Fetch ServiceWorker׾3rd partyسً؎ٝOriginךٖأهٝأقحتח 䭷㹀ׅ׷ֿהדծ3rd PartyךService Workerָ涫ꐮדֹ׷կ ׁ׵ח3rd PartyךService Workerכⴽل٦آַ׵ؙٔؒأزׁ ׸ג׮ؙٔؒأز⯓ָずׄז׵לⱄⵃ欽ׁ׸׷կ תׁחًر؍،׾埆倖ׅ׷ծ䎢デ禸ךjavascriptةؚחֲ׏גא ֽך堣腉ד֮׷կ ׋׌׃ծת׌Origin Triralsזךד⢪ִזְָ…

Slide 21

Slide 21 text

Ad Server Browser ServiceWorker Client A Media response header Link sw.js; rel="serviceworker" 3rd party ServiceWorker Client B Media

Slide 22

Slide 22 text

ES2018 Async Iterationծdynamic importծ Rest/Spread Property瘝ך堣腉鷄⸇կ 暴חAsync Iterationכꬊず劍Ⳣ椚׾ 㣐ֹֻ㢌⻉ׇׁ׷ךד銲岣湡կ

Slide 23

Slide 23 text

async function wait(t) {! return new Promise(resolve => setTimeout(resolve, t))! }! async function* infinity() {! for (let i = 0;;i++) {! yield i;! }! }! ! async function main() {! for await (const count of infinity()) {! console.log(count);! await wait(1000);! }! }! ! main();!

Slide 24

Slide 24 text

WebComponents ShadowDOMח״׏ג⼒ⴖ׵׸׋أ؝٦فך⚥חHTML+javascript +stylesheet׾מהתה׭ח׃גծ؝ٝه٦طٝز⻉ׅ׷䪮遭կ import׾⢪׏ג铣׫鴥׬ֿהד㢩鿇؝ٝه٦طٝز׾ٗ٦سׅ׷ ֿהָדֹ׷կ GoogleChromeַOperaד؟ه٦زׁ׸גֶ׶ծ׉ך➭ـٓؐؠ כת׌鿇ⴓ涸ז؟ه٦ز׃ַזְկ Polymer׾⢪ֲֿהד植㖈ד׮㹋ꥷח⢪ֲֿהָדֹ׷ָծװכ ׶ط؎ذ؍ـח⹛⡲׃זְה䗍㦩ז挿ָ㢳ְךדծ؟ه٦ز䖉׍ ַկ

Slide 25

Slide 25 text

Component A html css javascript index.html Shadow DOM Shadow DOM Shadow DOM Component A html css javascript Component A html css javascript

Slide 26

Slide 26 text

וֲ㢌⻉ח㼎䘔ׅ׷ַ

Slide 27

Slide 27 text

実装 All in one angularjs/vueך圫זׅץגך꬗⦜׾鋅 גֻ׸׷ؿٖ٦يٙ٦ؙ׾ⵃ欽ׅ׷կ •  CLIخ٦ٕ׮إحزחז׏גְגקה ׿ו꬗⦜׾鋅גֻ׸׷ךד嚂կ •  刿倜ׁ׸׋ꥷחת׷׏ה،حفر٦ز ׃זֽ׸לז׵זְךד穠圓鳞ְկ •  ְאתדًٝذׁ׸׷ַ♶僇 Incremental reactך圫ז⽃堣腉ٓ؎ـٓٔ׾穈׫ さ׻ׇג稢ַֻ،حفر٦زկ •  㥨ֹזػ٦خ׾穈׫さ׻ׇג穈׿דְ ֽ׷կ •  ،حفر٦زָ؎ًؙٝٔٝزחדֹ ׷ךד䕦갟׾䫇ִ׵׸׷կ •  荈ⴓד،٦ؗذؙثַٍ׵罋ִזֽ׸ לז׵זְկ •  ٓ؎ـٓٔך鋅噰׭ָ㣐㢌

Slide 28

Slide 28 text

基礎/背景を理解する javascriptך㛇燉׾统䖤ׅ׷կ javascriptך➬穈׫׾椚鍑ׅ׷կ Browser/html/CSS׾椚鍑ׅ׷կ Web Frontendך胜兝׾椚鍑ׅ ׷կ

Slide 29

Slide 29 text

㛇燉׾魦חאֽ׷ֿהדծ胜兝ָ椚鍑דֹ׷״ֲחז׷կ 胜兝׾椚鍑ׅ׷ֿהד倜׋ז堣腉ָ鷄⸇ׁ׸ג׮ծ ׉ך⹛堣ָ׻ַ׷կ ⹛堣ָ׻ַ׷ַ׵⢪ְ倯٥ㆸ㷕׮׻ַ׷կ ז׈׉ך堣腉ָ֮׷ךַծז׈׉ךؿٖ٦يٙ٦ָؙ㶷㖈ׅ׷ךַծ䠐㄂׾椚鍑ׅ׷䗳銲ָ֮׷կ 涺ָ⢪׏גְ׷ַ׵⢪ֲךדכזְկ Stop Hype driven development ! http://qiita.com/devneko/items/4f748253b2e2cd1192b1

Slide 30

Slide 30 text

情報を追う •  Twitter •  ⹈䓼⠓ •  GitHub/tc39 •  GitHub/whatwg •  JSer.info •  blog •  GitHub

Slide 31

Slide 31 text

䞔㜠חꟼ׃גכծTwitterד؝،ז➂׾䱱׃גؿؓٗ٦ׅ׷ ךָ♧殢傍ְַ׮׃׸זְկ ֮הכծGitHub/tc39/proposal-xxx׾滗׭׋׶ծ GitHub/whatwg/xxx׾滗׭׋׶ծ ה׶ִ֮׆GitHubחכLiveז䞔㜠ְָ׏םְ֮׷ךד䌢ח ،ٝذش׾כ׏גֶֻץֹկ ֮הכJser.infoװぐ珏blog٥Qiita׾鋅׷կ

Slide 32

Slide 32 text

⹈䓼⠓ ⹈䓼⠓כծ⳿׸ל魦חאֻהְֲ׮ךדכזְկ 荈ⴓָ⡦ח莆㄂ָ֮׏גծ➙ו׿זٖكٕזךַծ⡦׾劍䖉׃ג ְֻךַ׾כ׏ֹ׶ׇׁ׋קֲָ葺ְկ 䥪鋵⠓׮׍ׯ׿ה➂ה鑧ׁזְהְ׷׌ֽדכ䠐㄂ָזְկ 䙼ְⴖ׏ג㡮׾ַֽגծְ׹׿ז䞔㜠׾❛䳔ׅץ׃կ 刿חLTח涫㠡׃׋׶׃ג荈ⴓך椚鍑׾״׶帾׭׷ך׮״ְկ

Slide 33

Slide 33 text

まとめ䪮遭׾鷄ֲך׮㣐✲׌ֽוծ崧遤ח崧ׁ׸搀ְ圫ח岣䠐կ 穠㽷כ㖑⸂ָٌظ׾鎉ֲךד䪮遭⸂ך䎿♳־׮׃׏ַ׶կ ֮הכ،ؐزفحزה؎ٝفحزךغٓٝأח孡׾אֽ׋ְկ