Mobile Cross-Platform Development from a Progressive Perspective - - PowerPoint PPT Presentation

▶
mobile cross platform development from a progressive
SMART_READER_LITE
LIVE PREVIEW

Mobile Cross-Platform Development from a Progressive Perspective - - PowerPoint PPT Presentation

Sep 13, 2022 191 likes •786 views

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

slide-1
SLIDE 1

Mobile Cross-Platform Development from a Progressive Perspective

slide-2
SLIDE 2

Web App Progressive Web App NativeScript App “Progressive” NativeScript App

N N

slide-3
SLIDE 3

Progressive Web Apps

What makes the difference?

slide-4
SLIDE 4

“Progressive Web Apps bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies” (3)

slide-5
SLIDE 5

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

slide-6
SLIDE 6

Example Add to home screen

slide-7
SLIDE 7

Web App Progressive Web App

slide-8
SLIDE 8

Web App Progressive Web App IDENTIFY

slide-9
SLIDE 9

Characteristics

Network independent Safe Installable Linkable Responsive Progressive Discoverable Re-engageable

slide-10
SLIDE 10

Service Workers

Browser Service Worker Page Backend

slide-11
SLIDE 11

Offline Workflow

slide-12
SLIDE 12

Characteristics

Network independent Safe Installable Linkable Responsive Progressive

Offline-capable workflow Service worker Caching Synchronisation

Discoverable Re-engageable

slide-13
SLIDE 13

Characteristics

Network independent Safe Installable Linkable Responsive Progressive

Offline-capable workflow Service worker Caching Synchronisation HTTPS Secure communication

Discoverable Re-engageable

slide-14
SLIDE 14

Characteristics

Network independent Safe Installable Linkable Responsive Progressive

Offline-capable workflow Service worker Caching Synchronisation HTTPS Secure communication Push notifications Bring users back

Discoverable Re-engageable

slide-15
SLIDE 15

Application Shell

slide-16
SLIDE 16

Characteristics

Network independent Safe Installable Linkable Responsive Progressive

Offline-capable workflow Service worker Caching Synchronisation HTTPS Secure communication Icon on home screen Application shell Push notifications Bring users back

Discoverable Re-engageable

slide-17
SLIDE 17

Characteristics

Network independent Safe Installable Linkable Responsive Progressive

Offline-capable workflow Service worker Caching Synchronisation HTTPS Secure communication Icon on home screen Application shell Push notifications Bring users back Identification of apps Web-App manifest

Discoverable Re-engageable

slide-18
SLIDE 18

Characteristics

Network independent Safe Installable Linkable Responsive Progressive

Offline-capable workflow Service worker Caching Synchronisation HTTPS Secure communication Icon on home screen Application shell Enter at any point Simple forwarding No installation required Push notifications Bring users back Identification of apps Web-App manifest

Discoverable Re-engageable

slide-19
SLIDE 19

Characteristics

Network independent Safe Installable Linkable Responsive Progressive

Offline-capable workflow Service worker Caching Synchronisation HTTPS Secure communication Icon on home screen Application shell Enter at any point Simple forwarding No installation required Acceptable presentation anywhere Mobile first Push notifications Bring users back Identification of apps Web-App manifest

Discoverable Re-engageable

slide-20
SLIDE 20

Progressive Enhancement

slide-21
SLIDE 21

Characteristics

Network independent Safe Installable Linkable Responsive Progressive

Offline-capable workflow Service worker Caching Synchronisation HTTPS Secure communication Icon on home screen Application shell Enter at any point Simple forwarding No installation required Acceptable presentation anywhere Mobile first Acceptable execution anywhere Progressive enhancement Push notifications Bring users back Identification of apps Web-App manifest

Discoverable Re-engageable

slide-22
SLIDE 22

Web App Progressive Web App Mobile App

? X

slide-23
SLIDE 23

Web App Progressive Web App NativeScript App “Progressive” NativeScript App

N N

slide-24
SLIDE 24

Cross-Platform Development with NativeScript

Where are we coming from?

N

slide-25
SLIDE 25

Cross-Platform Development

N Develop as abstract as possible while delivering ideally native results

Abstraction Reusability User Experience Performance

slide-26
SLIDE 26

Cross-Platform Development

N Develop as abstract as possible while delivering ideally native results

Abstraction Reusability User Experience Performance

slide-27
SLIDE 27

JavaScript Engine

NativeScript

N

Hooks App code NativeScript Runtime System Dispatcher Button ListView FileSystem Modules

slide-28
SLIDE 28

JavaScript Engine

NativeScript

N

Hooks App code NativeScript Runtime System Dispatcher Button ListView FileSystem Modules AOT Routing Components TypeScript Any JS library

slide-29
SLIDE 29

JavaScript Engine

NativeScript

N

Hooks App code NativeScript Runtime System Dispatcher Button ListView FileSystem Modules AOT Routing Components TypeScript Any native .. .. interface .. UI component .. library Any JS library

slide-30
SLIDE 30

JavaScript Engine

NativeScript

N

Hooks App code NativeScript Runtime 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

slide-31
SLIDE 31

Architectural Considerations

slide-32
SLIDE 32

Web App Progressive Web App NativeScript App “Progressive” NativeScript App TRANSFER

N N

slide-33
SLIDE 33

Criteria

What’s assessable?

slide-34
SLIDE 34

Network independent

Offline-capable workflow Service worker Caching Synchronisation

Criteria

slide-35
SLIDE 35

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

slide-36
SLIDE 36

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

Safe

HTTPS Secure communication Push notifications Bring users back

Re-engageable

slide-37
SLIDE 37

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

Security

HTTPS

Re-engagement

Secure communication Bring users back Push notifications

slide-38
SLIDE 38

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

Security

HTTPS

Re-engagement

Secure communication Bring users back Push notifications

Installable

Icon on home screen Application shell Identification of apps Web-App manifest

Discoverable

slide-39
SLIDE 39

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

Security

HTTPS

Re-engagement

Secure communication Bring users back Push notifications Launch screen

Marketability

Metadata

slide-40
SLIDE 40

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

Security

HTTPS

Re-engagement

Secure communication Bring users back Push notifications Launch screen

Marketability

Metadata

Linkable

Enter at any point Simple forwarding No installation required

slide-41
SLIDE 41

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

Security

HTTPS

Re-engagement

Secure communication Bring users back Push notifications Launch screen

Marketability

Metadata

Linkability

Simple forwarding Enter at any point

slide-42
SLIDE 42

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

Security

HTTPS

Re-engagement

Secure communication Bring users back Push notifications Launch screen

Marketability

Metadata

Linkability

Simple forwarding Enter at any point

Responsive Progressive

Acceptable presentation anywhere Mobile first Acceptable execution anywhere Progressive enhancement

slide-43
SLIDE 43

Criteria

Network Independence

Caching Synchronisation Offline-capable workflow

Security

HTTPS

Re-engagement

Secure communication Bring users back Push notifications Launch screen

Marketability

Metadata

Linkability

Simple forwarding Enter at any point

Responsiveness Progressiveness

Integration of platform mechanisms Acceptable presentation anywhere Acceptable execution anywhere

slide-44
SLIDE 44

Web App Progressive Web App NativeScript App “Progressive” NativeScript App ASSESS

N N

slide-45
SLIDE 45

Assessment

What can we achieve?

N

slide-46
SLIDE 46

Kanban App

N

slide-47
SLIDE 47

Marketability

Default Customizations Build

slide-48
SLIDE 48

Network Independence

Android App Firebase Platform SDK NativeScript Firebase

slide-49
SLIDE 49

Android App

Security

Firebase Platform SDK NativeScript Firebase HTTPS

slide-50
SLIDE 50

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

slide-51
SLIDE 51

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

slide-52
SLIDE 52

Re-engagement

slide-53
SLIDE 53

Responsiveness

Native Asset Handling Screen Size Qualifiers Relative Styling

slide-54
SLIDE 54

Progressiveness

JavaScript Engine + Transpilation Metadata Bottleneck System Integration

slide-55
SLIDE 55

7. Bottom Line

What to pick up?

slide-56
SLIDE 56

Bottom Line

N

Enhance 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

slide-57
SLIDE 57

This is a slide title Sources

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/

slide-58
SLIDE 58

Thank you!

Questions or remarks?

?

slide-59
SLIDE 59

NativeScript

N

Button button = new Button(getApplicationContext()); var button = new Button(getApplicationContext());