Date post: | 29-Nov-2014 |
Category: |
Software |
Upload: | jollen-chen |
View: | 418 times |
Download: | 0 times |
Single-Page Application Design Principles 101
2014.10.15Jollen Chen
Founder, Mokoversity <[email protected]>
www.mokoversity.com
Mokoversity
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/
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
Model, View and Control
Spine.js and Backbone.js
Model, View and Control
manage the data for an application e.g. Backbone "collections"
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
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.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
MVC for Client
http://blog.oscarliang.net/simple-mvc-framework-tutorial-part-2/
Simple MVC framework ⾄至少要能將 Code 與 View 分開。View ⼜又包含 Presentation 與 UI。
SPAs and RESTful
http://backbonetutorials.com/why-would-you-use-backbone/
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.
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
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
Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural-patternsmvvm-and-mvc/
Source: 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 的⽂文件結構。
http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css
Principles #5.3
使⽤用 Facebook Meta !如果你覺得 Facebook 對你很重要,就把它加上去吧。
http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css
#6 CSS 模組化
Mokoversity
Principles #6.1
遵守 SMACSS 或 OOCSS !CSS Preprocessor 是⼯工具,SMACSS 或 OOCSS 是 CSS 與 CSS Preprocessor 語法的寫作規範(Rules)。
http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css
#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
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)以及減少內容本⾝身,來進⾏行基級的優化。