In the world of repeated ‘develop it, ship it’ cycles, a developer needs to develop fast while following the best practices . “Don’t Repeat Yourself” is the key principle one needs to follow at all times.
While working on projects, the basic development setup eats up some time even though it has been done endless times before ?. That’s the problem tools like yeoman solve for us.
While working on some UI5 projects that required creating a lot of custom controls, we realized a tool like yeoman can expedite the development process and save us a lot of time. Not only does it make development faster, but also makes sure the process of creating libraries is uniform among all the developers which leads to better maintainability.
Hence, we came up with the ui5lab yeoman generator.
Yeoman
Yeoman is a scaffolding tool that helps in generating project templates and helps you kickstart your project. You can generate the initial project setup in a couple of commands and dive right into what matters the most — coding for the actual business requirements. You can check it out here.
OpenUI5
OpenUI5 is an open source JavasScript UI library, maintained by SAP and available under the Apache 2.0 license. Mainly aimed to build enterprise applications, it has a diverse set of re-usable controls. You can check it out here.
OpenUI5 meets Yeoman ?
In the OpenUI5 world as of today, there are 611 re-usable controls available that come out of the box with the UI library. However, there’s a huge community of rockstar developers that build custom controls to fit different needs of project they work upon. A year ago, the OpenUI5 community decided to bring all such contributors together to contribute on a common platform called UI5Lab. In a short span of time, UI5Lab become the central repository for all open-source UI5 contributions. Check out the presentation of UI5Lab at UI5Con to know more.
Our aim is to make the contribution process friction-less and uniform for all the OpenUI5 developers.
Thus arose the need for a fast scaffolding tool that can give developers a kick-start in their custom control development.
Presenting, ? generator-ui5lab: a Yeoman generator built specially for creating custom libraries and controls to make the UI5Lab contribution easier.
Installation
- Yeoman runs on Node environment, so make sure you have the latest stable version of Node & NPM installed
- Install yeoman ?
npm install -g yo - Install the ui5lab-generator ?
npm install -g ui5lab-generator
Usage
To start building your first custom library, all you need to do is navigate to your development directory and open the terminal.
- Type in ?
yo ui5lab - Enter the namespace you want for your library (the generator will make sure it creates the correct directory structure for your namespace)
- Enter the name of the first control you want to add to this library.Yeoman will start doing the hard work for you:
- As soon as yeoman is done, to test the newly generator library and control type in ?
grunt
The generator not only generates an entire library with a sample control for you, it also sets up a Grunt build environment so that you can make changes and easily test your custom control. The sample control is also theme-able with LESS enabled build setup.
This brings down the development setup time to a minimal few seconds achieved by just one terminal command. ?
Next Steps
We maintain generator-ui5lab and have a lot of ideas for making further contribution process easier. We would love to have more brilliant minds working on it. You can check out the github project and feel free to contribute by suggesting enhancements, reporting issues and best of all — submitting pull requests ?.
Do get in touch with the team if you’re keen to know more about the project.
Credits
- Nitish Mehta @nitish-mehta
- Vaibhav Arora @vaibhavar
- SAP Managed Tags:
