Rutgers-Camden Editorial Style Guide - Rutgers University-Camden
Web Components - Rutgers Tech Meetup Fall 2014
-
Upload
yair-aviner -
Category
Technology
-
view
54 -
download
0
Transcript of Web Components - Rutgers Tech Meetup Fall 2014
![Page 1: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/1.jpg)
WARNINGthis is a tech talk
@yaviner
![Page 2: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/2.jpg)
Building BlocksWeb Components and the Future of HTML
@yaviner
aka cool stuff you should be thinking about
![Page 3: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/3.jpg)
Introductions…briefly
Rutgers Alum (’14, RBS)
Some startups, hackathons
UI Developer for iCIMS
Likes geeky things, whiteboards
@yaviner
![Page 4: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/4.jpg)
Enough of that.
@yaviner
![Page 5: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/5.jpg)
We’re going to talk about web components.
@yaviner
![Page 6: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/6.jpg)
SOME WEB HISTORYGive me some context, bro
@yaviner
![Page 7: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/7.jpg)
@yaviner
![Page 8: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/8.jpg)
The horror!
Bloated HTML
Difficult to read, maintain
Wrong-semantic meaning (without even mentioning accessibility…)
@yaviner
![Page 9: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/9.jpg)
But it kind of made sense… at the time
Finicky browsers
Immature standards
We needed predictable results
@yaviner
![Page 10: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/10.jpg)
SO WHAT DID WE DO ABOUT IT?
“but I’ve never seen a table based design” – You, 2014
@yaviner
![Page 11: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/11.jpg)
<div>
@yaviner
![Page 12: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/12.jpg)
<span>
@yaviner
![Page 13: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/13.jpg)
CSS
@yaviner
![Page 14: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/14.jpg)
CSS3
@yaviner
![Page 15: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/15.jpg)
@yaviner
![Page 16: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/16.jpg)
But that was like a decade of tables, what gives?
![Page 17: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/17.jpg)
HTML’s authors envisioned an Internet of information, not an Internet of entertainment and interactivity. CSS wasn’t supported in most
browsers until around version 5.
@yaviner
![Page 18: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/18.jpg)
We (developers, browsers) realized that content and
presentation were meant to be separate.
@yaviner
![Page 19: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/19.jpg)
HTML is most appropriate as a declarative language
@yaviner
![Page 20: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/20.jpg)
HTML5 Introduced:
<article> - A block of grouped, related information.
<section> - Logical separation of groups of information.
<video> - A video! This needs playback!
@yaviner
![Page 21: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/21.jpg)
If we commoditize this idea and apply it broadly, we can refer to these elements as components.
@yaviner
![Page 22: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/22.jpg)
What if I need to build an app?
@yaviner
![Page 23: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/23.jpg)
Current HTML for a Hangout(mmm…soupy)
@yaviner
![Page 24: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/24.jpg)
<div> is a limited-meaning tag. Without an ID, it’s nothing but a visual separator.
@yaviner
![Page 25: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/25.jpg)
What if we could write it like this?
@yaviner@yaviner
![Page 26: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/26.jpg)
@yaviner
![Page 27: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/27.jpg)
What if our HTML was just a series of components?
@yaviner
![Page 28: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/28.jpg)
The idea isn’t new.
@yaviner
![Page 29: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/29.jpg)
@yaviner
![Page 30: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/30.jpg)
All built on the principles of web components.
@yaviner
![Page 31: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/31.jpg)
But frameworks bring costs, and so their plugins are not “free” like “<input type=“date”> is free.
@yaviner
![Page 32: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/32.jpg)
The most famous client side projects are fated to die.
- Zeno Rocha
@yaviner
![Page 33: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/33.jpg)
Just as CSS heralded in the era of “Web 2.0”, these frameworks have been nudging us toward native
web components for years.
@yaviner
![Page 34: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/34.jpg)
So what are web components?
@yaviner
![Page 35: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/35.jpg)
They empower us to natively define and extend HTML.
@yaviner
![Page 36: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/36.jpg)
And share it with others.
@yaviner
![Page 37: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/37.jpg)
HOW?
@yaviner
![Page 38: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/38.jpg)
Shadow DOM -> Encapsulation
@yaviner
![Page 39: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/39.jpg)
HTML Templates -> Inert, Re-usable DOM.
@yaviner
![Page 40: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/40.jpg)
Custom Elements -> Semantics, Extensions
@yaviner
![Page 41: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/41.jpg)
HTML Imports -> Import an entire component with one line
@yaviner
![Page 42: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/42.jpg)
All of this is regular DOM.
@yaviner
![Page 43: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/43.jpg)
SOME EXAMPLES
@yaviner
What you really wanted
![Page 44: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/44.jpg)
<video is=“camera”>
eduardolundgren.github.io/video-camera-element@yaviner
![Page 45: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/45.jpg)
<table is=“datatable”>
@yaviner
![Page 46: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/46.jpg)
<youtube-video id=“dQw4w9WgXcQ”>
@yaviner
![Page 47: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/47.jpg)
<google-maps>
eduardolundgren.github.io/google-maps-element@yaviner
![Page 48: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/48.jpg)
<twitter-button>
zenorocha.github.io/twitter-button@yaviner
![Page 49: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/49.jpg)
I heard you like frameworks
@yaviner
No, I’m not including xzibit here
![Page 50: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/50.jpg)
Polymer is an opinionated framework on top of Web Components.It’s backing muscle includes Google and others.
@yaviner
![Page 51: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/51.jpg)
X-Tags is another cool one
The brains? Mozilla
@yaviner
![Page 52: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/52.jpg)
@yaviner
![Page 53: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/53.jpg)
@yaviner
![Page 54: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/54.jpg)
But the ultimate goal of these frameworks is to become redundant.
@yaviner
![Page 55: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/55.jpg)
The most famous client side projects are fated to die.
- Zeno Rocha
@yaviner
![Page 56: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/56.jpg)
What about <insert-existing-JS-framework>?
@yaviner
![Page 57: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/57.jpg)
Angular and Ember will both support (and export!) native web components in their next iteration.
@yaviner
![Page 58: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/58.jpg)
Where can I learn more?
@yaviner
![Page 59: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/59.jpg)
Sites:webcomponents.orgpolymer-project.org
x-tags.orgcustomelements.io
People:Eric Bidelman @ebidel
Zeno Rocha @zenorocha
@yaviner
![Page 60: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/60.jpg)
GO FORTH AND BUILD
@yaviner
![Page 61: Web Components - Rutgers Tech Meetup Fall 2014](https://reader033.fdocuments.in/reader033/viewer/2022051617/55a4e31f1a28abe9648b45cc/html5/thumbnails/61.jpg)
Thank you!Questions?
@yaviner