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

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