Ractive Component Brunch Plugin

Posted in Category • October 1, 2017

So I made a Brunch plugin to compile Ractive’s single file component format. You can take a look at it here:

React is probably the best thing happened to the frontend world in many years. React has formalized the concept of “reusable, isolated frontend component” and revolutionized how we do frontend development. In my mind I often compare it with the introduction of HTML5; not the markup, but the API part that enables developer to build more ambitious apps. I has been a React advocate for years, but we have to acknowledge that the ecosystem is quite heavy in term of setup and learning curve.

React, being just a view layer its comes with all the complexity of picking a data layer (Redux) and a build system for advanced stuffs that it requires (Webpack, Babel). I don’t build SPA all days, sometimes I just build widget plugged into someone else’s frontend so their customer can use our service seamlessly. I’ve been looking for an lighter, yet battery-included framework for my usual project use. After some digging I settled for Ractive. Main points are:

“reusable” and “isolated”

The main selling point of React, and also the features that I think drawn people leaning toward React. Ractive has awesome support for scoped and isolated CSS since day one, years before CSS Modules became a thing.

Easy of setup

Ease of setup: yes please! I remember when I first started web programming is just as simple as adding a script tag to your HTML page and get going. And Ractive supports that. With Brunch it is even simpler, dead simple that I will include it right in this post:

npm install -g brunch # if you don’t have it yet
brunch n awesome-project
cd awesome-project
npm install --save-dev ractive-component-brunch
npm start

Ease of maintenance and develop

React embraces the spirit of functional programming, data in - data out, data in - markup out. It makes comprehending and testing easy. With strong principles, the render method can looks almost like HTML. However as I experienced, the render method usually scrambled with logic and case conditions that make it impossible for designers to work with. To me this is exactly why I’m not recommending Angular and Vue; it’s true that the JS, CSS and HTML are strongly coupled that the relevant part of a component should be keep together. Single file component rules, and people are doing that even in the React world with inline styles and CSS modules. Compared to that Ractive use a version of Handlebars with minimal logic support. Designers just look into the data map to see what variable is available. The CSS in the component file is guaranteed to affect just the component, not something else in the page.