-
Notifications
You must be signed in to change notification settings - Fork 0
/
web-history.html
806 lines (734 loc) · 28.5 KB
/
web-history.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>前端工程的昨天、今天和明天</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<link rel="stylesheet" href="css/web-history.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="center">
<h1>前端工程的昨天、今天和明天</h1>
<p>
<small><a href="https://codeigniter.org.cn" target="_blank">Hex</a> 为您分享 / Github: <a href="https://github.com/hex-ci" target="_blank">@hex-ci</a></small>
</p>
</section>
<section>
<h2>前端的工程化</h2>
<ul>
<li class="fragment">
早期的年代，前端不工程
<ul>
<li>页面交互复杂度不高</li>
<li>设计师如果会一些基础的 HTML、CSS 的话，与程序员配合就几乎已经足以开发前端</li>
<li>架构简单，没有可维护性或可复用性等问题</li>
</ul>
</li>
<li class="fragment">
近些年的前端工程化需求
<ul>
<li>Web Application 的普及，伴随而来用户界面的复杂性提高，需要有组织的架构与工作流程</li>
<li>原有的前端技术与标准难以应付日渐增长的工程化需要</li>
</ul>
</li>
</ul>
</section>
<section>
<section class="center">
<h1>时间线</h1>
</section>
<section>
<h2>2007 ~ 2008：百废待举</h2>
<ul>
<li class="fragment">Firefox 刚从 IE 大一统的天下瓜分掉大半领土，逼迫微软开始继续关注浏览器开发与 Web 领域</li>
<li class="fragment">Google Chrome 带着 V8 引擎横空出世，打响新一波的浏览器大战</li>
<li class="fragment">Web 标准开始继续在各家浏览器厂商的角力与争执中推动</li>
<li class="fragment">jQuery 开始普及，逐渐成为最热门的 JavaScript 库</li>
<li class="fragment">HTML5 第一份正式草案发布</li>
</ul>
</section>
<section>
<h2>2009 ~ 2010：寻求方向</h2>
<ul>
<li class="fragment">ECMAScript 5 发布</li>
<li class="fragment">微软发布 <s>世纪遗毒</s> IE 8</li>
<li class="fragment">Node.js 问世，原本只能运行于浏览器的 Javascript 开始能作为一门服务端语言使用</li>
<li class="fragment">HTML5 成为大多数人认可的 Web 未来主流技术，众多特性开始被主流浏览器所支持</li>
<li class="fragment">移动设备访问 Web 流量开始显著增长</li>
</ul>
</section>
<section>
<h2>2011 ~ 2012：移动设备的崛起</h2>
<ul>
<li class="fragment">HTML5 技术获得重大发展以及广泛地被应用，称霸十余载的 Flash 开始渐渐凋零</li>
<li class="fragment">Web 标准开始稳定的由各家浏览器厂商角力与协商来慢慢的持续推进，最后经过共识而产生的标准，各家浏览器也绝大部分会遵守标准来实现</li>
<li class="fragment">移动设备上的 Web 体验开始被重视，Responsive Web Design 概念广泛被采用，相关的前端工具如雨后春笋般冒出</li>
<li class="fragment">
前端的工程化开始被讨论与推动
<ul>
<li>社区自发推进各种模块机制</li>
<li>CoffeeScript 与 TypeScript 等 Transpiler 问世</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>2013 ~ 2014：工程化逐渐发展</h2>
<ul>
<li class="fragment">HTML5 正式定稿成为推荐标准</li>
<li class="fragment">各种 CSS 预处理器出现并被使用</li>
<li class="fragment">PhoneGap 这种 Hybrid Mobile App 模式被广泛应用</li>
<li class="fragment">ECMAScript 6 渐渐受到瞩目与发展，但还未普遍用于开发</li>
<li class="fragment">第一代的 SPA 开发技术成熟，如 Angular / Backbone / Ember</li>
<li class="fragment">新时代的前端框架 ReactJS 刚问世，前端应用的组件化开发趋势开始萌芽</li>
<li class="fragment">Node.js 开始大量被用于企业级应用</li>
</ul>
</section>
<section>
<h2>2015 ~ 2017：新时代的来临</h2>
<ul>
<li class="fragment">ES6 定稿，随着 Babel 的普及而开始大规模的被使用到实际开发中</li>
<li class="fragment">npm 与 Webpack 脱颖而出，成为前端构建工具的主流</li>
<li class="fragment">
React 相关生态系大放异彩，全面的影响并主导前端技术与社区的趋势走向
<ul>
<li>受到 React 影响并借鉴之，Angular 2、Vue 等新一代前端解决方案到来，与 React 生态系互相竞争与推动进步</li>
<li>React Native 这种 JS Bridge Native App 解决方案问世，Weex、NativeScript 等接踵而至</li>
<li>Redux 问世，将函数式编程在前端的趋势大幅拉升</li>
</ul>
</li>
</ul>
</section>
</section>
<section>
<section class="center">
<h1>昨天</h1>
</section>
<section class="center">
<h2>HTML</h2>
</section>
<section>
<h2>HTML</h2>
<ul>
<li class="fragment">
HTML API 分成两大部分
<ul>
<li>DOM（Document Object Model）</li>
<li>BOM（Browser Object Model）</li>
</ul>
</li>
<li class="fragment">W3C 曾经决定放弃 HTML，转而推动 XHTML</li>
<li class="fragment">浏览器厂商们不认同，搞小团体（WHATWG）以民间力量自行推动新一代 HTML 标准</li>
<li class="fragment">因为 WHATWG 的成员就是浏览器厂商，所以如果他们不愿意支持的话，W3C 强行推动什么标准也都是枉然</li>
<li class="fragment">最后 W3C 屈服了，接纳 WHATWG 所推动的成果，重开 HTML 工作小组，最后与浏览器厂商合力推出现在的 HTML5 标准</li>
</ul>
</section>
<section>
<h2>HTML5</h2>
<ul>
<li>
HTML5 提供了大量的新特性，其中最重要的一类是提供浏览器原生的 RIA（Rich Internet Application）能力，而不再需要 Flash 等外部插件
<ul>
<li>
<p>视频播放</p>
</li>
<li>
<p>音频播放</p>
</li>
<li>
<p>绘图</p>
</li>
<li>
<p>游戏</p>
</li>
<li>
<p>音视频处理</p>
</li>
</ul>
</li>
</ul>
</section>
<section class="center">
<h2>jQuery</h2>
</section>
<section>
<h2>jQuery</h2>
<ul>
<li class="fragment">早期各家浏览器对于标准的制定流程没有共识，导致各浏览器的 DOM 操作或是 AJAX 等 API 都非常不一致</li>
<li class="fragment">
jQuery 带来了在当时相当先进的思想与功能
<ul>
<li>抽象化统一各家浏览器的 API 操作差异</li>
<li>使用 CSS Selector 来选择 DOM</li>
<li>链式操作的习惯</li>
<li>...etc</li>
</ul>
</li>
<li class="fragment">首个取得巨大成功与广泛应用的 JS 库</li>
<li class="fragment">现今已无法用于大型且复杂的前端应用开发，但仍然拥有承前启后的重要历史地位，在简单的场景中也依然可以使用</li>
</ul>
</section>
<section class="center">
<h2>Flash</h2>
</section>
<section>
<h2>Flash</h2>
<ul>
<li class="fragment">Flash 在那个 HTML 原生不支持 RIA 功能的年代，提供了重要的替代方案，使得 Web 能够更快速的流行于世界</li>
<li class="fragment">跟 jQuery 一样，在 HTML5 发达的这个年代已经逐渐被淘汰，但仍然在历史中有重要地位，完成了承前启后的历史使命</li>
</ul>
<div class="block fragment" style="min-width: 30px; min-height: 30px; width: 438px; height: 328px; left: 51px; top: 34px; z-index: 1;">
<img data-src="images/web-history/1.png">
</div>
<div class="block fragment" style="min-width: 30px; min-height: 30px; width: 445px; height: 436px; left: 465px; top: 67px; z-index: 2;">
<img data-src="images/web-history/2.png">
</div>
<div class="block fragment" style="min-width: 30px; min-height: 30px; width: 639px; height: 357px; left: 126px; top: 309px; z-index: 2;">
<img data-src="images/web-history/3.png">
</div>
</section>
</section>
<section>
<section class="center">
<h1>今天</h1>
</section>
<section>
<h2>ECMAScript</h2>
<ul>
<li class="fragment">ECMAScript 是 JavaScript 的语言标准规范，后者是前者的实现</li>
<li class="fragment">Node.js 是 ECMAScript 在服务器端的语言实现</li>
<li class="fragment">ECMAScript 6 是 2015 年时正式发表的新一代版本标准，加入了许多重要的新语法与功能，令 JavaScript 向成为企业级语言迈进一大步</li>
<li class="fragment">目前 ES7（ES 2016）、ES8（ES 2017）也已正式发表，惯例将之统称为 ES6+，代表新时代的 JavaScript 版本</li>
</ul>
</section>
<section>
<h2>前端开发所面临的问题</h2>
<ul>
<li class="fragment">构建工具</li>
<li class="fragment">标准兼容性</li>
<li class="fragment">模块化与包管理</li>
<li class="fragment">异步处理</li>
<li class="fragment">大型且复杂的前端应用开发</li>
</ul>
</section>
<section class="center">
<h2>构建工具</h2>
<p>（Building Tool）</p>
</section>
<section>
<h2>Webpack</h2>
<ul>
<li class="fragment">能够对前端代码或图片、字体等内容进行一些编译、打包、压缩和一些额外的加工处理</li>
<li class="fragment">Webpack 取代 Gulp 与 Grunt 成为主流的最大原因
<ul>
<li>Gulp 或 Grunt 都是纯粹的工作自动化工具，并不是专为 Web 前端所设计</li>
<li>Webpack 是只用于 Web 前端的构建处理，为其定制了一套平台与接口，以实现系统性的配置与构建</li>
</ul>
</li>
<li class="fragment">Webpack 的发展为前端 SPA 提供了更强大的开发工具</li>
</ul>
</section>
<section class="center">
<h2>标准兼容性</h2>
</section>
<section>
<h2>ECMAScript 6+ 的问题</h2>
<ul>
<li class="fragment">各家浏览器的支持还不够完美与普遍，目前仍有部分功能未被实现完成</li>
<li class="fragment">某些使用者可能永远也不会更新到支持 ES6+ 的浏览器</li>
<li class="fragment">因此我们需要依赖工具将我们的 ES6+ 代码编译成 ES5 环境能运行的版本，让我们能放心的使用 ES6+ 语法或功能来开发</li>
</ul>
</section>
<section>
<h2>Babel</h2>
<ul>
<li class="fragment">Babel 是目前最主流的 JavaScript 编译工具</li>
<li class="fragment">可以单独运行，也可以配合 Webpack 这种前端打包工具一起使用</li>
<li class="fragment">早期原名 6 to 5，专门处理 ES6 to ES5 的代码转换</li>
<li class="fragment">后来 Babel 决定平台化，除了可以使用官方维护的 ES6+ 与 React JSX 转换功能之外，也提供 API 让大家自行开发其他的转换工具</li>
<li class="fragment">Babel 现今已经成为 ECMAScript 标准的重要推动力量</li>
</ul>
</section>
<section class="center">
<h2>模块化与包管理</h2>
</section>
<section>
<h2>为什么需要模块机制？</h2>
<ul>
<li class="fragment">
命名冲突
<ul>
<li>全局命名空间下容易造成变量命名冲突，尤其是跟第三方包冲突时更难解决</li>
</ul>
</li>
<li class="fragment">
代码间的顺序与依赖性维护困难
<ul>
<li>开发人员必须自行理解并解决不同 JS 文件之间，以及与第三方包的相互依赖关系</li>
</ul>
</li>
<li class="fragment">在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪</li>
</ul>
</section>
<section>
<h2>但是...</h2>
<ul>
<li class="fragment">JavaScript 这门语言本身长时间以来都没有设计这样的模块机制</li>
<li class="fragment">
因此社区只好自行设计并推广一些民间标准
<ul>
<li>AMD（Asynchronous Module Definition）</li>
<li>CommonJS：Node.js 采用的模块规范</li>
</ul>
</li>
<li class="fragment">
直到 ES6 里才制订了原生的模块机制规范与语法
<ul>
<li>融合了各家社区标准的优点，并更加先进易用</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>现状</h2>
<ul>
<li class="fragment">ES6 Module 标准本身已经定案，Google Chrome 从 61 开始支持 ES6 Module</li>
<li class="fragment">可以使用 Webpack 来做打包处理，以实现前端环境中模拟模块机制的效果</li>
</ul>
</section>
<section>
<h2>npm（Node Package Manager）</h2>
<ul>
<li class="fragment">npm 本身是 Node.js（后端）的包管理系统</li>
<li class="fragment">因为 Node.js 的逐渐崛起以及 npm 的普及，前端的 JS 或 CSS 代码也被放上了 npm，渐渐也成为了前端的包管理系统主流，通吃前后端</li>
<li class="fragment">Bower 等纯前端的包管理系统逐渐式微</li>
<li class="fragment">配合 Webpack 的模块机制模拟能力，可以让一些本来只能在 Node 上使用的模块也能在前端中使用</li>
</ul>
</section>
<section class="center">
<h2>异步处理</h2>
</section>
<section>
<h2>回调地狱</h2>
<ul>
<li class="fragment">在 JavaScript 中做异步流程处理，传统的方法是使用回调函数</li>
<li class="fragment">当连续性的异步回调函数一多的时候，就像是...</li>
</ul>
<div class="fragment">
<img height="350" data-src="images/web-history/4.png">
</div>
</section>
<section>
<h2>Promise</h2>
<ul>
<li>Promise 是一种异步程序设计的解决方案，比传统使用回调函数的方式要更合理与强大</li>
<li>Promise 是一个容器，里面保存了某个未来才会结束的事件</li>
<li>通过原生的 Promise API 来操作这些异步事件的流程与数据传输</li>
</ul>
<div>
<pre style="margin: 0 auto;"><code class="hljs javascript" data-trim>
const timeout = (delay) => new Promise((resolve, reject) => {
if (typeof delay === 'number') {
setTimeout(() => {
resolve(`${delay}ms passed away.`);
}, delay);
} else {
reject('input is a non-number value.');
}
});
</code></pre>
</div>
<div class="block" style="width: 455px;left: 24px;top: 510px;">
<pre><code class="hljs javascript" data-trim>
timeout(3000)
.then(value => {
console.log(value);
}).catch(error => {
console.error(error);
});
// "3000ms passed away."
</code></pre>
</div>
<div class="block" style="width: 492px;left: 444px;top: 510px;">
<pre><code class="hljs javascript" data-trim>
timeout('abc')
.then(value => {
console.log(value);
}).catch(error => {
console.error(error);
});
// "input is a non-number value."
</code></pre>
</div>
</section>
<section>
<h2>Promise</h2>
<ul>
<li>以下是结合 jQuery Ajax 的范例</li>
</ul>
<div>
<pre style="margin: 0 auto;"><code class="hljs javascript" data-trim>
const getArticleList = () => new Promise((resolve, reject) => {
$.ajax({
url: '/api/article/list',
dataType: 'json',
success: (result) => resolve(result)
});
});
const getArticle = (id) => new Promise((resolve, reject) => {
$.ajax({
url: `/api/article/detail/${id}`,
dataType: 'json',
success: (result) => resolve(result)
});
});
const getAuthor = (id) => new Promise((resolve, reject) => {
$.ajax({
url: `/api/author/${id}`,
dataType: 'json',
success: (result) => resolve(result)
});
});
getArticleList()
.then(articles => getArticle(articles[0].id))
.then(article => getAuthor(article.authorId))
.then(author => console.log(author))
.catch(error => console.error(error));
</code></pre>
</div>
</section>
<section>
<h2>async / await</h2>
<ul>
<li>async 函数是基于 Promise 的扩充语法</li>
<li>
能够让 Promise 异步操作更接近同步的语意
<ul>
<li>
async 关键字
<ul>
<li>表示这是一个 async 函数，该函数会自动变成一个会返回 promise 实例的函数</li>
</ul>
</li>
<li>
await 关键字
<ul>
<li>表示在此处等待这个 promise 的 resolve 或 reject 结果</li>
</ul>
</li>
</ul>
</li>
</ul>
<div>
<pre style="margin: 0 auto;"><code class="hljs javascript" data-trim>
const getAuthorByArticle = async() => {
try {
const articles = await getArticleList();
const article = await getArticle(articles[0].id);
const author = await getAuthor(article.authorId);
console.log(author);
} catch (error) {
console.error(error);
}
}
</code></pre>
</div>
</section>
<section>
<h2>Fetch API</h2>
<ul>
<li>Fetch 是目标取代 XHR 的新 AJAX 技术标准，已被一些主流浏览器支持</li>
<li>是一个 HTML BOM 的 API，并非来自 ECMAScript 标准</li>
<li>Fetch 原生基于 Promise 实现，因此也可以直接结合 async / await 使用</li>
</ul>
<div>
<pre style="margin: 0 auto;"><code class="hljs javascript" data-trim>
const getArticleList = async() => {
const response = await fetch('/api/article/list');
return await response.json();
}
const getArticle = async(id) => {
const response = await fetch(`/api/article/detail/${id}`);
return await response.json();
}
const getAuthor = async(id) => {
const response = await fetch(`/api/author/${id}`);
return await response.json();
}
try {
const articles = await getArticleList();
const article = await getArticle(articles[0].id);
const author = await getAuthor(article.authorId);
console.log(author);
} catch (error) {
console.error(error);
}
</code></pre>
</div>
</section>
<section class="center">
<h2>前端应用开发</h2>
</section>
<section>
<h2>主要趋势</h2>
<ul>
<li class="fragment">组件化开发</li>
<li class="fragment">Virtual DOM</li>
<li class="fragment">One-way Dataflow vs Two-way Binding</li>
</ul>
</section>
<section>
<h2>组件化</h2>
<ul>
<li class="fragment">将 HTML 代码拆分为一个一个的组件模板</li>
<li class="fragment">方便进行抽象化以及复用</li>
<li class="fragment">React、Vue、Angular 2 等技术都有实现自己的组件机制，而 HTML 标准本身也在发展原生的组件系统</li>
</ul>
<div class="fragment">
<pre style="margin: 0 auto;"><code class="hljs javascript" data-trim>
class ProductItem extends React.Component {
handleButtonClick = () => {
alert(this.props.price);
}
render() {
return (
<div className="item">
<div className="title">{this.props.title}</div>
<div className="price">{this.props.price}</div>
<button onClick={this.handleButtonClick}>购买</button>
</div>
);
}
}
</code></pre>
</div>
</section>
<section>
<h2>Virtual DOM</h2>
<ul>
<li class="fragment" data-fragment-index="0">在框架与浏览器 DOM 之间实现一套模拟的 DOM 中间层</li>
<li class="fragment" data-fragment-index="1">
当页面需要改变时
<ul>
<li>根据最新的数据重绘出新的 VDOM 树</li>
<li>与更改前的旧 VDOM 树进行全面的比较与计算</li>
<li>其中新旧差异的地方，才真的会在实际的 DOM 上发生操作改变，以此来减少不必要的实际 DOM 操作以提高性能</li>
</ul>
</li>
</ul>
<div class="fragment" data-fragment-index="1">
<img height="200" data-src="images/web-history/5.png">
</div>
</section>
<section>
<h2>One-way Dataflow</h2>
<h2>& Two-way Binding</h2>
<ul>
<li class="fragment">
One-way Dataflow
<ul>
<li>数据是 UI 发生改变的唯一途径，只有数据改变时才会导致 UI 改变，并且 UI 不能直接改变数据</li>
</ul>
</li>
<li class="fragment">
Two-way Binding
<ul>
<li>UI 拥有直接改变特定数据的能力，自动与指定的数据做双向绑定</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>主流方案</h2>
<table>
<tbody>
<tr>
<th></th>
<th>React</th>
<th>Vue</th>
<th>Angular 2</th>
</tr>
<tr>
<td>类型</td>
<td>专注 UI</td>
<td>专注 UI</td>
<td>全能型框架</td>
</tr>
<tr>
<td>主导者</td>
<td>Facebook</td>
<td>个人项目</td>
<td>Google</td>
</tr>
<tr>
<td>组件化</td>
<td>是</td>
<td>是</td>
<td>是</td>
</tr>
<tr>
<td>Virtual DOM</td>
<td>有</td>
<td>有</td>
<td>无</td>
</tr>
<tr>
<td>数据流</td>
<td>单向</td>
<td>单向 / 双向</td>
<td>单向 / 双向</td>
</tr>
<tr>
<td>View 结构定义</td>
<td>JSX</td>
<td>template / JSX</td>
<td>template</td>
</tr>
<tr>
<td>学习门槛</td>
<td>中</td>
<td>低</td>
<td>高</td>
</tr>
</tbody>
</table>
</section>
</section>
<section>
<section class="center">
<h1>明天</h1>
</section>
<section>
<h2>PWA（Progressive Web App）</h2>
<ul>
<li>
Google 推广的一种 Web Mobile App 技术，目的是希望提高移动端网页应用的体验
<ul>
<li>安装性：可以瞬间添加到主页面并且全屏幕运行，不用包成真的 App 到 Store 里下载安装</li>
<li>离线使用：安装时会将应用的基本架构存储在本地，以达到在断网或网络信号弱的时候依然能秒开的体验</li>
<li>通知：能够主动发起通知信息</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>JS Bridge Native App</h2>
<ul>
<li class="fragment">使用 JavaScript 来开发原生的移动设备 App（Android、iOS）</li>
<li class="fragment">原理是框架包含了 JS 与原生程序的桥梁，以及 JS 代码解释引擎，以达到写 JS 代码产生原生组件的效果，并且两大平台的应用能共用大部分代码</li>
<li class="fragment">
与 Web 三大前端应用方案有密切联系
<ul>
<li>React：React Native</li>
<li>Vue：Weex</li>
<li>Angular 2：NativeScript</li>
</ul>
</li>
</ul>
</section>
<section>
<h2>WebAssembly</h2>
<ul>
<li class="fragment">各大浏览器厂商合作发展的一项技术，目的是能够将其他编程语言经过编译之后在浏览器环境中执行</li>
<li class="fragment">目前主要的用途是游戏（C++）</li>
<li class="fragment">还在发展阶段，到正式广泛应用可能还要 3 ~ 5 年的时间</li>
<li class="fragment">发展顺利并成熟的话，我们可能可以看到用多个语言皆可编写前端应用的一天</li>
</ul>
</section>
</section>
<section>
<section class="center">
<h1>展望 2019</h1>
</section>
<section>
<h2>2019 前端鬼畜大预测</h2>
<ul>
<li class="fragment">Babel 继续担任 ECMAScript 的重要推动力量</li>
<li class="fragment">Vue 会迎来高峰，力压 Angular 2 的地位，紧逼 React</li>
<li class="fragment">HTML 原生的 Web Component 依然受到冷落，但伺机而动</li>
<li class="fragment">更多前端技术与开发厂商放弃支持 IE 9，IE 10 准备上刑场</li>
<li class="fragment">WebAssembly 进一步完善和发展</li>
<li class="fragment">Typescript & Flow 越来越多的用于实际开发中</li>
</ul>
</section>
</section>
<section>
<section class="center">
<h1>大前端時代</h1>
</section>
<section>
<h2>大前端時代</h2>
<ul>
<li class="fragment">前端工程由于使用者体验的需求提高、UI 复杂度大幅增加而重要性提高</li>
<li class="fragment">各种移动设备、平台更让前端的需求广泛</li>
<li class="fragment">HTML5 的发展、Hybrid App、PWA、JS Bridge Native App 让 Web 前端工程师能有效的跨足于移动设备平台的开发</li>
<li class="fragment">前端技术发展成熟，工程化技术不断在推翻与进步</li>
<li class="fragment">对前端工程师来说，学习的能力非常重要</li>
</ul>
</section>
<section>
<h2>学习渠道</h2>
<ul>
<li class="fragment">实体书籍</li>
<li class="fragment">网络资源：文章、视频教程、线上社区、线上读书会</li>
<li class="fragment">社区活动：Conf、小型分享会、沙龙</li>
<li class="fragment">参与开源社区</li>
<li class="fragment">认识并跟其他人交流、沟通、合作</li>
</ul>
</section>
</section>
<section style="text-align: left;">
<h1>THE END</h1>
<p>谢谢！</p>
<div style="position: absolute; right: 0;bottom: -400px;">
<small>
<a href="https://slides.com/tz5514/deck-1-2" target="_blank" style="color:#666">整理自 @Zet 的分享</a>
</small>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: false,
transition: 'slide',
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>