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.
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.
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
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).
This kind of framework is halfway between Native applications and Web Hybrid applications. And this is where you find React Native among others.
The best-known frameworks are:
NativeScript and React Native are both good frameworks and you can read more about NativeScript here.
ZOOM ON REACT NATIVE: DEVELOPING NATIVE LIKE WEB
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.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:
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.
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:
• 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
• 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
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:
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!