Nucleon JS framework

The simplest javascript framework for frontend development.

What does it do?

Nucleon is a standalone framework, not a library. It offers a complete system for building a web application. You can use it as an overlay, for dealing with dynamism in specific pages, or as a complete solution registering pages, handling routing and templating for all your pages.

What are the differences with other frameworks?

The conception of nucleon was leaded by two main ideas.

1. Simplicity. All was made for letting things simple. The Nucleon app has the least possible components, just its core and what any project can basically needs. All components have logical names, and so their methods (like add(), get(), set(), remove()). In the simplest cases, you can define a whole page logic by calling a component, a giving it a json. The templating system got rid of any weirdness, it uses only mustache markers and an exhaustive list of data-* attributes for dealing with element integration, loops, events, double data binding and so on.

2. Fusional DOM. Almost all modern frameworks since React use a virtual DOM. This system implies to have an object representing the final appearance of the DOM, which is used to process a comparision and update the real DOM when data used to render comes to change. As everyone, I found this idea absolutely awesome. Then, one day I got another, and I wanted to make a proof of concept. What if we could read the DOM, find elements waiting for changes from data, and bind them without having to redraw, or using a virtual DOM. We could just associate data changes to specific treatments on these DOM elements. And that's exactly what Nucleon does. It registers listeners to update elements using data, performing real fusion between DOM elements and data they related to.

Why use it?

Nucleon is made for being easy to learn and use. It's fast, lightweight, needs no dependencies, and supports all modern browsers.

An example of use?

app.pages.add('homepage', {                   // Add a page in the app, for an homepage
    route: '/',                               // For all requests matching path "/"
    view: {                                   // Using an internal view
        root: '#my-container',                // Inserted in element in DOM having id "my-container"
        template: '<div>{{ message }}</div>', // Composed by a div showing a "message" value
        context: {
            message: 'Hello world!'           // Where "message" is "Hello world"
        }
    },
    fn: function (request) {
        this.renderView();                    // When a request matches the route, we render the view
    }
});

At page load, if browser url matches the url "/", the view will be rendered. Same thing if user clicks on a link matching "/", or uses previous|next button of his browser history.

Read the full documentation