This article is the content document of the 2018 Weex Conf topic “Weex + Ui”. It mainly introduces the process of Weex technology system from nothing, including the development and development of Weex Ui component library, and focuses on sharing some experience in the CONSTRUCTION of Weex Ui layer.

The article is longer, first put the Weex Ui open source address, welcome to mention PR, but also through the Star to express your love.

Github.com/alibaba/wee…

Why Weex ?

Weex vs H5

Why did we choose Weex as our primary cross-end development technology? Those who have written H5 will certainly be attracted by its simplicity and efficiency, release and update, one URL can be adapted to multiple devices, etc., but those who have written Native will certainly be attracted by the rich interaction, performance experience, callable Native ability, managed memory and other features of Native to bring better experience to our business.

Fast and experience at the same time

But most of the time, we want to combine the speed of H5 with the experience of Native, and Flying Pig has been exploring in this direction for several years.

Including the initial Hybrid development, we provide some Native capabilities through Bridge to improve H5 experience. For example, in H5, we can directly obtain App positioning information, use camera, play video, navigation jump and other capabilities. There are also mature solutions such as Cordova, Ionic and Meteor.

There is also the use of offline package system through the resource file download in advance, access route interception loading local resources, so that our H5 page can achieve second out, dynamic update, weak network available effect, internal hand tao Zcache, flying pig carrier pigeon, Alipay Jiuzhou these mature systems.

After 16 years or so, cross-platform development technology gradually became popular, a new development idea attracted us, that is, to write Native with JS, build high-performance and extensible Native applications with Web development experience, and at the same time really get the speed and experience mentioned above.

Comparative Analysis of business

So why Weex? In fact, it is very related to the characteristics of the flying pig business, and it can solve these pain points very well.

Flying pig business iteration speed is fast, also need to be fast online; At the same time many times attractions and overseas weak net use, at the same time to experience good; One of the most important points is the multi-container access, which is suitable for Feizhu, Alipay, Tmall and Alipay. In other words, the development of our important business requires an iOS and an Android student to develop both ends, and an H5 student to develop the Web version compatible with Alipay, Alipay and UC. In other words, a business release involves the simultaneous development and launch of multiple terminals.

Weex solves some of the above problems well, including fully Native experience in the Weex environment of Flying Pig, Hantao and Tmall. Meanwhile, the Bundle resource size is much smaller than THAT of H5. In addition, rich interactive experience and long list performance are very suitable for the product list page and double 11 scene. The most important thing is to really get us down from 3 people to 1 person, so that the other 2 people can do more meaningful things.

Next, we can see a demonstration and data comparison of Weex and H5 business from the following demonstration. For details, see this recorded video >>>

This is a page with complex business logic, including filtering, sorting, calendar selection, favorites, long list, and also complex business logic. After Weex is reconstructed, our first screen availability time is reduced by 68%, the Bundle size is directly reduced by 73%, and the page conversion rate is actually increased by 14.5% due to better and faster experience.

Also on that is why we choose Weex as our cross-end development of some important reasons, the next introduction is the Weex technology system of flying pig.

Weex technology system

Architecture diagram

It can be seen from the bottom layer all the way up. The bottom layer is composed of our APP Framework/Libraries/OS Kernel, etc. We have designed a set of unified Api design together with Hantao and Tmall in the upper and lower layers of Weex. It includes a series of general services such as interface request, data buried point, route jump, network status, payment function, navigation bar customization, etc. On Weex, we encapsulate Weex Ui component library, business component library, UPX marketing module, as well as Util function library which can erase multi-terminal differences. So we can grow a lot of business on top of us.

Weex is the same as H5 in our side. Weex is published as a page, instead of writing many sub-views in a View for organization. Meanwhile, it is not recommended that people use WuE-Router for management, and it will be better to use multiple pages to jump to experience.

As for the process of building and releasing, Clam is used to initialize, build, debug, pre-release and release the project. In addition, Awpp commands are used to publish the page to CND and offline resources are pushed to the APP by carrier pigeons. Operation students can also directly through the way to build the page released out.

Weex page how to fly pig, hand Amoy, pay treasure multi – end put?

Then you may ask Weex page how to fly pig, hand Amoy, pay treasure to carry on multiple put it? There are two ways to do this. The first is to decide whether to render as Weex or H5 via the front-end URL parameter

xxxx.html? _wx_tpl=xxxx.js: Indicates the H5 address during degradation, and the parameter with _wx_tpl indicates the Weex JS address. When the container finds that the URL contains the parameter with _wx_tpl, it downloads the js address and uses the Weex container to render.

Another is to decide whether to render as Weex or H5 for the content returned via the server:

xxxx? Wh_weex = true: Wh_weex =true; weex=true; weex=true; weex=true; weex=true; If the MIME type (HTTP Header content-Type) of the response is Application /javascript, use Weex to render the returned content; otherwise, use WebView to render the returned content as H5.

Weex flying pig business market

Weex is not like some people outside the rumor that there is no company in the use of Weex, but is more than your imagination, the above is our side in December 17 years before a list of Weex page, you can find in the flying pig, hand Amoy, pay treasure inside these pages, are a page at the same time to multiple ends.

What business is suitable for Weex?

Numerous marketing business, home page, including channel, simple search listings, forward process, details, rich interactive pages are very suitable for using Weex to development, at the same time on our side also has a corresponding principles include display class projects priority use Weex, refactoring/new project priority use vertical category trying to use Weex Weex, depth.

Weex not suitable for complex scenarios?

You can see a video of these scenes below >>>

You may think Weex is not suitable for complex scenes. In fact, it is not certain. There are many ways to support complex scenes, including double 11 super long list scrolling, more than 30 screens of data, fast scrolling is very smooth.

At the same time, including the international air ticket list page with extremely complex logic and multi-component, Weex can also be competent; Including the interactive use scenario in Figure 3, the silky drag with sticky hand effect, fast sliding, dynamic hiding head and other functions can be done.

Through the accumulation of best practices in the use of Weex in many business scenarios, there are actually a lot of things can be deposited and packaged for subsequent other businesses to use, so that the latter business can achieve rapid production, which is also a big reason for us to establish the Weex Ui component system.

Weex Ui development and open source

Why build the Weex Ui component library system?

  • At the early stage of Weex introduction, Weex Ui can be used for reference by students who have no contact with Weex
  • Extract the common components in the business, easy to direct reference, improve everyone’s development efficiency
  • Timely synchronization of business norms, visual norms and best practices
  • After the Weex service is packaged into components, only the simple logic is exposed

Weex Ui view

After more than a year of construction, we optimized and organized Weex Ui step by step, and finally opened the source in 20170930. We can see how Weex Ui comes from the following picture

At present, Weex Ui component library includes 31 mature components in 7 categories. At the same time, it is not open source for everyone to use directly, but after more than one year of internal use, open source for everyone to use. You can preview by hand, flying pig, or any browser scan code

At the same time, the documentation of an open source library is actually a big factor whether users can quickly get started in the subsequent development. Weex UI includes component description, usage rules, Demo, detailed use of API, upgrade documents and so on, so that you can use it quickly.

Weex Ui is only suitable for e-commerce system?

Recently, we conducted a questionnaire survey on users of Weex Ui. The result surprised us very much. It is not only used by e-commerce, but also by many other systems, including tools, enterprise applications, entertainment, we-media and news.

Componentize your Weex page

Most of the time, infrastructure, in fact to accelerate business development, such as the next flying pig line page is through our Weex Ui component library to build up

However, the basic foundation can only solve the problem of common components. In fact, it also includes the business components, namely the you-Item component in the figure above, which is Weex business componentization

In addition to the base libraries, what else can be done in the Weex Ui layer?

Weex business componentization

The business component library is more of a “convention” between the front end, the back end, and the designers to work together to make the business components reusable through certain specifications. In other words, Weex code directly introduces this component, directly inserts the original data returned by the back end, and can generate the product card designed by the designer. Finally, it can support any Weex business module to be put into any position in any Weex page.

So what do you do?

Can Weex be automated?

The answer is yes, it can be done by combining macacaJS test framework with Weex, by customizing a series of gestures and events, and finally by using JSON to indicate the order of execution.

4. Automatic test flying pig holiday home page, including click, jump, slide, pull down refresh and other operations 5. Automatic test flying pig special line, including left slide, right slide operation 6. Automatic test Weex Ui, Including opening components, clicking interactive logic 7, automatically running screenshots on each page, and sending test information to testers

Weex accessibility optimization

Weex also supports accessibility, which means that blind people can find the information they want in the shortest time in the fastest way. At the same time, when blind people visit our Weex page, let them to Weex is perceptible, operable, understandable, and the page is robust. Like this oneDemo > > >:

Accessibility is simple to implement in Weex, as follows:

Weex double 11 performance optimization

Every year’s Double eleven is also a battlefield of Weex, almost all the venue pages are implemented by Weex, how to let users smoothly browse our pages? During this period, we also put a lot of previous experience including optimization skills into the meeting page of Double 11, including the arrangement of some experience.

Back to the open source

In fact, Weex can be used in many, many places, including a variety of application scenarios, which is a big reason we open source Weex Ui, to give you more Weex functions to achieve input, best practice implementation reference.

At the same time, external developers urgently need a set of mature component libraries to improve development efficiency.

Github.com/alibaba/wee…

Since September 30, 2010, we have been working on the open source development of Weex Ui. This includes building weeX-Toolkit to better support WEEX Ui, completing the components that are not available + enhancing the existing components, continuing to expand the boundary + light water solution Ui library, introducing more interactive experience + barrier-free optimization of components, easy use mode + detailed Chinese and English documents, and so on.

In fact, more is to want everyone to participate in, jointly promote our Weex development.

Speaking of co-facilitation, what can you do? There are many, many things that can be done

Evening round table discussion and summary on Weex component direction

1. What should be paid attention to in the packaging of Weex native components?

  • Generality, only several business in use at the same time, at the same time can pull away sexual characteristics of components, such as Video/TabBar/TitleBar/ImageUpload these mature in the Native components
  • Stability, Native components are not as adjustable as the components on the upper layer of WEEX, so it is necessary to pay attention to the good Native components must be Bug free, to prevent repair and update trouble, at the same time Native components should be configurable in most cases at the beginning, to prevent frequent updates, resulting in the need to adapt many versions
  • Atomicity, it is not recommended that a component do many things at the same time, should be a single function, and then through the way of collocation to get more functions

2. Some experiences in weeX component development and practice?

  • Principle 811: by default, 80% of functions should not require users to configure many parameters; in 10% of places, users can configure some parameters to achieve the purpose; in 10% of rare cases, we can temporarily ignore them, which may take a lot of time to develop, so we can update them when there is a business need to use them
  • In order to prevent the subsequent components from becoming a hodge podge, the subsequent iterations of visual interaction and the addition of new functionality need to take into account generality, where the need for one person to be unified to seal, develop and maintain the components can prevent many “business features” from interfering with the usability of the components
  • To optimize performance experience, Weex components should guarantee its performance experience more than the writing of pages
  • Trust mechanism: A lot of times people use your components because a big reason is to believe that your components are fine, stable, and will be maintained frequently

3. What do you think is missing from the Weex Ui component?

  • There is a lack of some scenarios that can be used together. At present, the use document of a single component has been described in detail. However, there is a lack of related cases for the use of multiple components or the development at the page level, and weeX-UI-Demo needs to be gradually added later
  • The flexibility of theme configuration needs to be considered. At present, the theme color is changed through parameter configuration. In fact, it can be changed through a unified external parameter configuration

4. What is the future of cross-end development?

  • Native layout needs to learn from the development flexibility of H5 and gradually use automatic layout to achieve it. At the same time, the development of elastic ideas is introduced to avoid absolute calculation
  • The data binding aspect will become more convenient, for example, as with MVVM, the view changes as soon as the data changes, rather than triggering it manually

More

You can scan the following TWO-DIMENSIONAL code with nails to discuss and exchange:

  • Weex + Ui Weex + Ui
  • Alibaba.github. IO /weex-ui
  • Github: github.com/alibaba/wee…

Please feel free to use and contribute to the development.