Basic and level 101 introduction to Single-Page Application (SPA) design principles.

1. Mokoversity
Single-Page Application
Design Principles 101
2014.10.15
Jollen Chen
Founder, Mokoversity
<jollen@jollen.org>
www.mokoversity.com

2. Mokoversity
Single-Page Application

3. SPA Design Principles
• Principle #1: Architecture
• Principle #2: Behavior-Driven
• Principle #3: Client-Side Model
• Principle #4: Deferred Loading
• Principle #5: Frontdend Design Patterns
• Principle #6: CSS Modular
• Principle #7: Template Model
• Principle #8: Best Practice

4. Mokoversity
#1 Architecture

5. Principles #1.1
使⽤用 REST 架構
!
有很多 Backend 技術，可以打造 REST API。在這個例⼦子裡，你會看到
Node.js Backend 的作法。REST 架構的 Request / Response 都是
採⽤用 JSON 資料格式，並且搭配 Client-Side 的 UI Architecture。

6. Single Page Web Apps
Source: http://apievangelist.com/2013/05/23/ember-angular-backbone-single-page-
applications-and-apis/

7. Through a REST API
Source: http://cyberasylum.janithw.com/tag/single-paged-applications/

8. Principles #1.2
使⽤用 MVC 框架
!
如果只是要做網⾴頁，選擇⼀一個有內建模板（Template）功能的 MVC 框
架即可。如果要做 SPA，這個 MVC 框架就要能聚合 REST API，直⽩白易
懂的講法就是整合雲端服務。

9. Work with Front-End Developers
Use MVC, MVP and MVVM
Call REST API in Backbone way
Customizable CSS
CSS generation and minify

10. Model, View and Control
Views and Templating
Handlebars.js and Underscore’s
template
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns

11. Model, View and Control
Spine.js and Backbone.js

12. Model, View and Control
manage the data for an application
e.g. Backbone "collections"

13. MPV
Models, Views & Presenters
MVP is generally used most often in
enterprise-level applications where it's
necessary to reuse as much
presentation logic as possible.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns

14. Model View ViewModel
an architectural pattern based on MVC
and MVP,
!
which attempts to more clearly
separate the development of user-interfaces
(UI) from that of the business
logic and behavior in an application.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns

15. MVC for Client
Simple MVC framework ⾄至少要能將 Code 與 View
分開。View ⼜又包含 Presentation 與 UI。
http://blog.oscarliang.net/simple-mvc-framework-tutorial-part-2/

16. SPAs and RESTful
It’s difficult to build Single Page Applications that
by simply using jQuery or MooTools. They don’t
have formal structure.
The browser is no longer the only client, we now
have mobile devices, tablet devices, Google
Goggles and electronic fridges etc.
Single-page web apps are the future. Backbone.js
is essentially MVC for the client and allows you
to make your code modular.
http://backbonetutorials.com/why-would-you-use-backbone/

17. Principles #1.3
使⽤用 URL Router
!
URL Router 出現在⼆二個地⽅方：Backend 與 Frontend。在 Backend
的話，URL Router 是⼀一個⽤用來解析 REST API 的軟體；在 Frontend
的話，它⽤用來瀏覽內容區塊，或是歷史紀錄。
!
MVC 框架都有⽀支援這種 URL Router 的功能。在這個例⼦子裡，你會看到
如何使⽤用 Backbone.js 來實作 URL Router。

18. URL Router
Source: http://msdn.microsoft.com/en-us/magazine/hh288078.aspx

19. URL Router
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-
patternsmvvm-and-mvc/

20. Principles #1.4
跟 UI 互動
!
使⽤用者是跟你的 UI Component 互動，⽽而不是你的程式碼。⼀一定要切記
這個原則，否則⼀一段時間後，你就必須告訴你的⽼老闆「公司的 Web site
沒辦法維護了。」相信沒有⼈人願意讓這種事情發⽣生，不過它如果可以變成
你創業的那⼀一根槄草，就值得放⼿手⼀一博。
!
這個原則，也稱為 MVVM，它是 MVC 的⼀一種變異（加強版）。但是不
⽤用在 MVC 或 MVVC 這⼆二個名稱間打轉太久，否則還有⼀一個 MVP 可以
摧毀更多你的腦細胞。反正就是 MVWhatever（MVW）。

21. MVVM
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-
patternsmvvm-and-mvc/

22. Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-
patternsmvvm-and-mvc/

23. MVC vs MVVM
MVC MVVM MVVM
React
寫程式不⽤用寫程式
Template +
Control
Logic
Template +
Data
Binding
Component

24. MVC vs MVP
MVC MVP
Controller 處理
User Inputs
View 處理
User Inputs
Controller uses
Presentation
Model
Controller is
Presentation
Model

25. MVVM
Source: http://mvcsharp.org/Overview/Default.aspx

26. MV* - Whatever
寫的好就是 MVVM，寫不好就是 MVC
Source: http://www.ace-dnn.com/knowledge-base/implementation-of-mvvm-design-
pattern-in-dnn.aspx

27. Choose the MVC Framework
http://code.tutsplus.com/tutorials/important-considerations-
when-building-single-page-web-apps--
net-29356

28. Mokoversity
#2 Behavior-Driven
Development

29. Behavior-Driven Development
BDD is a rethinking of the approach to the unit
testing and acceptance testing. (—wikipedia)
Acceptance test is written using the standard
agile framework of a User story: "As a [role] I
want [feature] so that [benefit]". (—wikipedia)
Acceptance criteria should be written in terms of
scenarios and implemented as classes: Given
[initial context], when [event occurs], then
[ensure some outcomes] . (—wikipedia)

30. Principles #2.1
Story-level
!
⽤用「故事情節」的⽅方式，來表達、描述與表現你的功能（Features），⽽而
不是⽤用規格（Spec）的⽅方式。如果你想知道什麼叫「規格描述」，台灣
ODM / OEM 廠裡，應該倒處都可以撿到這種⽂文件。
!
這個部份，BDD ⽤用到很多⽅方式跟軟體⼯工具，不過從 Startup 的⾓角度來
看，其實⼀一開始採⽤用 Story Board 的⽅方式，再搭配⼀一段 Story
Template 就夠了。

31. Story Template
In Order To <biz value is derived>
As a <role>
I want <some feature>
http://blog.james-carr.org/2009/10/02/feature-injection-putting-
the-value-first-in-your-user-stories/
value first

32. Principles #2.2
Feature Injection
!
BDD 並不涉及軟體開發流程，後來有個叫 Chris Matts 的⼤大神，提出⼀一
個 Feature Injection 的⽅方法，將軟體開發流程「注⼊入」BDD。所以，
這個階段你需要⼀一位 Software Engineering 的 PM ⼯工程師，協助將軟
體的 Vision 變成 Code，然後釋出－From vision throughout to
code and release。
!
最後要提醒的是，負責這項管理⼯工作的管理⼈人員，並不是在台灣⼀一般認知
下的 PM。從 Startup 的⾓角度來看，Developer 本⾝身最能昇任這項⼯工
作。

34. Principles #2.3
SPA 是 Software Cycle
!
Software cycle 就是軟體開發流程，就是軟體⼯工程。

35. SPA Design is Software Cycle
BDD Startup
User Story
(OOAD)
Story Board
(101 Design Methods)
Ubiquitous Language
Full Stack
Application Framework
Tooling
(Testing Framework)

36. Principles #2.4
挑⼀一個、或建造⼀一個 Full Stack Framework
!
像是 Meteor 就是⼀一個 Full Stack 開發框架。但是，我想給的建議，是
⼀一個壞消息。如果不學習如何建造⾃自已的 Full Stack 框架，未來 App 的
發展就會受限。從 Startup 的⾓角度來看，你的 DevOps 能⼒力會很弱、⾮非
常地弱。
!
但是，建造 Full Stack 框架時，很多重覆性的⼯工作，或是
Infrastructure 的開發，都是可以略的；前提是：有⼈人幫你做 Full
Stack Boilerplate。好消息是，Mokoversity 農場計畫正在開發這個模
板。

37. Mokoversity
#3 Client-Side Model

38. Principles #3.1
UI 在 Client 端
!
UI 包含 Presentation 與 Views，它們通通都在 Client 端。不過，經
常你會看到 UI 還是要從 Server 請求取得，所以經常會搞混這個觀念。
完整的 UI Architecture 可以解答這個擬惑。

39. UI Architecture
Copyright (C) 2014 Moko365 Inc.
Node.js Backend
Jade
URL Router
HTML
MVC Frontend
Request
Response
REST API
/welcome
Model State
URL Router
JSON
Response
Update
Views
Backbone.js

40. Principles #3.2
善⽤用 URL Routing
!
SPA 不是⼀一堆網⾴頁（Document），所以不是 Go to page X。相反的，
它是「pull content X」的模式。

41. URL Routing
https://www.mokoversity.com/post#startup
Navigation within an app via URLs.
Relies on the browser history API.
http://blog.james-carr.org/2009/10/02/feature-injection-putting-
the-value-first-in-your-user-stories/

42. Principles #3.3
使⽤用 Client-Side Template
!
寫過 PHP 嗎？⼀一定⽤用過 HTML Template Engine，可惜在 SPA 領
域，這個觀念要先移到垃圾筒。我們要採⽤用 Client-Side 的
Template，最宏觀性的原因，就是 Backend 採⽤用 REST 架構；最細微
的原因，例如：Million Requests，就是很好的例⼦子。

43. Template
Use template system on the client side.
(Underscore and etc)
Pre-compiled templates on the server side.
(Handlebars and etc)

44. Principles #3.4
使⽤用 Modular 開發
!
Frontend 要做好、JavaScript 設計模式不能少。哪些是重要的
Frontend JavaScript 設計模式？其中之⼀一就是 Modular。Modular
的技術規範有⼆二種：AMD 跟 CommonJS。你可以使⽤用像是 RequireJS
或 Browserify 的程式庫來實作。

45. Mokoversity
#4 Deferred Loading

46. Principles #4.1
Asynchronous image loading.
!
你可以延後（Deferred）載⼊入很多東⻄西，其中⼀一個就是圖⽚片。延後載⼊入
的做法很多，不過它們的共通點就是：在 Document Ready 後才進⾏行，
我把它通稱為⾮非同步載⼊入。⾮非同步載⼊入的⽅方式有好幾種，最常⾒見的不外乎
Scroll to、Timer、Event-trigger 等。
!
在這個例⼦子裡，你會看到 Event-trigger 的做法。

47. Mokoversity
#5 Frontend 設計模式

48. Principles #5.1
使⽤用 CSS Preprocessor
!
可以幫助你將 CSS 做的更模組化，這樣將更易於 Organize、Refactor
與 Share Common Code。最常⾒見的 CSS Preprocessor 有 LESS、
SASS 與 Stylus。
http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css

49. Principles #5.2
結構化 Page Layout
!
基本功是將 Page 切割出 Navigation Bar、Meta、Scripts、CSS
links、Footer。並使⽤用 Object-Oriented 的⽂文件結構。
http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css

50. Principles #5.3
使⽤用 Facebook Meta
!
如果你覺得 Facebook 對你很重要，就把它加上去吧。
http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css

51. Mokoversity
#6 CSS 模組化

52. Principles #6.1
遵守 SMACSS 或 OOCSS
!
CSS Preprocessor 是⼯工具，SMACSS 或 OOCSS 是 CSS 與 CSS
Preprocessor 語法的寫作規範（Rules）。
http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css

53. Mokoversity
#7 UI Design & Template 模式

54. Principles #7.1
Form Handling and Error Handling
!
要能夠結合 Persistent Data Model，在這個例⼦子裡，你會看到
Backbone.js 結合 REST 的做法。Data Model 也要能具備處理
Server-Side Errors 的能⼒力。
!
其它⼀一些基本處理能⼒力：Input Validation、Highlight Errors、Input
Controls 等。

55. Principles #7.2
Alerts and Notifications
!
警⽰示與通知訊息。Notifications ⼀一般使⽤用在 Client-Side，⽤用來顯⽰示像
是狀態訊息的內容。Alerts ⼀一般則是顯⽰示 Server-Side 的訊息。
!
在這個例⼦子裡，你會看到如何使⽤用 notifyjs 來顯⽰示提⽰示訊息，以增加使
⽤用性；也會看到如何使⽤用 Boostrap 的 Alerts 元件，來顯⽰示 Server 傳
遞過來的訊息。

56. Principles #7.3
Layers
!
SPA 與平⾯面圖像的圖層觀念有很⼤大的不同。平⾯面圖像在設計階段（例如：
在 Illustrator 編輯時）分成許多圖層，輸出後會被平⾯面化。SPA 從設計
階段到上線，都是圖層（Layers）的觀念。
!
在這個例⼦子裡，你會看如使⽤用 CSS 的 Box Model 與 Position 來設計⼀一
個 Cover Block。

57. Mokoversity
#8 Best Practice

58. Principles #8.1
使⽤用 Package Manager
!
使⽤用 npm 與 bower 套件管理程式。

59. Principles #8.2
做好 Version Control
!
把 GitHub 當做 Coding 的⽇日常⽤用品。

60. Principles #8.3
Feature Detection
!
使⽤用像是 Modernizr 的功能偵測程式庫，來解決 Cross-browser 或相
容性問題。

61. Principles #8.4
Minify
!
記住要 Minify。你可以⽤用 Pre-processing 的⽅方式，或 CDN 的做法。

62. Principles #8.5
Use CDN
!
Performance 考量。

63. Principles #8.6
Use Google Analytics
!
不需多做說明了。

64. Principles #8.7
使⽤用 PageSpeed
!
讓網⾴頁速度更好，是你的責任，也是 SPA 佈署前的收尾⼯工作。基本上，
可以使⽤用 Nginx + PageSpeed 模組，來⾃自動完成這項⼯工作；不過，根
據 PageSpeed Insights 的 Rules 在開發期間，就「⾃自然地優化」才是
專業職⼈人的態度。
https://developers.google.com/speed/docs/insights/about
https://developers.google.com/speed/pagespeed/module

65. Principles #8.8
SSL Everywhere
!
Google 在 2014 年 8 ⽉月份，發佈的 Page Ranking 政策提到這點。雖
然 SSL Everywhere ⺫⽬目前只佔 Ranking ⽐比重的⼀一⼩小部份，但誰知道哪
天它突然變得很重要。

67. Principles #8.9
保持最佳的 Load Time
!
你可以⽤用 http://tools.pingdom.com 來隨時進⾏行 Load Time
Analysis，讓 Load Time 保持在最佳狀態。Load Time 可以經由
Deferred Load、圖⽚片的優化（Smush It）以及減少內容本⾝身，來進⾏行
基級的優化。

68. Mokoversity
Thanks!
Q & A
Contact Me:
<jollen@jollen.org>
www.mokoversity.com