four-great-building-tools-to-build-web-components

Four great building tools to build web components

Written in

by

TOOLS, RESOURCES AND DEMOS THAT HELP ESTABLISH A NEW CODING APPROACH

Polymer POLYMER-PROJECT.ORG

The polymer venture has been initiated by google’s coding team and tends to make the Web Components scenery significantly simpler to move to. Any polyfills necessary to support Web Components throughout all browsers is instantly available. In addition to that polymer delivers two element ranges of pre built elements geared up for production

  • Use-core
  • Paper

The core elements includes many valuable, single purpose components when it comes to core functionality. All of these work with layouts, inputs, data handling and common application framework components. The paper range addresses considerably more UI-focused elements which are tremendously visual and interactive, as well as includes controls interactions and UI transitions.

You can find a wide variety of demos throughout the polymer project which can help you get into gear using and building Web Components.You will find tutorials showcasing crucial areas of web component builds and also the actual API documentation is fantastic.The polymer venture team have created a fabulous designer tool for rapidly prototyping applications utilizing Polymer and also the capability to save experiments within GitHub (polymer-designer appspot.com).

Polymer is developed in line with the (still-in-progress) W3C specifications for Web Components, with the vision that when browsers have adopted complete support the conversion from the polyfills to native support will probably be smooth. All polymer code is accessible on GitHub(github.com/polymer), along with benefiting from continuous open source development. Any kind of bugs may be reported directly and visibility of forthcoming releases is easily available.

Bosonic BOSONIC.GITHUB.IO

Bosonic is a great alternative to popular polymer, it offers equivalent polyfills and the tools needed to build Web Components across even older browsers (including IE9).The syntax for the element generation complements the existing W3C specs exactly and dealing with it is very comparable to working with polymer.

There are a number of elements readily available for production. This is all available on GitHub github.com/bosonic./bosonic along with open to community contributions.

The getting started manual and documentation is organized in a step by step manner, making it ideal for understanding Web Components. If you wish to get involved with developing and contributing to a Web Components framework. Bosonic is a good choice. It is nicely structured and open but without the scale of contributors as polymer.

X-Tags X-TAGS.ORG

x-Tag is offered by the Mozilla team, and it is a tiny library offering the capability to build, expand and handle your Web Components. This can produce the very same W3C polyfills which are provided by the polymer project along with extensions to provide IE9 support.
This library utilizes JavaScript to register new elements and this script references any HTML Template elements that will be used, in opposition to the polymer approach of the <script> being integrated into a <polymer-element> alongside the actual HTML Template.
Probably the most extensive examples of use is mozilla’s brick (mozbrick.github.io) a selection of ten UI components that may be used again in production for creating interactive UIs. It is actually available as a bower set up and it is an incredibly quick way to start using these components in your project. This library could possibly quickly evolve but at the moment it doesn’t have the subscriber base that polymer has.

 

WebComponents.org WEBCOMPONENTS.ORG

This resource site is able to combine the best practices, improvements and developments of all things Web Components related. It possesses a wealth of valuable content, from demonstrations and podcasts provided by web component framework developers to the present state of native browser support. The explanations throughout the base polyfills (used by all libraries) can provide good insight in the work which has already gone in enabling us to utilize Web Components today. There’s also key links to galleries.
Libraries and the web component development community, most of which are a key component in the development of the tools i already mentioned.One of the better things to take a look at on this site would be the presentations, they are usually a chance to see how other developers are utilizing Web Components or what they’re trying to accomplish. A great place to revisit and will make it easier to keep up to date in the Web Components scenery.
The main vision of this site is to supply a reference point for every individual in the open development community, making certain Web Components best practices are defined and adopted, making life simpler for people like us.

The community

One important distinction between the development community for Web Components and that of various other new technologies is the large number of individuals that Web Components does and can effect. It will likely be impossible for anybody working in the web development totally stay away from Web Components and it is simple to undervalue the impact this might have on the industry. With all this under consideration the collaboration of everybody involved is essential to make sure that the road to full web component support and transition is as smooth as it can be.

 

Keep up to date

Keep close track of the progress of W3C specifications, browser support for all those key facets of Web Components and the elements that are put into libraries in any updates. Many of these areas continuously drive and define the best practices that will always be followed by all, keeping us on the same dev path.

 

Share what you find

Don’t think that just because the blog post you have discovered is a few months old, you are the last to find it. Share it with your circle and speak to your colleagues about what you discover.Using this method and inspiring others to do the same with the community as a whole will be able to push forward  keeping the rate of progression we have seen over the past year.

 

Using Web Components

Even though you start on a smallish scale. Web Components are all geared up for us in your projects. They offer great code separation and reusability which can be among the key goals of many application frameworks nowadays. The main distinction is that this strategy will be standardised across browsers in the future.

 

Share your code

The majority of libraries of Web Components supply the method for users to submit their very own elements for inclusions, when you have written something useful, it will more likely beneficial to someone else. Furthermore most Web Component projects are available on GitHub. If you discover or fix issues then do so here so that everybody can reap some benefits.
This is an established community of developers that are already contributing to the Web Components scenery. If you aren’t certain about something then they may help and answer the questions you have. We will most likely be seeing a lot more meet ups and presentations on the subject so keep watch for those as well.Let me know what tools you enjoy using when building web components?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.