Components Now!

Components Now!

WebComponents is a great idea! The problem is that WebComponents API is in working draft...

Why we don't use just Components? Why we are waiting for that Web- prefix? We can use them right now and without havy polyfills! He will show you how to write Components today!

Video https://www.youtube.com/watch?v=cROv1myc6NM

B827d6cfdfbcfce33700b0e6cc03e344?s=128

Mikhail Davydov

February 18, 2014
Tweet

Transcript

  1. None
  2. About myself •Front-End Engineer at Yandex •Developer of Yandex.Taxi and

    Yandex.Mobile •JavaScript Teacher •Blogger 02
  3. None
  4. Components Now! Mikhail Davydov MetaRefresh, 15 Feb 2014

  5. Code libraries

  6. Code libraries •jQuery — fixes DOM •Underscore — fills ECMAScript

    3-5 gap •Backbone — brings MV* •They are created to fix Web For some historical reasons many good tools are libraries. The DOM is a Mess 2009 06
  7. Libraries are everywhere

  8. Libraries are big •Heavy –jQuery 2.0.3 — 230K (unpacked) •Hard

    to understand –Cyclomatic complexity of $.ajax — 43 •Too powerful –$.ajax, $.animate, _ 08
  9. Libraries are tightly coupled •Hard to get a small part

    –$.Deferred, $.ajax –_.template •Manual extraction •Their modules don't help much 09
  10. Dependencies management •Dependency on jQuery •Libraries require libraries –Backbone+jQuery+Underscore •Manual

    dependencies management –Bower and Npm are lifesavers 10
  11. Web is fixed*

  12. None
  13. Critical DOM APIs •querySelector •CSS3 Selectors* •Web Storage (localStorage) •Cross-Origin

    Resource Sharing* * fully with polyfills Can I Use 13
  14. ECMAScript 5

  15. Polyfills can fix the rest •CSS3 Selectors (slow, not recommended)

    •Cross-Origin Resource Sharing •HTML5 Elements •ECMAScript 5 HTML5 Please polyfills 15
  16. Mobile

  17. Mobile Growth

  18. Why do we use libraries?

  19. Components

  20. Simple

  21. Components are simple •Lightweight –dom — 28K, 3K self (unpacked)

    •Single responsibility & KISS Principle •Easy to understand –Maintain –Write tests 21
  22. Standalone

  23. Components are standalone •Contain all dependencies –Most of them are

    external •Easy to reuse – bower i name – npm i name •It is simple to use a part 23
  24. Isolated

  25. Components are isolated •Do not interfere with others –Scoped CSS

    –Flexible layout –No globals leak •Have restricted access to others – require() 25
  26. None
  27. WebComponents •Idea of Custom HTML Elements •API/Framework –Shadow DOM (Encapsulation)

    –HTML Imports & Templates –Template Binding Web components and the future of web development from MR 2013 27
  28. WebComponents in 2014 HTML Templates Shadow DOM Custom Elements HTML

    Imports It is possible to polyfill others using Polymer. 28
  29. Alternatives for these APIs WebComponents API Alternative Custom Elements Component

    engines Shadow DOM BEM Methodology HTML Templates Template engines HTML Imports Build tools Scoped CSS BEM or OOCSS Template Binding Data binding 29
  30. Component engines •X-Tag •jQuery UI Widgets •Dojo Widgets •React •bem-tools

    30
  31. None
  32. BEM briefly •Avoid CSS cascade •Block — Custom Element •Element

    — Shadow DOM •Modifier — Component State Maintainable frontend development with BEM from MR 2013 32
  33. .tab-panel — Block .tab-panel__tab — Element .tab-panel__tab_state_active

  34. Let's build the Component!

  35. None
  36. Keep in mind that •Component is Simple –KISS •Component is

    Standalone –Dependencies •Component is Isolated –Layout, CSS, JS 36
  37. Package file

  38. Package file is the contract // bower.json { "name" "name":

    "my-share" "my-share", "version" "version": "1.0.0" "1.0.0", "main" "main": ["my-share.js" "my-share.js"] } Bower and format of bower.json 01. 02. 03. 04. 05. 06. 38
  39. HTML Layout

  40. Private HTML Layout <!-- my-share.html --> <a a href href="

    "{{ href }} {{ href }}" " class class="my-share" "my-share"> <img img src src=" "{{ icon }} {{ icon }}" " class class="my-share__icon" "my-share__icon"/> <span span class class="my-share__label" "my-share__label">{{ label }}</span span> </a a> This template is written using BEM Methodology. 01. 02. 03. 04. 05. 40
  41. Interface

  42. Interface <a a class class="my-share" "my-share" data-href="{{ href }}" data-icon="{{

    icon }}" >{{ label }}</a a> This interface is similar to the WebComponents. 01. 02. 03. 04. 42
  43. WebComponents for comparison <my-share my-share href="{{ href }}" icon="{{ icon

    }}" >{{ label }}</my-share my-share> 01. 02. 03. 04. 43
  44. CSS of Component . .my-share my-share {} .my my-share__icon {

    vertical-align vertical-align: middle; middle; height height: 16px; 16px; } .my my-share__label { padding-left padding-left: 5px; 5px; } 01. 02. 03. 04. 05. 06. 07. 08. 44
  45. CSS of WebComponent my-share {} .icon { vertical-align vertical-align: middle;

    middle; height height: 16px; 16px; } .label { padding-left padding-left: 5px; 5px; } 01. 02. 03. 04. 05. 06. 07. 08. 45
  46. CSS is isolated •WebComponent — DOM API – <style scoped>

    •BEM –Avoid CSS cascade –Naming conventions .block__element 46
  47. Dependencies

  48. External dependencies // bower.json "dependencies" "dependencies": { "tpl" "tpl": "azproduction/lodash-template"

    "azproduction/lodash-template", "domify" "domify": "component/domify" "component/domify", "decl" "decl": "azproduction/decl" "azproduction/decl" } Declare all external dependencies. 01. 02. 03. 04. 05. 06. 48
  49. Component relations // my-share.js var var tpl = require('tpl' 'tpl'),

    decl = require('decl' 'decl'), domify = require('domify' 'domify'); var var html = require('templates/my-share' 'templates/my-share'), template = tpl(html); 01. 02. 03. 04. 05. 06. 07. 49
  50. Component logic function function MyShare(el) { this this.options = this

    this.collectOptions(el); this this.el = this this.render(); this this.delegateEvents(); this this.replaceElement(el); } decl('.my-share' '.my-share', MyShare); module.exports = MyShare; 01. 02. 03. 04. 05. 06. 07. 08. 50
  51. JavaScript is isolated •CommonJS/Modules –No globals leak –It asks for

    requirements –It provides resources •AMD can be used too 51
  52. Assemble

  53. Assemble component •Resolve all requirements •Compile –styles, scripts, templates •Assemble

    scripts and templates •Concatenate styles 53
  54. Component build tools •bem-tools •Component •Browserify •LMD 54

  55. Using my-share Component <a a class class="my-share" "my-share" ... ...>Tweet</a

    a> <link link rel rel="stylesheet" "stylesheet" href href=" "my-share.css my-share.css" "/> <script script src src=" "my-share.js my-share.js" "></script script> Compare with WebComponents. 01. 02. 03. 55
  56. Using my-share WebComponent <my-share my-share ... ...>Tweet</my-share my-share> <link link

    rel rel="import" "import" href href=" "my-share.html my-share.html" "/> 01. 02. 56
  57. Tweet Live example 57

  58. None
  59. None
  60. Conclusion •Web is Fixed, Mobile is Growing •Libraries are big

    and clumsy •WebComponents == API •Write and use Components 60
  61. Components Now! Mikhail Davydov @azproduction 61

  62. Useful resources •Code of my-share •You might not need jQuery

    •BEM Methodology •Web Components •Polymer Project 62
  63. clck.ru/94Tqf

  64. Sources of images • minecraft.gamepedia.com/Blocks • fr.fotopedia.com/wiki/Bibliothèque#!/items/flickr-6899137527 • www.planetminecraft.com/project/minecraft-site/ •

    investments.academic.ru/1513/Форвардный_контракт • frozen-lama.deviantart.com/art/Minecraft-Compound-Door-209872466 • www.postandcourier.com/article/20120620/pc1002/120629985 • isintu.com/features/responsive-design/ • nicolaijuhler.wordpress.com/ • r3c0nic.deviantart.com/art/minecraft-Blueprint-293455933 • ru-wallp.com/view/1542/ 64