2016 前端潮玩意兒
Maxis Kao | Oct. 12, 2016
> 潮
Maxis Kao
➔ Software Engineer at Yahoo
➔ Top Hack of Yahoo TW/JP Joint Hackday
➔ Winner of Yahoo Bot Challenge
全⺠民寫程式的年代
2007
C⼤大學第⼀一堂程式設計
2016
moveForward(100); ... ...
–Hadi Partovi (CEO of code.org)
“Drawing one line to finish a square isn't hard, it's not rocket science. And that's exactly the point.
That's how computer science starts”
“Why JavaScript?”
前端⼯工程師的守備範圍
– Clay Liao
“瀏覽器 檢視原始碼 看到的東⻄西”
前端三要素
• 串接資料
• 呈現介⾯面
• 使⽤用者互動
“前端⼯工程師要具備怎樣的技能?”
科技樹
程 序 猿 崛 起2016 Oct.
⽯石器時代A beginner
從 0 到 1 到 …• 敲個⼗十下就會有裂痕,再敲個⼗十下就會破掉
從 0 到 1 到 …• 敲個⼗十下就會有裂痕,再敲個⼗十下就會破掉
• 敲五下就有裂痕,再敲五下就會破掉
前端 F2E• HTML
• CSS
• JavaScript
<img src="...">
color: red;
onClick=“alert(‘hi’)”
後⽯石器時代A user
Need more …• 需求:⼀一天喝 10顆椰⼦子,漸漸的⼀一天就要喝掉 100 顆椰⼦子
Need more …• 需求:⼀一天喝 10顆椰⼦子,漸漸的⼀一天就要喝掉 100 顆椰⼦子
• 加速:把五顆椰⼦子排好,爬到樹上丟下去⼀一次敲開
已知⽤用⽕火A developer
前端三進化
“Beginner / User / Developer”
群雄割據
如果你不幸剛好是前端⼯工程師...
2006
2010
2011
2013
2014
React + Flux
Angular 2
Ember.js
Backbone.jsKnockout.js
Angular
2005jQueryYUI
Dojo
Vue.js
什麼叫做「潮」
定義「潮」就是「潮流」的簡稱,也就是跟上這個「時代的潮流」。
⿊黑暗時代• JavaScript 只是拿來炫技
$
“jQuery”
since 2006
jQuery• 鏈式語法,⼀一⾏行⽂文就是潮
$(world).find(‘.country’).focus();
• 每個⼈人都是動畫⼤大神
• 跟 server 溝通根本順⼿手⽽而已
jQuery• 鏈式語法,⼀一⾏行⽂文就是潮
$(world).find(‘.country’).focus();
• 每個⼈人都是動畫⼤大神
$(element).find(‘.target’).fadeIn(300);
• 跟 server 溝通根本順⼿手⽽而已
$(element).get(‘http://myapi.com’);
jQuery• 鏈式語法,⼀一⾏行⽂文就是潮
$(world).find(‘.country’).focus();
• 每個⼈人都是動畫⼤大神
$(element).find(‘.target’).fadeIn(300);
• 跟 server 溝通像喝⽔水⼀一樣簡單
$.get(‘http://myapi.com’, function(data){ ... });
“Backbone.js”
since 2010
2010: Backbone.js• 完整實現 MVC 架構
• 底層是 underscore.js
• 還可以跟 jQuery 無痛結合
框架:略懂,略懂JavaScript Frameworks & Libraries
MV Whatever
潮。框架
最⾼高指導原則
• 適合的就是最好的
• 別被 Big Words 嚇跑
MVC
潮。框架
定義軟體⼯工程中的⼀一種軟體架構模式,把系統分為三個部分:
模型(Model)、視圖(View)和控制器(Controller)
Why MVC• 降低邏輯跟資料的耦合:使程式某⼀一部分能夠重複被利⽤用
• 架構上分⼯工明確:簡化後續對程式的修改和功能擴充
Problems• 花太多時間在處理 DOM
https://jsbin.com/lakuxex/edit?html,js,output
Problems• 花太多時間在處理 DOM
• 如果只處理⼀一邊?
• 改 HTML,JavaScript 也跟著動
• 改 JavaScript,HTML 也變了
MVVM
潮。框架
Model-View-ViewModel
定義軟體⼯工程中的⼀一種軟體架構模式,把系統分為三個部分:
使⽤用者介⾯面(View)
商業邏輯(ViewModel)
資料(Model)
“AngularJS”
since 2012
MV Whatever
潮。框架
“React / Flux”
since 2013
React
– Pete Hunt
“Why did we build react”
專⼼心做好⼀一件事• React is NOT an MVC framework
• 把 MVC 中的 View 做到極致
元件化• React 的世界都是元件 (components)
• 盡量拆得夠細,細到可以重複使⽤用
• Isomorphic JavaScript
<Image />
<Card />
<Text color=“white”/>
<Text color=“blue”/>
Virtual DOM• DOM: Document Object Model
• Extremely FAST for re-render!
“HTML is just the beginning.”
FluxAPPLICATION ARCHITECTURE FOR BUILDING USER INTERFACES
“MVC is good, why bother?”
• https://facebook.github.io/flux/
• 是設計模式 ( pattern ),不是框架 ( framework )
• Facebook’s Flux
• Redux
• fluxible
• 單⾏行道:unidirectional data flow
Flux
ECMAScript 2015
語⾔言:就是要寫箭頭
ES6
語法糖• Constants
• Scoping
• Arrow Functions
• Extended Parameter Handling
• Class
新概念 (API)• Iterator
• Generators
• Promise
– Maxis Kao
“我也想偷懶寫箭頭就好!”
ES6 = 語法糖 + 新概念
Polyfill
進⼊入上流社會Functional Reactive Programming
別搞神祕了你們這群⼈人
鄙視鏈• 懂 Functional Programming 的⼯工程師
• ⽼老是把設計模式掛在嘴邊的⼯工程師
• 「你這樣寫就不 OO 了啊」的⼯工程師
• 「蛤?什麼物件導向?不是把重複的 code 寫成 function 就好了嗎?」
• PM
Functional Programming
Imperative Programming
Functional Programming
Imperative Programming
“Hardware, finally.”
Map / Reduce / Filter
Pure Function• 1 - 1 Data Transformation
• f (x) → y
“杜絕⿊黑⼼心⼯工廠”
Mutable
• 陣列 (array)
• 物件 (object)
複雜的環境
• ⽤用平板的台灣 設計師 ⼩小⿊黑
• ⽤用⼿手機的美國 ⼯工程師 Jerry
• 不⼩小⼼心在 IE6 上停⽤用 JavaScript 卻渾然不知的阿嬤
– 阿嬤
“阿怎麼都是英⽂文,是要我怎麼點?”
– Jerry
“奇怪怎麼突然爆版,動畫還全部消失”
– ⼩小⿊黑
“怎麼還這麼早,先睡覺再來搶票好了”
Immutable• 把 陣列 (array) 與 物件 (object) 轉換成它內部的資料結構來做更進⼀一步的操作
• 常⽤用的有:List,Map 與 Sequence
滿出來的⼯工具箱⾃自動化,硬是⽐比別⼈人快
Grunt / Gulp
Task runner• minify CSS/JS
• compile: SCSS → CSS
• unit test
• watch
⽐比較 - 社群• Grunt 社群⽐比較⼤大,有⽐比較多 plugin
• Gulp ⽐比較新,但算是崛起的很快
⽐比較 - 速度• Grunt ⽤用 temp file,會經過 disk I/O,需要處理中繼檔案
• Gulp 直接⽤用 stream 的概念,全部在 memory 中
Bower / NPM
Browserify / Webpack
Yeoman
前端⼯工程師⼼心法
⼼心牆
“10 Reasons Why You Should Use Angular”
“ 3 Reasons Why You Should Use React”
“ 5 Reasons Why You Should Use Backbone”
“ 5 Reasons Why You Should Use Backbone”
⼀一切從基本做起
基本• 系統性的學習
• 看書
• Get your hands dirty
充實⾃自⼰己
橫向發展• RD: Beginner → User → Developer
• UX/UI
• PM
• QA
Thanks :P
Q / A
Top Related