Nowadays web technology (HTML, CSS, and JavaScript) is everywhere!
In recent years, the fast-paced development of web technologies has dramatically powered development activities past its traditional boundary. Web technology has not only been entrenched in modern browsers, it has also contributed to enterprise-level Web applications, mobile application development, and server-side services, as well as some emerging platforms like the Internet of Things.
Here are several highlights of how advances in web technologies have changed the development process:
- HTML5 brings many new features (like built-in video/audio playback, local cache, etc.) to benefit modern browsing (cross-browser compatibility, mobile optimization, etc).
- Working with HTML5, CSS3 ensures easier and but still powerful building of web pages.
- The development of the JavaScript ecosystem contributes a lot of frameworks (like AngulaJS, Backbone.js, Ember.js, React.js, etc.) that unquestionably facilitate the development of web technologies.
- Node.js, a JavaScript (Google V8) powered cross-platform runtime environment opens the gate of server-side development by just using web technologies.
- On June 17, 2015, The General Assembly of Ecma International has announced the approval of the next version of JavaScript (with the codename ECMAScript 6 or ES6, now called ECMAScript 2015 officially). The new version brings foundational changes to JavaScript which enables the development of larger, more complex web applications.
Web technologies also play a very important role as they enter the mobile application development arena. They benefit mobile developers through its simplicity and fast-paced development, as well as its “cross-platform” nature – “Write Once, Run Anywhere”.
The majority of development work nowadays still uses HTML, CSS, and JavaScript to build web pages, then these web pages are run in an internal browser (called WebView), which is embedded in a native application (called Native Shell). If needed, the Native Shell can also expose native APIs (like camera, location service, etc.) to JavaScript. The applications built in this way are called Hybrid Applications. Some frameworks (like Apache Cordova (PhoneGap), Ionic, etc.) can facilitate this development.
In general, the benefits of Hybrid Applications fit well with our needs in terms of development process as well as our marketing strategy:
- Its “cross-platform” nature can help reduce development time and cost dramatically.
- We can easily design for various situations, like different platforms, device sizes, etc.
- We can provide rapid prototyping and easy distribution to each platform (web browsing or app store).
However, this approach still has several “pain points” that prevent developers from choosing hybrid applications over native applications, such as:
- Poor performance. Although the internal browser (WKWebView in iOS and Chrome WebView in Android) has been improved to provide faster web page reddening speed, the overall performance is still not comparable to what a native application brings.
- Poor Native API support. With the help of frameworks, the application can access to the native features of underlying platforms by leveraging external “plugins”. However, using such “plugins” actually brings uncertainty as well as complexity in managing the development as well as a required level of maintenance.
Then, is it possible to bring web technologies to “native” mobile application development?
The answer is YES.
With the help of JavaScript engine (also called JavaScript Runtime), developers can still write the application by using web technologies, but also allow the application to run directly on platforms (like iOS, Android) supported by JavaScript Runtime as a native application.
Because of this, developers can utilize the fast and convenient web technologies for development as well as the counterpart performance and user experience that a native application provides.
The framework Appcelerator Titanium is the earliest pioneer in this area and it does a great job in creating mobile applications on different platforms from just one JavaScript codebase. In March 2015, the release of React Native by Facebook brings this approach to the next level.
Compared to Appcelerator Titanium, React Native uses a batched asynchronous messaging protocol for establishing communication between native main thread and a background thread where a JavaScript engine runs to process JavaScript code. Without blocking the native main thread, the application can be more responsive and bring a more native-like user experience. Beyond that, React Native also ships with React.js – the emerging powerful framework that helps build applications easily by using its novel technologies (like Virtual DOM, One-way Binding, etc.).
Currently React Native is used in two of Facebook’s apps: Facebook Groups and Facebook Ads Manager. Without mentioning it, it is hard to tell they are not built upon native SDK and instead are built on React Native.
The “core” need for using web technologies in native mobile application development is to build applications with a powerful performance and native-feeling UI. And the most promising part of React Native just lies on it – perhaps it can help lead us to this new stage of mobile application development.
Leo Shi is the Mobile Tech Lead at Logic Solutions. He participates in the entire development process of iOS and Android mobile applications, and web-based mobile apps.