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

“瀏覽器 檢視原始碼 看到的東⻄西”

前端三要素

• 串接資料

• 呈現介⾯面

• 使⽤用者互動

“前端⼯工程師要具備怎樣的技能？”

科技樹

https://coggle.it/diagram/V_kQZtVHelhbjvfK

程 序 猿 崛 起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

可以這樣找到我

• Maxis Kao

• maxis1718@gmail.com

• http://maxis1718.github.io