Introducing luna-js

We are pleased to announce luna-js, a SSR framework specifically designed to work with WebComponents.

WebComponents?

WebComponents are mainly referring to these four specifications:

Custom Elements

With Custom Elements we can write our own DOM elements and give them life.

Shadow DOM

The purpose of the Shadow DOM is it to encapsulate your style and markup.

ES Modules

With ES Modules we can load, import and reuse js documents in our web application

HTML Template

HTML Templates allow us to define templates, which can be (re)used in our web application.

With luna-js we are focusing mostly on the Custom Element and ES Modules part of the specifications. Shadow DOM is supported and can easily be used on the client. Instead of HTML Templates, luna-js uses lit-html.

But why?

Although a very promising standard, it was, up until now, a bit of a challenge to use WebComponents in your projects. There are many things that needed consideration. Some examples are:

  • Missing support for server side rendering
  • Polyfills and shims for older browsers
  • ES6 vs CommonJS
  • Reactivity/Templating

Core functionality

Some core functions of luna-js are:

  • File based route/page/api registration
  • Component based approach: Everything is a component
  • A hook system to hook into various steps of the application
  • Automatic loading of your components
  • Use of native dom functionality like events, rendering or querying-
  • And of course: Server side rendering and static exports

Our goals

With luna-js we wanted to provide you with a really solid foundation to start your next web project. These are the goals we had in mind:

Great developer experience

luna-js comes with an easy to use cli, luna-cli, which provides auto reloading, bundling, code splitting, css builds and markdown imports. And because we didn't want to reinvent the wheel, the cli internally uses rollup. This brings a tested foundation and a whole ecosystem of plugins.

And because sometimes a developer has to support IE11 or other dinosaurs, you can just set a flag and luna-js bundles and ships all your components with the right polyfills for older browsers.

Server-side rendering out of the box

For most projects, server side rendering is a difficult task to achieve, with luna-js it is the default. luna.js uses lit-html for rendering your templates to html on the server and also on the client to allow you to write reactive templates.

This allows us to share 100% of the templates you write between the server and client. And if your component does not need any client side functionality, it will never be passed to the client. So in theory you could write your application in 100% JavaScript, without any of it being passed to the browser.

Opinionated architecture for faster development

luna-js takes a file based approach. Your pages, apis and components are all automatically being registered based on the directory and filename. By looking at the few conventions luna-js uses, you can avoid writing a lot of boilerplate code.

Some core parts of the opinionated architecture are:

  • element-js for providing a really solid base class to work with WebComponents
  • lit-html for templating
  • express for routing and as the very base of luna-js
  • rollup for bundling and building
  • postcss for css builds

Interested?

For a detailed dive into luna-js, visit our docs or just start playing:

npm install --save @webtides/luna-js
npm install --save-dev @webtides/luna-cli

npx luna --dev

15-03-2020