Nativescript: a hybrid mobile solution

Hi community! I’m Sarai Díaz, Software Engineer working at Madrid’s office in the Liferay Screens team! :) This is my first blog post and I want to tell you something...

Native technology is a great choice to provide the best possible solution for your mobile customer experience but it’s not the only one. Nowadays there are many hybrid solutions like cross compiled, web based or javascript runtime. But, what does it means?

First, cross compiled means that you write the app in an specific language (let’s say Javascript or C#) and there is a compiler capable of creating the native code for your code. Then this native code will be compiled and packaged using the typical toolchain. Xamarin is the biggest framework in this group, but maybe you also remember Titanium.

The second way, web based way, such as Cordova (Ionic or PhoneGap). This way only uses HTML, CSS and Javascript to render the content and the Cordova layer allows you to call some native code.

The last way is the javascript runtime. You write the code in Javascript and this code runs in a Virtual Machine inside the device. Then, the API calls are dispatched to native APIs and after that, you can see the Android or iOS app doing what you requested. Nativescript is an example of this way.

Emil Öberg saw those ways to do mobile apps almost a year ago and he has a video speaking about that.

In summary, you can create apps simultaneously for both platforms, Android and iOS, and the app will look like native and nobody will realise that it's really hybrid ;)

The hybrid technology market is very fragmented right now and for that reason we have decided to keep an eye on some of the most popular frameworks like React Native, Nativescript, Ionic2 or Xamarin. We are creating little prototypes and different wrappers to use the native screenlets in an easy way with these hybrid frameworks.

I'm working on the Nativescript prototype and we have developed a small proof of concept that displays and uses the LoginScreenlet and the ImageGalleryScreenlet in both platforms, Android & iOS.

Pros and cons about hybrid solutions

Everything has pros and cons, right? Let’s see them!

If you want to create an app and you want to do it with hybrid technology, we just said that you can choose three ways: cross compiled, web based and javascript runtime.

If you choose cross compiled technology, you have to handling the first important issue which is the variations between UI controls on different platforms and their different ways they expect you to use them that alter the entire experience design. Also, code might not run as fast as native.

In other hand, if you choose web based technology, you can use your own tools. It means that you are not force to use a specific IDE to develop the app. You can use either a text editor or an IDE if you want some hints. But this fails to cope up with the expectations of building apps with offline capabilities and animation tools.

Finally, javascript runtime way, we said that you have to write your app in Javascript, which means that it executes all in the main thread. The operations that potentially take longer can lag the rendering of the UI and make the application look and feel slow. Also, if we want to target multiple platforms with a single codebase, some platform-specific features or styling may be unavailable or difficult to access.

So, if you are thinking about using a hybrid framework in the next project, you have to know that it’s an easy way for web developers because they already know the technology (HTML, CSS, Javascript) but you can have performance issues. On the other hand, it doesn’t matter what framework do you use, you can always reuse some code. But perhaps the biggest advantage is that hybrid reduces development costs.

Nativescript example

Now, you know more about hybrid solutions so, I think it’s time to see some code. You can see the Nativescript proof of concept here and the Liferay Screens plugin here. You can contribute to them too!

If you have any questions or doubts about this, please ask, don't be shy!

Blogs
Actually React Native, NativeScript and Appcelerator Titanium SDK are all in the third category—bridged JavaScript runtimes. All but React offer direct FFI-style access to the underlying native APIs. In React you need to bridge them manually for every platform.

Great post nonetheless!