Over the following series
of articles I'll be describing the JET Composite Component Architecture,
showing how you can create your own components to boost re-use and generally
streamline your code-base. However, before we dive into the technicalities I
think that it would be a good idea to set the scene a little and provide you
with some background.|
What's The Point Of A Component Model?Before we even start, it's worth asking this question, after all, we're already dealing with a nicely structured and standardized language in the form of HTML markup. Isn't adding our own components kinda going against the whole idea and a retrograde (and therefore bad) step?
Simply put no. The need for a custom component model within HTML is well established and as such is the subject of a W3C initiative under the umbrella of Web Components. However, as is often the way of these things, the specifications are as yet (at the time of writing), not fully complete and ratified and we're in a situation where browser support is incomplete as a result (see here).
If you want to learn about Web Components in a slightly more accessible way than W3C Specifications then there are plenty of good sites out there. A good place to start, however, is webcomponents.org.
OK But I Still Don't Get Why I Might Find It Useful...
- Custom attributes for the element
- Custom methods on the element
- Custom events emitted from the element
- Function callbacks
- An encapsulation of all the resources needed to create this tag / element:
- Template HTML markup
- Styles to configure the UX
- Support for nesting of Composite Components
- Support for injection of application markup into the composite (a feature called slotting which I'll discuss in detail in a later article)
- Lifecycle methods to control the component