Material design language, Web Components, and AngularJS

If you have followed Google I/O 2014 event then chances are there that you have noticed numbers of presentation on the following two subjects:

• Material design language
• Web Components

I spent some time last weekend to understand a bit more about material design and web components. I can see that a new revolution has just begun. If you’re an Android user, your phone’s ‘look and feel’ is about to look a lot different in the next few months. I am sure this design philosophy is going to be reflected on lots of other web and mobile applications as well.

What is Material design language?

The material design aims to:

‘Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.”

“Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.”

You can have a look this link to understand it even better from Google team.

What is Web components?

Web Components is the new HTML standard to build reusable components for the web which is still in its early days regarding specifications but big players like Google, Mozilla has already made significant progress. You can have a look at the following projects:

Google Polymer Project:

This is really an exciting project where Google tried to bring together its material design language and web components together. They have created some building blocks known as ‘Paper elements’. You can also have a look  this sample application which is developed by this team:

Topeka – A Quiz App using Polymer

Google I/O presentation on Polymer and the Web Components revolution by Matt McNulty :

Some of the folks at Angularjs team is trying to bring this material designs into Angularjs. This project is inspired by Google’s polymer project. As per the Angular team, it is complementary to what Google polymer project is doing.

If you are a bit confused about Angularjs directives and polymer components, then this post can help you to clarify some of your doubts.

Apparently Angular is planning to move directives to use the Web Components API which is basically what Polymer is doing.

Other projects, related posts, and sites:

Mozilla X-tags: X-Tag is a small JavaScript library, created and supported by Mozilla, which brings Web Components Custom Element capabilities to all modern browsers.

WebComponents.org: A place to discuss and evolve Web Component best-practices

Looking at all these I can sense that a new revolution has just started in web development ecosystem and it will be indeed a bright future going ahead.