Skip to content
HKEPC Forum Reader. A Hybrid Sweet Spot Real Live Example (Native + WebView)
JavaScript CSS HTML
Branch: 4.x
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
meta
src
www
.editorconfig
.eslintrc.json
.firebaserc
.gcloudignore
.gitignore ignore all zip files in git Sep 11, 2019
LICENSE
README.md
RELEASE.md
cors-json-file.json
deploy-gc.sh
firebase.json
gulpfile.js
package.json
topics.json
yarn.lock

README.md

HKEPC IR App

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

Brief Introduction in English

  • This project DON'T use Corodva.
  • This web app ONLY use customized ionic.css, ionic.js, ionic-angular.js (aka ionic v1). No ionic-cli used.
  • The native projects host this web app internally and are written in pure Swift(iOS) and Kotlin(Android).
  • This web app connects native via a pure tailor-made message bridge. i.e. pick images, compress images, upload images, HTTP proxy to prevent CORS
  • The native projects (iOS & Android) will be available later. Stay calm.
  • A separated tailor-made native message bridge will also be available later.

簡介

1.x Branch 完全依賴 Cordova

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

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

4.x Branch 內容自主.優化體驗!加入 HKEPC 討論區不能提供的功能,繼續 Fine-tune ionic-angular.js

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 ,但係我仲卡緊係 ios@3.9.2 (Cordova 5.4.2) (因為用一個 Cordova Plugin 嘅 WKWebView Engine 只支援 ios@3.9.2)。

  • (上網搵 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 Pro 受惠於 HTML,直接將 HKEPC 拎番嘅 HTML 配合少量自製 CSS 去 Render,完全唔需要處理最複雜多變嘅 Content Parsing(因為要做到完美要花極大量嘅時間,只要 HKEPC 一改界面就要重新做過)。

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

其實阿 Gap 已經一早已經做咗一個 POC 出黎 https://github.com/gaplo917/HKEPC-React-Native-Reader 兩版 UI ,不過入面寫緊嘅唔算正統 React,因為當時想嘗試用新做法 React + ReactiveX(rxjs) 去做 State Modeling 而唔用 Redux,有興趣可以 Clone/Fork 黎玩下/繼續落去。

而家個 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
    
    yarn install

    // run in web / dev with Native Project
    yarn run dev
    
    // build production / for Native Project
    yarn run build

Create Proxy server for Dev

    git clone https://github.com/gaplo917/hkepc-cors-dev-proxy
    
    cd hkepc-cors-dev-proxy
    
    yarn install
    
    yarn start
You can’t perform that action at this time.