Some time ago, I participated in an activity in Microsoft and shared some development experience of TalkingData’s open source and efficient UI component library iView based on vue. js, which is now organized and written for discussion. This article was first published in nuggets, please indicate the source and author.
GitHub：https://github.com/iview/iview
About the iView
Development history and naming
The TalkingData visualization team has been using Vue for more than half a year, evolving from simple bidirectional binding to a complete reliance on Vue buckets and Webpack. This development mode has verified a number of large and medium-sized projects, and the development efficiency has been significantly improved. The workflow has also evolved from semi-automatic to fully automatic development, gray scale and generation environment. It can be said that Vue still brings us a very pleasant development experience. With the deepening of componentization, the reuse and maintenance of components became a problem, so I began to investigate UI component libraries in the market, and found that vUe-based UI component libraries are mostly mobile terminals, while those targeted at PC middle and background can be as rich and high-quality as Ali Ant.Design(based on React. Did not take a fancy to a, or is not maintenance, or is too simple function, quality is not high enough. So we decided to develop and maintain a library of high-quality UI components ourselves. With that goal in mind and the 1.x release planned, I started on the path of no return and have been working on iView for the last three months or so. As for the name iView, I didn’t think much about it. It’s named after an Apple product and sounds like Vue. It’s easy to remember and read.
Usage scenarios
IView is mainly suitable for large and medium-sized, middle and background products, such as the operation platform, data monitoring platform and management platform of a product. It is a complete set of solutions from engineering configuration, to style layout, and even the business suite planned behind, so it may not be suitable for some TO C products, such as QQ Space.
Developer oriented
Of course, iView is mainly object oriented to front-end engineers who have experience in Vue componentized development, but it is also friendly to back-end engineers, because we provide good environment configuration and rich documentation tutorials, even for students who have never touched Vue development like writing Java, they can get started quickly within a week. And the products developed based on this solution are very efficient SPA.
Versions and Compatibility
Currently, iView can be installed directly through NPM, and there will be a major release soon, 0.9.7. In this release, we have adjusted and optimized the UI of most of the components, and also enriched the functionality of many components. Due to Vue itself (not expanded here), iView is only compatible with IE 9+, the best performance is Chrome, Safari, Firefox, some features and animations are not compatible with IE. This also depends on the usage scenario, generally to B products, we can ask customers to use advanced browsers.
IView characteristics
- Based on NPM + Webpack + Babel + ES2015
- Friendly API
- Detailed documentation
- High quality, rich function
Because iView is currently used under WebPack, you can use WebPack’s rich plugins and personalization. IView was also developed using ES2015. One of the biggest features of iView, which we’ll talk about later, is that we design the API in terms of the user and the scenario. The documentation is also quite detailed, with detailed instructions and sample code for each feature, which can be copied and used directly. We also plan to launch an English document translation project next year. When developing components, we read a lot of existing component library code, learn from each other, to achieve high quality code.
The current progress
24 grid system
IView borrowed from Bootstrap and Ant.Design’s raster system, which supports up to 24 columns per row. The raster system supports Flex layouts for advanced browsers, including Flex alignment, Flex alignment, Flex ordering, as well as grid sorting, offset, and spacing. The friendly grid system plays a key role in breaking down the layout of your page. You can easily use grids to accomplish your needs without having to write any layout code, and it’s accurate.
A well-designed API
We put a lot of effort into the design of the component API. A lot of developers, when they implement a component, they think in terms of how easy it is to program, and they don’t think about whether it’s user-friendly. IView is all about the user, and we think about whether it’s user-friendly, or if it’s me, how I want to use it. For example, a common page message alert, JavaScript native is window.alert(‘something’), but using Vue to simulate such a component, that uses it just like something. Yes, this is how the Vue component is implemented, but do we really want to use it this way? Of course not. We also want to use it native, where at some point a sentence pops up without having to bury it in THE HTML and use an if condition to determine whether the component is displayed or not. In order to introduce the API design of iView more vividly, we took out a commonly used component Modal dialog box and compared it with the Element and Radon UI of Ele. me. Generally Modal looks like this:
Detailed documentation
IView on the documentation is done in detail (because of documents with a set of relatively heavy friendly separation scheme to implement examples and code, so there is no document is open source, next year we will achieve a better submit documentation bugs and translation), each component of each function has a very detailed instructions, It includes things like what parameters need to be used in sync, some hidden features, possible pothole, and so on, while each demo has complete code examples that can be copied and pasted with one click. The API is split into props, Events, and slot to avoid mixed description omissions and inconvenient reading. IView documentation is by far the most detailed of its kind and has been well received by many developers, so we continue to be productive in our documentation work.
High quality, rich in features
In fact, iView’s high quality and rich functionality has been described in various aspects, so let me give you two examples.
Paging component Page:
The selector component Select
Unlike native browser, first UI unity and very good-looking, this is a major cause of most of the simulation of the select, second function more powerful, support radio, multiple-choice, keyboard shortcuts, also supports search, custom templates, grouping, large, medium and small three sizes (iView many form class components are provide different size). You can also clear your options during radio.
Form a complete set of engineering
Finally, the workflow that works with iView (github.com/icarusion/v…) This workflow supports many large-scale products of TalkingData, from development, gray scale to on-line, including CDN configuration of resources, etc. No matter you are a novice or an old driver, you can start development from it. Of course, iView also supports VUE-CLI.
Todo
- IView is currently based on Vue. Js 1.0, we will open a branch to support Vue 2.0 in the future, we also think that 2.0 is the trend of the future.
- IView will soon support the use of UMD that is independent of WebPack.
- The current UI is based on Ant.Design, and in version 0.9.7 we gradually improved and replaced it to make the iView not only easy to use, but also beautiful.
- IView will launch the English document translation plan next year. We also hope that students who like and support iView and are good at English can join us and participate in translation together.
Afterword.
Within one month from its official release, iView has received a lot of praise, and has been listed on GitHub Trending for five consecutive days (of course, this is inseparable from nuggets’ strong operation ability 😝). It has received good response in many communities, and we will continue to work hard to present the best iView component library to everyone. We’re also looking forward to developers who like iView joining us to contribute code or translate documentation, and we welcome all forms of code contributions. If you want to join the translation project, you can contact me by email: [email protected]