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