Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Mikhail Davydov

February 18, 2014
Tweet

More Decks by Mikhail Davydov

Other Decks in Technology

Transcript

  1. View Slide

  2. About myself
    ●Front-End Engineer at Yandex
    ●Developer of Yandex.Taxi and Yandex.Mobile
    ●JavaScript Teacher
    ●Blogger
    02

    View Slide

  3. View Slide

  4. Components
    Now!
    Mikhail Davydov
    MetaRefresh, 15 Feb 2014

    View Slide

  5. Code libraries

    View Slide

  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

    View Slide

  7. Libraries are everywhere

    View Slide

  8. Libraries are big
    ●Heavy
    –jQuery 2.0.3 — 230K (unpacked)
    ●Hard to understand
    –Cyclomatic complexity of $.ajax — 43
    ●Too powerful
    –$.ajax, $.animate, _
    08

    View Slide

  9. Libraries are tightly coupled
    ●Hard to get a small part
    –$.Deferred, $.ajax
    –_.template
    ●Manual extraction
    ●Their modules don't help much
    09

    View Slide

  10. Dependencies management
    ●Dependency on jQuery
    ●Libraries require libraries
    –Backbone+jQuery+Underscore
    ●Manual dependencies management
    –Bower and Npm are lifesavers
    10

    View Slide

  11. Web is fixed*

    View Slide

  12. View Slide

  13. Critical DOM APIs
    ●querySelector
    ●CSS3 Selectors*
    ●Web Storage (localStorage)
    ●Cross-Origin Resource Sharing*
    * fully with polyfills
    Can I Use
    13

    View Slide

  14. ECMAScript 5

    View Slide

  15. Polyfills can fix the rest
    ●CSS3 Selectors (slow, not recommended)
    ●Cross-Origin Resource Sharing
    ●HTML5 Elements
    ●ECMAScript 5
    HTML5 Please polyfills
    15

    View Slide

  16. Mobile

    View Slide

  17. Mobile Growth

    View Slide

  18. Why do we use
    libraries?

    View Slide

  19. Components

    View Slide

  20. Simple

    View Slide

  21. Components are simple
    ●Lightweight
    –dom — 28K, 3K self (unpacked)
    ●Single responsibility & KISS Principle
    ●Easy to understand
    –Maintain
    –Write tests
    21

    View Slide

  22. Standalone

    View Slide

  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

    View Slide

  24. Isolated

    View Slide

  25. Components are isolated
    ●Do not interfere with others
    –Scoped CSS
    –Flexible layout
    –No globals leak
    ●Have restricted access to others
    – require()
    25

    View Slide

  26. View Slide

  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

    View Slide

  28. WebComponents in 2014
    HTML Templates
    Shadow DOM
    Custom Elements
    HTML Imports
    It is possible to polyfill others using Polymer.
    28

    View Slide

  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

    View Slide

  30. Component engines
    ●X-Tag
    ●jQuery UI Widgets
    ●Dojo Widgets
    ●React
    ●bem-tools
    30

    View Slide

  31. View Slide

  32. BEM briefly
    ●Avoid CSS cascade
    ●Block — Custom Element
    ●Element — Shadow DOM
    ●Modifier — Component State
    Maintainable frontend development with BEM from MR 2013
    32

    View Slide

  33. .tab-panel — Block
    .tab-panel__tab — Element
    .tab-panel__tab_state_active

    View Slide

  34. Let's build the
    Component!

    View Slide

  35. View Slide

  36. Keep in mind that
    ●Component is Simple
    –KISS
    ●Component is Standalone
    –Dependencies
    ●Component is Isolated
    –Layout, CSS, JS
    36

    View Slide

  37. Package file

    View Slide

  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

    View Slide

  39. HTML Layout

    View Slide

  40. Private HTML Layout

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

    View Slide

  41. Interface

    View Slide

  42. Interface
    a class
    class="my-share"
    "my-share"
    data-href="{{ href }}"
    data-icon="{{ icon }}"
    >{{ label }}a>
    This interface is similar to the WebComponents.
    01.
    02.
    03.
    04.
    42

    View Slide

  43. WebComponents for comparison
    my-share
    href="{{ href }}"
    icon="{{ icon }}"
    >{{ label }}my-share>
    01.
    02.
    03.
    04.
    43

    View Slide

  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

    View Slide

  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

    View Slide

  46. CSS is isolated
    ●WebComponent — DOM API
    – <br/>●BEM<br/>–Avoid CSS cascade<br/>–Naming conventions .block__element<br/>46<br/>

    View Slide

  47. Dependencies

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  51. JavaScript is isolated
    ●CommonJS/Modules
    –No globals leak
    –It asks for requirements
    –It provides resources
    ●AMD can be used too
    51

    View Slide

  52. Assemble

    View Slide

  53. Assemble component
    ●Resolve all requirements
    ●Compile
    –styles, scripts, templates
    ●Assemble scripts and templates
    ●Concatenate styles
    53

    View Slide

  54. Component build tools
    ●bem-tools
    ●Component
    ●Browserify
    ●LMD
    54

    View Slide

  55. Using my-share Component
    a class
    class="my-share"
    "my-share" ...
    ...>Tweeta>
    link rel
    rel="stylesheet"
    "stylesheet" href
    href="
    "my-share.css
    my-share.css"
    "/>
    script src
    src="
    "my-share.js
    my-share.js"
    ">script>
    Compare with WebComponents.
    01.
    02.
    03.
    55

    View Slide

  56. Using my-share WebComponent
    my-share ...
    ...>Tweetmy-share>
    link rel
    rel="import"
    "import" href
    href="
    "my-share.html
    my-share.html"
    "/>
    01.
    02.
    56

    View Slide

  57. Tweet
    Live example
    57

    View Slide

  58. View Slide

  59. View Slide

  60. Conclusion
    ●Web is Fixed, Mobile is Growing
    ●Libraries are big and clumsy
    ●WebComponents == API
    ●Write and use Components
    60

    View Slide

  61. Components Now!
    Mikhail Davydov
    @azproduction
    61

    View Slide

  62. Useful resources
    ●Code of my-share
    ●You might not need jQuery
    ●BEM Methodology
    ●Web Components
    ●Polymer Project
    62

    View Slide

  63. clck.ru/94Tqf

    View Slide

  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

    View Slide