nicosommi

open source developer

posts

slides

about

Create a javascript quality open source component in minutes

July 17, 2015
3 min read

Leer este articulo en espaniol

Go to the component on npm

Some months ago with the team from Free All Media we started to build a new javascript project, which rapidly began to grow in code lines and in what we called components, but consisted only in a folder collection with javascript files on it. We knew at the very beginning that sooner or later creating component will be necesary, but we didn’t knew yet when the business would support it by increasing the priority.

After some time, we had to create a new set of services, which shared some component functionality with the previous one. Then it happened: the real need of sharing components with at least one more project. At that moment we confront the classic engineering problem of being as efficient and efective as possible. We had around 15 different folders and we knew that the best path was to create one component for each functionality instead of trying to create one giant component to maybe save some time and costs (with repos, deployment tasks, etc, etc). We always try to go by the best path we see, so we had no doubts about sticking with the one component per functionality option. But the business wasn’t very happy with spending money in creating so many components with all that creation overhead and with all the extra costs, specially when we could just create one component and use that. Speaking of numbers, each component would take many hours to get created and published correctly, maybe a little more or a little less depending upon the particular component needs. It was just then when we made some business with the business and we decided to create a component generator with the target of optimizing the time and the related costs associated, specially on shared patterns.

This generator has the responsibility of initialize a new open source component with a set of desirable features for them:

  • A good README with badges and common sections
  • The LICENSE file
  • Test coverage support (generation and report integration with travis and coveralls)
  • Continuous integration (with travis)
  • gulp tasks for compile sources and testing them
  • browser compatibility tests using karma and a optional sauce labs integration
  • ES6 and ES5 compatibility using babel
  • linting files a eslint file and the required dependencies
  • many more on the way: more integrations, more detailed questions and a smarter behavior

Luckily us this component quickly give us the expected result and, even knowing that this is a still very early version, it’s very useful and it has a great potential but it saves us hours of working already. We know that there are lots of tools out there to integrate a generic open source component to, but we believe that given the fact that this is open source, the best way to reach that point is having the contribution of the open source community like the normal process to cover such giant amount of options, if we everyone put’s his own particular alternatives on it we will have lot’s of options some day.

Of course this open source component generator is an open source component by itself (the first was the component, and once he got mature, he override himself, but just for stetics). In fact, in order to get better efficiency through time with the generated components, we strongly suggest to try to reduce to the minimum any modification to the auto generated artifacts (currently some little manual changes are needed).

In conclusion, I think it worth enough the contribution to the community and this post is just an invitation to contribute to our project if you want to or just use it if you want to get a new component in just minutes.

How do you use it?

First highly recommended steps is to read the README, but basically

  1. create the github repo
  2. link it with coveralls and travis (basic to get ci and test coverage)
  3. if you want to add another tool supported by the component and you want to use.
  4. (if you don’t have yeoman) npm install -g yo bower grunt-cli gulp
  5. npm install -g generator-oss-component
  6. initialize the repo with github and go to that folder and type: yo oss-component
  7. answer the questions using the credentials if needed for the integrations to be done
  8. execute travis setup npm if you want to auto publish to npm your component
  9. start coding

Remember if you do not find the application to integrate with we invite you to send us a pull request by following the contribution guide on the README 🙂

nico
Copyright by nicosommi 🐓