Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Single-Page Application Design Principles 101

3,345 views

Published on

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

Published in: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2Q98JRS ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more... ▲▲▲ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Single-Page Application Design Principles 101

  1. 1. Mokoversity Single-Page Application Design Principles 101 2014.10.15 Jollen Chen Founder, Mokoversity <jollen@jollen.org> www.mokoversity.com
  2. 2. Mokoversity Single-Page Application
  3. 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. 4. Mokoversity #1 Architecture
  5. 5. Principles #1.1 使⽤用 REST 架構 ! 有很多 Backend 技術,可以打造 REST API。在這個例⼦子裡,你會看到 Node.js Backend 的作法。REST 架構的 Request / Response 都是 採⽤用 JSON 資料格式,並且搭配 Client-Side 的 UI Architecture。
  6. 6. Single Page Web Apps Source: http://apievangelist.com/2013/05/23/ember-angular-backbone-single-page- applications-and-apis/
  7. 7. Through a REST API Source: http://cyberasylum.janithw.com/tag/single-paged-applications/
  8. 8. Principles #1.2 使⽤用 MVC 框架 ! 如果只是要做網⾴頁,選擇⼀一個有內建模板(Template)功能的 MVC 框 架即可。如果要做 SPA,這個 MVC 框架就要能聚合 REST API,直⽩白易 懂的講法就是整合雲端服務。
  9. 9. Work with Front-End Developers Use MVC, MVP and MVVM Call REST API in Backbone way Customizable CSS CSS generation and minify
  10. 10. Model, View and Control Views and Templating Handlebars.js and Underscore’s template http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
  11. 11. Model, View and Control Spine.js and Backbone.js
  12. 12. Model, View and Control manage the data for an application e.g. Backbone "collections"
  13. 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. 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. 15. MVC for Client Simple MVC framework ⾄至少要能將 Code 與 View 分開。View ⼜又包含 Presentation 與 UI。 http://blog.oscarliang.net/simple-mvc-framework-tutorial-part-2/
  16. 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. 17. Principles #1.3 使⽤用 URL Router ! URL Router 出現在⼆二個地⽅方:Backend 與 Frontend。在 Backend 的話,URL Router 是⼀一個⽤用來解析 REST API 的軟體;在 Frontend 的話,它⽤用來瀏覽內容區塊,或是歷史紀錄。 ! MVC 框架都有⽀支援這種 URL Router 的功能。在這個例⼦子裡,你會看到 如何使⽤用 Backbone.js 來實作 URL Router。
  18. 18. URL Router Source: http://msdn.microsoft.com/en-us/magazine/hh288078.aspx
  19. 19. URL Router Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural- patternsmvvm-and-mvc/
  20. 20. Principles #1.4 跟 UI 互動 ! 使⽤用者是跟你的 UI Component 互動,⽽而不是你的程式碼。⼀一定要切記 這個原則,否則⼀一段時間後,你就必須告訴你的⽼老闆「公司的 Web site 沒辦法維護了。」相信沒有⼈人願意讓這種事情發⽣生,不過它如果可以變成 你創業的那⼀一根槄草,就值得放⼿手⼀一博。 ! 這個原則,也稱為 MVVM,它是 MVC 的⼀一種變異(加強版)。但是不 ⽤用在 MVC 或 MVVC 這⼆二個名稱間打轉太久,否則還有⼀一個 MVP 可以 摧毀更多你的腦細胞。反正就是 MVWhatever(MVW)。
  21. 21. MVVM Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural- patternsmvvm-and-mvc/
  22. 22. Source: http://khatrishashank.wordpress.com/2013/10/11/a-comparison-of-architectural- patternsmvvm-and-mvc/
  23. 23. MVC vs MVVM MVC MVVM MVVM React 寫程式不⽤用寫程式 Template + Control Logic Template + Data Binding Component
  24. 24. MVC vs MVP MVC MVP Controller 處理 User Inputs View 處理 User Inputs Controller uses Presentation Model Controller is Presentation Model
  25. 25. MVVM Source: http://mvcsharp.org/Overview/Default.aspx
  26. 26. MV* - Whatever 寫的好就是 MVVM,寫不好就是 MVC Source: http://www.ace-dnn.com/knowledge-base/implementation-of-mvvm-design- pattern-in-dnn.aspx
  27. 27. Choose the MVC Framework http://code.tutsplus.com/tutorials/important-considerations- when-building-single-page-web-apps-- net-29356
  28. 28. Mokoversity #2 Behavior-Driven Development
  29. 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. 30. Principles #2.1 Story-level ! ⽤用「故事情節」的⽅方式,來表達、描述與表現你的功能(Features),⽽而 不是⽤用規格(Spec)的⽅方式。如果你想知道什麼叫「規格描述」,台灣 ODM / OEM 廠裡,應該倒處都可以撿到這種⽂文件。 ! 這個部份,BDD ⽤用到很多⽅方式跟軟體⼯工具,不過從 Startup 的⾓角度來 看,其實⼀一開始採⽤用 Story Board 的⽅方式,再搭配⼀一段 Story Template 就夠了。
  31. 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. 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 本⾝身最能昇任這項⼯工 作。
  33. 33. Principles #2.3 SPA 是 Software Cycle ! Software cycle 就是軟體開發流程,就是軟體⼯工程。
  34. 34. SPA Design is Software Cycle BDD Startup User Story (OOAD) Story Board (101 Design Methods) Ubiquitous Language Full Stack Application Framework Tooling (Testing Framework)
  35. 35. Principles #2.4 挑⼀一個、或建造⼀一個 Full Stack Framework ! 像是 Meteor 就是⼀一個 Full Stack 開發框架。但是,我想給的建議,是 ⼀一個壞消息。如果不學習如何建造⾃自已的 Full Stack 框架,未來 App 的 發展就會受限。從 Startup 的⾓角度來看,你的 DevOps 能⼒力會很弱、⾮非 常地弱。 ! 但是,建造 Full Stack 框架時,很多重覆性的⼯工作,或是 Infrastructure 的開發,都是可以略的;前提是:有⼈人幫你做 Full Stack Boilerplate。好消息是,Mokoversity 農場計畫正在開發這個模 板。
  36. 36. Mokoversity #3 Client-Side Model
  37. 37. Principles #3.1 UI 在 Client 端 ! UI 包含 Presentation 與 Views,它們通通都在 Client 端。不過,經 常你會看到 UI 還是要從 Server 請求取得,所以經常會搞混這個觀念。 完整的 UI Architecture 可以解答這個擬惑。
  38. 38. 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
  39. 39. Principles #3.2 善⽤用 URL Routing ! SPA 不是⼀一堆網⾴頁(Document),所以不是 Go to page X。相反的, 它是「pull content X」的模式。
  40. 40. 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/
  41. 41. Principles #3.3 使⽤用 Client-Side Template ! 寫過 PHP 嗎?⼀一定⽤用過 HTML Template Engine,可惜在 SPA 領 域,這個觀念要先移到垃圾筒。我們要採⽤用 Client-Side 的 Template,最宏觀性的原因,就是 Backend 採⽤用 REST 架構;最細微 的原因,例如:Million Requests,就是很好的例⼦子。
  42. 42. Template Use template system on the client side. (Underscore and etc) Pre-compiled templates on the server side. (Handlebars and etc)
  43. 43. Principles #3.4 使⽤用 Modular 開發 ! Frontend 要做好、JavaScript 設計模式不能少。哪些是重要的 Frontend JavaScript 設計模式?其中之⼀一就是 Modular。Modular 的技術規範有⼆二種:AMD 跟 CommonJS。你可以使⽤用像是 RequireJS 或 Browserify 的程式庫來實作。
  44. 44. Mokoversity #4 Deferred Loading
  45. 45. Principles #4.1 Asynchronous image loading. ! 你可以延後(Deferred)載⼊入很多東⻄西,其中⼀一個就是圖⽚片。延後載⼊入 的做法很多,不過它們的共通點就是:在 Document Ready 後才進⾏行, 我把它通稱為⾮非同步載⼊入。⾮非同步載⼊入的⽅方式有好幾種,最常⾒見的不外乎 Scroll to、Timer、Event-trigger 等。 ! 在這個例⼦子裡,你會看到 Event-trigger 的做法。
  46. 46. Mokoversity #5 Frontend 設計模式
  47. 47. 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
  48. 48. 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
  49. 49. Principles #5.3 使⽤用 Facebook Meta ! 如果你覺得 Facebook 對你很重要,就把它加上去吧。 http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css
  50. 50. Mokoversity #6 CSS 模組化
  51. 51. Principles #6.1 遵守 SMACSS 或 OOCSS ! CSS Preprocessor 是⼯工具,SMACSS 或 OOCSS 是 CSS 與 CSS Preprocessor 語法的寫作規範(Rules)。 http://code.tutsplus.com/ebooks/scalable-and-modular-architecture-for-css
  52. 52. Mokoversity #7 UI Design & Template 模式
  53. 53. 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 等。
  54. 54. Principles #7.2 Alerts and Notifications ! 警⽰示與通知訊息。Notifications ⼀一般使⽤用在 Client-Side,⽤用來顯⽰示像 是狀態訊息的內容。Alerts ⼀一般則是顯⽰示 Server-Side 的訊息。 ! 在這個例⼦子裡,你會看到如何使⽤用 notifyjs 來顯⽰示提⽰示訊息,以增加使 ⽤用性;也會看到如何使⽤用 Boostrap 的 Alerts 元件,來顯⽰示 Server 傳 遞過來的訊息。
  55. 55. Principles #7.3 Layers ! SPA 與平⾯面圖像的圖層觀念有很⼤大的不同。平⾯面圖像在設計階段(例如: 在 Illustrator 編輯時)分成許多圖層,輸出後會被平⾯面化。SPA 從設計 階段到上線,都是圖層(Layers)的觀念。 ! 在這個例⼦子裡,你會看如使⽤用 CSS 的 Box Model 與 Position 來設計⼀一 個 Cover Block。
  56. 56. Mokoversity #8 Best Practice
  57. 57. Principles #8.1 使⽤用 Package Manager ! 使⽤用 npm 與 bower 套件管理程式。
  58. 58. Principles #8.2 做好 Version Control ! 把 GitHub 當做 Coding 的⽇日常⽤用品。
  59. 59. Principles #8.3 Feature Detection ! 使⽤用像是 Modernizr 的功能偵測程式庫,來解決 Cross-browser 或相 容性問題。
  60. 60. Principles #8.4 Minify ! 記住要 Minify。你可以⽤用 Pre-processing 的⽅方式,或 CDN 的做法。
  61. 61. Principles #8.5 Use CDN ! Performance 考量。
  62. 62. Principles #8.6 Use Google Analytics ! 不需多做說明了。
  63. 63. 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
  64. 64. Principles #8.8 SSL Everywhere ! Google 在 2014 年 8 ⽉月份,發佈的 Page Ranking 政策提到這點。雖 然 SSL Everywhere ⺫⽬目前只佔 Ranking ⽐比重的⼀一⼩小部份,但誰知道哪 天它突然變得很重要。
  65. 65. Principles #8.9 保持最佳的 Load Time ! 你可以⽤用 http://tools.pingdom.com 來隨時進⾏行 Load Time Analysis,讓 Load Time 保持在最佳狀態。Load Time 可以經由 Deferred Load、圖⽚片的優化(Smush It)以及減少內容本⾝身,來進⾏行 基級的優化。
  66. 66. Mokoversity Thanks! Q & A Contact Me: <jollen@jollen.org> www.mokoversity.com

×