Resources
The WebComponents.org Resources is a place to introduce useful tools and boilerplates to easily start hacking on your own custom elements.
1. Learn
Web Components is a set of specs that introduce a lot of new stuff. So, before creating anything, first you need to understand what is this all about. That's why we selected the best Articles and Presentations for you. More than that, we recommend you to read:
- Component Kitchen's interactive tutorial;
- Eric's article on how to create Custom Elements using VanillaJS;
- Polymer's documentation;
- X-Tag's documentation.
- SkateJS's documentation.
These will give you an idea on how these different solutions work and what's better for you.
2. Create
Once you learned what the heck is Web Components, it's time to create your own element! And to make your life even easier we put together some boilerplates:
In these boilerplates, we solve the same problem using different libraries (Polymer/X-Tag) or no library at all (VanillaJS). Always using the same tools and following the same directory structure.
We encourage a series of best practices like setting up a live demo, documenting your API, maintaining a changelog for release purposes, and sharing it on Bower. It's basically an opinionated starter-kit with all you need included, from polyfills to automated tasks.
The only problem is that you still need to make some changes manually after forking it like changing an element's name in different files. So, in order to automate this process, we created a Yeoman Generator and a Slush Generator that can scaffold a Web Components project in seconds using the command-line:
There are a bunch of cool stuff in this NodeJS tool that weren't able to be included in the boilerplate, things like validating your element's name according to W3C's spec rules and check if there's a similar project on Bower.
3. Share
Now that you finished your element it's time to spread the word about it! You might not believe me but there are other people in the world that could benefit from it, so why not share it with them?
The best way to share a component is by making it available for use with one of the current JavaScript package managers. Currently most web component libraries have great support for Bower, that's why we recommend you to use it. Keep in mind that Bower is not the only package manager for front-end code. npm is becoming extremely popular for managing JavaScript packages, and it's possible that it will be able to completely replace Bower in the future. Besides Bower and npm, there are other options for package management, but for simplicity's sake, we'll stick with Bower for now.
If you're not so sure about this whole Bower thing, have no fear! There's a screencast where Rob Dodson walks you through installing Bower, creating a project with the bower init command, and building your first element using Polymer.
Finally, don't forget to add the web-components keyword in your bower.json file. By doing this your awesome element will automagically appear on CustomElements.io.