The World Of Open Source

Advait Kulkarni
IT Director-Cetera Financial Group
Friday, February 3, 2017
Advait Kulkarni
Material design is a comprehensive guide to address all issues and concerns around visual, motion, and interaction design across platforms and devices. This can be applied for different form factors with pre-decided templates and design patterns. Angular- JS Material framework is a UI Component framework and a reference implementation of Google's Material Design Specification. It has introduced the development community to a simple yet meaningful philosophy of modern UI design. The beauty of AngularJS material is that it provides a predefined set of reusable, well-tested, and accessible UI components based on Material Design.

There are several competing material design frameworks that are currently in the market. Whether it is React- JS based Material-UI or Ionic's Ionic Material or Bootstrap using Paper all of the material frameworks do a decent job for the user experience and interaction framework. Lumx is really a great product based on AngularJS, some of the areas of concern is that it is maintained by a smaller set of developers and is dependent heavily on JQuery. As against other matured frameworks, this looks more like a Library than a well-defined framework or a platform. Where AngularJS material shines is that it helps in creating quick, consistent and functional pages while catering to the basic principles of web design viz browser portability, device independence, and graceful degradation. Angular Material recently released Version 1 which we consider to be stable and ready for production use. This only works with AngularJS 1.x and will not work with Angular 2.0.

Some of the main features that stand out are its in-built responsive design concept, innovative ideas like cards, speed dial, swipe and so on. The design is very minimal and flat. It builds on the idea that it is easier to add CSS than overwrite existing CSS. With aggressive use of shadows and bold colors, this framework does a great job of bringing out naturally intuitive user interfaces.

With a rich set of directives, this framework uses the best of the controls to provide a seamless experience across any device.

Given that AngularJS has a rich history of combined forces from Microsoft (who was working on TypeScript) and Google, it is not surprising that this UX framework has come out as an extremely innovative enterprise. Using HTML Directives as the API provides an easy way to set a value and helps with separation of concerns. By using Material services, critical provider functions around media query evaluation, creation of floating panels, optimization in side navigation usage and provision of simple Promise API can be done. The Layout feature is essentially a set of Angular directives that can be applied to any of the HTML Content. It will provide the recipe to enable developers to more easily create modern, responsive layouts on top of CSS3 flexbox. In the flex layout model, the children of a flex container should be able to be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent as per the need of the user interface.

Share on Twitter
Share on LinkedIn
Share on facebook