IOS developer Weex pseudo best practices North

IOS developer Weex pseudo best practices North

Primer

This article is the author of the recent Weex on the iOS side of some of the research and practical experience, and share with everyone to share, it is also a summary of the results of the study. The practice mentioned in the article may not be the best practice, perhaps the method is not a standard guide manual, so the title will have to be called pseudo best practice refers to the north. There is a better way to welcome everyone to leave a message to discuss, learn together.

Because I do not know Android, so the following article will not involve Android.

I. React Native and Weex

Since Weex was born that day, it is impossible to get rid of the fate of React Native. React Native declared “Learn once, write anywhere”, while Weex declared “Write Once, Run Everywhere”. Weex from the day of birth, it is given the unification of three end hopes. React Native can support iOS, Android, and Weex can support iOS, Android, HTML5.

In the Native side, the biggest difference between the two may be in the JSBundle packet. React Native only allows the official React Native library and JS services together to fight into a JS bundle, does not provide the functionality of the packet, so if you want to save the flow must be made subcontracting tool. While the Weex default hit JS bundle contains only a small number of JS business code, based JS library contained in Weex SDK, compared with the Weex and Facebook React Native and Microsoft Cordova, Weex is more lightweight, small size.

On the JS side, Weex is also known as Vue Native, so the difference between React and Weex on both React and Vue.

IOS developer Weex pseudo best practices North

I did not write React Native, so there is no objective to compare the two. But know almost on a Weex and React on the Native very good contrast article “weex& React Native contrast”, recommend reading.

Two days before the @Allen Glow technology in Xu Shuai team blog published an article “React Native Glow” in the practice of this article talked a lot about React Native related to the practice, also strongly recommend you to read.

Two. Introduction basis

IOS developer Weex pseudo best practices North

Want to start on the small white Weex, of course, the most basic is to read through the document, the official document is the best learning materials. There are two official documents:

Tutorial documentation
manual documentation

It contains all of the components, modules, components and modules used in the Weex manual. Problems can come through. It is possible that some components and modules do not have those attributes.

1 Weex barrel and scaffolding

After reading the official document, you can begin to build the project.

I know that the Secretary has written 4 articles on the “Weex into the pit guide”. These four articles are still worth reading.

Weex is also the same as the front-end project, with its own scaffolding barrels. Weex-toolkit + weexpack + playground + code + snippets + weex-devtool.

Weex-toolkit is used to initialize the project, compile, run, debug all tools.

IOS developer Weex pseudo best practices North

Weexpack is used to package JSBundle, the actual package is also on the Webpack.

IOS developer Weex pseudo best practices North

Playground is a App on the shelf, which can be used to scan code in real time on the phone to show the actual page.

IOS developer Weex pseudo best practices North

Code snippets this is an online playground.

IOS developer Weex pseudo best practices North

I believe we should all have Native App, if there is really no App, then use the weexpack command to initialize a new project. If you already have a App project, the weex command is used to run and debug.

IOS project has been available, you can directly install the Weex cocospod SDK, after the initialization of SDK, Native can use the Weex. The address of the JS loaded into the company’s own server IP.

#define CURRENT_IP @ your computer device IP "/ /... / / change the port number to your port number #define DEMO_URL (path) [NSString stringWithFormat:@ http://%@: 8080/%s, DEMO_HOST, #path] / #define HOME_URL [NSString JS to modify the file path stringWithFormat:@" http://%@: 8080/app.weex.js ", DEMO_HOST]

So the whole project can run.

Here is one thing to note is that although the project ran up, but each run need to start NPM, open the Weex front-end environment. Here are two ways.

The first approach is to direct the Hook Xcode command, Xcode configuration in which to add the script to start the NPM run. Like this:

IOS developer Weex pseudo best practices North

The second approach is to manually run NPM run dev before each run. Personally, I still like this way, because before the Xcode is running, you must be able to play these commands on the command line.

Say how Debug, this is the use of weex-devtool.

IOS developer Weex pseudo best practices North

This tool and front-end debugging experience in the Chrome basically the same.

IOS developer Weex pseudo best practices North

Specific ways to see these two articles can be, here is no longer repeat:

“Weex into the pit Guide: Debug debugging is a technology live”
“Weex debugging artifact – Weex Devtools manual”

2 Weex Market plugin

In the daily development, we can all develop their own Weex interface, of course, can also use some of the existing excellent wheels. All of Weex’s excellent wheels are inside the Weex Market.

IOS developer Weex pseudo best practices North

In this Market there are a lot of wheels have been written directly to use, you can save a lot of time.

For example, the fire is very weex-chart. The weex-chart chart plugin is implemented via g2-mobile dependent gcanvas plug-ins

If you want to use Weex Market Plugin plugin, you can use the weex plugin command:

$weex plugin add plugin_name

You only need to enter the name of the plugin can be added from the remote plug-in to your local projects, such as adding weex-chart, we can enter the command:

$weex plugin add weex-chart

We can use plugin remove to remove plug-ins, such as removing the installed weex-cahrt:

$weex plugin remove weex-chart

This plugin library I used weex-router, but also good, use it to do weex routing management. Recommended use.

3 iOS packaging and distribution

Weex official provides weexpack command. I think this command is available to people who do not understand the front end of the iOS. If it is Native to pack, still use the Xcode Archive package.

Do not understand the iOS front-end developers can use weexpack build IOS package, the middle will require input certificate, developer account information. After you enter the correct IPA file can be played. Full fool operation.

If it is iOS developers, how to pack the original or how to pack now. Not only JS this piece to be packaged separately. The proposal is to use this Weex alone with a git branch management, specifically for this branch of weexpack or Webpack packaging. The specific configuration of webpack is configured by each company.

Here’s a little bit more, and that’s what God told me. Webpack after the package is available through the webpack official website to see what is inside the package which files and dependency. Although I packed all fall into the typing, but may also go to the senior front-end development check whether multiple files are playing in the. Limit the volume of compression package, 1KB files are not put into.

Talk about the issue. Due to the Weex, each release will be the last version of the cumulative version of the hotPatch have been repaired, and the new version of the built-in JSBundle file. Built in JS is also designed to load the first screen seconds open.

4 thermal regeneration

On the role of hot update we all understand, otherwise the meaning of Weex is much less. But there is one thing to note here is the strategy of thermal regeneration.

In the daily development process, we are connected to the phone in the browser debugging, but also not real-time refresh. However, by scanning the two-dimensional code on the phone, and mobile phones and computers in the same LAN, can be updated in real time

So in the real production environment, thermal update strategy should be that a new HotPatch is sent to the client, then the client at the next start, on the first version information, if it is to load the latest version, the latest HotPatch, and then rendered on the screen.

I had a dream to be able to update online in real time, that is, an online release, all users in the case of networking, HotPatch directly after the completion of loading, networking users can achieve the second level of thermal updates. This can be done, but not significant. Practice is dedicated to maintain a set of Websocket, directly connected to the server, issued after the end of the call can be notified by Native, Native client can refresh the page itself. At the moment, not many companies do this, right?

5 JSBundle version management and deployment

JSBundle version of the management on this piece should be handed over to the front-end management. The front end may use version numbers to manage versions of each package. Deployment will also involve the deployment process of each company front-end. They will know better. Deployment will generally be accelerated on the CDN.

6 pit and pit

If Weex doesn’t have a pit, it’s impossible.

For example, in some of the interface continuous Push, the edge of the page will have some lines from the screen. There is a catch JS error or abnormal time, Weex and can not reliably capture the exception, which need to rely on Native to do, Native to catch the exception and then pass the event to the JS Runtime to deal with.

This is the most important thing to calculate the width and height of the page. Weex interface adaptation is to use 750 as the standard, so the need to convert according to 750. Another point is that there are four Weex into the operation of the five, will lose a little accuracy. Specific this please see the “Weex event delivery of those things” this article inside the source code analysis.

Weex JS engine does not support HTML DOM APIs and HTML5 APIs, which includes document, setTimeout, etc. JS.

Weex on the realization of the Web standard has not yet reached 100%, so use Vue to write Weex, some are not supported.

For example, some of the CSS style, the most surprising is that does not support
, does not support < form> < table&gt, < tr>,; < td>,, does not support the CSS percentage does not support units, similar to em, REM, other unit of length like PT in CSS standard. Does not support HSL (), HSLA (), currentColor, 8 characters of the color.

Weex on the W3C specification does not support the full FlexBox, does not support the inline, does not support the above changes on the Z axis, but the demand for the mobile terminal on the Z axis is not really. Weex Layout is used before a version of the Yoga, the way to solve the problem is also more direct, late upgrade to the latest version of Yoga, you can support more Flex standard.

Specific and does not support to read the document, such as the “Weex does not currently support the Web standard which”. These are best to take a look at the first, there is a number in mind, so as not to encounter some inexplicable bug development, but I do not know the final result is not supported by the.

Then there are some components that do not support synchronization methods. This is not supported by Vue 2, which is expected to be supported in version 0.12.

An additional reminder, due to Apple’s previous ban on JSPatch, so the official Weex led to a custom module gives a warning:

Weex all exposed to JS or component API built-in module is safe and controllable, they do not access the system of private API, don’t do any runtime hack not to change the application function of the original. If you need to expand your custom module or component, must pay attention not to OC runtime exposure to JS, not the number of such as dlopen (), dlsym (), respondsToSelector:, performSelector:, method_exchangeImplementations (dynamic) and uncontrolled method of exposure to JS, nor will the private system API exposed to JS

These warnings are particularly emphasized not to use dlopen (), dlsym (), respondsToSelector:, performSelector:, method_exchangeImplementations () these functions. This is why some people are not using Weex, but some people can pass the audit reasons.

I heard some of the bug Refresh Control of Android, Android’s performance in Weex I didn’t know this, but if appear on the iOS, I think we can directly use Native to replace the bug, where all primary students do.

In a word Weex or less have some problems, but the current use, does not affect the use, as long as flexible, meet it is impossible to overcome, or is it a moment cannot hold bug, so many consider the use of the original alternative was born.

Three. More advanced gameplay

Let’s talk a little bit more advanced. These do not even do not affect the normal Weex line.

1 page degradation

Weex default is to support page degradation. For example, an error occurs, it will be downgraded to H5. It’s best to make an online switch. Division I deal with the issue of page degradation to take two levels of switch:

  1. App level switch. This switch is used to manage user App using Weex SDK, which is available online.
  2. Page level switch. This switch is to manage a page is open Weex. If you do not open to downgrade to H5 page.

In addition to the downgrade, but also the corresponding gray strategy, so that the online bug to reduce to the minimum.

For example, when the user is in the low peak period, turn on the switch to grayscale. There is a gray level through the online real-time error monitoring platform to control, if the Crash rate due to emergencies caused by steep rise, then immediately turn off the Weex switch, immediately downgrade.

2 performance monitoring and embedding

In Weex to the official Demo there is a M dot floating box, click to see the following interface:

IOS developer Weex pseudo best practices North

Here we click the button for the performance:

IOS developer Weex pseudo best practices North

Here we can see the monitoring of CPU, frame rate, memory, power, traffic and other data, these data is also our common data in Native APM monitoring. Of course, this M dot does not open source. So this requires companies to do their own monitoring system. This may be the front end of each company has been done, so Weex need access to the front end of the performance monitoring.

If we click on the interface, we will see the following options:

IOS developer Weex pseudo best practices North

There are buried point monitoring. In the early Weex may be buried or buried by the Native point, because each has its own Native complete buried point system. Buried in the latter part of this can also be handed over to the front end of the buried point.

3 incremental update and full update

For the time being, I have not yet implemented the incremental update of Weex, so there is no mention of incremental updates. The total amount of updates is relatively simple, the next JSBundle, App in the next boot and then loaded. Weex package is much smaller than the RN package, generally about 100-200K. Ali, a Weex share that they can reach gzip compression after 60-80K.

4 screen load time optimization

IOS developer Weex pseudo best practices North

The picture above is a challenge posed by Ali in the Weex Conf conference, the network request plus the first screen rendering time added up to less than 1 second.

IOS developer Weex pseudo best practices North

This involves 3 factors, network download time consuming, JS and Native communication time consuming, as well as rendering time.

Network download time can be supported by HTTP / 2, configure the Spdy protocol, domain name convergence, support http-cache, the ultimate compression JSBundle size, JSBundle preload.

JSBundle pre loading can be downloaded at the time of App start JS. When the remote server pushes the packet through the long connecting channel Push, here can be the full amount / increment, passive / forced update.

Ali on the JS and Native communication time consuming, rendering time-consuming optimization see figure. The two aspects of the author has no relevant practice.

5 Vue family bucket

IOS developer Weex pseudo best practices North

Although Weex has its own family bucket, but in support of the Vue 2, it can be replaced by the whole family bucket Vue family bucket. Vue, Vue-Router, Vuex, as well as the original Vue-resource, but especially later removed the Vue-resource, more recommended axios. So the whole barrel is Vue, Vue-Router, Vuex, axios.

If all are replaced by Vue later, then the first screen rendering speed on the front need to solve Vue. In order to improve the rendering speed of the first screen, WNS cache + straight out is essential. In the Vue 1 x era, there is no server-side-render program, straight out of the need to write a special screen for the first non Vue syntax template. Vue2.0 server-side-render (referred to as Vue SSR) launch, successfully let the front and rear rendering template code isomorphism.

If you only use Vue-Router later, when packaged to build applications, JSBundle packets will become very large, affecting the page load. If we can separate the components corresponding to different routes into different blocks of code, and then load the corresponding components when the route is accessed, it will be more efficient.
combines Vue asynchronous components and Webpack splitting feature, easy to implement lazy loading routing components in code. Reduce the volume of JSBundle.

One thing to note is that Vue-Router provides three modes of operation:
hash: use the URL hash value for routing. Default mode.
history: rely on HTML5 History API and server configuration.
abstract: supports all JavaScript runtime environments, such as Node.js server.

However, the Weex environment only supports the use of abstract mode!

Just 7 days ago, Vue released the v2.3.0 version, the official support of the SSR. So after supporting the SSR, you can significantly enhance the SEO, you can do the first screen seconds open. So in order to performance, SSR will do!

Four. Top play

Finally, there are some “forward-looking” play.

1 powerful JSService

JS service and Weex instance running in parallel in JS runtime. Weex instance of the life cycle can call the JS Service life cycle. Currently available to create, refresh, destroy the life cycle.

I did not find the relevant examples in the official Demo. There are examples in the official document. There is such a sentence in the official manual:

Important reminder: JS Service is very powerful but also very dangerous, please use it carefully!

Visible, this piece is very powerful, may be able to do a lot of “magic” thing.

2 Weex may have greater ambition”

In the official manual to expand JS framework, this chapter, mentioned the horizontal expansion of JS framework. This feature may not be extended to the general company.

Weex hopes to respect as much as possible the use of developers, so in addition to the official support of Vue 2, the developer can also customize and expand their own Weex or their favorite JS Framework.

Custom finished their JS Framework, the following code may appear:

Import * Vue from '...' import * React from '...' import * Angular from '...' export default {Vue, React, Angular} as, '' as' as;

This can also be extended to support Vue, React, Angular.

If the JS Bundle at the beginning of the file with the following format notes:

/ / {"framework": "Vue"}...

So Weex JS engine will identify the JS bundle need to use Vue framework to resolve. And distributed to the Vue framework.

IOS developer Weex pseudo best practices North

So, Weex supports a wide range of frameworks in a mobile application and their respective analysis based on different frameworks JS bundle.

Can support a variety of frameworks coexist this is very powerful, of course, not finished, one more thing……

If the normal use of API, look at the official document, do not open the source code, will not find the figure of Rax. The official document didn’t mention it at all.

What is Rax?

IOS developer Weex pseudo best practices North

In the Taobao double promotion in the Rax this article describes the Rax:

Rax is a React based cross container JS framework.

IOS developer Weex pseudo best practices North

Rax after gzip the size of 8K, and Angular, React, Vue lighter. Compared to React’s 43.7kb, too little too much.

In the design of Rax Driver abstract concept, used to support the rendering in different containers, such as the current support: Web, Weex, Node.js are Driver based on the concept of the future even more containers (such as VR, AR, Rax) can also take time for. Rax in the design as far as possible to wipe the difference of each end, which also makes the developers in terms of differences and compatibility no longer need to put too much energy.

If RN and Weex these technologies are used across the end of the technology, the Rax is used to cross the container: Browser, Weex, Node.js, etc..

So what does Weex add Rax to do? Worth looking forward to!