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

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*

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

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

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!

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 -->
<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

41. Interface

42. 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

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

44. 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

45. 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

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
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

50. 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

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
<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

56. Using my-share WebComponent
<my-sharemy-share ......>Tweet</my-sharemy-share>
<linklink relrel="import""import" hrefhref=""my-share.htmlmy-share.html""/>
01.
02.
56

57. Tweet
Live example
57

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