A presentation at Midwest JS by KENIGBOLO MEYA STEPHEN
COMPONENTS More than a shinny frenzy! @expensivestevie 1
Hello! Terve! I’m Kenigbolo Meya Stephen Front End Engineering Lead @bcaster Arch Conveyer/Community Manager @TheCodeAfrique You can find me on twitter at @expensivestevie @expensivestevie 2
WHAT WE’LL BE LOOKING AT ▰ What exactly are web components? ▰ Early days of web components ▰ HTML components ▰ XBL ▰ Similarities, Differences, Failures ▰ Modern web components @expensivestevie 3
According to WebComponents.Org Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. @expensivestevie 5
“ The initial attempts to extend the default DOM API came from the big browser companies (not facebook 😉). Their desire (and failure) to provide developers features to enhance web possibilities has led to what we today call web components @expensivestevie 7
HTML COMPONENTS ▰ 1998 Microsoft proposed HTML Components (IE 5.5 support). ▰ The Goal - Change behaviour of default tags. ▰ Could be written in JScript or VBScript. ▰ MicroSoft ActiveX Scripting Interfaces was required @expensivestevie 9
@expensivestevie 10
@expensivestevie 11
XML Binding Language (XBL) ▰ In 2001, XBL was created with XBL 2 following in 2007. ▰ The Goal - Extend default DOM tags with custom behaviour. ▰ Was an addition to Mozilla’s XUL ▰ Full support on all Mozilla products @expensivestevie 13
MOZILLA XBL Concept Extending the DOM with custom tags. This would have improved readability as well as sustainable reusability. In general the concept was good ✅ Results Despite the concept being good, the implementations weren’t as good as the idea. 📛 @expensivestevie 14
@expensivestevie 15
Similarities, Differences, Failures! The devil always lies in the details! Maybe not! @expensivestevie 16
Similarities ▰ Extending the Default DOM tags behaviour ▰ Improve reusability ▰ Better code composition ▰ Improving developer experience @expensivestevie 17
Differences ▰ Microsoft used HTML (htc) while Mozilla used XML(xbl) ▰ Microsoft used a paradigm of one component per file, Mozilla however went with multiple bindings. ▰ Microsoft required ActiveX(IE) whilst Mozilla required it to have GRE (All mozilla products by default) @expensivestevie 18
Failures! There are no Failures - Just experiences and your reactions to them @expensivestevie 19
20
▰ 2001 - XBL dropped in favour of XBL 2. W3C released candidate recommendation of XBL 2 ▰ 2011 - Microsoft discontinues HTC, subsequently deprecates it in IE 10 release ▰ 2012 - Mozilla XBL 2 abandoned. No browser implemented the specs anywhere @expensivestevie 21
22
AngularJS In order to allow developers create their own tags as well as help with a better semantic for web apps, Google brought us AngularJS @expensivestevie 24
AngularJS Timeline ▰ Born in 2009. ▰ Released on Github in 2010. ▰ Stable version 1.0 rolled out in 2013 As much as we wouldn’t like to say it, the truth remains that the implementation of “components” in most of our favorite frontend frameworks originated from this @expensivestevie 25
React - Facebook In order to allow reusability of widgets, Facebook released its own library called React. React was born in 2011 and was released on Github in 2013. While not the most popular in term of Github stars, it’s the most popular in terms of keyword search and actual usage/adoption @expensivestevie 26
“ React allows developers create reusable web components as well as handle data change without reloading the page. It currently is used more than any framework out there and has a huge community. @expensivestevie 27
Vue - OSS Community Vue is a progressive framework for building user interfaces. Currently the most starred on github (in comparison with react and angular). Vue JS comes across as a pick of all the good parts in both Angular and React. It is community maintained and spearheaded by its creator Evan You @expensivestevie 28
“ As the core team, we obviously like Vue a lot. There are some problems we think it solves better than anything else out there. If we didn’t believe that, we wouldn’t be working on it. https://vuejs.org/v2/guide/comparison.html @expensivestevie 29
Web Component API Specs - Main concepts ▰ Custom Elements ▰ Shadow DOM ▰ ES Modules ▰ HTML Template @expensivestevie 30
Custom Elements 31
32
@expensivestevie 33
Shadow DOM 34
35
36
ES Modules @expensivestevie 37
38
HTML Template 39
40
41
That’s all for today folks 42
Thank You! KeyToss! Any questions? You can find me at ▰ Twitter @expensivestevie ▰ Github @kenigbolo @expensivestevie 43
for free. You
can too.