In search of lost web

Past, present and future of components
seen through the eyes of Marcel Proust.

Transcript

1. In search of lost web Past, present and future of components seen through the eyes of Marcel Proust.
2. @granze Maurizio Mangione Milano JS founder + Lead front end developer @ Gild
3. It’s all about time
4. Kronos - Aiôn
6. Things were easier
7. <select> <option value="1" selected>option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> A component
9. ❖ Easy to use ❖ Configurable ❖ Composable ❖ Clean code ™ ❖ Single responsibility Components keypoints
10. Where we are today
11. ❖ Good old HTML element ❖ HTML 5 elements ❖ Frameworks custom elements ❖ Web components
12. Angular JS Directives
13. angular.module('myModule', []) .directive('markdown', function ($window) { var converter = new $window.Showdown.converter(); return { restrict: 'A', link: function (scope, element) { element.html(converter.makeHtml(element.text().trim())); }; }; }); <markdown></markdown>
14. React JS Elements
15. var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }); React.render( <CommentBox />, document.getElementById('content') );
16. Ember Components
17. var App = Ember.Application.create(); App.GravatarImageComponent = Ember.Component.extend({ gravatarUrl: function() { return "http://www.gravatar.com/avatar/" + hex_md5(this.get('email')); }.property('email') }); <script type="text/x-handlebars"> {{gravatar-image email="info@milanojs.com"}} </script> <script type="text/x-handlebars" id="components/gravatar-image"> <img {{bindAttr src=gravatarUrl}}> </script>
18. Web Components
19. ❖ Custom Elements ❖ HTML imports ❖ Shadow DOM ❖ Templates
20. document.registerElement('paper-tabs', { prototype: Object.create(HTMLElement.prototype) }); Custom element
21. document.registerElement('super-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button' }); Extending elements
22. var shadow = el.createShadowRoot(); shadow.innerHTML = "<style>h1 { color: pink; }</style>" + "<h1>Web components rocks!</h1>"; Shadow DOM
24. A set of polyfills built on top of the Web Components specifications. webcomponents.js
25. Polymer
26. Two-way data binding <polymer-element name="user-group"> <template> This is the {{technology} } user group. </template> <script> Polymer('user-group', { ready: function() { this.technology = 'Javascript'; } }); </script> </polymer-element>
27. Declarative event mapping <polymer-element name="g-cool"> <template> <button on-click="{{buttonClick} }"></button> </template> <script> Polymer({ buttonClick: function(event, detail, sender) { ... } }); </script> </polymer-element>
28. Extending other elements <polymer-element name="my-superlabel" extends="my-label" noscript> <template> <span> <i>★</i><shadow></shadow> </span> </template> </polymer-element> <my-superlabel>Hello!</my-superlabel> // "★ Hello!"
29. Observing properties <polymer-element name="g-cool" attributes="better best"> <script> Polymer({ better: '', best: '', betterChanged: function(oldValue, newValue) {...}, bestChanged: function(oldValue, newValue) {...} }); </script> </polymer-element>
30. Core elements
31. A set of visual and non-visual utility elements. Layout, user input, selection, and scaffolding apps.
32. <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel>
33. <core-ajax auto id="userajax" url="http://xxx.com/api/data" handleAs="json" response="{{data}}"> </core-ajax> Non visual Core Elements
34. Material Design
36. Paper elements
37. Paper elements collection implements material design for the web. They're a set of highly visual, highly interactive elements that include things like controls, layouts, hero transitions, and scrolling effects.
38. <paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input>
39. «[...] our true self, which may sometimes have seemed to be long dead, but never was entirely, is re-awoken and re-animated when it receives the heavenly food that is brought to it» Marcel Proust, Finding time again
40. Keep in touch Twitter, Github: @granze http://milanojs.com