storkCore: A Hello World

As storkCore does not use any build process or need any server, the simplest possible 'Hello, world' is just a static HTML page, that you can open in your browser.

<html>
    <head>
        <script type="text/javascript" src="./storkCore.js">
        </script>
    </head>

    <body>
        <p>
          Hello, world
        </p>
    </body>
</html>

We have included the storkCore library, just to technically make it storkCore code, but of course this isn't very interesting. Note that at the moment storkCore hasn't been wrapped into an ES6 module, but the library is simply included in the traditional manner.

Let's make it a little bit more interesting:

<html>
    <head>
        <script type="text/javascript" src="./storkCore.js">
        </script>
    </head>

    <body>
        <p>
        Should say "Hello, Kristoffer".
        </p>
        
        <p id="greeting">
            Hello, <span id="greetingTarget">world</span>.
        </p>
    </body>

    <script type="text/javascript">
        targetView = clone(StorkHtmlView);
        targetView.linkPropertyToText("target", "greetingTarget");
        StorkHtmlView.attach(elementByID("greeting"));
        
        let model = clone(StorkModel);
        model.setProperty("target", "Kristoffer");

        targetView.setModel(model);
    </script>
</html>

If you open this code in a browser, you should see that "Hello, world" has been changed to "Hello, Kristoffer". A cloned StorkHtmlView is linked up to the appropriate paragraph through attach() (not strictly needed for this case, but good practise for the future), and then told which model property should affect the content of another element. Once the model is set for the view, the content of the element is automatically updated to reflect the new model. Note that no templating or template language is needed: in storkCore the HTML DOM tree itself is used. This means the HTML and CSS can be built separately from the code to get the look-and-feel right, with dummy content. Even in cases where a template of an element is used and replicated (lists in particular), the template is just an element from the DOM tree, and the code specifies what properties, content or attributes are affected by the model. No template language is needed.

In an example like this, cloning isn't actually necessary as the prototype view and model are not used for anything else. So we can simplify things even further by using the prototypes directly, thus showing how storkCore objects work flexibly.

<html>
    <head>
        <script type="text/javascript" src="./storkCore.js">
        </script>
    </head>

    <body>
        <p>
            Should say "Hello, Mr Lawson".
        </p>
        
        <p id="greeting">
            Hello, <span id="greetingTarget">world</span>.
        </p>
    </body>

    <script type="text/javascript">
     StorkHtmlView.linkPropertyToText("target", "greetingTarget");
     StorkHtmlView.attach(elementByID("greeting"));     
     StorkModel.setProperty("target", "Mr Lawson");
     StorkHtmlView.setModel(StorkModel);
    </script>
</html>

Let's make one final iteration of this to show how, in a way that's typical to MVC frameworks, we can share one model with multiple views, and that the output gets updated to all of them.

<html>
    <head>
        <script type="text/javascript" src="./storkCore.js">
        </script>
    </head>

    <body>
        <p>
            Should say "Hello, Kristoffer" and also give a nice
            compliment naming that person.
        </p>
        
        <p id="greeting">
            Hello, <span id="greetingTarget">world</span>.
        </p>

        <p id="compliment">
            I'm sure you're very smart,
            <span id="complimentTarget">whoever you may be</span>.
        </p>
    </body>

    <script type="text/javascript">
     let greetingView = clone(StorkHtmlView);
     greetingView.linkPropertyToText("target", "greetingTarget");
     greetingView.attach(elementByID("greeting"));

     let complimentView = clone(StorkHtmlView);
     complimentView.linkPropertyToText("target", "complimentTarget");
     complimentView.attach(elementByID("compliment"));
     
     let model = clone(StorkModel);
     model.setProperty("target", "Kristoffer");

     greetingView.setModel(model);
     complimentView.setModel(model);
    </script>
</html>

Setting the name in the model will affect both the "Hello" text, as well as the "I'm sure you're very smart" text. Each HTML element has its own StorkHtmlView attached to it, and the two views share the same model.