June 25, 2014 was an amazing day. It was on that day that millions all over the world tuned in to watch the live stream keynote of the seventh Annual Google I/O conference in San Francisco. Google I/O 2014 focused on Material Design for their new Android L SDK preview, Polymer, and how Web Components will play a major role moving forward.
Selecting a Framework
A developer’s first challenge is choosing the right framework for the job, and there are many to choose from, including Polymer. Each product has features and tools like data-binding, tab-navigation, routing, animations, and notifications built-in to drive future front-end and back-end web development while also making it easier to unify experiences across mobile and desktop. Angular, Backbone, Knockout, Express, Ember, Bootstrap and more frameworks and libraries are being released just about every day. These powerful frameworks bring new workflows that can help developers and designers solve problems and make design decisions, allowing them to reach their goals and deadlines quickly in new and innovative ways.
Polymer with Material Design
Material design is a unified system of visual, motion, and interaction design that adapts across different devices. Material Design uses tactile surfaces, fluid motion and simple, yet bold graphic design choices influenced by the principles of modern print design. Material surfaces interact in a shared space, can have elevation (z-height) and cast shadows on other surfaces to convey relationships.
Polymer’s paper elements collection implements Material Design for the web. The Polymer core elements collection provides un-themed or custom HTML elements that you can use to achieve Material Design app layouts, transitions, and scrolling effects.
With Material Design and Polymer you can build rich, fluid, data-driven web applications that seamlessly transition between every screen without having to use a multitude of .JS plugins or libraries. All of this can be achieved using custom elements created by the user and added to any web page. With mobile/web applications and sites built using Material Design/Polymer, users will experience one consistent design that can span multiple screens and platforms.
How to Use Polymer
With Polymer the only Javascript needed is Platform.JS. Platform.js is a javascript library that contains several polyfills for various W3C APIs that fall under the Web Components umbrella.
Polymer takes only a few minutes to set up and learn. You can add it to any page easily:
- Add Platform.JS above the closingtag of any web page
- Import the Html Element file using the tag and make sure the “rel=” import and not stylesheet.
- Add your custom link to the below thetag.
It is also easy to create the custom element:
- Create a blank new HTML page named “custom-element.html”
- Import the Polymer.html file:
- Add customize the template:
User Focus
Throughout Google’s presentation, I saw a shift in their design and development philosophy. It was apparent that focus on the user was the number one rule. By focusing on the user, Material Design and Polymer could give rise to a richer, unified, streamlined, and faster approach to design and development for web, mobile and Smart-TV applications. Their approach to web development is:
- New, innovative, modular
- Based on encapsulated and interoperable custom elements that extend HTML
- Built on the foundation of HTML5 standards, making it easier and faster to create applications that can be responsive across many devices.
The web platform is constantly evolving on modern browsers and we need to utilize a library that will evolve with it. Google Polymer is the framework that will power the future of design and development on the web. Polymer is built on top of Web Components, a collection of standards being approved by the W3C. Web Components consist of five parts: Shadow DOM, HTML Templates, HTML Imports, Data-Binding and Custom Element. Web Components now allow you to modularize the web by encapsulating all CSS, JS and HTML into custom reusable elements that can used on any site.
Polymer has the potential to change how developers write web applications and Segue Technologies will remain at the forefront of these innovations.
Additional Resources: