Polymer, polyfills, web components, you may have already come across these terms as you’ve started digging about Polymer Js. In this article I will try to cover what polymer exactly is, what is the team Polymer’s agenda, what are web components and why we need polyfills.
Is Polymer Js like MVC frameworks?
Angular and Ember also provide directives and components
Well, though few MVC frameworks also provides features like reusable components, but there is difference with Polymer. Polymer’s base is the DOM. Whatever Polymer creates is native to the DOM. So any Polymer component can be reused across any other framework or even just by itself. Polymer provides you some basic elements, extending which you can make complex and stylish components very easily.
Though Polymer Js helps you to do the above mentioned things, but the problem is polymer uses future apis of browser. Those technologies which has not been introduced to web browsers, even not been standardized by W3C. Those future technologies are called “Web Components”.
Describing Web Components
Web components are the set of few future technologies. Some of them are already provided in super new browsers like chrome, but many of them are even yet to be standardized. Let’s check them one by one.
Mutation observers are used for efficient observation of DOM. If new nodes are added in the DOM tree, if attributes are changed, mutation observers keeps an eye on that. This technology is shifting to new browsers.
This is the specification that unifies the event modules for mouse and touch devices. It allows you to write the same code for mobile, as well as desktop devices.
Shadow DOM is probably the most interesting technology provided by polyfill or very modern browsers. Shadow DOM brings encapsulation for the first time in the platform. This can encapsulate HTML, scripts and even css styles which is really amazing and useful.
This is one of the heavy pillars of web components. It allows you to define your own tags and use them just like any other tags in the browser.
This feature comes with Custom elements. You can put your custom elements in some separate .html file and call or import that particular file from another html file using <link rel=”import” src=”my-custom-elements.html” />
MDV or Model Driven Views allows direct data binding to HTML. Although this feature isn’t really an emerging standard yet, but hopefully one day it will be.
Well, the name itself tells what it is. Smooth transitions and animations.
What are Polyfills
Web Components are future technologies, but Polymer Js is present. Then where did it get the web component apis to use? Is polymer compatible only to the super new browsers or the future browsers only?
Nope! Polymer is compatible everywhere. The guys who inject the modern browser technologies to the older ones are called polyfills. Polyfills are a bridge to the future web platform. They take the browser to the future level from where Polymer can start working. When browsers will grow the pollyfills will disappear.
A Summary on Polymer JS
- Previously the name was ToolKitchen.
- With Polymer the framework is the DOM itself.
- Scoping is provided by Shadow DOM.
- Polyfills are a bridge to the future web platform.
- Polyfills focuses on compatibility, not on performance.
- Web components are awesome, but low level design. That’s why Polymer.
- Works offline using previous history.
Question answer on Polymer
As Polymer is new, and the article also is for an polymer beginner, so it’s very much certain that you may have few questions in your mind. I’m providing answers for few very common questions; but if you have more you are always welcome to post a comment.
If Polymer is client side, then why to run on server?
Polymer, the library is 100% client side. But there are few limitations of today’s technology. The type “import” of “link” tag is possible only for a server call. That’s why we have to host the files. Once the browsers have native support for the web component “import”, you can work without a server.
Why to use import?
The web world has support to load js, css, video, audio, image and also other files in the html page. But how to load a html to a html? iFrames? Well, iFrames run in a complete separate context. Then using ajax load? Obviously that’s a hack only. So this is the reason behind the birth of “import”.
Why polymer elements has dash ( – ) in their name?
The dash or hyphen in the custom element name is mandatory and it’s not related to polymer. It’s not like only polymer elements need a dash in the name; any web custom element must have it in their name. The reason is, If you are using an , the HTML parser of the browser inherit it from an element ; that’s the reason you don’t find an error in the console and everything runs fine. Now somehow the browser has to know which element is a normal unknown element and which one is a custom element. That’s why the dash is used. If you don’t use a dash, HTML parser will consider it as notmal unknown tag and will inherit from HTMLUnknownElement and your code will break.
Does Polymer use material design?
Polymer Js is philosophy because it influenced the concept of web components. Web components will soon be native to web browsers and polymers will be a significant cause of that. Polymer is giving things to the open web, not like other frameworks who tries to grow by themselves only.
Polymer is the embodiment of material design for the web. The team works closely to the chrome team and material design team. Polymer is the first JS library to go with material design concept and it also helps to material design spects to be better.
May be the polyfills are an overhead of 30/35 KB, but in near future they will also be vanished, the web will be more beautiful will reusable elements, scoped styles, more native DOM based features.