I started working with the Vue.js framework two years ago and was attracted to its lightweight, componentized, and friendly API. Then I introduced vue. js and Webpack technology stack into my company (TalkingData) visualization team, and after more than a year of practice, it has become the front-end development specification of the whole company. At the same time, I opened source the iView project, which is a high-quality UI component library based on vue.js, providing complete solutions from design specification, engineering build to internationalization, and supporting SSR. With the help of many volunteers, the entire document was translated into English and was well received by the Vue developer community.
On July 28th last year, a project named iView(github.com/iview/iview) was launched. Today is its first birthday. After a year of ups and downs, it has become one of the most popular libraries in the Vue community, with nearly 8000 stars on GitHub and more than 10K installs per month on NPM. Of course, all of these achievements are inseparable from the support of the company and the active Vue community.
eggs
IView website
2.0
IView is one year old, and the best news for developers is that we have finally released the first official version of 2.0. Over the past 4 months, we have released 19 rc releases in a row. We could have released a 2.0 version and iterated on it. Delayed hair, just want to bring the best version to you. Of course, even with today’s official release, there are still many problems to be solved, and a good component library needs to be honed.
Let’s review some of the major changes in iView from 1.0 to 2.0:
The most important is of course Vue 2 support, followed by SSR and nuxt. js support, the common components of the extension: Table cell Render based on Vue Render function, and support expansion; Select supports remote search. Cascader supports asynchrony and search. There are also more than 100 detail optimizations. The official version of 2.0 has strengthened the Table component and optimized its eight problems. All floating layer components have added the Transfer attribute, and you can choose whether to insert it into the body, making it more flexible to use. You can view the update log for details.
Talk about English
A special thanks to lCX960324, Rijn and BigChief45 for their contributions to the English translation.
Version number of the story
IView will start with version 2.0, which will be named after a game that won the Apple Design Awards or a great indie game.
Every open source project’s release code has its own story. As a player who loves iOS independent games, every time I see a good game with exquisite painting style and touching story, I will linger over it and recommend it to my colleagues. Therefore, it is named as a kind of support for independent games.
2. The first version of X (2.0) was codenamed Leo’s Fortune.
This is just the beginning
IView has done a great job of helping front-end developers accelerate their business development, but as an ambitious big data visualization team, this is just the beginning. In the second half of the year, the TalkingData visualization team will continue to open source two blockbuster projects:
- InMap: Geographic information visualization framework based on Canvas and WebGL
- InChart: A chart standard library based on vue.js and eCharts
Both projects will benefit from data visualization, but the one worth mentioning in detail is InMap, which actually predates iView but has always been in a closed source state and used within TalkingData. This time, it was a great effort to open source after refactoring in API and ease of use.
In the process of geographic visualization, the vector data of the map is not loaded at one time. The vector data is loaded locally along with the tiles at the request of the user. In this process, there are two parts of calculation, which limit the speed of visualization drawing, one is the coordinate transformation of various data, the other is the visualization of various data. At present, InMap uses Web worker to perform multithreading calculation on vector data in the background to ensure that the page faces user response and calculates various data at the same time. For other coordinate data suitable for parallel computing, GPU is used for conversion. The drawing visualization layer uses WebGL.
The picture below is a full 3D earth based on InMap, which can achieve three-dimensional effects such as autobiography, revolution, drag and drop rotation, zooming and zooming.
InMap and InChart are expected to be available in a few months. Stay tuned!
Some thoughts on the state of open source
Being able to fully participate in an open source project and see it change from 0 to 1 is a lucky thing for me, because I have learned so much from this open source experience, and I have learned so many developers. Open source is a very meaningful thing, but many domestic developers have a bad habit, they are collectively called “hand party”. I prefer to answer foreign friends’ English issues than many domestic developers. This is not because English looks good, but because foreign friends’ questions are friendly and well thought out. If you watch the iView project, you will receive dozens of emails every day, most of which do not follow the requirements of the Issue Guide. If you close the project, you will often be scolded and have a negative energy. Ask these people who don’t ask the required questions and have a bad attitude, what contribution have you made to open source? Open source is free, but it doesn’t mean that if you use open source products, you’re a big man, so cool, why don’t you build your own wheels?
This isn’t just a problem with iView, I’ve talked to the authors of VUX, and there’s a lot of similar negativity in the VUX community. This kind of undesirable phenomenon should still exist in China. VUX readme wrote this paragraph in Chinese only, which is for these people:
Open source is universal, so please be kind to the GitHub community.
Best practices
Since late 2016, many new TalkingData projects have started to use iView, and some core projects have gradually started to use iView refactoring. Here are some screenshots of the project:
Voice of users
Wang Xiang, Data Engineer of TalkingData: In the first half of this year, two important product lines of the department, App Analytics and Intelligent Data Market (SDMK), were reconstructed with Vue+iView, with remarkable results. In the second half of this year, several other important products are also planned to introduce Vue+iView technology stack. The introduction of iView ensures the visual unity of all product lines, and designers hardly need to participate in the product development process, thus reducing labor costs. Engineers can focus more on the business and avoid having to maintain basic components in addition to business code, greatly shortening product development cycles. It is highly recommended that teams using the Vue technology stack also try iView. Thank you so much for the iView.
TalkingData Data Engineer Yang Tao: From using iView 0.9.x version to the current 2.x version, we have witnessed every step of iView from realizing various components to enriching component functions, which greatly improved the efficiency of project development in team operations. Various components of iView have been used in many of our projects. Its perfect documents and sample codes have reduced learning costs. Meanwhile, iView has also been updated and improved at a high frequency.
Guan Jingkai, Product Manager of Hanyun Youpin: I am a product manager who loves technology. After seeing iView, I was impressed by the overall API and UX design of iView, and it was very easy to get started. At the beginning, I just used iView to quickly realize middle and background Demo in product design. After training the company’s front-end team, I gradually completed the front-end engineering, and now the company’s products have been reconstructed with vue. js and iView. The source code of iView is very standard, and the secondary development is very friendly. At present, some components are added in combination with the existing business of the company, mainly focusing on data visualization and the encapsulation of some business components. IView not only brings the innovation of front-end technology to the company, but more importantly promotes the speed of product iteration. Thanks to the successful introduction of iView, I also got support from the company and established the UED department with integrated design and front-end. Thanks again for the convenience of the iView framework.
conclusion
There are still a lot of things to do next, we will use iView in a large number of actual combat projects, improve and improve the ease of use and stability of components, but also more standard and beautiful UI details.
I would also like to thank all the contributors who contributed to the iView project. A good project needs to be created and maintained by all. This article also calls for developers with the spirit of craftsmanship and love of open source to join the iView project and build it into a world-class component library.
welfare
To celebrate the first anniversary of iView and the release of version 2.0, vue.js will be offered for one week at 6.6RMB.
Special thanks to
Finally, special thanks to the following technical community for their long-term promotion and support of the iView open source project (in no particular order) :
- Nuggets – a community that helps developers grow
- Code Cloud – professional and efficient code hosting and collaborative development platform
- Laravel China – High quality Laravel and PHP developer community
- SegmentFault – The leading developer technology community in China
- Front end morning reading class