Universal Hybrid Apps™

"Write once, run anywhere"

App Types

  • Web App
    • Html, css, js (online)
    • Android, iOS, Windows, Mac
  • Native Mobile
    • Java, C
    • iOS, Android
  • Desktop App
    • Any
    • Windows, Mac
  • Pseudo-Native Mobile
    • React Native / NativeScript
  • Hybrid App
    • Html, css, js + Electron/Cordova wrapper
    • Windows, Mac, Linux, iOS, Android, Windows Phone/App Store, Firefox OS, etc etc

What is electron?

  • Cross (desktop) platform app framework written in js/html/node
  • Chromium packaged with your app
  • Automatic updates support built in
  • Extensive native API (file manager, window manager, context menus, etc)
  • Developed by github

Alternatives:

  • NW.js
    • Same idea, different api
    • Less mature and less plugins, but very active (1,200 commits)
    • Supported by Intel

Universal Hybrid App

  • Language
    • html/css/js
  • Build environments
    • Electron (desktop)
    • Cordova / NativeScript (mobile)
    • Web (web)
  • Solutions:

Why?

  • One language
  • Single code base
  • Runs everywhere!
  • Possible

Comparison

Web App Native Mobile Desktop App
Perfomance ✘ ✔ ✔
Offline ✘ ✔ ✔
Time to first click ✘ ✔ ✔
Rapid Updates ✔ ✘ ✔
Mobile ✔ ✔ ✘
Platforms x4 x2 x2
Reach 100% 60% 40%
Skills required x1 x2 x2
Budget x1 x2 x2
Universal Hybrid App
✔
✔
✔
 
✔
✔
x4
100%
x1
x1

Usecases

  • High repeat visits (mobile)
    • CU, comsen, osem, pinzzeta
  • Internal Systems (desktop)
    • fibi, domed, iscx, orpak, prm
  • Site-less services (both)
    • domed, lifta, orpak, TAU

Cons

  • Electron
    • XSS = PC compromised
    • Requires Mac for Mac build
    • 30+ MB builds
  • Cordova
    • Performance
    • Requires Mac for iOS
    • Less native feel
  • Conceptual
    • Native capabilities require a connector/rethink
    • Not all 3rd party services support CORS
    • Do we really want a single code base for mobile and desktop?
    • App cannot contain secrets like encryption keys. Needs to be treated like a regular front-end.

Procedure

# Setup
mkdir MyApp
cd MyApp
electron-cli init MyApp
mv MyApp desktop
cordova create MyApp com.dofinity.myapp
mv MyApp mobile
mkdir src
mkdir web
ln -s src desktop/www
ln -s src mobile/www
ln -s src web/app

# Build
cd desktop
electron-build -mlw
cd ../mobile
cordova build
MyApp/
- desktop/     // Electron
-- dist/       // Binaries
-- www/        // Symlink to src
-- ...
- mobile/      // Cordova
-- platforms/android/build/outputs/apk // Binaries
-- www/        // Symlink to src
-- ...
- web/         // Web
-- app/        // Symlink to src
- src/         // App code

Demo

App: Math Addict

  • Simple math puzzles with custom keypad
  • Custom framework
  • Firebase authentication
  • Highscore management with Firebase
  • Android + Windows + Web + Ubuntu :)
  • 0% platform specific adjustments
  • From first setup to working on all devices in less than 5 hours (not including app development)

Web

Binaries

https://goo.gl/cEuhUJ

Potential Considerations

  • Progressive Web Apps
  • Xamarin
Made with Slides.com