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

1. Modern Front End
Technology
Ship

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

3. • Web Timeline

4. • 網頁設計?

5. The Most Basic Technology
Socket Programming

6. Socket Programming Flow
TCP UDP

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

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

9. Traditional Backend–Mix code and HTML Together
Rasmus Lerdorf

10. MVC Structure

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

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

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

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

15. Polling vs WebSocket Throughput comparison

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

17. 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:

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

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

20. 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”

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

22. 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

23. Functional Programming

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

25. 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

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

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

28. Let's get into modern front-end technology.

29. 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

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

31. 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

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

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

34. 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:

35. Flux
• MVC trouble
Ideal world
Real world

36. Flux

37. 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:

38. 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/

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

40. 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)

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

42. 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