It is essential to understand the evolution of mobile development technologies, particularly the background that led to the emergence of Flutter. Understanding the context behind a new technology helps in comprehending why it exists in its current form. Now, let’s dive into the evolution from native development to cross-platform solutions.

1.1 Native Development and Cross-Platform Technologies

1. Native Development

Native applications are specifically developed for a particular mobile platform (such as iOS or Android), using platform-specific development tools and languages that interact directly with the system's SDK. For example:

• Android native applications are developed using Java or Kotlin, interacting with the Android SDK.

• iOS native applications are built using Objective-C or Swift, interacting with the iOS SDK.

Advantages of Native Development:

• Full access to platform features (GPS, camera, etc.).

• High speed, excellent performance, capable of handling complex animations and drawings, leading to superior user experience.

Disadvantages:

• Platform-specific, resulting in higher development costs as different platforms require separate codebases.

• Limited flexibility with dynamic content. Most updates require a full app release, which can be time-consuming.

In the early days of mobile internet, the relatively simple business requirements made native development viable. However, with the rise of the Internet of Things (IoT) and the rapid pace of mobile internet advancements, native development has struggled to meet increasingly complex business demands.

Key Issues Native Development Faces:

1. Dynamic content demands: As app requirements change, native apps must undergo version upgrades, which takes time due to app store reviews—a significant limitation in today’s fast-paced internet era.

2. Increased development costs: Maintaining separate Android and iOS development teams adds to the manpower and testing costs.

Summary: Native development faces challenges of dynamic content delivery and high development costs. Cross-platform frameworks were developed to address these issues.

2. Introduction to Cross-Platform Technologies

To tackle the issues faced by native development, the industry has sought better solutions, resulting in several cross-platform frameworks, particularly for Android and iOS. These frameworks can be classified into three categories:

1. H5 + Native (e.g., Cordova, Ionic, WeChat Mini Programs)

2. JavaScript + Native Rendering (e.g., React Native, Weex)

3. Custom-Drawn UI + Native (e.g., Qt for Mobile, Flutter)

The next sections will explore each framework's principles, strengths, and weaknesses in more detail.

1.2 Hybrid Technologies: H5 + Native

1. H5 + Native Frameworks

The core idea of hybrid development is to use HTML5 (H5) for dynamic content within an app, which is loaded through the native WebView component (WebView for Android or WKWebView for iOS). For simplicity, we will refer to both components as WebView.

Advantages:

• Dynamic content can be updated without needing a full app release.

• H5 code is written once and runs on both Android and iOS, reducing development costs. The more functionality implemented in H5, the lower the development costs.

Apps developed this way are referred to as Hybrid Apps, and if most of the functionality is in H5, it is called a Web App.

Examples of hybrid frameworks: Cordova and Ionic. Many apps incorporate some H5 functionality, making hybrid apps a widely adopted solution today.

2. Key Aspects of Hybrid Development

While native development has access to all platform features, H5 code runs in a WebView, which is essentially a browser engine. Therefore, JavaScript running inside a WebView is sandboxed and lacks access to most system-level functionalities (e.g., file system, Bluetooth). For these functions, native code must be used.

Hybrid frameworks typically provide a set of system-level APIs via native code, exposing them to the WebView for JavaScript to call. This communication between JavaScript and native APIs is facilitated by a JsBridge, a communication tool that follows a standard protocol, allowing JavaScript and native code to exchange messages.

Example: JavaScript calling a native API to retrieve the phone model:

class JSAPI {
 @JavascriptInterface
 public Object getPhoneModel(Object msg) {
   return Build.MODEL;
 }
}

The native API is registered in the WebView:

import wendu.dsbridge.DWebView;
// Register the native API to the JsBridge
dWebView.addJavascriptObject(new JsAPI(), null);

JavaScript calls the native API:

var dsBridge = require("dsbridge")
var model = dsBridge.call("getPhoneModel");
console.log(model);

Advantages of Hybrid Apps:

• High development efficiency due to the open ecosystem of the web technology stack.

• Rich community resources for the web technology stack.

Disadvantages:

• Lower performance, especially when handling complex user interfaces or animations in WebView.

1.3 React Native and Weex: JavaScript + Native Rendering

React Native (RN) was open-sourced by Facebook in April 2015 and is a popular cross-platform mobile development framework supporting both iOS and Android. RN uses JSX (a JavaScript extension that allows writing HTML-like tags) and CSS to develop mobile apps.

Core Principle of React Native: React Native operates on the same principles as React on the web. Instead of rendering DOM elements in a browser, RN renders native UI components by bridging JavaScript to native code via JavaScriptCore.

Weex, developed by Alibaba, is similar to React Native but supports different Domain-Specific Languages (DSLs) like Vue and Rax.

Advantages:

• Web development skills are transferable, making it easier for web developers to build mobile apps.

• Native rendering for better performance compared to hybrid frameworks.

Disadvantages:

• Communication between JavaScript and native layers can introduce performance bottlenecks in certain scenarios, such as frequent interactions during complex animations.

1.4 Qt for Mobile: Custom-Drawn UI + Native

In this section, we explore the last type of cross-platform technology: Custom-Drawn UI + Native. This approach uses a custom rendering engine to draw the UI, offering more control over appearance and consistency across platforms.

Advantages:

• High performance, as the custom engine directly calls system APIs.

• High flexibility and consistency, as the UI is independent of native controls.

Disadvantages:

• Lower development efficiency, as these frameworks (like Qt) often use static languages like C++, which are less flexible and harder to manage than JavaScript.

1.5 Emergence of Flutter

Finally, we arrive at Flutter, Google’s high-performance cross-platform framework. Flutter uses a custom rendering engine with its own layout and drawing system, allowing for a highly consistent and performant UI across platforms.

Since its initial release in 2017, Flutter has rapidly gained popularity, with a strong community, frequent updates, and support from Google. It offers superior development efficiency thanks to features like hot reload, which allows developers to see code changes in real-time without losing the app’s state.

Flutter has quickly become one of the most popular frameworks for cross-platform mobile development.

1.6 Conclusion

In this chapter, we have explored the evolution of mobile development technologies, from native development to hybrid frameworks and cross-platform solutions like React Native and Flutter. Now, equipped with this foundational knowledge, we are ready to delve deeper into Flutter itself.