Modern Frontend Technology
42
Modern Front End Technology Ship
Transcript of Modern Frontend Technology
Modern Front EndTechnology
Ship
Agenda• Web Technology Trend• Website technology evaluation• Frontend/Backend Technology• Functional Programming• Nodejs/React/Flux/Redux/Webpack
• Web Timeline
• 網頁設計 ?
The Most Basic Technology
Socket Programming
Socket Programming FlowTCP UDP
Socket Programming on LINUX using C
Parent Child1
Child2
Child3
Parent
Parent
Parentfork
fork
fork
Parent
Child
Traditional Backend–Mix code and HTML Together
Rasmus Lerdorf
MVC Structure
MVC Example - CodeIgniterhttp://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 Interaction2. 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”}
“how“ => “How”
return “How Are You”
Thinking in Function• Functional JavaScript
“how“ => “How”
“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 !
Comparison1. Human readable2. Efficiency3. 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
Functional Programming Concepts• FP 的共同點在於：
• 「沒有副作用」（ Side Effect ）、「第一級函數」（ First-Class Function ）。「沒有副作用」是指在表示式（ expression ）內不可以造成值的改變；「第一級函數」是指函數被當作一般值對待，而不是次級公民，也就是說，函數可當作「傳入參數」或「傳出結果」。• FP 和我們慣用的編寫程式風格，有相當大的差異。
• Imperative Programming認為程式的執行，就是一連串狀態的改變；• FP將程式的運作，視為數學函數的計算，且避免「狀態」和「可變資料」。
Ref: 思考函數編程（二）Why FP
Functional Programming Concepts1. Avoiding Mutable State2. Recursion3. High-Order Functions4. Function Composition5. 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
Spend a lot( fork thread time/memory, cpu scheduling)
To sleep?
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 component2. 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
Flux
Redux• A implementation and improvement of FLUX.• Three principle:
1. Single source of truthThe state of your whole application is stored in an object tree within a single store.
2. State is read-onlyThe 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/reduxDocument: http://redux.js.org/docs/introduction/Motivation.htmlWhich 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/webpackBabel: 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 Note1. 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
