![Page 1: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/1.jpg)
Mobile App: from Native to Web
NOONIC GUIDES
![Page 2: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/2.jpg)
Mobile App
NOONIC GUIDES
2
![Page 3: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/3.jpg)
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
![Page 4: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/4.jpg)
Different approaches have been designed to develop Mobile AppsMOBILE APP
Native App Hybrid App Progressive Web App
4
![Page 5: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/5.jpg)
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
![Page 6: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/6.jpg)
Native App
NOONIC GUIDES
6
![Page 7: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/7.jpg)
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
![Page 8: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/8.jpg)
Quick winsNATIVE APP
● Fast and Responsive● Distributed in the App Store● Optimal user experience● Full access to the phone
hardware
8
![Page 9: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/9.jpg)
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
![Page 10: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/10.jpg)
Can someone be charged for a tricky development process?
NATIVE APP
10
![Page 11: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/11.jpg)
Hybrid App
NOONIC GUIDES
11
![Page 12: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/12.jpg)
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
![Page 13: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/13.jpg)
Quick winsHYBRID APP
● Code portability● Distributed in the App Store● Web development skills required
13
![Page 14: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/14.jpg)
But..HYBRID APP
● Slow distribution time ● App Store subscription● Lower performance than Native Apps● Still require specific web
programming knowledge
14
![Page 15: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/15.jpg)
Two different ApproachesHYBRID APP
15
● Ionic Framework: Write once, build anywhere!
● React Native: Learn once, write anywhere!
![Page 16: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/16.jpg)
Built with React NativeHYBRID APP
16
![Page 17: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/17.jpg)
What if a website can do that and much more than a Native app?
HYBRID APP
17
![Page 18: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/18.jpg)
Write once, run everywhere!
HYBRID APP
18
![Page 19: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/19.jpg)
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
![Page 20: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/20.jpg)
Progressive Web App
NOONIC GUIDES
20
![Page 21: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/21.jpg)
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
![Page 22: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/22.jpg)
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
![Page 23: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/23.jpg)
Responsive
PROGRESSIVE WEB APP
23
Automatically adjustable to any display
![Page 24: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/24.jpg)
Load time
PROGRESSIVE WEB APP
24
Progressive Web Apps are instantly available
![Page 25: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/25.jpg)
App-like
PROGRESSIVE WEB APP
25
Feels like a mobile app with app-style interactions since it’s built on the app shell model
![Page 26: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/26.jpg)
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
![Page 27: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/27.jpg)
Safe
PROGRESSIVE WEB APP
27
Served via HTTPS to ensure content is securely delivered
![Page 28: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/28.jpg)
Engaging
PROGRESSIVE WEB APP
28
Features like push notifications, etc. using Service Workers
![Page 29: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/29.jpg)
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
![Page 30: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/30.jpg)
Linkable
PROGRESSIVE WEB APP
30
Easily shared via a URL and do not require complex installation
![Page 31: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/31.jpg)
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
![Page 32: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/32.jpg)
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
![Page 33: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/33.jpg)
Which one is better then?
PROGRESSIVE WEB APP
33
![Page 34: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/34.jpg)
PROGRESSIVE WEB APP
34
![Page 35: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/35.jpg)
PROGRESSIVE WEB APP
35
![Page 36: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/36.jpg)
How can I choose?
PROGRESSIVE WEB APP
36
![Page 38: Native to Web Mobile App: from - Noonic · MOBILE APP These development methodologies have been introduced through the time, but they are not ... HYBRID APP 15 Ionic Framework: Write](https://reader036.vdocument.in/reader036/viewer/2022062919/5ee12001ad6a402d666c1ec4/html5/thumbnails/38.jpg)
BibliographyMOBILE APP
codeburst.iotrgr.cawww.web2appinfotech.commedium.comdev.towww.optisolbusiness.com
38