The Maple.js Framework

2015-05-14 17:18:57 +0100 by Alex R. Young

One thing Polymer developers advocate is the idea of WebComponents. Adam Timberlake sent in an ambitious React-based framework called Maple.js (GitHub: Wildhoney/Maple.js, License: MIT, npm: maple.js) that helps you to organise React projects by using WebComponents in a very Polymer-inspired way. That means you can use React with a more Polymer-style component approach, including HTML imports, custom elements, and ES6 modules.

Given the typical Flux architecture where components reside in their respective components directory, we continue that trend in Maple, where one component can register one or many custom elements – but each HTML document can only have one template element.

Because each document only has a single template element, it means that any associated stylesheets are "namespaced" to that component. This means CSS doesn't bleed over to other components. This level of encapsulation is important because components work best when they're highly self-contained. I'm not sure if Adam is advocating using standard CSS over React-Style -- the stylesheets in JavaScript approach has some advantages, but I believe Maple's approach will be more accessible to Polymer developers.

During development you can use a dynamically transpiled and JSX-parsed app, but Mapleify should be used for generating the production build. This is similar to Polymer's vulcanize tool.

Maple solves several problems that React users have to solve when starting from scratch, so I think it's worth trying, particularly if you like Polymer. There's a getting started with Maple video where Adam demonstrates how to build an app. There's also a demo application on Heroku.