psychology dector

Three years ago, there was a lot of excitement surrounding Web Components: everybody talked about them, the frameworks Ember and Angular planned to integrate them or even be based on them, etc. By now, that excitement seems to have died down. This blog post examines what happened to Web Components. Spoiler: they are alive and well and slowly being adopted across browsers. Refresher: Web Components Web Components are a suite of specifications that help with implementing custom HTML elements: Custom elements: an API for registering your own implementations for HTML elements. Shadow DOM: Encapsulates and hides the innards of a custom element inside a nested document. The most important part of Web Components and hardest to polyfill. Templates: enable you to store HTML data inside an HTML document. The content of a <template> element is parsed without interpreting it (no loading of images etc.). HTML Imports: let you import other HTML documents into the current one. That way, HTML d...

Aurelia is a new framework by Durandal creator Rob Eisenberg (which helps credibility-wise). It uses an interesting combination of technologies/techniques: Web Components: as an infrastructure for widgets (polyfilled where necessary) 6to5 : to compile ECMAScript 6 to ECMAScript 5 jspm : for package management MVVM (as used by Knockout and the Knockout-inspired Durandal): as a UI pattern jspm is currently based on Traceur, support for 6to5 is work in progress . Quoting Eisenberg on how Aurelia combines 6to5 and jspm: There is work on system.js currently to decouple it from traceur and allow the use of 6to5 instead. Note that it only loads traceur if you are feeding it actual es6 code that hasn’t been transpiled. Since aurelia is transpiled and the skeleton is set up to use 6to5…system.js actually never loads traceur and it never comes into play. I haven’t used Aurelia, yet. Opinions welcome.

A key feature of AngularJS 2.0 is its support for Web Components [1] . Google’s Polymer is a Web Component polyfill (enabling them on all current browsers) and a framework on top of Web Components. This blog post describes how the Angular team sees the roles of AngularJS and Polymer. The roles, according to the AngularJS team AngularJS 2.0 team member Rob Eisenberg recently explained the relationship between AngularJS and Polymer: “Angular is really designed around optimizing application development (including DI, routing, templating and decorator directives, more advanced databinding)” “while Polymer is really optimized around custom element development. So, it has basic templating and binding and a strong component model.” Therefore, Eisenberg expects people to implement cross-framework UI components either as pure Web Components or via Polymer. He thinks apps and app-specific components are more likely to be built in Angular. Are Polymer and AngularJS competing? Yes and no At Goo...

The videos of the Google I/O 2014 talks have been online for a while now. Three of them are about Web Components and Polymer. This blog post briefly describes what they are about and mentions a few highlights, which may help you to decide which videos you want to watch. The three talks are: “ Polymer and the Web Components revolution ” by Matt McNulty (38:47) “ Polymer and Web Components change everything you know about Web development ” by Eric Bidelman (36:13) “ Unlock the next era of UI development with Polymer ” by Rob Dodson (41:30) If you need a quick primer to Web Components, you can look at slide 35ff of the slides for my talk “ Six technologies that will change the web platform ”. Polymer and the Web Components revolution Matt McNulty gives a broad overview of Web Components and Polymer, setting the stage for the remaining two talks. McNulty explains why Web Components are important, then describes Polymer , which is a Web Components polyfill plus a convenience layer on top. ...

At the moment, there are two polyfills for the upcoming Web Components standard (roughly, for widgets): Polymer by Google X-Tag by Mozilla Fortunately, the three ways of writing a Web Component (via the Polymer polyfill, via the X-Tag polyfill or by using the APIs directly) are interoperable. Quoting “ Custom Element Interoperability ” by the Polymer team: We’re happy to say that, yes, custom elements of any variety (be they Polymer, X-Tag or vanilla) can all happily coexist. The blog post explains how that works and provides an example that you can download from GitHub. Third Web Component polyfill: @b_lionel told me about Bosonic , which is partially based on Polymer and also interoperable .

This blog post describes five technologies that will make 2014 an exciting year for the web platform: asm.js: near-native performance on the web ParallelJS: parallelized JavaScript code ECMAScript 6 (ES6): evolving the language, uniting the community Web Components: a standard infrastructure for widgets CSS Grid Layout: native-like GUI layout asm.js: near-native performance on the web What it is: a subset of JavaScript that runs fast on current engines (about 70% of compiled C++ code, at the moment). Why it is exciting: Near-native speed in web browsers. Tightly integrated with JavaScript. Already compatible with all existing JavaScript engines. An engine optimizing asm.js code takes more work, but can be implemented incrementally. More information: “ asm.js: closing the gap between JavaScript and native ” ParallelJS: parallelized JavaScript code What it is: This project was born under the name “River Trail” and parallelizes JavaScript code that uses ...

Today, there was an online event called “Hello Polymer”, in which Polymer team members Eric Bidelman, Alex Komoroske and Matthew McNulty talked about the framework. This blog post summarizes what happened. The actual video of the event starts at 2:40 . Goals and nature of the project Web components are a set of APIs (shadow DOM, templates, custom elements, etc.) that will enable cross-framework widgets and user interface elements for the web. The main goal of the Polymer project [1] is to help with designing those APIs. To that end, it polyfills them on modern browsers so that experience with them can be gained – with real projects. The Polymer team closely collaborates with web standards bodies, contributors to various frameworks and the Blink team. The following diagram describes the architecture of Polymer: platform.js : The red parts are shims [2] for upcoming APIs. These shims will be used by most frameworks in the future and eventually be replaced by native APIs. p...

Web Components [1] are an upcoming standard for custom HTML5 user interface elements. Those UI elements will eventually become interchangeable between frameworks. Now the people behind AngularJS and Ember.js have described their plans for supporting Web Components. Below, you’ll see mentions of Google’s new framework, Polymer [1] . It is built directly on top of Web Components. One of Polymer’s goals is to help refine and fully figure out that standard. AngularJS In an entry on Google Groups, AngularJS co-creator Miško Hevery writes: We're in early stages of designing Angular 2.0, but some of our goals are: Angular will use the underlying web platform features available to it (e.g. Node.bind, template integration, Custom Elements, etc...) Web Components (Polymer, Ember, or any other framework/library) will work seamlessly within Angular apps and directives. Components written in Angular will export to Web Components (to be used by Polymer, Ember, or any other framework/library). ...

Updates: [2013-07-16] Hello Polymer: Q&A with Google’s Polymer team [more information on Polymer] [2013-05-23] Plans for supporting Web Components in AngularJS and Ember.js At Google I/O 2013, Google presented a new web user interface (UI) framework called Polymer . The way it works is indicative of the future of all web UI frameworks. Polymer Polymer is composed of the following layers: Foundation (platform.js): Foundational building blocks. Most, if not all, of these APIs will eventually become native browser APIs. Core (polymer.js): Helpers complementing Foundation. Elements: UI and non-UI components built on Core. The Foundation layer (platform.js) The Foundation layer comprises the following technologies: DOM Mutation Oberservers and Object.observe() (probably ECMAScript 7): for observing changes to DOM elements and plain JavaScript objects. Pointer Events : handle mouse and touch in the same manner, on all platforms. ...