The JavaScript blog.


ES6 react material-design WebComponent

React Mount, Angular Material Design Dashboard

Posted on .

React Mount

If you want to use React more like web components, by including custom tags in HTML rather than JSX files, then take a look at Philipp Adrian's react-mount (GitHub: greenish/react-mount, License: MIT, npm: react-mount). All you need to do is define a React class with React.createClass, then mount it with React.mount. The HTML is then transformed to JSX by react-mount.

You can even nest components, so you can use it much the same way as you'd usually use React components. You can use expressions with curly braces to access props:

<translucent-component attribute={props.attribute}>  
    <p>Less than four list items? </b>{props.list.length <= 3 ? "Yes!" : "No!"}</b></p>
        {props.list.map(function(value, i){
            return <li key={i} >{value}</li>;

Angular Material Design Dashboard

Tushara Fernando has created a starting point for an Angular 1.3 Material Design application that uses ES6 and Karma/Protractor for tests: Excelian/Angular-Material-ECMA6-Dashboard.

The markup uses components, and there are components for alerts, a side menu, and a navigation bar. The way it uses ES6 modules with Angular is based on the GoCardless skeleton app.


libraries graphics charts d3 WebComponent

Function Plot, Custom Elements Tutorial

Posted on .

Function Plot

Function Plot

Function Plot (GitHub: maurizzzio/function-plot, License: MIT, npm: function-plot) by Mauricio Poppe is a D3-based charting library that is designed to allow you to render functions with as little configuration as possible.

It supports interactive line charts and scatterplots. I noticed you can change the scale with the mouse scrollwheel, and the effect is extremely cool: it feels very responsive with my Magic Mouse, which I've seen behave weirdly with some web-based graphical libraries.

The readme has a full list of the supported options, but the basic usage is just to supply a target selector and plotting function. Here's an example:

  target: '#linear',
  data: [{
    fn: function(x) {
      return x * x;

The library is very Node-friendly, so you can find the module on npm and it'll work fine with Browserify.

Using Custom Elements to Solve Simple Problems

Mike Macaulay sent in a tutorial about Custom Elements that explains what they are, how to use them, and what their limitations are:

Webcomponents always seem just over the horizon, really cool but not quite ready to use in production. I'm starting to worry that the full spec never will, as we continue to get nothing but silence from IE and Safari. However, I'm here to tell you about something that does seem ready to go today, Custom Elements.

The whole point of making your own Custom Elements, beyond making your HTML more semantic, is that you can add your own behavior or methods to those elements. This can be useful, as long as we don't try to do too much.

Most people are discovering these new APIs through libraries like React, and there seems to be some confusion about what custom elements are. Mike's article is a good introduction, and I found the MDN Web Components article is very helpful as well.


books sponsored-content meteor react WebComponent

SceneVR: Node and WebGL 3D Scenes

Posted on .


For years I've wanted to make a WebGL version of Elite (or maybe Elite II). The technical trick to making it really compelling and native to the web would be if it streamed data with WebSocket to the client... maybe huge persistent galaxies could live on clusters of Node/io.js servers!

I'm never going to have the time to make anything like that, but Ben Nolan's SceneVR project (GitHub: bnolan/scenevr, License: BSD, npm: scenevr) seems like a fun way of experimenting with interconnected virtual reality worlds. The demo allows you to walk around a 3D world with links to various games. There's a Pac-Man game, a chess game, and some other cool stuff as well.

It works by streaming XML data to the browser from a Node server. The server uses Express, and the scenes rendered on the client use HTML-like markup with CSS:

  <box id="mycube" position="1 2 3" scale="1 1 1" style="color: #f07" />

The scenes can then be scripted with JavaScript, so you can add rules to create games:

document.getElementById("mycube").addEventListener("click", function(e){  

It even supports multiplayer games by streaming player events to each client. Editing scenes also pushes data to the client, so you can live edit and quickly preview the results.

Ben has added WebVR browser support, so if you've got an Oculus Rift you can actually view scenes in VR.


books sponsored-content meteor react WebComponent

Your First Meteor Application, CommonJS React Components, WebComponents

Posted on .

Your First Meteor Application

Your First Meteor Application

David Turnbull sent me Your First Meteor Application, a highly focused, beginner-friendly introduction to Meteor. One thing that's cool about this is book is David updates it regularly when Meteor changes.

You can read the book online or download the PDF for free. There are even screencasts!

CommonJS React Components

What do you do if you want to create reusable isomorphic CommonJS React components? You can install React with npm, but what's the ideal pattern for structuring these components? How should the CSS be managed?

Aaron Kaka has been working on an experiment to use CommonJS modules as a way of sharing UI components. The work is inspired by a blog post by Simon Smith, and you can find it on GitHub here: aaronkaka/commonjs-react-components.

This proof-of-concept uses events for all interactions, so knowledge of the internal library and its dependencies is not required. You can use styling through require statements -- component specific styling is scoped to the component.

It uses webpack and live reload, so it should fit in with a modern Node-based toolchain.

Using CommonJS modules and events should appeal to Node programmers who want to make reusable client-side components. If you're a little lost with React in Node, or CommonJS and React, then this repository will give you a head start.


Interest in WebComponents is growing, but unless you're involved with them it can be hard to see the benefits. Leon Revill has been working with them, and has written an article that outlines the basics of how to create WebComponents and why they're exciting. From What are WebComponents and why are they important?:

Once WebComponents are properly supported and established you should be able to write a WebComponent that can be used in all of your projects regardless of the other technologies used. Forget writing plugins for jQuery, directives for AngularJS and addons for Ember.js. Write once use many. This has a huge benefit and in my mind is one of the most significant benefits of WebComponents.

The article includes technical examples and addresses some concerns about the divergence between X-Tag, Polymer and Bosonic.