HKEPC IR Pro (https://promote.hkepc.pro)

Introduction

This application provided an unbelievable user experience through fine-tuning the web technology available since 2016.

• Replaced Cordova with thin native Swift(iOS) and Kotlin(Android) application with tailor-made message bridges.
• Extensively fine-tuning ionic.js, ionic-angular.js for a new navigation solution to eliminate significant navigation delay.
• Extensively use ReactiveX and WebWorker to offload heavy HTML parsing duty on client side.
• Overall Tech Stack: Angularjs(v1), Scss, Webpack 5, ReactiveX, WebWorker

Disclaimer: I build this project in my leisure time and I have no relationship with HKEPC.

簡介

1.x Branch 完全依賴 Cordova

2.x Branch 已經完全移除 Cordova 並自行重制某部份功能，此 Project 將會作 Native Project 的 Submodules 運行

3.x Branch 效能先決．重新出發！Code review 及自行重製部份功能 (發現部份 ionic-angular.js 提供的功能是拖低流暢度的主要成因)

4.x Branch 內容自主．改良體驗！加入 HKEPC 討論區不能提供的功 能，繼續微調 ionic-angular.js

5.x Branch 持續改良體驗、可持續發展模式@1 May 2023

3.x - 效能先決．重新出發 (21 Jan 2019 Updated)

Ionic V1 - 雖然係第一代比較完整嘅 HTML 5 Mobile framework 並以 Cordova 為基礎去做，但 Ionic V1 其實有好多 Performance 問 題其實仲未 Optimize，更甚其實根本冇好好咁同 Native integrate。

Ionic V1 有兩個嚴重影響效能嘅問題！

---

• Virtual DOM Cache - 用 Profiler 見 到呢幾行每次轉 View 都會成個 DOM element Cache 低，愈多 Element 就愈行愈慢 ，所以點解嘅啲 Example App 好似咁順，但一寫落手 Ionic V1 一多 DOM 就疾疾下 ，其它人嘅案例(Ionic V2 Beta)。慶幸地由於 2.x 開始已經全棄 Cordova，Native 部份已經係自己寫，所有「返回上一頁」嘅動作都已經用 Native 處理（Native Browser 有 Cache 根本冇需要自己 Cache)。 Disable 咗個 Cache 之後，基本上成個 Ionic V1 App 清爽咗好多，Android 中低階機更由 ~700 ms 轉頁降到 ~300 ms ，瀏覧速度接近快咗 1 倍。

• CPU-Heavy spinner - 唔知點解 Scroll 嘅時好唔順，最後發現佢 Ionic V1 提供嘅 Spinner 係用 javascript 撩 DOM 咁去 Render，極級燒 CPU， 之換做 CSS hardware accelerated spinner ，效果相常滿意

---

另外，因為由 1.x 開始做嘅辛苦野先繼續到落去

• AngularJs 1 + ES6 + AngularJS Rx - Ionic V1 跟機係配 ES5，好多好開心嘅 ES6 功能用唔到；但因為自己深信寫 ES6 長遠一 定有幫助，起手嘅時候我花咗好多時間搞 AngularJs + ES6 + Gulp + Babel + Browserify。呢個組合其實真係好少眾，網上亦冇乜資 源。冇咁上下 Javascript 經歷其實好難做到。另外，自己係 ReactiveX 信徒加上 Angular 2 開始都用 RxJs，當然要用埋啦。

• Web Worker - Web Worker 呢兩隻字，好多人聽到都覺得離地。因為真正看待 Performance 嘅人，想唔 Block UI Thread 先會接 觸搞並放資源去寫，因為放埋落 UI Thread 其實都只係疾一疾，唔理 Performance 其實無乜問題。但 HKEPC IR 係 Client-side parsing HTML，即係每一頁 HKEPC 拎落黎要抽取資料再去 Render，無可能下下都疾一下先去到下一版，就用 Rx doOnNext 叫醒 WebWorker 做 Parsing，再 FlatMap 去等收番個 Message ，無 Rx 加持真係好難寫得好。

• One-way Binding - 記得開始寫嘅時候， AngularJs One-way Binding 都未出，出咗就即刻用，大量減低 Watcher 數目。

• Native Message Bridge - 做好咗一條 Message Bridge 之後可以做多好多野。

---

HKEPC IR Pro Active User Snapshot@21 Jan 2019

---

HKEPC IR Pro iOS v2.4+ 及 Android v3.0+ 喺真正做到 hybrid sweet spot，自己用緊 iPhone 6S Plus(A9)/ LG G6(Snapdragon 821) 測試都覺得好流暢，未來嘅機只會更加流暢；

HKEPC IR Pro 仲有好多位可以做得更好，Side Project 黎講真係要儲下心力先可以再更新。

2.x - 棄舊迎新．剷走 Cordova (9 Oct 2017 Updated)

移除 Cordova 原因

• Cordova 太多 Plugins 都好耐無更新，欠缺 Documentation、Buggy，摸石過河咁樣。

• iOS WKWebview 效能好過 iOS UIWebView 4-5 倍，但因為卡住 CORS 問題一直要駁 Proxy Server，亦無 Cordova Plugin 解決。

• Cordova Plugin 唔值得寫；寫 Cordova Plugin 好似隔山打牛咁，無針對性操作，極度低效率。

• Cordova 升級問題；每次都覺得十分痛苦，有時又會出唔到 Build， Cordova 個 WKWebview Engine 仲要做極都做唔好。Cordova 已 經上到 7.x ，但係我仲卡緊係 [email protected] (Cordova 5.4.2) (因為用一個 Cordova Plugin 嘅 WKWebView Engine 只支援 [email protected])。

• (上網搵 Cordova Plugin) + (試下佢仲 Work 唔 Work) => 浪費青春；例如話我一直想做 Image Compress + Upload 嘅 Features， 浪費咗無數嘅青春去試下https://ionicframework.com/docs/native/ 提供嘅 Plugins，結果完全唔掂。

• 當時花心血做嘅 Angular 1 + ES6 + Gulp Integration 令呢個 Project 非常 容易脫離 Ionic CLI、Cordova。

總結：如果本身已經係 Native App Developer，真係唔好浪費時間係 Cordova 度！若果你好多野想做，自己用 Native App + WebView + Bridge 自己慢慢做，咁先係做到無限可能性，亦更加容易控制時間。

點解唔將啲時間做 React Native?

• 「CPU 效能過剩」係自己 2016 年頭認為會發生嘅事 所以當年先會揀 HTML 起手，2017 年尾睇完 iPhone 8/X 發佈會，見到粒 A11 效能已經拍得住 i5 Mobile CPU 級數，更加確信自己嘅睇法。

• 做呢個 Project 嘅目標不嬲都係將「長遠性」放第一位； 現時 HKEPC IR 受惠於 HTML，直接將 HKEPC 拎番嘅 HTML 配合少量自製 CSS 去 Render，完全唔需要處理最複雜多變嘅 Content Parsing（因為要做到完美要花極大量嘅時間，只要 HKEPC 一改界面就要重新 做過）。

• 好多好有用嘅功能一早已經係 HTML 版本做好咗，若果要係 React Native 度重製，保守估計要花起碼半年工餘時間先可以做到超越 HKEPC IR 嘅 RN 版本。但個人認為若果用戶用緊 (iPhone 6S/ LG G6) 之後嘅手機，流暢未必會感覺得到有大轉變。唔信？ Download 黎試下

而家個 Project 即係咩 Status?

而家 2.x Branch 已經完全移除 Ionic CLI、Cordova，只係繼續用 ionic.css, ionic.js, ionic-angular.js，並作為一個 Submodules Project 比 Native Project 用。

Getting Start

    # Clone Repo
    git clone https://github.com/gaplo917/hkepc-ionic-reader

    cd hkepc-ionic-reader

    npm install

    # run in webpack dev, localhost:3000
    npm run dev

    #build production
    npm run build

Create Proxy server for Dev

    git clone https://github.com/gaplo917/hkepc-cors-dev-proxy

    cd hkepc-cors-dev-proxy

    nvm use 12

    yarn install

    yarn start