Which approach should you take when building an app? Should you take up the PWA/web technologies route or should you go native and design for specific platforms? Both options have their pros and cons, and in this article we concentrate on a few of the popular choices used to create web and native apps.
PWAs vs. Native apps: What's the difference?
Progressive Web Apps have the advantage of being installable and live on a device without the need for an app store. And, part of the process is the Web App Manifest which allows developers to control how an app appears and how it's launched. Also, web designers/front end developers will already have the skillset needed to start building immediately. There's no need to learn a new language, unlike native apps.
The advantages of native apps is that they typically bring better functionality as they make better use of a devices hardware and software, are faster and more responsive and you get quality assurance though ratings in app stores. But, it will mean having to learn how to use a specific framework or library.
Here we look at three different options – one for web (PWAs) and two for native (React Native, NativeScript) – for building an app. We run through how they operate, what they can do and look at their strengths and weaknesses to help you decide which option you should choose to build your app.
Progressive web apps: Building for the web
Strengths of PWAs
- Apps also work in the browser
- Distribution: browser, enterprise and app stores
- Can utilise React, Angular, Vue, vanilla or other frameworks
Weaknesses of PWAs
- No access to every native API
- Abilities and store distribution on iOS and iPadOS are limited
- It’s in continuous evolution
In this approach, we don’t need to package and sign the resources of our app: we just host the files in a web server and the service worker will be responsible for caching the files in the client and serve them after installation. This also means if an app needs updating, you just change the files on the server and the service worker’s logic will be responsible for updating them on users’ devices without user or app store intervention.
In terms of distribution, the most common method is the browser. Users install the app from the browser by using the Add to Home Screen or Install menu item, by accepting an invitation to install or by using a custom web app user interface on compatible platforms. It is worth noting that Apple rejects pure PWAs published in the App Store and encourages web developers to distribute it through Safari.
The user interface is purely managed by the web runtime, which means the web designer is responsible for rendering each control on the screen. If you use a UI framework, such as Ionic, or a Material Design library, HTML and CSS will mimic native interfaces on Android or iOS but it’s not mandatory. When doing PWAs, applying web performance techniques is mandatory in order to keep a good user experience.
- Best cloud storage: Choose the right option for you.
Strengths of React Native
- Same patterns as with React.js
- Some web APIs are exposed
- Web and desktop support
Weaknesses of React Native
- Can’t reuse web UI components
- The native bridge needs some work
- React experience is needed
But no HTML elements are accepted for rendering; only other native components are valid. Therefore, instead of rendering a <div> with a <p> and a <input> element with JSX, you will be rendering a <View> with a <Text> and a <TextInput>. For styling components, you still use CSS and the layout is defined through Flexbox.
The user interface won’t be rendered in a browser’s DOM but using the native user interface libraries on Android and iOS. Therefore, a <Button> in ReactNative will become an instance of UIButton on iOS and the android.widget.Button class on Android; there is no web runtime involved in React Native.
You can start a quick React Native project with two free CLIs: Expo (opens in new tab) or the more advanced and official ReactNative CLI. If you use the official CLI, you also need Android Studio to compile and test the Android app and Xcode to do the same on iOS and iPadOS, so you will need a macOS computer for that platform.
React Native compiles native apps for iOS and Android, which means the distribution of your app will follow the same rules as other native apps: app stores for public apps, enterprise distribution and alpha/beta testing. Typically, you can’t distribute an app through a browser, although React Native for Web (opens in new tab) and Microsoft’s React Native for Windows (opens in new tab) platforms can help.
Strengths of NativeScript
- Good tools for coding and testing
- Extensive gallery of apps ready to play with
- All Android and iOS APIs are exposed in JS
Weaknesses of NativeScript
- Small community
- Can’t reuse web UI components
- No web, desktop or React support
The advantages of NativeScript are clearer when you use Angular or Vue. For Angular, you create the same components you are used to but using XML instead of HTML for the template, including all data bindings. In the XML, instead of a <div> with a <p> and an <img>, you will place a <StackLayout> with a <Label> and an <Image> component.
CSS and Sass are supported with similar styles to CSS in the browser. Routing and network management are done through implementations of the standard Angular services. For Vue, it’s something similar; you write the template in XML instead of using HTML in the same <template> element in your .vue file.
NativeScript includes a collection of components that are then mapped to an Android or iOS native control, so when you render a list or a picker, it will be the native app, using the same idea as in React Native.
NativeScript has great support for tooling, including VS code plugins, the CLI, a hot-reload testing system and a NativeScript playground app, so you don’t need to install all dependencies while testing, as well as several additional services such as an online playground (opens in new tab).
Finally, NativeScript only compiles an app for Android and iOS that can be installed from official distribution channels and app stores if you comply with their rules, enterprise distribution and alpha/beta testing. Typically there will be no way to distribute apps from a browser and there are no solutions for desktop apps for this platform.
This article was originally published in issue 325 (opens in new tab) of net, the world's best-selling magazine for web designers and developers. Buy issue 325 (opens in new tab) or subscribe (opens in new tab) to net.(opens in new tab)