Mobile Cross-Platform Development from a Progressive Perspective
Web App Progressive Web App N N NativeScript “Progressive” App NativeScript App
Progressive Web Apps What makes the difference?
“Progressive Web Apps bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies” (3)
Emergence No atomic innovation but generic term for characteristics of innovative web apps Hybridisation Emergence of new standards usage of native features ➞ allows for enhanced user experience ➞ Standardisation
Example Add to home screen
Web App Progressive Web App
IDENTIFY Web App Progressive Web App
Characteristics Network independent Safe Re-engageable Installable Discoverable Linkable Responsive Progressive
Service Workers Browser Page Service Worker Backend
Offline Workflow
Characteristics Service worker Caching Network independent Safe Re-engageable Offline-capable Synchronisation workflow Installable Discoverable Linkable Responsive Progressive
Characteristics Secure Service worker communication Caching Network independent Safe Re-engageable Offline-capable Synchronisation HTTPS workflow Installable Discoverable Linkable Responsive Progressive
Characteristics Secure Push notifications Service worker communication Caching Network independent Safe Re-engageable Offline-capable Bring users back Synchronisation HTTPS workflow Installable Discoverable Linkable Responsive Progressive
Application Shell
Characteristics Secure Push notifications Service worker communication Caching Network independent Safe Re-engageable Offline-capable Bring users back Synchronisation HTTPS workflow Icon on home screen Installable Discoverable Application shell Linkable Responsive Progressive
Characteristics Secure Push notifications Service worker communication Caching Network independent Safe Re-engageable Offline-capable Bring users back Synchronisation HTTPS workflow Icon on home Web-App screen manifest Installable Discoverable Identification of Application shell apps Linkable Responsive Progressive
Characteristics Secure Push notifications Service worker communication Caching Network independent Safe Re-engageable Offline-capable Bring users back Synchronisation HTTPS workflow Icon on home Web-App screen manifest Installable Discoverable Identification of Application shell apps Enter at any point Linkable Responsive Progressive Simple No installation forwarding required
Characteristics Secure Push notifications Service worker communication Caching Network independent Safe Re-engageable Offline-capable Bring users back Synchronisation HTTPS workflow Icon on home Web-App screen manifest Installable Discoverable Identification of Application shell apps Enter at any point Mobile first Linkable Responsive Progressive Simple No installation Acceptable presentation forwarding required anywhere
Progressive Enhancement
Characteristics Secure Push notifications Service worker communication Caching Network independent Safe Re-engageable Offline-capable Bring users back Synchronisation HTTPS workflow Icon on home Web-App screen manifest Installable Discoverable Identification of Application shell apps Progressive Enter at any point Mobile first enhancement Linkable Responsive Progressive Simple No installation Acceptable presentation Acceptable execution forwarding required anywhere anywhere
Web App Progressive X Web App ? Mobile App
Web App Progressive Web App N N NativeScript “Progressive” App NativeScript App
Cross-Platform Development with NativeScript Where are we coming from? N
Cross-Platform Development N Reusability Abstraction Develop as abstract as possible while delivering ideally native results User Experience Performance
Cross-Platform Development N Reusability Abstraction Develop as abstract as possible while delivering ideally native results User Experience Performance
NativeScript N JavaScript Engine Button ListView FileSystem App code Modules Hooks Dispatcher System NativeScript Runtime
NativeScript N JavaScript Engine Any JS library Button ListView FileSystem App code Modules Hooks Dispatcher System NativeScript Runtime TypeScript AOT Routing Components
NativeScript N JavaScript Engine Any JS library Button ListView FileSystem App code Modules Hooks Dispatcher System NativeScript Runtime Any native .. .. interface TypeScript AOT .. UI component .. library Routing Components
NativeScript N JavaScript Engine Live Reload Zero Day Support Any JS library Over-the-air updates Button ListView FileSystem App code Modules Hooks Dispatcher System NativeScript Runtime Any native .. .. interface TypeScript AOT .. UI component .. library Routing Components
Architectural Considerations
Web App Progressive Web App TRANSFER N N NativeScript “Progressive” App NativeScript App
Criteria What’s assessable?
Criteria Service worker Caching Network independent Offline-capable Synchronisation workflow
Criteria Caching Network Independence Offline-capable Synchronisation workflow
Criteria Secure Push notifications communication Caching Network Independence Safe Re-engageable Offline-capable Bring users back Synchronisation HTTPS workflow
Criteria Secure Push notifications communication Caching Network Independence Security Re-engagement Offline-capable Bring users back Synchronisation HTTPS workflow
Criteria Secure Push notifications communication Caching Network Independence Security Re-engagement Offline-capable Bring users back Synchronisation HTTPS workflow Icon on home Web-App screen manifest Installable Discoverable Identification of Application shell apps
Criteria Secure Push notifications communication Caching Network Independence Security Re-engagement Offline-capable Bring users back Synchronisation HTTPS workflow Launch screen Marketability Metadata
Criteria Secure Push notifications communication Caching Network Independence Security Re-engagement Offline-capable Bring users back Synchronisation HTTPS workflow Launch screen Marketability Metadata Enter at any point Linkable Simple No installation forwarding required
Criteria Secure Push notifications communication Caching Network Independence Security Re-engagement Offline-capable Bring users back Synchronisation HTTPS workflow Launch screen Marketability Metadata Enter at any point Linkability Simple forwarding
Criteria Secure Push notifications communication Caching Network Independence Security Re-engagement Offline-capable Bring users back Synchronisation HTTPS workflow Launch screen Marketability Metadata Progressive Enter at any point Mobile first enhancement Linkability Responsive Progressive Simple Acceptable presentation Acceptable execution forwarding anywhere anywhere
Criteria Secure Push notifications communication Caching Network Independence Security Re-engagement Offline-capable Bring users back Synchronisation HTTPS workflow Launch screen Marketability Metadata Integration of platform Enter at any point mechanisms Linkability Responsiveness Progressiveness Simple Acceptable presentation Acceptable execution forwarding anywhere anywhere
Web App Progressive Web App ASSESS N N NativeScript “Progressive” App NativeScript App
Assessment What can we achieve? N
Kanban App N
Marketability Default Customizations Build
Network Independence Android App NativeScript Firebase Firebase Platform SDK
Security Android App HTTPS NativeScript Firebase Firebase Platform SDK
Linkability https://k1234.app.goo.gl/ ?link=https://kard.de/boards/-Khw-Jg-491o1ouI-Qgn &apn=de.mehlhorn.Kard kard://boards/-Khw-Jg-491o1ouI-Qgn
Linkability https://k1234.app.goo.gl/ ?link=https://kard.de/boards/-Khw-Jg-491o1ouI-Qgn &apn=de.mehlhorn.Kard kard://boards/-Khw-Jg-491o1ouI-Qgn
Re-engagement
Responsiveness Relative Styling Native Asset Handling Screen Size Qualifiers
Progressiveness Bottleneck Metadata JavaScript Engine + Transpilation System Integration
7. Bottom Line What to pick up?
Bottom Line Enhance web apps Use web technologies step by step and be N today for effective soon able to keep up mobile development with native apps web technologies are getting more powerful ■ areas of application and abilities are growing ■ extensive apps with excellent user experience ➞
Sources This is a slide title Mehlhorn, Nils . Mobile Cross-Platform Development from a Progressive Perspective . Faculty of Media. Hochschule Düsseldorf. Düsseldorf. 2017. Bachelor Thesis. http://fhdd.opus.hbz-nrw.de/volltexte/2017/1128/
Thank you! ? Questions or remarks?
Recommend
More recommend
