progressive perspective mobile cross-platform development ... · nativescript app “progressive”...

Mobile Cross-Platform Development from a Progressive Perspective

Web App Progressive Web App

NativeScript App

“Progressive” NativeScript App

N N

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

Emergence of new standards

➞ usage of native features➞ allows for enhanced user experience

Hybridisation

Standardisation

Example

Add to home screen


IDENTIFY

Characteristics

Network independent Safe

Installable

Linkable Responsive Progressive

Discoverable

Re-engageable

Service Workers

Browser

Service WorkerPage Backend

Offline Workflow

Characteristics


Installable


Offline-capable workflow

Service worker Caching

Synchronisation

Discoverable

Re-engageable

Characteristics


Installable




Synchronisation HTTPS

Secure communication

Discoverable

Re-engageable

Characteristics


Installable






Push notifications

Bring users back

Discoverable

Re-engageable

Application Shell

Characteristics


Installable






Icon on home screen

Application shell

Push notifications

Bring users back

Discoverable

Re-engageable

Characteristics


Installable






Icon on home screen

Application shell

Push notifications

Bring users back

Identification of apps

Web-App manifest

Discoverable

Re-engageable

Characteristics


Installable






Icon on home screen

Application shell

Enter at any point

Simple forwarding

No installation required

Push notifications

Bring users back


Web-App manifest

Discoverable

Re-engageable

Characteristics


Installable






Icon on home screen

Application shell

Enter at any point

Simple forwarding


Acceptable presentation anywhere

Mobile first

Push notifications

Bring users back


Web-App manifest

Discoverable

Re-engageable

Progressive Enhancement

Characteristics


Installable






Icon on home screen

Application shell

Enter at any point

Simple forwarding



Mobile first

Acceptable execution anywhere

Progressive enhancement

Push notifications

Bring users back


Web-App manifest

Discoverable

Re-engageable


Mobile App

?

X


NativeScript App


N N

Cross-Platform Development with NativeScript

Where are we coming from?

N

Cross-Platform DevelopmentN

Develop as abstract as possible

while

delivering ideally native results

AbstractionReusability

User Experience

Performance

JavaScript Engine

NativeScriptN

Hooks App code

NativeScript Runtime

System Dispatcher

Button

ListView

FileSystem

Modules

JavaScript Engine

NativeScriptN

Hooks App code


System Dispatcher

Button

ListView

FileSystem

Modules

AOT

Routing Components

TypeScript

Any JS library

JavaScript Engine

NativeScriptN

Hooks App code


System Dispatcher

Button

ListView

FileSystem

Modules

AOT

Routing Components

TypeScript

Any native .... interface.. UI component.. library

Any JS library

JavaScript Engine

NativeScriptN

Hooks App code


System Dispatcher

Button

ListView

FileSystem

Modules

AOT

Routing Components

TypeScript

Any native .... interface.. UI component.. library

Any JS library

Live Reload

Over-the-air updates

Zero Day Support

Architectural Considerations


NativeScript App


TRANSFER

N N

Criteria

What’s assessable?

Network independentOffline-capable

workflow


Synchronisation

Criteria

Criteria

Network IndependenceCaching

Synchronisation Offline-capable workflow

Criteria



SafeHTTPS


Push notifications

Bring users back

Re-engageable

Criteria



SecurityHTTPS

Re-engagement


Bring users back

Push notifications

Criteria



SecurityHTTPS

Re-engagement


Bring users back

Push notifications

Installable

Icon on home screen

Application shell Identification of apps

Web-App manifest

Discoverable

Criteria



SecurityHTTPS

Re-engagement


Bring users back

Push notifications

Launch screen

MarketabilityMetadata

Criteria



SecurityHTTPS

Re-engagement


Bring users back

Push notifications

Launch screen


Linkable

Enter at any point

Simple forwarding


Criteria



SecurityHTTPS

Re-engagement


Bring users back

Push notifications

Launch screen


LinkabilitySimple

forwarding

Enter at any point

Criteria



SecurityHTTPS

Re-engagement


Bring users back

Push notifications

Launch screen


LinkabilitySimple

forwarding

Enter at any point

Responsive ProgressiveAcceptable presentation

anywhere

Mobile first


Progressive enhancement

Criteria



SecurityHTTPS

Re-engagement


Bring users back

Push notifications

Launch screen


LinkabilitySimple

forwarding

Enter at any point

Responsiveness Progressiveness

Integration of platform mechanisms




NativeScript App


ASSESS

N N

Assessment

What can we achieve?N

Kanban AppN

Marketability

Default Customizations

Build

Network Independence

Android App

Firebase Platform SDK

NativeScript Firebase

Android App

Security

Firebase Platform SDK

NativeScript Firebase

HTTPS

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

Native Asset Handling Screen Size QualifiersRelative Styling

Progressiveness

JavaScript Engine + Transpilation

Metadata

Bottleneck

System Integration

7.Bottom Line

What to pick up?

Bottom Line

NEnhance web apps step by step and be soon able to keep up with native apps

Use web technologies today for effective

mobile development

■ web technologies are getting more powerful■ areas of application and abilities are growing➞ extensive apps with excellent user experience

This is a slide titleSources

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??

NativeScriptN

Button button = new Button(getApplicationContext());

var button = new Button(getApplicationContext());

progressive perspective mobile cross-platform development ... · nativescript app “progressive”...

Documents