Fg-js homepage

Fg-js is a small library that allows to create and use components. “Fg” is a short form for “fragment”. The library is design to:

It’s not a framework so you can integrate it into your application without any changes in exist architecture.

Conception

One of the goals to create fg-js was to separate logic and template.

First of all let’s take a look at simple Jade template:

It takes data like this:

...and returns html string;

I see at least 2 problems in this approach:

Fg-js suggests another way:

Simplified idea is dividing templates into *fragments* of 3 kinds:

You can find live-demo below:

Micro-jade* code:

Data:

Here are 2 snippets:

You render the template via pressing "Apply" and then you will be able to see updating the document when you change the related data (there is an icon to show is it a valid JSON).

Also you can change template and press "Apply" again to rebuild the structure of the document.

Press "Apply" to rebuild document

Apply

Result:

How to use

To start working with fg-js install it with npm:

npm i fg-js

After that you need to create a store for your fragments of following structure:

/root_folder_for_fragments
    /name_of_your_fragment
        /tpl.jade // template
        /class.js // logic of thefragment
    /another_fragment
...

You need to compile the fragments for frontend then.

It can be done only ones while building your project, thus no need to rebuild it any time when a page is requested.

You can see builder example below:

var fg = require('fg-js');
 
// building your set of fragments
fg.build('./fg', './build.js', function(err){
    if (err){
        console.error(err);
        return;
    };
    console.log('done!');
});

This snippet takes fragment sources from './fg' folder and compile it to './build.js' file, that you may include in your web application.

Now you can render the fragment to your page in the following way:

$fg.classes.greeter.renderIn(document.body, {data: {}});

Where

Example of tpl.jade file:

div.greating hello world

And example of class.js file:

fgClass.on('ready', function(){
    console.log('Greater is ready');
});

Full documentation is not completed yet, but work in progress.