London Web Standards, 24th November 2014

1. @stopsatgreen
WEB COMPONENTS
What, Why, How, When
#LWSROOTS, 24/11

2. @stopsatgreen
@stopsatgreen
Peter Gasston
broken-links.com

3. @stopsatgreen
WEB COMPONENTS

4. @stopsatgreen
‘Demeaning’
‘Condescending’
‘A bit silly’

5. @stopsatgreen

6. @stopsatgreen

7. @stopsatgreen
WHAT?

8. @stopsatgreen
“The component model
for the Web.”

9. @stopsatgreen
A suite of technologies
for making reusable UI
controls or services.

10. @stopsatgreen
Fundamental change to
the way we build the Web.

11. @stopsatgreen

12. @stopsatgreen

13. @stopsatgreen

14. ® The Lego Group @stopsatgreen

15. @stopsatgreen
Custom Elements

16. @stopsatgreen
Shadow DOM

17. @stopsatgreen
HTML Imports

18. @stopsatgreen

19. @stopsatgreen
Templates

20. @stopsatgreen
WHY?

21. @stopsatgreen

22. @stopsatgreen
Java Applets
Dynamic Drive
OOCSS
BEM
jQuery UI
Bootstrap
React
Ember
Web Components

23. @stopsatgreen
W3C WHATWG

24. @stopsatgreen

25. @stopsatgreen
• jQuery : querySelector(), classList
• Modernizr : @supports
• Sass : --custom-properties()

26. @stopsatgreen
#extendthewebforward
http://extensiblewebmanifesto.org/

27. @stopsatgreen
<flex-carousel>
<prev-next>
<open-lightbox>
<show-position>

28. http://msdn.microsoft.com/library/ie/ms531426.aspx @stopsatgreen

29. @stopsatgreen

30. @stopsatgreen

31. @stopsatgreen

32. @stopsatgreen
meaningful naming
+ modularisation
+ encapsulation
+ sharing
= web components

33. @stopsatgreen
HOW?

34. @stopsatgreen
document.registerElement('indiana-jones');
<indiana-jones></indiana-jones>

35. @stopsatgreen
proto = Object.create(HTMLElement.prototype);
proto.whip = function(…);
document.registerElement('indiana-jones',
{ prototype: proto });
indy = document.querySelector('indiana-jones');
indy.whip();

36. @stopsatgreen
<button is="indiana-jones"></button>
proto = Object.create(HTMLButtonElement.prototype);
proto.whip = function(…);
document.registerElement('indiana-jones', {
prototype: proto,
extends: 'button'
});

37. @stopsatgreen

38. @stopsatgreen

39. @stopsatgreen
var root = foo.createShadowRoot();
root.innerHTML = '<div>…</div>';

40. @stopsatgreen
<indiana-jones>
<template id="doom">…</template>
<script>…</script>
</indiana-jones>

41. @stopsatgreen
<link rel="import" href="button-super.htm">

42. http://leafletjs.com/ @stopsatgreen

43. <leaf-map lat="33.9186805" lon="8.1198406"></leaf-map>
@stopsatgreen
<link rel="import" href="leaflet-map.htm">

44. @stopsatgreen
Everything
Useful
Useful & well-made Crap
http://en.wikipedia.org/wiki/Sturgeon%27s_law

45. http://addyosmani.com/first/ @stopsatgreen

46. http://www.paciellogroup.com/blog/2014/09/web-components-punch-list/ @stopsatgreen

47. @stopsatgreen

48. @stopsatgreen

49. @stopsatgreen
/path/to/library.min.js
/path/to/a/library.min.js

50. @stopsatgreen
<link rel="import" href="//foo.com/btn-a.htm">
<link rel="import" href="//bar.com/btn-b.htm">
<link rel="import" href="//baz.com/btn-c.htm">

51. @stopsatgreen
WHEN?

52. Browser Custom Elements Shadow DOM HTML Imports Template
@stopsatgreen
✓ ✓ ✓
✓ ✓ ✓
Who knows?
‘Under consideration’
✓
✓
✓
http://jonrimmer.github.io/are-we-componentized-yet/

53. @stopsatgreen

54. Polymer Core Bosonic
Platform.js (polyfill)
Core Elements
Brick
Paper Elements
Elements
Standard
polymer-project.org | brick.mozilla.io | bosonic.github.io | webcomponents.org

55. @stopsatgreen
Web Components are for you to
drive the future of the web.
Please drive responsibly.

56. @stopsatgreen
THE END

57. @stopsatgreen
Unless otherwise stated, all photos in this deck
are copyright George Lucas or Mickey Mouse or
someone and used without permission.