The way that everything related to mobile affects us is amazing. Mobile phones started to take control over our lives when first iPhone was released back in 2007.
That’s why in the past 5 years I moved from website development to hybrid mobile development. I love the idea of having an application in your pocket that we can use everywhere, any time.
There are many technologies available, but we can differentiate two fields: hybrid and native. The first one is using mobile technologies but it’s more like a normal website with super powers (access to native plugins). Native, in the other hand, is when an app runs without any webview and doesn’t use a Document Object Model. Normally there were written using native languages (Java/Swift) you can compile now to native from JS.
Progressive Web Apps or PWAs are built using 100% website technologies. In fact they are just websites that we have on our home screen. We can also access the different mobile components like camera, agenda, etc. using HTML5. So if we have already a responsive website it might be interesting to consider this option.
This technology is quite new (is the latest on the market) and we couldn’t have them deployed on the different markets because you can’t compile directly to a native app… ‘til now. It has recently been announced that this year it will be possible to release these apps for Android and also for desktop (iOS is still saying no to PWA).
Ok, webview is not actually the name of these apps. It used to be “hybrid” but this became confusing when PWAs came to the market (some others call it “hybrid native” but I think that makes everything even more complicated).
Is a hybrid app something you can build using mobile technologies? Or is something you can have running through a webview? Does it need to compile into an app?
The real thing is that no one has an answer. We still having here a non-native performance. These apps can compile to an .apk or an .ipa to be installed on our phones but run on a webview. So this would be like a PWA inside a native app, available on Google Play and Android Market.
For this conversion we’re using Cordova but it’s quite transparent for a developer. There are not too many commands we need to learn. To use the APIs in order to talk to the native plugins we need to still use JS, so there’s nothing new to learn. There are some Cordova commands that we need to know to compile our app but this is managed by some other framework these days like Ionic.
Ionic is the chosen framework for mobile development. I’d say it’s a must if we want to move to this option. With version 4 we can use now different JS frameworks to work with like Angular, Vue, React… and we don’t have to worry about JS/CSS for global components (headers, buttons, slides…). Ionic will generate a totally complete design for iOS having a specific UX for every platform bringing to the final user a clean design with a more similar UI to native.
Ok, this sounds weird, I know, but again, we still don’t have a name to define this. What we have now is an app that we can use previous technologies to work with: JS, “CSS”, known JS frameworks… BUT (and this is the important part) having a real transformation to a native app and this means that we can forget about a webview. This will compile to native!
So why we need hybrid when we can have this?
Well, first of all because there are some new things we need to learn here. I mentioned “CSS” and that’s why is not exactly the CSS we know. It’s pretty much the same to be honest... but not exactly the same. For example, there are some properties that don’t exist and some others use different values (for example the are no more px, just values).
And secondly because this technology is much newer than hybrid. In my opinion this will replace hybrid apps in the future and now we’ll see why.
The first thing we’ll have to know here is that there is more DOM of elements. We have now a layout and everything we need to put there needs to be following some native rules. This also means - as we said before - that the CSS will change. For example, we can use no more z-index.
Let’s see some differences on the code between PWA, Ionic and JS-Native Frameworks creating a navigation bar:
Easy, right? Less code and a common way to create a canvas with elements. This makes code much easier to understand.
We can see there NativeScript. That’s only one option we can choose here. I have to say I prefer having different options to work with: Angular, Vue, JS and TypeScript. But you could also choose ReactNative (if you have already experience with React), Xamarin (if you know C#) or Flutter (something really cool but too new for serious projects yet).
If you come from hybrids technologies and you’d like to try this there are some fantastic tutorial here.
And here we are with the only 100% native options in terms of development and result. Written in Java (Android) and Swift (iOS) this is the best option when we want to build something professional and we don’t need to worry about cost and/or velocity.
We access to APIs natively and with this we reduce the number of possible bugs to almost zero. Also if something works on Android X.X it will run perfectly on a different device using the same OS version so we’d need less testing for our apps.
Bad thing is that we need two different codebases: one for Android and a totally different one for iOS. Also testing, deployments, devs… everything would be separate.