Skip to content

Web Components Conference, an interpretative translation

Web Components: a German conference.

Ever get into a conference room, only to realize that you are not the target audience?

I made the best of it. Here is my attempt at understanding a German talk on web components.

Let’s go!

*speaker starts*

Wonderful!

Window,
we need.
what does this do here? FALSE!
Dragon infested…
UI components, but so much better.
Google mail, because it’s an email conversation.
i.e. but i’m in Chrome.
id 38t….i love…
document manager
computers are ….

LEGOS! ON THE SCREEN.

*deep meaningful conversation about the web”
…email, slider element, header, taps element, broswer.
browser was.
no, no, let’s get this, let’s get this.
no, no, we need…together.
“standards” *air quotes” hehehehe…standards.

Javascript for everything!

we are.
edgecases
“the web platform is gone”
what’s beautiful is that when there’s nothing…encapsulates.
trinity: htlm (semantic), css, js.
javascript…and it’s gone! rendering.
with. window. document. document, information, this is…business logic, that’s javascript!
Microsoft, Mozilla, Apple, Google, Opera and Brave.
Pebble, smart board, big. plaftorm together, building blocks, structural elements. for components, we need…frameworks.
Angular1: directives
Angular 2: components…structure…innovative…components. all components. unity!

PROTOTYPE, JQUERY!

implementation, abstract, dom. dom is relatively stable.
aha, this is why….in the platform, the components, in the dom, equivalent, we have the platform.
four web standards
template elements: done and dusted, specification
custom elements – relatively stable, performance, mustache, handle bars. element bound with custom elements.
shadow: relative, super, powerful, point, version 1, stable (not a convinced face).
declarative.
this is how template elements function.

dom tree.

let’s move one. a content attribute in the block, in the structure. script. you’re welcome. tree in my document. this is true and shallow, completes trees, with event listeners.
clone, done, dom.
hi, hello! missing the body, done!
boilerplate.
cool? if you I go too fast…libraries.
it’s good in everything except Internet Explorer…hehehe…Internet Explorer.
Polyfill, five, eight, fast, all green.

There are no exploits!

Instances, creative part, when it’s custom elements, API calls, lifecycle callbacks.
declarative, new variable in text form. this is the tag now, this is the most important…and then the browser…knows…register.
Image elements are not…because class. Image tag.
you can start, you can stop, canvas, frame for frame, the magic of gif. syntax. beautiful. this is an i.e. 6, what is happening…wonderful. progressive enhancement. all browser. mosaic browser software. functionality, bye.
language from w3C. *fist shaking*.  no offense meant, fair enough, attributes.
nein. why? nein? why? no, because. but I have a question…here’s a coffee. Please have respect for the browser.
Github, three areas.
not good, hmmm, no, no.
blue, progressive enhancement, gif, and then the javascript, no problem, video element browser, common, under elements, embed, active-x, internet explorer, vulnerabilities, modern browsers are proactive and don’t, informal. all is good.

Custom elements

github, time element in browser, three hours ago, five hours ago. the newspaper. the custom elements, time is time ago. twenty two? API changes. may change soon. API changes, all is on board. Polyfill…small. when the web components, completed, villain, polyfill, performance, functions with API and then the API is relatively stable and then Polyfill…

Welcome to the Shadow Dom

this is a…feature. encapsulates, no. document query selector, it can ID what you have in the shadow dom. but it clashes. color red, document blind. all.

child, shadow roots, and the H1 is nested in the. then we have a newsbox component. the template is the component. breaking news. newsbox and then we have div, yes, here, something causes, news. enterJS. started.

and then it’s like what? content element. query selector, two, two elements in my document. in the shadowroot.

omfg, BBQ, Big news! Boring things happened.

We have components, good. practice, practice. the problem is that the shadow dom is filled with problems, document, doc, parent, it has children and siblings.  Shadown dom has, when my browser has, regular, inspectors, no. shadow roots happen in the performance, it’s…is it polyfillable? not sure it’s a good value. implement, extreme.

HTML imports

we have a war, and then JS.

relation and link to the import, my element. then css and javascript and other components come after and the then the elements in my document all, cool. polyfill, explanation, false but Mozilla said cool! so yes. but later. oopsies. iframes, ok. documents will come, my document which is my document, finished. in principle this document, import but then document is imported here, and then there but is my document the one that I see or the one that…or that other that. I am, my document is, and owner document. super cool.

this is so elegant, porcelain.

this is an important document in Javascript. dot. my document. dot, the other document. this is it!

implementing this.

apple and microsoft strongly disagree and then Google said ship it. so mailing list bomb. we ship! experiment. polyfill is good for polymer.

together, we look at the status quo. we have polyfill, mega optimistic, all is good obviously. we have polyfill-ish, Chrome, come at me bro, we’re live, yes, can’t hear you.

Firefox important. Safari and Edge. all. a million pots. moment, moment, we module loading for javascript, shadow dom, flag.

not without under consideration.

Chrome releases. my two cents is that, web components, barcelona, single track conference. noooo, slides, web components, was it small? Chrome went yes! one minute, all is good.

15, the inspiration, twitter, negative blog posts. but web components, element, frameworks, angular has component, compatible, weird, dazzled.

the problem here is that from web3C. this Finnish is good for all of us. no! But then Facebook post and Github post. because. this discussion please, you are welcome, this is good, Github. no. no. no. this is not. that’s my side of things.

 

mobile that UI

Google has 4, mozilla has, VR content in, scene, camera, box, this is relatively cool.

Here comes the hot shit. california software, his name is. new IE 6. what, this is…sucks. FYI, for you the shadow dom specs are presented. specs by custom elements.

C++, shock, javascript, oh no, undefined, no, I don’t care, this is all cool. the lifecycle callbacks, then there’s disconnected callbacks for reasons…that are arbitrary. Budapest in the shadowdom, attach shadow now. the problem is management in flat videos or iframes because the shadowroot packs iframes ….in the shadowroots? but then links, videos, and all those missing semantic elements, are very big conflicts. so I have a black list to opt out, but ha but we can’t have this because ugh, the blacklist. so now there’s a whitelist that has 5 elements and then it’s a tiny shadowroot because github issues need to be typed up. fair enough. so? so! well, then we miss things but it’s all good here.

but all the elements end up in the buggy. What? Thanks. Fine. Thanks. But there’s an alternative. the open and close mode.