Hi, we have made a high quality, free mobile UI framework.

After more than two years of development and project practice, we finally have the Touch UI open. This is a set of mobile UI framework based on vue.js, which contains nearly 100 components, including almost all the details of mobile application development.

What are the glitches in Touch UI?

In our opinion, a good enough mobile UI framework should satisfy four elements.

Rich components and easy-to-use apis

In creating this UI framework, we analyzed a large number of major mobile applications and abstracted nearly 100 components from them. It covers all aspects of container layout, switching, modes, forms, lists, text, multimedia, graphics, maps, and so on.

We want developers to be able to focus on the business instead of trying to find components and deal with compatibility. We want developers to be able to build mobile apps that actually work with components.


Part of the case done with Touch UI

2. Friendly mobile interaction

Unlike PC development, the MOBILE UI should have mobile-friendly interactions such as pull-up, pull-down, finger swipe, push-down, etc. We’ve taken this into account, and each component has been crafted for mobile, aiming for a native-level experience.


The calendar component




index-list




ruler






swipe-out

3. Excellent performance

How to ensure high performance on the basis of rich functions is a big challenge for us to make this framework. We did a lot of work to optimize performance, such as on-demand compilation, split resource loading, and so on. Now you can basically click the page to open in seconds.

4. Good development experience

The emergence of front-end engineering has greatly improved the development efficiency of front-end projects and reduced maintenance costs, but for traditional front-end engineers who have no experience at all, there is still a large threshold for a variety of environment configuration and dependent installation.

Based on the plug-in mechanism of Microsoft VSCode editor, we encapsulate all kinds of construction and compilation links needed for front-end engineering, and provide visual right menu for developers to simplify environment configuration and reduce the threshold of entry. The Touch UI framework and components are also included in the plugin, so developers can easily update the Touch UI by updating the plugin online when the framework is updated.


One More Thing

At the same time, we also launched a UI framework of wechat small program: touchui-Wx, which added more than 30 commonly used components for the supplement of official components, and expanded many functions, such as support ali’s Iconfont vector icon library, support less syntax and so on.


TouchUI WX components

Most importantly, you can convert the TouchUI project to the Touchui-WX project. Realize the development of a set of code, release H5 and micro channel applet two applications.

Website: www.touchui.io

Github:github.com/uileader/to…