Google Promotes Material Components Out of Preview Phase

NewsDoru Ciobanu • May 12, 2017 • 3 minutes READ

For the past month, there’s been quite a lot of activity on Google’s Material Components GitHub page. In addition, Google updated the material.io section on Material Components with demos and documentation. Finally, Material Components are out of the preview phase.

Material Components are Google’s take on promoting a unified approach to Material Design. Also, known as MDC-Web, Material Components will allow developers to build, develop and design apps and web experiences that follow Google’s Material Design guidelines.

Material Components for Android

Android developers familiar with Design Support Library for Android or Material Design Lite for the web, will benefit from the improved codebase and modularity of the associated components without having to significantly alter their development architecture or switch tools.

Material Components for iOS

With Material Components, Google also targets iOS developers, by allowing them to use official Material Design Components, written in native code. They’ll just have to find a way to incorporate Material Design metaphors into Apple’s rigid guidelines.

• Google: “In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity…”
• Apple’s: “Don’t use animation for the sake of using animation…”

Material Components for the Web

For web developers, Material Components bring seamless integrations with libraries such as react, AngularJS, VueJS, etc., production-ready components and great performance. Evolved from Polymer, and subsequently, from Material Design Lite, MDC-Web provides components that are agnostic, lightweight and easy to use.

Test-Drive MDC-Web

Material Design Components are designed with modularity in mind. With 19 available components such as Animation, Buttons, Drawers, Layout Grids, Ripples, developers can install the complete library by running:

npm install --save material-components-web

Or install specific components:

npm install --save @material/button @material/card @material/textfield @material/typography

There is a quick start guide for web developers here.

To run the demos, one can setup a repo by cloning the GitHub repository and run the development server from demos/.

Are the Components of the Future Material?

While at its core, MDC-Web is a centralized repository, curated by a select team of engineers and UX engineers, Google invites anyone to contribute or fork the project on GitHub.

Google promises to keep components in line with the latest updates to Material Design, including aspects such as internationalization or accessibility support.

MDC-Web is officially supported on Chrome/Chrome on Android, Safari, Firefox, Edge, Opera, Mobile Safari, with Google promising to keep support going for the last two iterations of each browser.

Google’s quest to unify motion with spatial location just got more exciting. However, will Material Components live up to expectations? It’s up to developers to decide.