JSFoo: round the year submissions

JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

Diwanshi Pandey

@diwanshipandey

Web Components: What they are and How they work?

Submitted Aug 2, 2018

Web Components — what are they, and how do they work? Imagine how much easier front-end web development would be if your HTML elements alone were powerful enough to build the client-side of a modern, dynamic web page. What if you could make your own custom elements and access a large, open-source community of ready-to-use components like buttons, toolbars, chat windows, maps and other common front-end features, saving you the trouble of having to build those elements yourself?

Outline

** Introduction - 10 mins **

  • What are Web Components?
  • Why do we need them?

** Pillars of Web Components - 10 mins **

  • Four Pillars - Custom elements, Shadow DOM, Templates, HTML imports
  • Where are they used and how you can use them?

** Creating a Web Component using Angular 5 - 15 mins **

  • A basic example of a component using angular 5

** Customizing Web Components - 15 mins **

  • Build upon the basic example and add some customizations
  • Input Output Components

** Final Q&A - 10 mins **

Requirements

Laptop with angular cli installed on it

Speaker bio

Diwanshi is a Mozilla TechSpeaker and works for RedHat as a FullStack Developer. She talks about javascript, Privacy and Security over the web, open source. You can ask her about Angular, Typescript and Node js

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more