native to web mobile app: from - noonic · mobile app these development methodologies have been...
TRANSCRIPT
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
BibliographyMOBILE APP
codeburst.iotrgr.cawww.web2appinfotech.commedium.comdev.towww.optisolbusiness.com
38
Thank you.