single-page application design principles 101

Single-Page Application Design Principles 101

2014.10.15Jollen Chen

Founder, Mokoversity <[email protected]>

www.mokoversity.com

Mokoversity

mailto:[email protected]

http://www.mokoversity.com

Single-Page Application

Mokoversity

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

#1 Architecture

Mokoversity

Principles #1.1

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

Single Page Web Apps

Source: http://apievangelist.com/2013/05/23/ember-angular-backbone-single-page-applications-and-apis/

http://backbonetutorials.com/why-would-you-use-backbone/

Through a REST API

Source: http://cyberasylum.janithw.com/tag/single-paged-applications/


Principles #1.2

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

Work with Front-End Developers

Use MVC, MVP and MVVM

Call REST API in Backbone way

Customizable CSS

CSS generation and minify

Model, View and Control

Views and Templating Handlebars.js and Underscore’s template

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns



Spine.js and Backbone.js


manage the data for an application e.g. Backbone "collections"

http://www.MOKOVERSITY.com


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.




Model View ViewModelan 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.




MVC for Client

http://blog.oscarliang.net/simple-mvc-framework-tutorial-part-2/

Simple MVC framework ⾄至少要能將 Code 與 View 分開。View ⼜又包含 Presentation 與 UI。


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://jquery.com/

http://mootools.net/

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

URL Router

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

http://msdn.microsoft.com/en-us/magazine/hh288078.aspx

URL Router

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


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

MVVM




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

MVC vs MVVM

MVC MVVM MVVM React

寫程式不⽤用寫程式

Template + Control Logic

Template + Data

BindingComponent

MVC vs MVP

MVC MVP

Controller 處理 User Inputs

View 處理 User Inputs

Controller uses Presentation

Model

Controller is Presentation

Model

MVVM

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


MV* - Whatever

Source: http://www.ace-dnn.com/knowledge-base/implementation-of-mvvm-design-pattern-in-dnn.aspx

寫的好就是 MVVM，寫不好就是 MVC


Choose the MVC Framework

http://code.tutsplus.com/tutorials/important-considerations-when-building-single-page-web-apps--net-29356

#2 Behavior-Driven Development

Mokoversity

Behavior-Driven DevelopmentBDD 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)

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

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

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

Principles #2.3

SPA 是 Software Cycle !Software cycle 就是軟體開發流程，就是軟體⼯工程。

SPA Design is Software CycleBDD Startup

User Story (OOAD)

Story Board (101 Design Methods)

Ubiquitous LanguageFull Stack

Application FrameworkTooling (Testing Framework)

Principles #2.4

挑⼀一個、或建造⼀一個 Full Stack Framework !像是 Meteor 就是⼀一個 Full Stack 開發框架。但是，我想給的建議，是⼀一個壞消息。如果不學習如何建造⾃自已的 Full Stack 框架，未來 App 的發展就會受限。從 Startup 的⾓角度來看，你的 DevOps 能⼒力會很弱、⾮非常地弱。

!但是，建造 Full Stack 框架時，很多重覆性的⼯工作，或是 Infrastructure 的開發，都是可以略的；前提是：有⼈人幫你做 Full Stack Boilerplate。好消息是，Mokoversity 農場計畫正在開發這個模板。

#3 Client-Side Model

Mokoversity

Principles #3.1

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

UI ArchitectureCopyright (C) 2014 Moko365 Inc.

Node.js Backend

Jade

HTML

URL RouterRequest

Response

REST API

/welcome

Model State

URL Router

JSONResponse

Update Views

MVC Frontend

Backbone.js

Principles #3.2

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

URL Routing

https://www.mokoversity.com/post#startup

http://blog.james-carr.org/2009/10/02/feature-injection-putting-the-value-first-in-your-user-stories/

Navigation within an app via URLs. Relies on the browser history API.

Principles #3.3

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

TemplateUse template system on the client side. (Underscore and etc)

Pre-compiled templates on the server side. (Handlebars and etc)

Principles #3.4

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

#4 Deferred Loading

Mokoversity

Principles #4.1

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

#5 Frontend 設計模式

Mokoversity

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

Principles #5.2

結構化 Page Layout !基本功是將 Page 切割出 Navigation Bar、Meta、Scripts、CSS links、Footer。並使⽤用 Object-Oriented 的⽂文件結構。


Principles #5.3

使⽤用 Facebook Meta !如果你覺得 Facebook 對你很重要，就把它加上去吧。


#6 CSS 模組化

Mokoversity

Principles #6.1

遵守 SMACSS 或 OOCSS !CSS Preprocessor 是⼯工具，SMACSS 或 OOCSS 是 CSS 與 CSS Preprocessor 語法的寫作規範（Rules）。


#7 UI Design & Template 模式

Mokoversity

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

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

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

#8 Best Practice

Mokoversity

Principles #8.1

使⽤用 Package Manager !使⽤用 npm 與 bower 套件管理程式。

Principles #8.2

做好 Version Control !把 GitHub 當做 Coding 的⽇日常⽤用品。

Principles #8.3

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

Principles #8.4

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

Principles #8.5

Use CDN !Performance 考量。

Principles #8.6

Use Google Analytics !不需多做說明了。

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

https://developers.google.com/speed/pagespeed/module

Principles #8.8

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

Principles #8.9

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

http://tools.pingdom.com

Thanks! Q & A

Contact Me: <[email protected]>

www.mokoversity.com

Mokoversity

mailto:[email protected]

http://www.mokoversity.com