Download to read offline
Uploaded byYair Aviner
Web Components - Rutgers Tech Meetup Fall 2014
The talk discusses the evolution of web components and their importance in modern web development. It highlights the limitations of traditional HTML and promotes the benefits of native web components, such as encapsulation and reusability. Various resources and frameworks supporting web components, including Polymer and X-Tags, are also mentioned, along with their potential to replace older client-side technologies.
More Related Content
![php[world] Hooks, Actions and Filters Oh My!](https://cdn.slidesharecdn.com/ss_thumbnails/hooksactionsfilters-phpworld-151119133318-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Web Components - Rutgers Tech Meetup Fall 2014
Web Components - Rutgers Tech Meetup Fall 2014
- 1. WARNING this isa tech talk @yaviner
- 2. Building Blocks WebComponents and the Future of HTML @yaviner aka cool stuff you should be thinking about
- 3. Introductions…briefly Rutgers Alum(’14, RBS) Some startups, hackathons UI Developer for iCIMS Likes geeky things, whiteboards @yaviner
- 4. Enough of that. @yaviner
- 5. We’re going totalk about web components. @yaviner
- 6. SOME WEB HISTORY Give me some context, bro @yaviner
- 7.
- 8. The horror! BloatedHTML Difficult to read, maintain Wrong-semantic meaning (without even mentioning accessibility…) @yaviner
- 9. But it kindof made sense… at the time Finicky browsers Immature standards We needed predictable results @yaviner
- 10. SO WHAT DIDWE DO ABOUT IT? “but I’ve never seen a table based design” – You, 2014 @yaviner
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. But that waslike a decade of tables, what gives?
- 17. HTML’s authors envisionedan Internet of information, not an Internet of entertainment and interactivity. CSS wasn’t supported in most browsers until around version 5. @yaviner
- 18. We (developers, browsers) realized that content and presentation were meant to be separate. @yaviner
- 19. HTML is mostappropriate as a declarative language @yaviner
- 20. HTML5 Introduced: <article>- A block of grouped, related information. <section> - Logical separation of groups of information. <video> - A video! This needs playback! @yaviner
- 21. If we commoditizethis idea and apply it broadly, we can refer to these elements as components. @yaviner
- 22. What if Ineed to build an app? @yaviner
- 23. Current HTML fora Hangout (mmm…soupy) @yaviner
- 24. <div> is alimited-meaning tag. Without an ID, it’s nothing but a visual separator. @yaviner
- 25. What if wecould write it like this? @@yyaavviinneerr
- 26.
- 27. What if ourHTML was just a series of components? @yaviner
- 28. The idea isn’tnew. @yaviner
- 29.
- 30. All built onthe principles of web components. @yaviner
- 31. But frameworks bringcosts, and so their plugins are not “free” like “<input type=“date”> is free. @yaviner
- 32. The most famousclient side projects are fated to die. - Zeno Rocha @yaviner
- 33. Just as CSSheralded in the era of “Web 2.0”, these frameworks have been nudging us toward native web components for years. @yaviner
- 34. So what areweb components? @yaviner
- 35. They empower usto natively define and extend HTML. @yaviner
- 36. And share itwith others. @yaviner
- 37.
- 38. Shadow DOM ->Encapsulation @yaviner
- 39. HTML Templates ->Inert, Re-usable DOM. @yaviner
- 40. Custom Elements ->Semantics, Extensions @yaviner
- 41. HTML Imports -> Import an entire component with one line @yaviner
- 42. All of thisis regular DOM. @yaviner
- 43. SOME EXAMPLES @yaviner What you really wanted
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. I heard youlike frameworks @yaviner No, I’m not including xzibit here
- 50. Polymer is anopinionated framework on top of Web Components. It’s backing muscle includes Google and others. @yaviner
- 51. X-Tags is anothercool one The brains? Mozilla @yaviner
- 52.
- 53.
- 54. But the ultimategoal of these frameworks is to become redundant. @yaviner
- 55. The most famousclient side projects are fated to die. - Zeno Rocha @yaviner
- 56.
- 57. Angular and Emberwill both support (and export!) native web components in their next iteration. @yaviner
- 58. Where can Ilearn more? @yaviner
- 59. Sites: webcomponents.org polymer-project.org x-tags.org customelements.io People: Eric Bidelman @ebidel Zeno Rocha @zenorocha @yaviner
- 60. GO FORTH ANDBUILD @yaviner
- 61. Thank you! Questions? @yaviner
Editor's Notes
- #6 ..But before we get started,
- #7 Let’s take a trip in the wayback machine
- #8 If you don’t, you can count yourself an enlightened modern developer. To the rest of you, I apologize for the flashbacks
- #9 Nested tables on tables! You can roughly mark this era by the rise and fallof the <marquee> tag. And spacer gifs.
- #10 But we don’t have to be proud of it.
- #18 Our limited selection of semantic tags early on reflects this - h1? ul? . Eventually browsers added CSS support. But the HTML spec took a bit longer to add better semantic tags, so we used <div>, which assumed nothing about our content.
- #19 But the fundamental distinction here was that:
- #20 Let’s leave out, in HTML, the details of how our application should look or behave, and simple declare the logical components of the page. Ideally, both humans and machines can read this semantic code and understand their purpose without bothering themselves with the implementation details. So HTML5 gave us some new toys to start with:
- #21 We simply declare the element’s purpose, and everything else will follow.
- #23 What if my needs are more complex? What do I declare for my in-app sharing components? My chat module?
- #25 <div> itself is not declarative of a component. It literally just stands for ‘division’. It’s the building block, but you don’t call a house a brick. We traded wrong-semantic code in our components for non-semantic code.
- #28 What if our apps were beautiful, declarative code?
- #31 When you grab a jQuery slideshow, an Angular table sorter, a Bootstrap pill navigation bar…this is based on the encapsulation and re-use of logical page elements.
- #32 A new HTML5 feature!
- #33 We didn’t stop using FLASH because it wasn’t useful. We stopped using FLASH because we figured a better way to do it natively.
- #34 And we’ve embraced this.
- #35 I’ve blabbed for a bit on this, but I haven’t given away the meaty bits.
- #36 This actually leads to a sort of object-oriented HTML. But I’ll get to that.
- #38 Besides classic programming fuel, of course. Warning, this is tech-ier than the rest.
- #39 The ShadowDOM has been around for a while, actually. It’s what powers that cool <video> tag. It’s a DOM that your external scripts do not reach into or traverse. But the browser can. In fact, if you enable a flag in chrome you can inspect the <video> tag’s ShadowDOM and find… it’s made up of the same divs and spans that we use. JS events in the shadowDOM bubble up to their host, and in fact appear to come from their host. Everything inside the <video> tag is isolated from the rest of your page, and does not share its styles. Until Web Components, only the browser itself could access shadowDOM.
- #40 Have you ever used Handlebars? EJS? Jade? You’re familiar with templating, but you’ve never seen it native. The <template> tag in HTML5 allows us to specify inert DOM which is read but not parsed until its called into action. They’re also responsible for the re-usability of web components. Used to their fullest extent, they also allow us to create full JS APIs for our elements.
- #41 This is another chunk of the heart of web components. Of course, this allows us to define our own HTML tags, but libraries like polymer allow us to extend existing HTML elements.
- #42 This is the heart of web component shareability. Instead of importing bootstrap css, js, jquery, just to use bootstrap tabs, we can import a single html file which defines the tag. We can share these more easily and reach wider audience.
- #43 You get mutation observers, querySelector, event listeners, caching, interoperability with any and all frameworks. And first-class devtools support.
- #44 Warning, this is tech-ier than the rest.
- #45 This tag allows, in a single import and declaration, a video element which requests and displays a webcam feed.
- #46 Tables have come a far way, but they’ve always been difficult to work with, even for what they were meant for. We could extend the table element to add an easy JS API to add rows or retrieve data. Who here has used jQuery just for the dataTables plugin?
- #47 Self-explanatory. Simple. No iframes.
- #48 Just supply a latitude and longitude and you’re good to go!
- #49 No iframes!
- #50 Warning, this is tech-ier than the rest.
- #51 Polymer adds a lot of cool stuff like two way data binding and subtemplates
- #56 This should all become standard, and the frameworks will fade away. Or, at least, stop focusing on custom element creation.
- #57 Doesn’t Angular do custom elements itself? Well, I think we’d all prefer a standards method way of declaring elements. Especially when:
- #58 Though they can interact with them as normal elements now anyway, since they’re just regular DOM.