[Vue.js] How we develop Reusable UI Components — Lazybee
Are you a front-end developer and building the template again and again in every single project? Here is introducing a UI Component Library- Lazybee.
What is Lazybee?
Lazybee, a frontend UI component library based on Vue.js, is created for rapidly developing websites, applications, and prototypes by minimizing repeating works, to boost the production timing.
Why Lazybee?
Lazybee has a visualized UI interface and also provides many useful common reusable components, helping developers to cut down their time on building templates and designing in order to construct an app’s business logic. Considering the different use cases, Lazybee components are demanded flexible and maintainable. The following are two examples, Dialog and DateTimePicker.
About Dialog
The default Dialog has four status alert messages. It can be switched by changing the type into the icon of alert, info, success, and error, and designing the width of the dialog box via props. It is also convenient to add a form or custom content in the dialog. Just make the content as a component, then assign it to the reserved slot. Using the dialog of Lazybee can make sure that the popup windows are consistent and also can be designed content layout freely.
About DateTimePicker
The DateTimePicker is able to choose a single date and also be able to pick a date range. Besides, it allows us to set up the start time and end time in this date period. It has full function and mobile friendly and is designed for dealing with the date, and time setting issues (e.g. setting up the active time for a campaign.)
How it works
Lazybee demonstrated, documented, and organized using Storybook. As Storybook provides the Addon Knod feature for operating props, It helps the user to understand what they can get from Lazybee components.
Who uses Lazybee? Our company has several teams which are in charge of their own different products and use Lazybee components to build their front-end interface. They continuously gave us feedback to improve components according to their actual experience of using Lazybee and the problems they meet.
Along with the components are more and more produced. We imported Lerna to solve some dependency issues and manage our package of components.
“Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories is messy and difficult to track, and testing across repositories gets complicated really fast. To solve these (and many other) problems, some projects will organize their codebases into multi-package repositories.
(from https://lernajs.io) ”
About the UI style guide, all the components and modules of Lazybee was designed to be clean, neat, and modern to catch up to date design trend, letting the projects come with quality and take less time on styling.
Successful Projects
Lazybee has been used in projects widely, such as the CMS system, CRM system, QR Code generator application, and eCommerce backstage. It assists to save time for building templates and creating the prototype instantly. Lazybee increasing efficiency can have many project processing at the same time. Here are some examples we developed with Lazybee.
What’s Next?
How’s the current stage of Lazybee? Has it been completed yet? There are many components that have been completed and have been tested. However, I think there is no service kit that could completely fulfill any use case. It has to iterate and improve constantly for making the system integrated.
