native to web mobile app: from - noonic · mobile app these development methodologies have been...

Mobile App: from Native to Web

NOONIC GUIDES

Mobile App

NOONIC GUIDES

2

AppMOBILE APP

“A mobile application, most commonly referred to as an app, is a type of application software designed to run on a mobile device. Apps are generally small, individual software units with limited function.”

3

Different approaches have been designed to develop Mobile AppsMOBILE APP

Native App Hybrid App Progressive Web App

4

Evolution? MOBILE APP

These development methodologies have been introduced through the time, but they are not improvements of the previous ones. Instead, they try and solve two specific needs:

● Reduce development time● Increase conversions

5

Native App

NOONIC GUIDES

6

Native AppNATIVE APP

“Native Apps are built for specific platforms and are written in languages that the platform accepts”

● Published on the App Store● Need to be installed● OS specific programming

languages

7

Quick winsNATIVE APP

● Fast and Responsive● Distributed in the App Store● Optimal user experience● Full access to the phone

hardware

8

But..NATIVE APP

● Require specific platforms programming knowledge (Java, Objective-C, Swift, C++)

● Must be developed for every single platform

● Slow distribution time ● App Store subscription

9

Can someone be charged for a tricky development process?

NATIVE APP

10

Hybrid App

NOONIC GUIDES

11

Hybrid AppHYBRID APP

“Hybrid Apps combine elements of both native and web applications”

● Published in the App Store● Need to be installed● developed using JS/HTML/CSS

12

Quick winsHYBRID APP

● Code portability● Distributed in the App Store● Web development skills required

13

But..HYBRID APP

● Slow distribution time ● App Store subscription● Lower performance than Native Apps● Still require specific web

programming knowledge

14

Two different ApproachesHYBRID APP

15

● Ionic Framework: Write once, build anywhere!

● React Native: Learn once, write anywhere!

Built with React NativeHYBRID APP

16

What if a website can do that and much more than a Native app?

HYBRID APP

17

Write once, run everywhere!

HYBRID APP

18

In 2015, Frances Berriman and Alex Russell came up with the concept "Progressive Web Apps" to describe

websites taking advantage of modern browsers functionalities

HYBRID APP

19

Progressive Web App

NOONIC GUIDES

20

Progressive Web AppPROGRESSIVE WEB APP

“Progressive Web Apps are Web Apps which combines the best features of Web and Native Apps in a progressive way”

● Published on own server● No needs to be installed● developed using JS/HTML/CSS

21

Progressive

PROGRESSIVE WEB APP

22

The word progressive means it works for every user, regardless of browser choice because they’re built with progressive

enhancement as a core tenet

Responsive

PROGRESSIVE WEB APP

23

Automatically adjustable to any display

Load time

PROGRESSIVE WEB APP

24

Progressive Web Apps are instantly available

App-like

PROGRESSIVE WEB APP

25

Feels like a mobile app with app-style interactions since it’s built on the app shell model

Fresh

PROGRESSIVE WEB APP

26

Always up-to-date so you do not need to update it again and again like any other Android/iOS apps

Safe

PROGRESSIVE WEB APP

27

Served via HTTPS to ensure content is securely delivered

Engaging

PROGRESSIVE WEB APP

28

Features like push notifications, etc. using Service Workers

Installable

PROGRESSIVE WEB APP

29

Allows users to install the website as an app on their home screen without the taking user to an app store

Linkable

PROGRESSIVE WEB APP

30

Easily shared via a URL and do not require complex installation

Quick winsPROGRESSIVE WEB APP

● Cost effective● Cross platform● Make Adjustments Fast● No App Store Middle Man● Ideal for Business - George.com

● Reduced Friction for Users● Native App Flexibility● Security● Speed● Offline Access● Real-Time Discovery

31

But..PROGRESSIVE WEB APP

● Native functions are still limited● Native functions are not as

powerful as in Native Apps● They depend on the user browser● No App Store benefits

What Web Can Do Today?

32

Which one is better then?

PROGRESSIVE WEB APP

33

PROGRESSIVE WEB APP

34

PROGRESSIVE WEB APP

35

How can I choose?

PROGRESSIVE WEB APP

36

PROGRESSIVE WEB APP

37

BibliographyMOBILE APP

codeburst.iotrgr.cawww.web2appinfotech.commedium.comdev.towww.optisolbusiness.com

38

info@noonic.com

Thank you.