Components now!

312
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
312
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Components now!

  1. 1. About myself ●Front-End Engineer at Yandex ●Developer of Yandex.Taxi and Yandex.Mobile ●JavaScript Teacher ●Blogger 02
  2. 2. Components Now! Mikhail Davydov MetaRefresh, 15 Feb 2014
  3. 3. Code libraries
  4. 4. 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
  5. 5. Libraries are everywhere
  6. 6. Libraries are big ●Heavy –jQuery 2.0.3 — 230K (unpacked) ●Hard to understand –Cyclomatic complexity of $.ajax — 43 ●Too powerful –$.ajax, $.animate, _ 08
  7. 7. Libraries are tightly coupled ●Hard to get a small part –$.Deferred, $.ajax –_.template ●Manual extraction ●Their modules don't help much 09
  8. 8. Dependencies management ●Dependency on jQuery ●Libraries require libraries –Backbone+jQuery+Underscore ●Manual dependencies management –Bower and Npm are lifesavers 10
  9. 9. Web is fixed*
  10. 10. Critical DOM APIs ●querySelector ●CSS3 Selectors* ●Web Storage (localStorage) ●Cross-Origin Resource Sharing* * fully with polyfills Can I Use 13
  11. 11. ECMAScript 5
  12. 12. Polyfills can fix the rest ●CSS3 Selectors (slow, not recommended) ●Cross-Origin Resource Sharing ●HTML5 Elements ●ECMAScript 5 HTML5 Please polyfills 15
  13. 13. Mobile
  14. 14. Mobile Growth
  15. 15. Why do we use libraries?
  16. 16. Components
  17. 17. Simple
  18. 18. Components are simple ●Lightweight –dom — 28K, 3K self (unpacked) ●Single responsibility & KISS Principle ●Easy to understand –Maintain –Write tests 21
  19. 19. Standalone
  20. 20. 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
  21. 21. Isolated
  22. 22. Components are isolated ●Do not interfere with others –Scoped CSS –Flexible layout –No globals leak ●Have restricted access to others – require() 25
  23. 23. 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
  24. 24. WebComponents in 2014 HTML Templates Shadow DOM Custom Elements HTML Imports It is possible to polyfill others using Polymer. 28
  25. 25. 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
  26. 26. Component engines ●X-Tag ●jQuery UI Widgets ●Dojo Widgets ●React ●bem-tools 30
  27. 27. BEM briefly ●Avoid CSS cascade ●Block — Custom Element ●Element — Shadow DOM ●Modifier — Component State Maintainable frontend development with BEM from MR 2013 32
  28. 28. .tab-panel — Block .tab-panel__tab — Element .tab-panel__tab_state_active
  29. 29. Let's build the Component!
  30. 30. Keep in mind that ●Component is Simple –KISS ●Component is Standalone –Dependencies ●Component is Isolated –Layout, CSS, JS 36
  31. 31. Package file
  32. 32. 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
  33. 33. HTML Layout
  34. 34. Private HTML Layout <!-- my-share.html --> <aa hrefhref=""{{ href }}{{ href }}"" classclass="my-share""my-share"> <imgimg srcsrc=""{{ icon }}{{ icon }}"" classclass="my-share__icon""my-share__icon"/> <spanspan classclass="my-share__label""my-share__label">{{ label }}</spanspan> </aa> This template is written using BEM Methodology. 01. 02. 03. 04. 05. 40
  35. 35. Interface
  36. 36. Interface <aa classclass="my-share""my-share" data-href="{{ href }}" data-icon="{{ icon }}" >{{ label }}</aa> This interface is similar to the WebComponents. 01. 02. 03. 04. 42
  37. 37. WebComponents for comparison <my-sharemy-share href="{{ href }}" icon="{{ icon }}" >{{ label }}</my-sharemy-share> 01. 02. 03. 04. 43
  38. 38. CSS of Component ..my-sharemy-share {} .mymy-share__icon { vertical-alignvertical-align: middle;middle; heightheight: 16px;16px; } .mymy-share__label { padding-leftpadding-left: 5px;5px; } 01. 02. 03. 04. 05. 06. 07. 08. 44
  39. 39. CSS of WebComponent my-share {} .icon { vertical-alignvertical-align: middle;middle; heightheight: 16px;16px; } .label { padding-leftpadding-left: 5px;5px; } 01. 02. 03. 04. 05. 06. 07. 08. 45
  40. 40. CSS is isolated ●WebComponent — DOM API – <style scoped> ●BEM –Avoid CSS cascade –Naming conventions .block__element 46
  41. 41. Dependencies
  42. 42. 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
  43. 43. Component relations // my-share.js varvar tpl = require('tpl''tpl'), decl = require('decl''decl'), domify = require('domify''domify'); varvar html = require('templates/my-share''templates/my-share'), template = tpl(html); 01. 02. 03. 04. 05. 06. 07. 49
  44. 44. Component logic functionfunction MyShare(el) { thisthis.options = thisthis.collectOptions(el); thisthis.el = thisthis.render(); thisthis.delegateEvents(); thisthis.replaceElement(el); } decl('.my-share''.my-share', MyShare); module.exports = MyShare; 01. 02. 03. 04. 05. 06. 07. 08. 50
  45. 45. JavaScript is isolated ●CommonJS/Modules –No globals leak –It asks for requirements –It provides resources ●AMD can be used too 51
  46. 46. Assemble
  47. 47. Assemble component ●Resolve all requirements ●Compile –styles, scripts, templates ●Assemble scripts and templates ●Concatenate styles 53
  48. 48. Component build tools ●bem-tools ●Component ●Browserify ●LMD 54
  49. 49. Using my-share Component <aa classclass="my-share""my-share" ......>Tweet</aa> <linklink relrel="stylesheet""stylesheet" hrefhref=""my-share.cssmy-share.css""/> <scriptscript srcsrc=""my-share.jsmy-share.js""></scriptscript> Compare with WebComponents. 01. 02. 03. 55
  50. 50. Using my-share WebComponent <my-sharemy-share ......>Tweet</my-sharemy-share> <linklink relrel="import""import" hrefhref=""my-share.htmlmy-share.html""/> 01. 02. 56
  51. 51. Tweet Live example 57
  52. 52. Conclusion ●Web is Fixed, Mobile is Growing ●Libraries are big and clumsy ●WebComponents == API ●Write and use Components 60
  53. 53. Components Now! Mikhail Davydov @azproduction 61
  54. 54. Useful resources ●Code of my-share ●You might not need jQuery ●BEM Methodology ●Web Components ●Polymer Project 62
  55. 55. clck.ru/94Tqf
  56. 56. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×