For Frontend developer meetup in Amsterdam. About the essence of Web Components and comparing the developer experience and overall architecture.

1. Web Components
and using of Vuejs
Mikhail Kuznetcov, 2017

2. About me
Mikhail Kuznetcov
Dev engineer at ING
Twitter: @legkoletat
Github: github.com/shershen08

3. Vue year later
“Vue.js has just right amount of
Magic”
“Vue.js hits a sweet spot between
readability & maintainability and
fun”
and many more...

4. Agenda
What are Web Components
Compare usage of WCs and Vue
Good and bad sides
Future promises

5. What are web components
Web Components are a set of features currently
being added by the W3C to the HTML and DOM
specifications that allow for the creation of
reusable widgets or components in web
documents and web applications.
https://wikipedia.org

6. In a nutshell
https://meowni.ca/emoji-rain/components/emoji-rain/demo/

7. Current state (w/o polyfill)
https://caniuse.com/#search=components

8. Current state
https://github.com/WebComponents/webcomponentsjs
webcomponents-*.js 11-35 Kb
Polymer 25-35 Kb

9. Today’s implementations
● Polymer
● X-Tag, SkateJS, Bosonic, etc.
● AMP (https://www.ampproject.org )
● Ionic (stencil.js, https://stenciljs.com/ )
+ Large enterprises invest heavily in Web Components
(https://summit.polymer-project.org/speakers )

10. Very similar api
<script type="text/javascript">
export default {
name: 'RangeSlider',
extends: {},
props: {
bar: {},
foo: {},
fooBar: {},
},
data() {},
methods: {},
beforeCreate() {},
mounted() {},
};
</script>
Polymer
X-tags
Vuejs

11. Web components specs
Custom Elements
Foundation for designing and using new types of DOM elements.
Shadow DOM
Defines how to use encapsulated style and markup in web components.
HTML imports
Defines the inclusion and reuse of HTML documents in other HTML documents.
HTML Template
Defines how to declare fragments of markup that go unused at page load, but can be instantiated later on
at runtime.

12. Spec / Custom Elements
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements
var customElement = document.registerElement('foo');
var newCustomPrototype =
Object.create(HTMLElement.prototype,
bar: {
get: function() { return 5; }
},
foo: {
value: function() { alert('foo() called'); }
}
) ✅

13. Using Vue + any custom elements
● Mix with all frontend
environments (plain JS,
React, Angular)
● Tiny (2.5 kb min, pf - 5 kb)
https://github.com/karol-f/vue-custom-element

14. Spec / Shadow DOM
By default in most modern
frameworks
http://robdodson.me/shadow-dom-the-basics/
✅

15. Spec / HTML Templates
Vue + vue-loader
✅
<template id="mytemplate">
<img src="" alt="template image">
<div class="message"></div>
</template>
var myNewTemplate =
document.querySelector('#mytemplate');
myNewTemplate.content.querySelector('img').src =
'logo.png';

16. Spec / HTML imports
<link rel="import"
href="path/to/importstuff.html">
Vue + vue-loader
✅

17. Framework usage downsides
● Framework induced overhead (size, extra knowledge, dependencies)
● Trying to reproduce and replace to many parts of the native browser platform
(loading assets, vDOM)
● Fws do not interact well together. Nor can developers easily mix and match
components from different fws.
● Development path of single fw is less predictable than standards
https://www.captaincodeman.com/2017/03/31/polymer-2-10kb-web-framework

18. Frameworks USP
● Higher level functionality that doesn’t fit well in the single
component that is in web components (e.g. routing, state
management)
● SSR is weak
●

19. Era of frontend frameworks divergence
In 2011
● Blow up of market requirements
● No common ground
● “Build your own” approach
By 2017
● Solid standards basement
● Market stabilisation
● JS fatigue

20. Vue team plans
https://github.com/vuejs/roadmap
Backlog
● Leveraging more from Web Components when it reaches
universal adoption in major browsers (e.g. CLI command that
compiles *.vue files into vanilla web components).

21. Recap
● Vue dev experience and end results is close to that expected when having
fully supported Web Components
● Coming improvements (Vue, browsers, Web Components stack) make Vue
ecosystem a safe bid for a project that may later migrate/heavily use Web
Components
● Era of framework divergence coming to an end

22. Follow up links
Vue
https://alligator.io/vuejs/vue-integrate-web-components/
https://github.com/karol-f/vue-custom-element
https://vuejsdevelopers.com/2017/09/24/vue-js-single-file-javascript-components/
Web platform
https://thewebplatformpodcast.com
https://github.com/mateusortiz/webcomponents-the-right-way
http://kaytcat.github.io/web-components/

23. Sharing is caring!
@legkoletat