«Разрушаем Вавилонскую Башню www с помощью...

@PixelsCommanderdenis.radin@gmail.com

Demolishing the Babel Tower of WWW

If apps are bricks in the tower they do not matchSince frameworks are not compatible and

every component is reinvented twice

Web components

✓ Native (no Babylon)✓ Reusable✓ Composable✓ UI abstraction

How does it feel?

<calendar></calendar>

As simple as

<map></map>

Exposing APIs

<map lang='52.37' att='4.88'></map>

Exposing APIs

<calendar chosen='2014-06-19'></calendar>

IssuesThat is not the heaven

Web Components spare parts

HTML Templates – ScaffoldingHTML Import – PackagingShadow DOM – EncapsulationCustom elements...

Web Components spare parts

HTML Templates – ScaffoldingHTML Import – PackagingShadow DOM – EncapsulationCustom elements...

Web Components spare parts

HTML Templates – PolyfillHTML Import – PolyfillShadow DOM – PolyfillCustom elements...

Web Components spare parts

HTML Templates – PolyfillHTML Import – PolyfillShadow DOM – PolyfillCustom elements...

Web components

✓ Native (no Babylon)✓ Reusability✓ Composability✓ UI abstraction☓ Production ready

One more troubleCome on! Are not three polyfills

enough of troubles?

Web components

✓ Native (no Babylon)✓ Reusability✓ Composability✓ UI abstraction☓ Production ready☓ Development efficiency

Web componentsBad browser compatibility

Low performance

Bad development efficiency

Need more maturer wayMay be something from existing

frameworks?

Conceptually close

✓ Reusability✓ Composability✓ UI abstraction (JSX)✓ Production ready✓ Development efficiency☓ Native (F*cking Babylon)

What solves?

✓ Templating via JSX✓ Import via Webpack✓ Encapsulation✓ Well known development flow✓ Less DOM manipulations

+

=

Let`s get the foam!

Reactive Elements dependencies

☓ HTML Templates☓ HTML Import☓ Shadow DOM✓ Custom Elements

1 of 4? Much better!

Reactive Elements dependencies

✓ Native✓ Reusability✓ Composability✓ UI abstraction✓ Production ready (actually used)✓ Development efficiency

How to convert React component into a Web component?

document.registerReact('component-name', MyReactClass);

Does it feels native to HTML?

Does it feels native to HTML?

And not React only...

document.registerReact('component-name', MyReactClass);

document.registerAngular('component-name', 'moduleName');

document.registerBackbone('component-name', BackboneView);

How to run itAutomatic initialization

Manual start up

So

and how to get the Scope?

Ok it can be easyfor isolated scope

for non-isolated scope

so the scope with properties and methods:

and Finally...

MVC Elementshttps://github.com/MVC-Elements

How does it work together?

1. getElementByID('angular-component');2. getElementByID('react-component');3. var data = angular-component.getData();4. react-component.display(data);or5. react-component.setAttribute('data', data);

MVC Elementshttps://github.com/MVC-Elements

Questions ?https://github.com/MVC-Elements

@PixelsCommanderdenis.radin@gmail.com

@stevermeisterstevermeister@gmail.com