While Apple celebrates the tenth anniversary of the first iPhone release, the mobile app development tools have grown up since then. Whether you are a developer, CTO or company leader, the technology you will choose when creating a mobile app is of paramount importance. This post will help you give an outlook of your options regarding mobile technologies choices.

For years, developers have been trying to find a way to code only once their applications for iOS, Android and the other mobile platforms. Many tools and frameworks have appeared over time with different coding paradigms and so performances. But they don’t aim at developing the same kind of applications. In the first part of this article, we will have a look at the current mobile development ecosystem.

In the second part, we’ll focus on a breakthrough technology: React Native. It was introduced by Facebook two years ago as another framework for cross-platform mobile development. But React Native is a game-changer as has been leveraging web developers skills to make truly natives applications (as opposed to simple web views). Hundreds of developers have been joining the community every day and contributions have been coming from all around the world.

YOUR OPTIONS AMONG MOBILE DEVELOPMENT TECHNOLOGIES

GO FULL NATIVE… ONLY IF YOU CAN AFFORD IT

Building mobile app with platform specific native code (ie. Java/Kotlin for Android and Objective-c/Swift for iOS) will bring you the best performances, smooth screen transitions and consistent native look and feel. It also means that you will directly use the tools and libraries recommended by the companies behind the platforms.

native mobile development process

The main limit is that you have to build one application for each targeted platforms. Then, you cannot share any code across platforms and even the way of thinking is different.

Also, Native mobile apps are expensive. Please note that qualified developers for both platforms are very rare and you that will certainly have multiple teams, meaning more management cost and more specification differences.
So make sure that you can afford it or that you really need it (mobile game apps for instance) if you want to go native only. But a cross-platform can meet your needs too, so I recommend you to check out the rest of this article.

CROSS-PLATFORM NATIVE APPLICATIONS: CHOOSE YOUR LANGUAGE

Cross-platform mobile applications are a kind of hybrid applications. Usually, they enable you to code in one language (Java or .Net for example) and then to transcode automatically your code into code adapted to the destination platform.

cross platform native application process

The two reference frameworks are Xamarin which is .Net and CodeName One which is Java. Both frameworks will compile your code in C for the iOS platform which leads to native performances. For Android, it will run directly either with the mono framework or with Java.

One problem with those frameworks is that they wrap every component in an abstraction, and this can lead to bugs. You might end up making hacky code for some specific things in order to have exactly the same experience on iOS and Android.

Bear in mind that all non-trivial abstractions, to some extent, are leaky.

The performances are very close to native apps and the cost may be far less than going full native. Just take into account that it adds complexity and configuration, which can induce overhead costs depending on how you build your application.

HYBRID WEB APPLICATIONS: WEB DEVELOPMENT MADE EASIER

Hybrid web applications are mainly coded with classic HTML, CSS and Javascript which will run in an internal browser (web view) inside an empty app. So you have almost the same web view on each mobile device, hence a low-cost cross-platform application. Web developers are immediately productive as they can use their usual tools.

hybrid web application process

Although it’s a web-based application, you can access native API (and even widgets) with the help of libraries. Apache Cordova is the main base framework for this kind of application. It helps you develop, build and package your application on multiple platforms. There are hundreds of plugins that can help you access the camera, different captors or native API.

Unfortunately, web-based applications will never feel native as you don’t use native components. Plus, using web views have its issues too. Besides performance issues, the lack of graphical consistency between mobile web browsers is problematical. Even though it may not be as important for a website, mobile app users expect similar experiences between platforms.

The Ionic framework tries to solve the consistency problem on top of providing multiple components and fixes for iOS, Android and Windows. You can see the app showcase to see if it fits you.

Bear in mind that it’s just web-based and it will never provide a pure native experience (but you can get close).

RESPONSIVE WEB APPLICATIONS: TO KEEP IT SIMPLE

Depending on your needs, a simple responsive web application can fit you. Your application will have the same performance as a Hybrid Web Application.

If you are building a MVP, it can be an affordable solution.

But wait, no mobile application icon? No native API access? And what if I have no network? Just go to the next section to see what you can already do in 2017!

PROGRESSIVE WEB APPLICATIONS: THE FUTURE IS HERE

Progressive Web Apps (PWA) are very recent. It’s a bunch of specifications, browser API and OS capabilities which allow web applications to:

• be installable,
• be secured,
• work offline,
• be always up-to-date,
• be referenced by applications stores,
• use any API provided by the underlying system (like push notifications, camera …),
and so much more!

Can you imagine a world where all the possibilities offered by hybrid web Applications were accessible with a simple web page? Say hi to Progressive Web Apps because they make it a reality.

Google is pushing very hard for this direction and you can already test it in your mobile Chrome browser. Unfortunately, Apple does not (yet) fully support PWA on iOS. But I bet it won’t take long before they do.
Also, bear in mind that PWA is not a specification. It’s more of a paradigm based on a mix of possibilities and API so your app must be “progressive” to handle multiple systems and API. To see what your OS/Browser is capable of you can go to whatwebcando.today (from your mobile).

You can find some PWA examples here. Twitter recently released Twitter Lite, which is another example of PWA.

HYBRID JAVASCRIPT APPLICATIONS: BETWEEN WEB AND NATIVE APPS

This kind of framework is halfway between Native applications and Web Hybrid applications. And this is where you find React Native among others.

Without entering into architectural details, all the application UI and the business logic will be coded in Javascript. This Javascript code will run directly on the phone (in a thread) and will be able to communicate with the native code. And while you write Javascript, it will end up rendering your UI with native platform components (meaning a truly mobile experience).

hybrid javascript application process

The biggest advantages are that Javascript can run exactly the same way on every device and it is a well-known language (mostly for web developers).

The best-known frameworks are:

• React Native (github.com/facebook/react-native)
• NativeScript (github.com/NativeScript/NativeScript)
• Titanium (github.com/appcelerator/titanium_mobile)

They all have their specificities about how to make things work and how to render components and widgets. The performances are usually very good (60fps), better than hybrid web applications while not as good as native code. Performance bottlenecks are usually in the Javascript code but in general, it’s good enough.

NativeScript and React Native are both good frameworks and you can read more about NativeScript here.

ZOOM ON REACT NATIVE: DEVELOPING NATIVE LIKE WEB

React Native is a Facebook Open Source framework introduced by Facebook in 2015. It’s a new way of thinking cross-platform mobile development by reusing Javascript web technologies used by thousands of developers. Besides, React Native leverages web developers skills by adopting the same way of creating user interfaces than on a Browser. Both Android and iOS are supported.

INTRODUCTION: REACT.JS

As its name suggests, React Native uses React.js to drive native components. React.js was open sourced by Facebook in 2013 and is used by many developers and companies to create Web Applications.

It is a very powerful and simple component-based library for the view. React is based on the fact that the view must be strictly derived from a state. Each time the state change, React will update the view. By using a very fast Virtual DOM, it is able to update only what is worth updating in the view.

react native process

React.js is a new approach and has changed the way we think about web development:

• First by defining a component format “jsx” which permits to mix XML declaration with js code: it is much readable and maintainable (one file per component, independent, autonomous)

• Secondly by promoting one-way data flow which is very easy to think about. Famous libraries like Redux are based on an unidirectional data flow and are now used in many applications.

• The React.js community is huge (70 000 stars on Github) and there are many resources, examples and tutorials available on the web to help developers. A good starting point is the React.js doc itself

REACT NATIVE COMPONENTS

Same as you talk about DOM for Web, with React Native you talk about specific components. They have their DOM counterparts:

table of react native components compare to react.js components

Whether you are in HTML or React Native, you are just putting elements into elements and styling them. So this is very easy to reason about it.

LAYOUT SYSTEM

IN NATIVE APPLICATIONS

Let’s go back to how you can position elements in native code, for example iOS. To design the screen layout and place components, you will have to define manually a lot of constraints, positions and widths. At the end, the code will be full of math calculations to make your design responsive to different screens or orientations. Having a strong Web development background experience will not help you program a mobile application since you will have to learn everything again.

IN REACT NATIVE

Hopefully for us, React Native implements flexbox and absolute positioning. Flex positioning is very similar to the W3C specification and it is a pleasure to use it in both Web and React Native.

Components are entirely styled via their “style” property. React Native support many CSS properties and this is very easy to reason about it too.

Animations are not done with CSS transition. However, the animation systemis very straightforward and powerful since you just have to define variable values in your styles.

LEARN ONCE, WRITE ANYWHERE

React Native supports both Android and iOS, which are both production ready.

A Windows UWP support is also available through an open source project at Microsoft.

Sometimes components may behave differently between platforms, different attributes or styling properties. Usually, 80-90% of the code is shared across platforms. When it differs, all you have to do is put a platform-specific condition in the code.

DEVELOP IN REAL TIME

React Native allows you to develop as if you were in a browser:

• Modifications happen immediately, it can be either a Javascript reload (the app itself doesn’t stop) or hot code replacement. This is very useful when designing interfaces because you can iterate in real time.

• React native also offer debugging with Chrome, you can very easily debug and set breakpoints like if you were developing a web page.

• You can also inspect your React Native component hierarchy like you would do it in Html.

USE NATIVE APIS

Coding in Javascript does not mean you do not get to use native API or native widgets. Actually, each React Javascript component uses a specific bridged module on the native side.

• Firstly some API/Widgets are already available in the React framework.

• Secondly, the React Native ecosystem is growing every day. When you need to use some API or Widgets that do not exist in the base Framework you will easily find an open source project to fulfill your needs.

• And lastly, making your own bridged component or API is not so complicated. You might need it when you want to make strong computation or access a special API. In these cases, you will have to know some Objective-C or Java code. But it remains very rare.

HOW REACT NATIVE COMPARES TO OTHER TECHNOLOGIES

React Native has both the advantages of native applications (performances, native look and feel) and Web Hybrid applications (reuse web developers skills, fast iteration, real-time preview).

With React, you can have a single engineer or a team of engineers specialized in cross-platform mobile. The development is fast, and the resulting applications are smooth in iOS and Android with 80% shared code.

You can also update the already deployed applications in real time with tools like CodePush, which is not possible with native apps.

REACT NATIVE ECOSYSTEM

Using React Native alone will not get you further than a PoC. You will need to integrate some Javascript libraries. For example, you will need to choose a state management library. Redux or MobX are great choices but the subject is so dense that it would take a whole article to be covered.

Whatever the platform you use, you will need:

• building tools
• continuous integration
• crash and log monitoring
• user experience monitoring
test tools

Those are tools that now integrate well with React Native and we could talk about it in future posts.
If you want to see how React Native Apps look like, continue here:
facebook.github.io/react-native/showcase.html

CONCLUSION

Coming from a strong Web development background, I have developed multiple React Native applications for both iOS and Android. Clearly, web knowledge helps a lot as it is the same way of thinking. That said, you still have to learn multiple platform environments like XCode and Android Studio, which can take some time.

Nowadays, users are very demanding about applications. They expect responsive, smooth experience and reliable apps. When it doesn’t work the first or second time, they will delete your app immediately or never open it anymore.

So which framework or technology should you use next? Unfortunately, the answer is not black or white. It depends on use cases, context, available resources and skills. But I am convinced that you should give React Native a try for all the reasons mentioned in this article.

Here some questions that you could answer in order to help you choose the right technology:

• What kind of developers do you have? Web? Native?
• Do you need to support iOS and Android?
• What kind of content will you have?
• What kind of users are you targeting?
• How much do you expect your app to be used per day?
• Do you already have a Web responsive version?
• Do you need to use specific smartphone capabilities?
• What is your budget?
• How much time do you have?

Let’s conclude with some wise words: never forget to always be pragmatic about the technologies you can or should use.

Thanks for reading!

    Share: