Tag Archives: Web Components

Video: Web Components in production

Imagine many teams distributed over the globe working on different services. Each team is small enough to be fed with two large pizzas. Got that? Welcome to AWS! This is what makes us successful, but it also brings its own challenges. One of them is ensuring accessibility, performance, and consistency across all our UIs. Because of this we chose to explore Web Components in the last year and I want to share what we have learned. I will go over the current state and support of all Web Components building blocks. It will get technical fast as I tell you why polyfills did not work for us. We continued to investigate the underlying technology and wrote our own library that I want to share with you. As no goal can be achieved by ‘only’ producing code, I will also explain what I did in addition.

Developing Front-End Microservices With Polymer Web Components And Test-Driven Development series

via Developing Front-End Microservices With Polymer Web Components And Test-Driven Development (Part 1/5): The First Component | Technology Conversations.

This article is part of Developing Front-End Microservices With Polymer Web Components And Test-Driven Development series:

Getting Started with Angular 2 using TypeScript

via Getting Started with Angular 2 using TypeScript.

The current stable version of Angular (i.e, Angular 1.x) was built using the features of ES5 and was meant to work on most of the browsers, including some of the older versions of IE. The framework had to create a module system of its own, abstract away some of the language features, and provide a highly abstracted and configuration based interface to work on.

All good things of Angular 1 are still available in Angular 2 but the framework is simpler. Angular 2 is built with features of ES6 (and ES7), Web Components in mind, and targeting evergreen browsers.

TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development. The presence of types makes the code written in TypeScript less prone to run-time errors. In recent times, the support for ES6 has been greatly improved and a few features from ES7 have been added as well.

In this article, we’ll see how to use Angular 2 and TypeScript to build a simple application. As Angular 2 is still in alpha, syntax of the code snippets shown in this article may change before it reaches the stable release. The code developed in this article is available on GitHub.

Introduction To Web Components

via Introduction To Web Components.

The web has had a long history of different ways to create components for our websites and web applications. Gone are the days where websites were created of “pages”. Websites and web application are more demanding than ever. Using components to create reusable code has been goal that we haven’t quite achieved. We have seen components like jQuery’s plug-in api, Angular Directives, React components and more. They all try to accomplish the same goal but do it in different ways. We need a common browser API standard.

One of the main issues in our components today are style conflicts. This is when our CSS or the imported component breaks CSS somewhere else. Another is lack of native templating of HTML. Storing HTML templates on a page have only been possible by using script tags or other hacks. The current component structures lack of semantic meaning. We end up with a big pile of div’s that have little meaning. Angular has tried to help this with its custom element directives.

The new HTML5 Web Component Specification is a collection of specifications that when combined create a powerful web standard for creating reusable components.

Vanilla Web Components Magic

via chris-l/vanilla-components-magic · GitHub.

A collection of useful snippets for creating VanillaJS Web Components


Right now, there are only 3 snippets:

  • addShadowRoot: Creates a Shadow Root at this.root and convert the styles for use on browsers that use webcomponents.js instead of using native support.
  • declaredProps: Used to declare properties, in a way similar to the way Polymer does it. Allows to set observers and synchronizing attributes to properties and viceversa.
  • unresolved support: Adds support for the unresolved attribute on <body>. This snippet is notfor components, but for apps that don’t use Polymer.

The state of Web Components

via The state of Web Components ✩ Mozilla Hacks – the Web developer blog.

Web Components have been on developers’ radars for quite some time now. They were first introduced by Alex Russell at Fronteers Conference 2011. The concept shook the community up and became the topic of many future talks and discussions.

In 2013 a Web Components-based framework called Polymer was released by Google to kick the tires of these new APIs, get community feedback and add some sugar and opinion.

By now, 4 years on, Web Components should be everywhere, but in realityChrome is the only browser with ‘some version’ of Web Components. Even with polyfills it’s clear Web Components won’t be fully embraced by the community until the majority of browsers are on-board.

Web Components Introduction

via Web Components Introduction – Modus Create.

Web Components is a standard that is getting really popular these days, Browser support is getting better and we can use libraries such as Polymer, XTags and Bosonic. In addition, Angular 2 will introduce support for Web Components, Shadow DOM, Templating, etc. It’s important to understand all these concepts in order to adopt faster new frameworks and libraries.

In a nutshell, Web Components allow us to encapsulate and share reusable widgets. The main idea is to been able to bundle markup and styles to create custom components, all the code will be hidden from the outside world, the markup and the styles will be isolated.

In this tutorial we will create our first Web Component, a simple panel that will allow us to define the title and the content. When clicking the collapse/expand button the content of the panel will collapse or expand accordingly. It’s recommended to test all the code in this tutorial on Chrome 31+ (Enable “Experimental Web Platform features” in about:flags) or Firefox 23+.