Building an Image Gallery Component with Polymer

Web components are becoming the future trend of Web application development. They allow us to group HTML markup, scripts, and styles into a reusable component. These components are part of the browser and hence don't need external JavaScript libraries like jQuery to provide its functionality. As reported by Wikipedia,

Web Components are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications. The intention behind them is to bring component-based software engineering to the World Wide Web. The components model allows for encapsulation and interoperability of individual HTML elements.

In short, web components resolve the complexity of elements in a Web page and provide a simpler and easily understandable element structure. HTML already provides sets of built in tags such as headers, paragraphs, lists and so on. However, in some cases the existing tags are not enough to provide the right support to large Web applications and here is where Web components come to the rescue. Some libraries, most notably Polymer, are making web components usable in non supporting browsers with Polyfill Web Components.

In this tutorial, we're going to learn how to create an Image Gallery component with Polymer version 1.0. All the code provided in this article is available on GitHub.

Continue reading %Building an Image Gallery Component with Polymer%

by Rakhitha Nimesh via SitePoint