React native practice of Ctrip moles Framework

Editor: This article is from the Ctrip framework Research and Development Department senior manager Wei Xiaojun in the second " Ctrip technology micro-sharing" on the sharing, the following is the collation of the text record. Click here for video playback . Follow Ctrip Technology Center Ctriptech to learn more about micro-sharing courses.

As support for the development of native applications with JavaScript, React native was launched by a number of companies are hot, all the eager. But one pain point is, on the mobile side, is it necessary for us to develop multiple sets of programs: IOS, Android, and H5? this will be through the moles framework to share, introduce ctrip in react native aspects of the actual dry, hope to give you some inspiration and enlightenment.

The content of this share includes three aspects:

1. What role does the moles framework play in the integration of react native and our master app?

2, moles framework is how to get through Android, IOS, H5, SEO, let us a set of code run on multiple platforms?

3. What is the composition and principle of the moles frame?

These will be explained in the following sections of the one by one to you to answer:

• The present situation of React native
• Emergence of the Moles framework
• Composition of the Moles framework
• Features of the Moles framework
• Brief analysis on the principle of Moles frame
• Use of the Moles framework
• Case of the Moles framework
• Open source program.

First, the status quo of React native

React native is a framework on a native of Facebook's open source in March 2015. So why is it so hot now?

Let's take a look at the advantages of it first.

First of all, for the front-end of me, the most attractive is that you can use JavaScript to develop native applications. Before JavaScript can only develop some features on the browser, with the advent of node. js, and JavaScript to the server, and now react native the advent of JavaScript to the native side. If you want to use a fashionable word to describe JavaScript, I think the "whole stack" is really not too much.

Second, React native is Facebook to transplant Reactjs's ideas to the native side. So react native has a lot of rectjs features, such as: Modular thinking, Virtual DOM technology and JSX and flexbox combination of the layout, and so on, while react native introduced a hot update mechanism, csslayout mechanism, Let developers, especially native developers, shine.

There are pros and cons, let's take a look at its shortcomings.

We know react native out the iOS version and then out of the Android version. There are many differences between the two versions, and even a lot of components have a platform suffix, which makes it necessary for developers to write different code for these two platforms.

In addition, for the company, in the mobile investment, not only have native there will be H5, and on the H5 react native is not considered. From the perspective of the MVC framework, React native only made the view layer, then the controller, Model, router still need to do. Judging from the integrity of the app, learning only react native doesn't develop a sound app. Its update strategy, the availability of the Hybrid API, the supporting UI components, the monitoring mechanism, and so on.

Ii. emergence of the Moles framework

Along with the development of react native project, the gradual moles framework is formed.

Mole [M?? L] Little Mole, a rodent with a very strong ability to dig holes. The framework is called the moles, but also hope that our framework can be like mole, can make holes, can get through Android, IOS, H5, SEO these platforms. Of course a mole ability is limited, so we take its plural form moles.

If the current mobile side of the three major pain points are: performance, dynamic, multi-terminal adaptation of the words. Then I think react native solves the performance, dynamic, and we moles solve the problem of multi-terminal adaptation.

Moles The goal is to do as much as possible on the H5 side of the development of content can be directly run on the native, the native-side development of content can also be directly run on the H5.

Iii. composition of the Moles framework

The framework consists mainly of three parts

-moles-web

This part is mainly for the H5 service, is the react native in Android, iOS without differentiation of components, APIs extracted, packaged separately into a library for the H5 end to use. The advantage of this is that the library will only be used on H5, and in native is not needed to reduce the frame size in native.

-moles-cui

The main part is to extract the react native in the different components and APIs of Android and iOS, and add some of the company's customized widgets, including: UI components, monitoring components, acquisition components, routing components, and so on. Moles-cui can be said to be the core of the moles framework, it not only native development needs to use, in the development of H5 also need to use.

-moles-cli

This part mainly includes the initialization, compiling, packing and other functions of moles project.

Here is a diagram of Moles-web and Moles-cui

Iv. functions of the Moles framework

The functions of the moles framework can be used to illustrate

Mainly covers the adaptation of different platforms, calls to the underlying API, and monitoring of performance and errors in the app, among others.

So what's the location of moles in Ctrip's main app?

As shown, it is a bridge between BU developers and React Native, Ctrip React Native. Let developers focus more on their business logic without worrying about react native update issues, compatibility issues with different platforms, and more.

A brief analysis of the principle of Moles frame

Because moles involves a lot of content, such as: Routing design, page life cycle design, packaging design and so on. Here we only take the design of the component as an example to analyze its implementation principle.

To do native and H5 code sharing, there are two common ways to think about it:

1, native components run on the H5, such as:

Class HelloWorld extends component{

Render () {
Return

<View>

<Text>HelloWorld</Text>

</View>
)

}

}

2, H5 components run on the native, such as:

Class HelloWorld extends component{

Render () {
Return

<Div>

<Span>HelloWorld</Span>

</Div>
)

}

}

The design of the components in the moles adopts the idea of Practice 1, which is to run the view, Text, navigator and other components supported on the native on the H5. To implement the native component running on H5, there are two difficult points to solve: 1, component 2, Component life cycle.

When we first started, we talked about the idea of React native on the idea that Facebook would use Reactjs's ideas on native. This lays the groundwork for the components that we can implement native on H5. So we can use REACTJS to develop these components, but in the actual development, found that the volume of Reactjs is too large, so we finally adopted the Ctrip open source React-lite framework.

Vi. use of the Moles framework

In order to reduce the cost of learning, moles framework in the design of the best use of the familiar syntax and commands. To use moles, you need to install MOLES-CLI first.

Here's a simple process for the first time using MOLES-CLI:

Installing MOLES-CLI

$ sudo cnpm install @ctrip/moles-cli-g

Initializing the Moles Project

$ moles init ProjectName

Installation Project Dependencies

$ CD ProjectName

$ CNPM Install

MOLES-CLI the directory structure after initialization is almost the same as the structure of REACT-NATIVE-CLI initialization, the only difference is that there is a web directory, which is primarily for H5 service.

Let's look at a simple code usage scenario

Import react,{

View

} from ' React-native '

If the above code calls the React-native module provided by React Natie at the native end, the H5 module will be called at the Moles-web end

import{

Application,

Page

}from ' Moles-cui '

The above code for the use of moles-cui, whether on the native side or the H5 side, all need to introduce the ' moles-cui ' module to use.

As an example of running an iOS project

$ moles Run-ios

Package, unpacking items

$ Moles Packer

--input/path/to/project

--entry Index.ios.js

--output/path/to/build

--bundle Bu.bundle

--common true

Parameter description:

Input: Project directory (default to current directory)

Entry: Portal file name (default = Index.js)

Output: Export directory (default =./build directory)

Bundle: The default output file name is the same as the portal file, or you can specify a file name

Common: Whether to hit common package (default = False)

Vii. cases of the Moles framework

At present, the moles framework has been put into production on Ctrip's main app, and interested students can install Ctrip app 6.17 and enter the "My Ctrip" channel, where the inside letter page is based on the moles framework. Now there are raiders, cruises and other channels are also on the ground to continue the access. I believe that in the near future, we will be in Ctrip's major channels to see moles figure. We also hope that moles can become the preferred framework for Ctrip and even the industry based on react native development projects.

The following are developed based on moles:

I'm carrying the channel.

Introduction Channel

Viii. Open Source Program

Before sharing the time, there are many students consulted open-source things. Here is a brief introduction, moles future will be an open-source framework. is an open source framework that provides solutions for developing react native projects. We will be the moles framework of related products gradually open-source to everyone.

The Moles Framework's packaging tool has been moles-packer open source on GitHub.

Some introductions about Moles-packer:

Moles-packer was developed by the Ctrip Framework team with the React Native packaging and unpacking tools that are used in conjunction with the Ctrip moles framework, while supporting native React Native projects.

Current version: 0.1.3

GitHub Address: Https://github.com/ctripcorp/moles-packer

NPM Address: Https://www.npmjs.com/package/moles-packer

React native practice of Ctrip moles Framework