SauronJS

SauronJS is a library that was created to help developers build interactive components while leveraging server-side technologies. The goal was to allow for standard server-side development to be used primarily, and add interactivity where required.

Coupled with a library like Turbolinks or Turbograft, it can make a standard web app feel like a Single Page Application (SPA).

Its name comes from the use of the observer pattern followed in RxJS, the main dependency for the library. It allows developers to write better structured and more maintainable JavaScript.

Example component

HTML Markup:

<div data-fs-component="hello-world"></div>

Building our example component:

function MyComponent(params) {
  sauron.Component.call(this, params);
  this.element.innerHTML = "This is sauron";
}
MyComponent.prototype = Object.create(sauron.Component.prototype);
MyComponent.prototype.constructor = MyComponent;

js/components/my_component.js

Hooking it all together:

// Boostrap sauron and define your component map
sauron.util.ready(function() {
  sauron.instance({
    "hello-world": MyComponent
  });
});

js/index.js

SauronJS

Example component

HTML Markup:

Building our example component:

Hooking it all together:

Result: