CM521 Lecture 1

使用 Javascript 開發跨平台手機 APP

🙋🏻‍♂️ Thomas Mak a.k.a. makzan

🙋🏻‍♂️ Thomas Mak

這個課程是 Web Technology 的高階及展望課程。

CM460 使用 HTML 及 CSS 製作基本網頁
CM467 Web 2.0 應用技術 — jQuery
CM462 CSS3 新功能應用
CM419 為 web 開發人員而設的 HTML5 課程
CM502 前端用戶介面設計
CM479 移動網頁設計
CM427 跨平台手機應用開發
CM521 使用 Javascript 開發跨平台手機 APP

課程安排

課程會教授以下內容：

第一階段

第二階段

第三階段

課程 Notes

https://ModernWeb.Design/join/cm521

Please create an account for:

  1. Reading the course material.
  2. Manage your submissions.
  3. Contact me directly.
  4. Reading latest class notes.

課程評分安排

  1. Quiz
  2. Workbook
  3. Test Project

Workbook

https://modernweb.design/worksheets/cm521-1/

What can be cross-platform?

Data / Logic Separation

We would always want to separate data, logic and view rendering.

What technologies we can build apps?

Every device has a web view.

That’s why we have been looking for web technology for cross-platform app development.

What options we have to develop cross-platform apps?

Can we really write once and deploy every where?

Yes, technically.

But No for many cases.

What is the limitation of cross-platform apps?

Depends on the functionality we need:

  1. If the app doesn’t need to access hardware resource, pure web technology, ReactJS or ReactNative is good.
  2. If the app needs hardware resource, ReactNative, PhoneGap or Hybrid approach.
  3. If the app needs deep OS integration or very new API, we better use the original SDK to build native app.

課程背景

此課程來源自 CM427 Cross-platform app development with PhoneGap.

但隨著 Web Technology 的發展，PhoneGap 會變得 Irrelevant.

而明白 PhoneGap 的過往發展及歷史，亦是掌握網絡技術發展趨勢的好借鏡。

PhoneGap

PhoneGap 源自 2008, 接近 10 年前.

PhoneGap is a polyfill, and the ultimate purpose of PhoneGap is to cease to exist.
— Brian LeRoux, 2012

在 2012 年 PhoneGap 的文章中提及：

We have two core tenants of belief:

https://phonegap.com/blog/2012/05/09/phonegap-beliefs-goals-and-philosophy/

We have two high level goals with PhoneGap:

https://phonegap.com/blog/2012/05/09/phonegap-beliefs-goals-and-philosophy/

The ultimate purpose is to cease to exist.

We believe in a web open to everyone to participate however they will. No locked doors. No walls. The things we do with PhoneGap are directly influenced by the work we see at the W3C, WHATWG, and other research such as Mozilla’s WebAPI, BONDI, WAC, Webinos, webOS, Tizen and the like.

PhoneGap and Cordova

2008 年 Nitobi 公司推出 PhoneGap 時，當時的公司地址是溫哥華的 Cordova Street。

Nitobi 2011 年被 Adobe 公司收購。但 PhoneGap 的願景是要打造開放的、持續的平台，以推進 Web Technology 的發展。

於是，為免 PhoneGap 的技術和 Adobe 公司的品牌做成衝突，從而令人卻步，不貢獻到這個宏大的計劃中，於是 Adobe 將 PhoneGap 的內核開源出來。而且，為確保開源的管理透明，開源計劃由 Apache Foundation 管理。而核心的名字亦重新定名為 Cordova。

那 Adobe PhoneGap 還有什麼用處？就是提供圍繞著 PhoneGap/Cordova 核心功能的增值服務。例如 Adobe PhoneGap Build 及整合到 Dreamweaver 的 PhoneGap 功能等。

Moving Forward

https://xkcd.com/927/

https://blog.phonegap.com/moving-forward-6b583dcd007

Why Web Technology?

網站設計這個行業，現在可以說是百花齊放。

自從網絡順著 iPhone 重新定義智能手機的移動網站設計，並促使網站技術從 Flash 解放開來後，可謂百花齊放。

新舊技術都一齊出現。有舊的 SVG, CSS Font，新的 HTML5, CSS3, ES6 等。全都一並解放。

而且大家亦更講求可存取性 (Accessibilty) 了。

JavaScript 的發展

We want a better JavaScript.

JavaScript 的發展

  1. JavaScript (ES5)
  2. CoffeeScript
  3. TypeScript
  4. JavaScript ES6 (ES2015)
  5. JavaScript ES7 (ES2016)

三套 JS Framework/Library

一套是框架 (Framework)，一套是工具箱 (Library)，一套是自稱工具箱但又有點兒像框架。

AngularJS, VueJS, ReactJS 的歷史

AngularJS 是 Google 的工程師開發出來的，是一套於工余時間開發的 JS Framework。VueJS 是曾經在 Google 做的華工程師開發的，參考了 AngularJS 內的界面呈現部份，但致力保持 VueJS 簡單及沒有 AngularJS 其他複雜的概念，取其長處，去其短處。ReactJS 是 Facebook 開發出來解決它自身問題，首先用在 Instagram for Web 上，然後逐漸用在 Facebook for Web 上。

Angular / Vue / React

Angular 是框架，它有強烈的一套程序應如何運行的定位。我在寫 Angular 遇到困難上網查找時，總會見到貼文說我「用錯方法了，用 AngularJS 不能這樣做，而是應該怎樣怎樣做」。這個說法就是典型的使用框架會遇到的說法。

另一邊廂，工具箱不會這樣說，因為工具箱就是工具箱，工具箱的意思是它提供了不同的工具及材料，但不會限制我們必須使用某種套路來實現程序。每個使用這個工具箱的程序員，都可以自由使用不同的配搭去完成各項想法。所以 VueJS 作為一個只追求 View 界面呈現與互動的程序庫，就是典型的工具箱。而我們使用了十年的 jQuery，也是工具箱的一種，jQuery 作為對不同瀏覽器的兼容及對 DOM Manipulation 處理的簡化，使過去十年製作動態 JavaScript 網站變得容易入手。而使用 jQuery 做出來的網站功能亦千變萬化，各式其式。

至於 ReactJS，它的出發點也是一個界面工具箱，我們可以使用 ReactJS 來實現不同的界面呈現及用戶互動部份。但圍繞著 ReactJS，有更大的哲學理念在其背後，就是 Facebook 團隊對於數據及界面的分工的一套想法（Flux），所以整套 ReactJS 的生態圈發展，越來越似一個框架。

我並不反對使用 Framework，只是使用不同的程序庫時，要分清各個程序庫的特質及其強項，如果是 Framework，要多瞭解其背後的哲學理念及希望解決的問題，用對程序庫在對的問題上，解決方案自然出現，問題迎刃而解。如果是 Library 工具箱，則沒有太大限制，因為通常各種工具箱都可以混在一起搭配使用，合用就好了。而如果真的要仔細選擇使用哪一套，則可以視乎項目的需求中，使用了哪一套工具箱可以更方便的實現程序，及選擇一套團隊都習慣使用的便可。

jQuery?

而 jQuery / jQuery Mobile 就是一套工具箱。

jQuery relevant?

作為面世了十年的工具箱，jQuery 很好地實現了 Cross-browser API 的問題。jQuery 可能會像 PhoneGap 般被取替，但 jQuery 的思考方式，會繼續通過 Standard Browser API 長存。

DoA

你可能會問，既然合用便可，團隊習慣使用便可，為何還要瞭解那麼多背景資料？因為這決定到我們預計將來兩、三年後，甚至五至八年後，我們所選擇的方案是否還可行。如果不幸地，所選擇的解決方案在推出時便 DoA (Death on Arrival) 那就很浪費開發成本了。而如果在方案推出兩三年後，所選用的程序庫便倒閉，那麼到時便要整個重寫，亦很浪費開發成本。

所以，瞭解自己選用程序庫的背景及預測其將來發展方向很重要。而且亦要瞭解所選用的程序庫如果倒閉，是否有足夠彈性轉用其他方案。（重寫當然要，但有預留空間跟沒有預留空間，完全依賴某一套獨特的方案是不同的）

What types of application we may build?

Idea and execution

Ideas really worth much less than you think. Execution is the key to make things great.

From Derek Sivers:

Awful idea = -1
Weak idea = 1
So-so idea = 5
Good idea = 10
Great idea = 15
Brilliant idea = 20

No execution = $1
Weak execution = $1000
So-so execution = $10,000
Good execution = $100,000
Great execution = $1,000,000
Brilliant execution = $10,000,000
To make a business, you need to multiply the two.

The most brilliant idea, with no execution, may only be worth $20. The most brilliant idea takes great execution may be worth $20,000,000.

Not convinced? Read more:

Mobile App UI design is challenging

(Optional)

Fake view content and fine-tune the wordings.

Copywriting interface design

Why copywriting?

Because:

  1. Design is still about words
  2. On writing interface well
  3. Text editor is a very good interface design tool

UI Design challenge (Optional)

Design a live traffic reporting mobile app for drivers

  1. Draw the UI action flow.
  2. Draw a sketch of the UI.

End of Lecture 1

0/0