Modern Frontend Technology

Modern Front End
Technology
Ship

Agenda
• Web Technology Trend
• Website technology evaluation
• Frontend/Backend Technology
• Functional Programming
• Nodejs/React/Flux/Redux/Webpack

The Most Basic Technology
Socket Programming

Socket Programming Flow
TCP UDP

Socket Programming on LINUX using C
Parent Child1
Child2
Child3
Parent
Parent
Parent
fork
fork
fork
Parent
Child

Regular HTTP Demo http://www.ltn.com.tw

Traditional Backend–Mix code and HTML Together
Rasmus Lerdorf

MVC Example - CodeIgniter
http://example.com/news/show/1
request
data
Controller
Model View
/Controller/Method/para1/para2/para3...

Frontend - AJAX (Asynchronous JavaScript and XML)
REST API
JSON data
Example: http://www.mediatek.com/
JSON is won already! ref

Frontend Library - jQuery
http://api.jquery.com/show/ https://api.jquery.com/category/selectors/

Frontend/Backend Interaction
2. AJAX Polling1. Regular HTTP
3. AJAX Long Polling 4. WebSocket

Polling vs WebSocket Throughput comparison

前情提要結束.......Take a breath
• 進入主題前，還有一件事情必須先知道......
Functional Programming

Lambda Calculus
Ref: What is a lambda (function)?
What is Lambda Calculus and should you care?
A Tutorial Introduction to the Lambda Calculus
More lambda calculus:

Thinking in Machine
• Imperative JavaScript
inputArray = {“how”, “are”, “you”}
result = {“How”, “Are”, “You”}
“how“ => “How”
{“How”, “Are”, “You”}=>”How Are You”

Thinking in Object
• Object-Oriented JavaScript
textArray = {“how”, “are”, “you”}
result = {“How”, “Are”, “You”}
return “How Are You”

Thinking in Function
• Functional JavaScript
“how are you”=> {“how”, “are”, “you”}“how are you”=> {“how”, “are”, “you”}=>{“How”, “Are”, “You”}“how are you”=> {“how”, “are”, “you”}=>{“How”, “Are”, “You”}=>”How Are You”

Functional Programming !
Comparison
1. Human readable
2. Efficiency
3. Line numbers
Imperative Object-Oriented
Functional Programming

Why Line Numbers Is A Matter
• Norris Number http://www.techug.com/norris-numbers
• Line numbers of code before you hit a wall
• Un-organized code: 1,500~2,000
• Well-organized code: 20,000
Edsger W. Dijkstra

Functional Programming Concepts
• FP的共同點在於：
• 「沒有副作用」（Side Effect）、「第一級函數」（First-Class Function）。
「沒有副作用」是指在表示式（expression）內不可以造成值的改變；
「第一級函數」是指函數被當作一般值對待，而不是次級公民，
也就是說，函數可當作「傳入參數」或「傳出結果」。
• FP和我們慣用的編寫程式風格，有相當大的差異。
• Imperative Programming認為程式的執行，就是一連串狀態的改變；
• FP將程式的運作，視為數學函數的計算，且避免「狀態」和「可變資料」。
Ref: 思考函數編程（二）Why FP

Functional Programming Concepts
1. Avoiding Mutable State
2. Recursion
3. High-Order Functions
4. Function Composition
5. Lazy Evaluation
Ref: 那些 Functional Programming 教我的事
Call by need

全世界的語言都往 Functional Programming 發展
http://www.codedata.com.tw/social-coding/paradigm-shift-to-functional-programming/
Ref: What is a lambda (function)?

Functional Programming In Action
Ref: 那些 Functional Programming 教我的事

Let's get into modern front-end technology.

Nodejs
• 2009.5 Ryan Dahl發布於GitHub
• 使用Google V8 engine 的 Web & Socket Server
• 使用Javascript編寫Backend (前後端統一，減少開發成本)
• Single Thread, Event Driven, Non-Blocking IO
• Strongly Community Support: NPM

Nodejs
• Why single thread?
Ref: Nodejs Explained with Examples

Nodejs
Ref: Callback Hell vs. Async vs. Highland
Sounds great? How about this?
Yes...It’s called callback hell.
How to resolve? PromiseJS!
Blocking IO Non-Blocking IO

Nodejs
• Who use Nodejs
Ref: Projects, Applications, and Companies Using Node

React
• Facebook open source project
• 集中散落在四處的程式碼：event binding/control flow/status maintain....
• Just Component
Ref: ReactJS & why it’s awesome

React
• Why amazing?
1. Everything is a component
2. Single source of truth(SSOT)
3. Virtual DOM
Ref: ReactJS & why it’s awesome
Always redraw!
Virtual DOM:
compare virtual/real DOM tree, calculate the
minimize set to re-render
Property, State
View Event
Parent
Always redraw!
SSOT:

Flux
• MVC trouble
Ideal world
Real world

Redux
• A implementation and improvement of FLUX.
• Three principle:
1. Single source of truth
The state of your whole application is stored in an object tree within a single store.
2. State is read-only
The only way to mutate the state is to emit an action, an object describing what happened.
3. Changes are made with pure functions
GitHub: https://github.com/rackt/redux
Document: http://redux.js.org/docs/introduction/Motivation.html
Which Flux implementation should I use?
UNIDIRECTIONAL USER INTERFACE ARCHITECTURES
Old state
New state
Reducer:

Webpack+Babel
• Webpack bundle multiple files to 1 file.
• Babel compile source javascript file to target javascript file.
Webpack: https://github.com/webpack/webpack
Babel: https://babeljs.io/

Webpack+Babel
• Webpack bundle multiple files to 1 file.
• With minify & uglyfy

Javascript in ES2015
Webpack+Babel
• Isomorphic
Common code
Front-end code back-end code
Babel compile
App.js
Run on browser(ES5)
App.js
Run on server(ES6)

Quick Note
1. Functional Programming 是趨勢，且是現在進行式。
2. Single Thread + Non-blocking IO + Event base 會愈來愈常見。
3. 程式語言的易用性日顯重要。
4. React+Redux+Nodejs 目前是黃金組合。
5. 前端變化的太快了，還是好好寫Driver就好(誤

Reference
• 那些 Functional Programming 教我的事 http://www.slideshare.net/ihower/fp-osdc2012v2
• 當全世界的語言都往 Functional Programming 發展 http://www.codedata.com.tw/social-coding/paradigm-shift-to-functional-programming/
• 思考函數編程（一）Language is Functional Again http://www.jerry-tsai.com/2008/05/fp_22.html
• 思考函數編程（三）FP is as FP does http://www.jerry-tsai.com/2008/06/fp-is-as-fp-does.html
• 函数式编程很难，这正是你要学习它的原因 http://www.vaikan.com/functional-programming-is-hard-thats-why-its-good/
• OO vs FP http://blog.cleancoder.com/uncle-bob/2014/11/24/FPvsOO.html
• 函数式编程初探 http://www.ruanyifeng.com/blog/2012/04/functional_programming.html
• Understanding the node.js event loop http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/
• An Introduction to Functional JavaScript http://www.sitepoint.com/introduction-functional-javascript/
• March 2015 Web Server Survey http://news.netcraft.com/archives/2015/03/19/march-2015-web-server-survey.html
• Comparison of the usage of Apache vs. Nginx vs. Node.js for websites http://w3techs.com/technologies/comparison/ws-apache,ws-nginx,ws-
nodejs
• socket-programming-筆記 http://kezeodsnx.pixnet.net/blog/post/27462696-socket-programming-%E7%AD%86%E8%A8%98
• GNU Porgramming http://www.tenouk.com/cnlinuxsockettutorials.html
• Web开发技术的演变 http://www.evolutionoftheweb.com/?hl=zh-tw#/evolution/day
• 網站技術發展史 http://jaceju.net/2012/11/21/webdev-history/
• Top 10 web development trends and predictions for 2015 http://www.zingdesign.com/top-10-web-development-trends-and-predictions-for-
2015/#motion-ui
• 1989-2014 網頁設計的演變 https://designrockin.wordpress.com/2014/12/10/1989-2014-
%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88%E7%9A%84%E6%BC%94%E8%AE%8A/
• 網路演進 http://www.evolutionoftheweb.com/?hl=zh-tw#/evolution/day
• What are Long-Polling, Websockets, Server-Sent Events (SSE) and Comet? http://stackoverflow.com/questions/11077857/what-are-long-polling-
websockets-server-sent-events-sse- nd-comet
• Introduction to HTML5 WebSocket http://www.codeproject.com/Articles/531698/Introduction-to-HTML-WebSocket
• Thinking in react https://facebook.github.io/react/docs/videos.html
• React JS and why it's awesome http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome?qid=c07b596e-8ca4-4a53-8c55-
83dd70756321&v=default&b=&from_search=1

Modern Frontend Technology

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Modern Frontend Technology (20)

Recently uploaded (20)

Modern Frontend Technology

Editor's Notes