(English version)
繼上次 HTML5 Photobook 客戶網站工作後，再有關 HTML5 分享。
在上年 (2012) 大熱跑出幾個新的 Web App 技術，包括 Responsive Web Design、HTML5/CSS3、Single Page App (SPA)、Server-Side Javascript、NoSQL database，每項技術都打破傳統編程做法，意味著舊有編寫方法全不適用，新技術帶來好處是一個字…快，一個快字內裡殊不簡單，意義是：
當系統運行速度快速的話，不但減省所有資源（伺服器需求、資料傳送頻寬、客戶端需求），還可以提升客人體驗，客人會感到流暢、沒有停頓。而編程速度快就是指我可以縮短整個系統建構時間，由於以上都是講同一語言Javascript，及大部份底層處理都已經有開放源碼套件(open-source package)，我只需學習各個套件的使用方法，就可以專注在我的 App 上。
學習了這麼多新技術，今年終於有個全面的應用機會（因為把所有新技術都用上）：有客戶要求我替他更新公司網頁，他的要求包括：
組織以上技術，架構如下：
我把這系統命名為aeShop，經過兩個月努力，大致完成，請看以下示範：
最後的成品，客人和我都十分滿意，真正體驗到經過學習、實踐，以致能夠面世，得到使用者的讚許，實在是程式創作的最佳回報。最高興是証明了當初在云云新技術中精心挑選，最終能夠實踐得到。
繼上次 HTML5 Photobook 客戶網站工作後，再有關 HTML5 分享。
在上年 (2012) 大熱跑出幾個新的 Web App 技術，包括 Responsive Web Design、HTML5/CSS3、Single Page App (SPA)、Server-Side Javascript、NoSQL database，每項技術都打破傳統編程做法，意味著舊有編寫方法全不適用，新技術帶來好處是一個字…快，一個快字內裡殊不簡單，意義是：
- 運行速度快
- 編程效率快
- 客人工序快
當系統運行速度快速的話，不但減省所有資源（伺服器需求、資料傳送頻寬、客戶端需求），還可以提升客人體驗，客人會感到流暢、沒有停頓。而編程速度快就是指我可以縮短整個系統建構時間，由於以上都是講同一語言Javascript，及大部份底層處理都已經有開放源碼套件(open-source package)，我只需學習各個套件的使用方法，就可以專注在我的 App 上。
學習了這麼多新技術，今年終於有個全面的應用機會（因為把所有新技術都用上）：有客戶要求我替他更新公司網頁，他的要求包括：
- 無論電腦、平板、手機都同一網頁設計 (iPhone, Android, Windows)
- 他可以自行加減貨品，貨品資料包括文字圖片
- 網頁與網頁之間要快，讓客人有流暢的手機體驗
- 他的客戶主要在美歐，所以伺服器要在海外設置
| 需要解決 | 最後決定 | 註釋 |
|---|---|---|
| 雲端供應商 | Amazon AWS EC2 | 伺服器設於美國西部 Oregon |
| 伺服器系統 | Amazon Linux Server | 伺服器的處理系統(O/S) |
| 網頁伺服器 | Node.js | 幕後網頁伺服器(Web Server) |
| 資料庫伺服器 | MongoDB | 新一代NoSQL 資料庫伺服器 |
| 資料傳送套件 | Express.js | 提供RESTful 資料傳送方式，可大量縮小資料傳送 |
| 網頁設計方式 | Bootstrap Responsive web design | 自動辨別電腦，平板、手機顯示 |
| 網頁模樣商場 | {Wrap}bootstrap | 大量平價、美觀的網頁模板供客人選擇 |
| 程式套件 | Backbone.js | 最具彈性的Single Page App的Client-side MVC |
| 輔助套件 | jQuery, Underscore.js | 簡化Javascript常用功能 |
| 程式包裝套件 | Require.js | 優化網頁程式，使快速下載 |
組織以上技術，架構如下：
* 系統結構概覽
我把這系統命名為aeShop，經過兩個月努力，大致完成，請看以下示範：
* 最初在 Wrap bootstrap 購買的原始 Html 模板，隨後將會注入程式
* 套入程式及真實貨品後的短片示範 (取自 www.supareal3d.com)
* 當客戶自行管理時的網頁短片示範
最後的成品，客人和我都十分滿意，真正體驗到經過學習、實踐，以致能夠面世，得到使用者的讚許，實在是程式創作的最佳回報。最高興是証明了當初在云云新技術中精心挑選，最終能夠實踐得到。
Following the last HTML5 Photobook customer sites work, I like to share about my HTML5 work again.
In the last year (2012) hottest new Web App programming technologies, where are HTML5/CSS3, Responsive web design, Single Page App (SPA), Node.js Server-Side Javascript and NoSQL database. Each new technique is breaking its traditional programming methodology. It means that the conventional practice is no longer applicable. Why? The benefits of new technologies is one word... Fast.
Few months ago, several clients ask me to help them to buiild an online store. Their requirements are:
After integrated above frameworks/packages, the final system architecture as below:
I named the system as "aeShop". After two months work, the initial and final web site are as below:
As you can see, the performance and outcome are satisfied both client and me. This proved Javascript can really rule frontend, backend & database in foreseeable time.
-------------------
各位如果對本網誌有興趣的話，請在畫面右邊成為追蹤者，日後有新網誌時 Blogger.com 會自動通知，多謝支持（聲明：電郵由系統發出，電郵地址不會給予及不經作者）
In the last year (2012) hottest new Web App programming technologies, where are HTML5/CSS3, Responsive web design, Single Page App (SPA), Node.js Server-Side Javascript and NoSQL database. Each new technique is breaking its traditional programming methodology. It means that the conventional practice is no longer applicable. Why? The benefits of new technologies is one word... Fast.
- Faster performance
- Faster development
- Faster user adoption.
Few months ago, several clients ask me to help them to buiild an online store. Their requirements are:
- The store must be single design, it can viewable for PC, TV, tablet and phone
- Allow the client updated the items by themselves
- Must be load faster. Because mobile phone has limited bandwidth
- Target to US, Europe and Australia. The server location should be in US
| To be resolved | My decision | Remarks |
|---|---|---|
| Cloud Host | Amazon AWS EC2 | Server locates at U.S. west: Oregon |
| Server O/S | Amazon Linux Server | Operation System |
| Web Server | Node.js | High performance web server |
| Database Server | MongoDB | New generation NoSQL document database |
| WebApp framework | Express.js | Provides HTTP RESTful communication. |
| Web design | Bootstrap Responsive web design | One design, multi-devices viewable |
| Web design theme | {Wrap}bootstrap | Marketplace for premium Bootstrap themes and templates. |
| Frontend MVC | Backbone.js | Most flexible MVC framework providing Single Page App (SPA) feature |
| Utility frameworks | jQuery, Underscore.js | Faster, simplify Javascript development |
| Packaging & deployment | Require.js | Optimize Javascript client codes and providing AMD Javascript modular design. |
After integrated above frameworks/packages, the final system architecture as below:
* System architecture at a glance
I named the system as "aeShop". After two months work, the initial and final web site are as below:
* Initial web template purchased from Wrap bootstrap
* The final production web site video demo (Production site: www.supareal3d.com)
* Video demo of site Administrator for client
As you can see, the performance and outcome are satisfied both client and me. This proved Javascript can really rule frontend, backend & database in foreseeable time.
-------------------
各位如果對本網誌有興趣的話，請在畫面右邊成為追蹤者，日後有新網誌時 Blogger.com 會自動通知，多謝支持（聲明：電郵由系統發出，電郵地址不會給予及不經作者）
留言