With the rapid development of mobile terminal in recent years, with the increasing demands of enterprises for R&D efficiency and dynamic capabilities, cross-platform technologies are springing up in an endless stream. In this article, we will share the evolution of cross-platform technology on mobile. First, why cross-platform technology?
Why cross-platform technology?
- On the one hand, with the rapid development of mobile Internet, the competition between companies is becoming more and more fierce. How to quickly land the business and fast trial and error has become a concern.
- On the other hand, improving research and development efficiency, shortening research and development cycle, ensuring rapid trial-and-error of products and rapid iteration of new functions, and enabling new products and new functions to reach Android, iOS and other multi-end users at a faster speed are the consistent demands of today’s enterprises.
As we all know, Android applications need to be written in Java/Kotlin, iOS applications need to be written in Objective-C/Swift, and Web applications need to be written in HTML /CSS/JavaScript. As a result, when multiple applications need to be developed, each end needs independent research and development, testing, up to the launch, and subsequent maintenance work. The workload increases exponentially, which is bound to extend the development cycle and slow down the rhythm of product iteration.
In order to solve the problem of multi-terminal independent development, cross-platform technology has emerged. Internet companies at home and abroad have invested a lot of manpower to this end, so various cross-platform technology frameworks have emerged.
An overview of cross-platform frameworks
The Stone Age
In this period, there was no corresponding cross-platform development framework, and developers used the most primitive HTML + CSS + JS method for application development.
HTML
Time: 1993
HTML is a standard markup language for creating web pages. The combination of HTML + CSS + JS is one of the most successful cross-platform development examples in history.
One of the biggest issues at this time was the development experience. You can’t imagine developing a feature that has to be code for multiple browser versions. This is fine on iOS, but on Android it is very expensive to adapt because of its fragmentation. Partners with front-end development experience will be deeply touched.
Hybrid period
During this period, several cross-platform development frameworks, such as Cordova and Ionic, have been introduced.
Cordova
Time: 2009
Cordova is the predecessor of PhoneGap, which allows you to develop mobile apps using HTML, CSS & JS.
Ionic
Time: 2013
Ionic is a lightweight MOBILE UI library based on AngularJS and Cordova. It features fast, modern, and beautiful interfaces.
While the development experience improved during the Hybrid era; However, the actual performance and smoothness of the APP is not as good as that of the native APP. As a result, many companies and developers are beginning to figure out how to improve the performance of their apps while simultaneously developing the experience. In fact, the main factors that limit the performance of Hybrid applications are:
- Network transmission speed, resulting in front-end data presentation delay (CSS, JS and other resources);
- The limitations of webView containers and single-threaded JavaScript;
The browser parses and renders the DOM Tree and CSS Tree, parses and executes JavaScript, almost all of which is done in the main thread.
After recognizing the performance bottlenecks of Hybrid applications, let’s make a bold assumption:
Whether the business code and UI can be implemented with JS+CSS, while rendering to the native processing, so that we can get rid of the bondage of WebView, achieve both development experience and performance.
FB engineers from the other side of the ocean did it, and they called it React Native; React refers to the React. Js front-end development framework, using JS+CSS development; Adding the word “Native” after it has two meanings:
- These “JS+CSS” will eventually be interpreted as native controls;
- Native performance experience;
RN marks the beginning of the OEM era for mobile cross-platform development.
Lesson from this case: as an engineer, never limit your imagination; Be able to make bold assumptions if they come true.
OEM period
During this period the framework will encapsulate the DSL layer and the UI will eventually be rendered as Android/iOS native controls.
React Native
Time: 2015
React Native is an open source cross-platform development framework for Facebook based on React. It marks the beginning of the OEM era for cross-platform development frameworks.
- RN’s open source has set off a boom of cross-platform development in China, and some domestic Internet giants have joined RN’s camp.
- Powerful companies are also tweaking RN to fit their business; A typical example is Ali’s Weex;
- Of course, some large companies have made some encapsulation based on RN, but not open source, so you may not know, for example: Ctrip’s CRN is ctrip’s internal RN;
Weex
Time: 2016
Weex is an open source framework for developing high performance native applications using popular Web development experiences.
- Weex is a domestic RN. The biggest difference between Weex and RN is that it naturally supports bundle splitting. One JS bundle per page is more suitable for domestic enterprises.
- In addition, Weex supports vue. js and Rax framework development, Rax is a set of Ali React protocol based on light weight, high performance, easy to use front-end development framework;
It seems that the solution during the OEM period is perfect, but there are still many problems:
- The OEM framework itself has high maintenance costs:
- Mainly because the components provided by these OEM frameworks depend on the native space, the Android and iOS controls are not static, and the system manufacturers will do iterations from time to time, and once they have those iterations
OEM components have to be adapted, and the cost of adaptation is high; – In addition, it is expensive and impossible for OEM frameworks to smooth out the differences between Android and iOS because the controls are provided by the system manufacturer. For example: RN’s date selection component, I’ve had more than one friend ask me why RN’s date selection component works so differently on Android and iOS.
- The contradiction between platform features and product pursuit of consistent experience:
- OEM framework attaches great importance to platform features. In fact, the phrase “platform features” comes from THE RN team. It can be seen that the RN team has no choice but to declare that THE PLATFORM features are important to RN.
- Because RN’s framework is inherently platform-specific, it is inconsistent with most products’ expectations of a consistent experience across platforms. In order to solve this contradiction, many teams and companies have to solve it through custom components. The cost of custom components is very high, and it requires Android and iOS students with native development experience to make it.
Self rendering period
In this period frame does not do OEM period control porter, but starts all over again, oneself is not only responsible for the upper UI encapsulation, but also responsible for the bottom interface rendering.
Flutter
Time: 2017
Flutter is a cross-platform development kit developed by Google for developing applications for Android, iOS, Windows, Mac, Linux, and Google Fuchsia.
- My time mark here is 17 years, 17 years is not the time when it was really born, 17 years is the year when it was known to the public;
- As discussed in the Mobile Architect Development System Course, the origins of Flutter can be traced back to 2014, when it was called Sky, which was one of its codename at the time; It was renamed Flutter in 2015;
- At Google I/O 2017, Flutter was officially unveiled by Google.
- Flutter differs from the OEM framework in that it uses Dart to implement the upper UI and Skia to render the bottom layer, freeing itself from traditional Android and iOS controls.
reference
- Mobile architect
That’s all about the evolution of mobile platform technology. If you like ❤️, you can like 😘.