Getting started with NORT

Content

About NORT

NORT is a client-side Javascript library that makes the creaction of Single Page Application as easy as writing HTML code.

NORT design objectives are:

Modular, component-orientated
Pure javavascript. No need to mix HTML and Javascript code.
Imperative programming style. What your application executes is exactly what you write.
No transpiling. Your code executes in the browser as-is.
Visual component programming uses HTML-like structure.

Your first app

A NORT application is always a HTML page. The HTML page generally contains the Javascript loading code. The rest of your application is implemented in Javascript

Your HTML page will look like the following: ( You can see the result here)

index.html:


<!DOCTYPE html>
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name='viewport' content='target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

<title>NORT full component set demo</title>

<!-- Simply import your application main module -->
<script type="module" src="./appcode.js"></script>

</head>
</html>

You then need an application main code.

appcode.js:



    // First you need to import the Nort library. 
    // This will also initialize the framework.
    import * as nort from "./nort/nort.js"

    export class Application {
        init() {
            // Place here your pre-rendering initialization code
        }

        render() {
            // This is your page layout.
            return $div({ style: "padding: 30px"},
                [
                $h1({ style: "color: red"}, "Your first NORT application" ),
                $p({}, "Some text here" )
                ]) 
        }

        activate() {
            // Place here your post-rendering initialization code
        }                        
    }

    // This will add Nort default look and feel to your page
    nort.useDefaultStyleSheets() 
    // Don't forget to render your application
    nort.render( new Application() )

The code explained

In the HTML file

To load a NORT application into your page, you need to:

Load the NORT library. It is best to do it in the HEAD section of your page.
Load you application code. Note your pages does not even need a BODY section

The Javascript code (Using Application class)

After loading the page, Nort will create an instance of the Application class, then call its init() method. After that, it will render the HTML element returned by the render() method into document.body. Finally it will call the activate() method, which is where you can place any additional initialization depends on initial rendering.

The Javascript code (old method)

After loading the page, the browser will run the function nort.main(). This function is your application entry point. You may perform any initialization here. After that, your are ready to render your first UI, by calling nort.render().

nort.render( element, target) appends the element to the target element. When no target is specified, the element is inserted at the root of the document.

Nort is HTML as Javascript

In this example we are rendering a div. The equivalent HTML code would be:


    <div style="padding: 30px" nort-element="div">
    <h1 style="color: red" nort-element="h1">Your first NORT application </h1>
    <p nort-element="p">Some text here </p>
    </div>

Let's compare to the NORT Javascript. Pretty close !


    $div({ style: "padding: 30px"},
    [
    $h1({ style: "color: red"}, "Your first NORT application" ),
    $p({}, "Some text here" )
    ])

All HTML5 tags are have there $tag equivalent in NORT. There are 2 ways of using a tag, depnding on the context:

Parameter notation $tag( { attrib1: value, attrib2: value ....}, [ child1, child2, .... ] )
Array notation $tag( { attrib1: value, attrib2: value ....}, [ child1, child2, .... ] )

Both notations are equivalent. The parameter notation is slighty simpler when creating literals.
The Array notation allows the children to be the result of a function that generates the chunk.