«Разрушаем Вавилонскую Башню WWW с помощью...
48
-
Upload
fdconf -
Category
Presentations & Public Speaking
-
view
4.401 -
download
0
Transcript of «Разрушаем Вавилонскую Башню WWW с помощью...
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:
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
