Minsk Javascript meetup, November 2015

1. Angular Material vs Material Design Light
by Michael Rumiancaŭ

2. History
Google I/O - Material design principles (June 2014)
Android 5.0 - First implementation of MD (November 2014)
Angular Material - Release v0.9.0… (~April 2015)
Material Design Light - Release & open source v1.0.0 (July 2015)

3. Material design Light
Vanilla CSS, HTML and JavaScript
No dependencies
Framework-agnostic library
Lightweight (~27KB gzipped)
The MDL sources are written in Sass using BEM
Chrome, Firefox, Opera, Microsoft Edge, IE 10 +, IE 9 (CSS-only)

4. Components (~20)
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>

5. Styles & Themes

6. Use MDL on dynamic websites
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script>

7. Angular Material
Angular.js
Depends on angular, angular-animate and angular-aria.
Targeted for all browsers with versions current-1
Latest release: v1.0.0-rc4

8. Components (~30)
<md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly"></md-chips>

9. Theming
Declarative syntax
Palette
Color intentions

10. API & Services

11. Similarities...

12. Material Design and... … Material Design

13. <md-button class="md-raised md-
primary">Primary</md-button>
<button class="mdl-button mdl-js-button mdl-
button--raised mdl-button--
colored">Button</button>
Namespace “mdl-” Namespace “md-”

14. Open source.
Supported by Google,
developed in collaboration
with the Material Design
team
Open source.
Supported by Google,
developed in collaboration
with Angular core team

15. … and differences

16. Angular Material in single-page applicationsMaterial Design Light in static content websites

17. <div layout="row">
<div flex=”33”> [flex] </div>
<div flex> [flex] </div>
<div flex hide-sm> [flex] </div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
</div>
Bootstrap-like column grid Flex grid

18. <md-datepicker ng-model="myDate" md-
placeholder="Enter date">
</md-datepicker>
<label class="mdl-checkbox mdl-js-checkbox
mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1"
class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">
Checkbox
</span>
</label>
Native HTML elements with classes Directives

19. Alternative?

20. Links
http://www.google.com/design/spec/
https://material.angularjs.org/
http://www.getmdl.io/
https://elements.polymer-project.org/browse?package=paper-elements

21. Things we do
https://github.com/flatlogic/angular-material-dashboard
http://getmdltemplates.com/

22. Thank you for attention!
http://micrum.me/
michael@micrum.me