Skip to content

gaplo917/hkepc-ionic-reader

4.x
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
www
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

HKEPC Forum Reader. A Hybrid Sweet Spot Real Live Example (Native + WebView)

Resources

License

Stars

Watchers

Forks

Packages

No packages published