Nodes Tech Slides - Progressive Web Apps, 2018

Transcription

1 Nodes Tech Slides - Progressive Web Apps, 2018

2 Our belief Gone are the days where companies spend fortunes on building digital products that users don t want. Or at least they should be. And by now many companies have become masters in ensuring return-on-digital-investment. At least you would think so. At Nodes we are great believers in using technology as an enabler for business results. Over the past 10 years we have executed the development of several hundred digital solutions and apps. The learnings have made us experts in the delivery of business beneficial results. Contents Title Slide Website Approaches Slide 4 PWA Specifics Slide 5 Native / Hybrid / PWA Pros and Cons Slide 7 Web vs Mobile Slide 8 Thank You Slide 9 At Nodes we execute digital strategically. 2

3 Website approaches - What are the different options? Plain, classic traditional way Single Page Application (SPA) Progressive Web App (PWA) This approach will be followed if the project is very simple, and has minimum or no user interaction, such as a landing page promoting an app or displaying static information. The same applies if the website is not intended to be maintained, only altered very rarely, or purposely shown for a fixed time. The plain approach will most likely be implemented with plain HTML, CSS and JavaScript (e.g. with JS library, such as jquery). However, if the project is deemed to have a certain amount of user actions (e.g. multiple forms, animations, modals, etc.) Vue.js could be chosen for implementation instead, as it is a powerful but lightweight JS library. A website following the plain, classic, traditional approach will not be connected to an API or CMS. However if the website contains a simple contact form, signup form, or similar, then a simple API call can be added. A website that relies on many user interactions, has multiple pages, and will be connected to an API to download and update data. The user will be offered a faster, more responsive, and overall seamless experience, as new screens and data are downloaded in the background while the user is clicking and navigating around the site. It is important to emphasise that the Single Page name does not mean that the website only has one page/screen. It is simply a term to indicate that content for other pages/screens will be downloaded in the background and displayed when ready, so that users will not see any blank pages while navigating around the website (but instead would see eg. a loading spinner). In other words, this is a way to increase the performance of the website. Frameworks such as ReactJS, AngularJS or VueJS can be used for these types of projects. A website following the latest technologies and features made available through web and mobile browsers. These features can include offline support, native push notifications, add web app to home screen on mobile, improved caching, and much more. What is important to note is that the ios browser does not fully support all PWA features, e.g. push notifications and add to home screen are only partially supported. Support for the Android browser is very good, but as PWA is a relatively new concept many features are still under development. This approach is suitable for clients who want to skip the app stores and are willing to compromise on the native interface to have a fast, cross-platform website ready to incorporate the newest trends in web development. A PWA solution should be thought of as an add-on to a Single Page Application; it simply adds more power, faster performance, and better reliability. 3

4 PWA specification Some of the key features available on PWAs.! Add to Home Screen Native Push Notifications High Performance Offline Storage Not Full Supported The web app can be bookmarked and added to the home screen of Android or ios, and then the web app opens in a native standalone app removing the URL and navigation controls. Desktop and Android can receive native push notifications, just as a native mobile app. ios has this on their roadmap, so it will be supported in the future. PWA makes it easy to cache content, which can increase the performance and give the user a faster and more smooth experience. The web app can utilize offline storage, and show the user content even when they have no internet connection. The ios browser does not have full support for all the PWA features, e.g. push notifications and add to home screen. 4

5 Native / Hybrid / Progressive Web Apps What are the platform options when developing digital solutions? Native Hybrid Progressive Web Pros Cons Generally better when building more complex apps Provides a better user experience than hybrid Custom interface performs better and is easier to develop Large open-source community Higher quality and performance than hybrid Very large component library with native APIs for notifications, camera, etc. Shorter time-to-market Pros Cons Good for simple apps with a low number of features and native UI elements Cost effective for +3 platforms Some reuse between web and app Coding two platforms at once results in good parity between platforms Hybrid is good for internal apps, where UI is less important than functionality Less frameworks to utilise Not necessarily more cost efficient than native and can therefore easily conclude in a value-for-money issue Relying on third parties to make new OS features available before they can be implemented Keeping versions in sync across platforms while addressing individual bugs can be more difficult than a pure native approach Native features can work very poorly or not at all on some devices (especially Android and Windows) Pros Cons More easily accessible in some cases, as it doesn t require installation Web often has better reach (but worse retention) Allows SEO and often better discoverability Can be maintained by web developers requiring less specialised staff Codebase can be reused across platforms Can t be distributed through app stores, but is accessed via a web browser instead Device-specific features such as fingerprint scanning can t be used Web often has worse retention (but better reach) Not supported on ios, which means it will look like a website rather than an app Potential longer time-to-market if we do both app and web Limited reuse between ios, Android, Windows and other OSs Will be dependent on external suppliers No code reuse between web and native apps 5

6 Web vs Mobile, what can be reused in development? Web vs Native mobile No code can be shared between a website and a native mobile. Web vs Cross platform / Hybrid mobile For the cross platform solution Xamarin no code can be reused in a web app, but mobile solutions such as React Native and Ionic can potentially share some code between the mobile app and a web app. As an example React JS and React Native can share some code, despite both frameworks sharing the name React. This is because, as React JS is intended for websites and React Native is for mobile apps, their interfaces are built differently. However, it is possible to share some parts between the two, such as the connection to the API and some of the business logic. However, if this is the case, it is important to note that the developers need to be aware of it from the beginning of the development. React JS / Angular Platform Specific User Interface Business Logic / API React Native / Ionic Platform Specific User Interface 6

7 This pressure to succeed in digital is leading to widespread concern that the wrong investment could present an insurmountable amount of technical debt. Subsequently, this pressure is leading to a digital fear as organisations are repeatedly caught in the headlights, making poorly informed or non-existent decisions. We are here to alleviate that problem and help you make the correct digital decisions. Christian Nielsen Director - Strategy & Delivery

8 Get in touch! Talk to one of our experienced mobile app strategists. +49 (0) www. nodesagency.de