Meta Refresh 2014

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! I will show you how to write Components today!

Outline

WebComponents’s Polyfill is havy and slow. We do not need it to write web applications in Components-way. We could create components since HTML4, CSS1 and ECMAScript3 epoch. But this idea became popular only these days.

There are few key ideas in Components:

• Everything is Component even your app
• Declarative Custom Elements with CSS, DOM and JavaScript isolation
• Two way data binding
• HTML Imports

Each idea can be implemented with help of familiar tools:

• Everything is Component: NPM, Bower
• Declarative Custom Elements: BEM & OOCSS
• JavaScript isolation: CommonJS/Modules compiled by LMD
• Two-way data binding: AngularJS-style Dirty checking or Accessors (getters and setters)
• HTML Imports: BEM, Loaders and Transpilers

I will show you how to use reusable components today!

Speaker bio

My name is Mikhail. I am Front-End Еngineer on Yandex a “Russian Google”. Previously I worked on Wikimapia.org. I have participated in creation of front-end part of Yandex.Taxi, Yandex.Mobile, WebChats and helped to develop other Yandex services. As a big fan of web-technologies I wrote many articles about web-application architecture, JavaScript modules and HTML5 APIs.

I spend my free time on advocating web-technologies, answering releted questions, teaching JavaScript, writing LMD (JavaScript module assembler) and mixing www with photography (http://2layer.ru/).

Links

• Linkedin http://www.linkedin.com/in/azproduction/en
• Github https://github.com/azproduction
• Speakerdeck https://speakerdeck.com/azproduction (many slides, but in russian)
• Twitter https://twitter.com/azproduction
• Scaleable JavaScript-applications - http://tech.yandex.ru/events/yasubbotnik/ekb-jun-2011/talks/219/ (in russian)
• JavaScript: Loading and initialization https://speakerdeck.com/azproduction/zaghruzka-i-initsializatsiia-javascript (in russian)
• Dart - Light side of the Force? https://speakerdeck.com/azproduction/dart-svietlaia-storona-sily (in russian)
• JavaScript on frontend and backend https://speakerdeck.com/azproduction/html5-camp-javascript-na-frontie-i-v-tylu (in russian)
• Works? Stable? Effective? https://speakerdeck.com/azproduction/code-fest-rabotaiet-stabil-no-effiektivno (in russian)
• Modules and assembling of JavaScript https://speakerdeck.com/azproduction/uwdc-moduli-i-sborka-javascript (in russian)
• Promise – it does not hurt! http://tech.yandex.ru/events/yagosti/fronttalks-ekb-jul-2013/talks/981/ http://azproduction.ru/talk-promises/ (in russian)
• SPA: WebComponents, Backbone, data-bind, Promise; http://azproduction.ru/talk-404fest/ (in russian)