Web Tool - Powerful JavaScript Framework

WebTool is very powerful tool which can be used to create Web Applications

New HTML Tags

WebTool provide more HTML tags such as:

• Import
• InvokeDate
• InvokeTimespan
• Random
• Resource
• ServerInfo

And allow you to create your own tags!

Example use of tag Random:

Random number is: <Random min="0" max="100" format="parseInt"></Random> <!-- Custom Tags cannot be closed like <TAG />. It have to be like: <Tag></Tag> -->

More about tags below.

Easier Data Transform to Frontend

So, problem with APIs is that you need to fetch them to get some JSON etc... PHP Solved this problem because you can add

<?php
    echo YOUR_VERY_OWN_DATA; 
?>

but some people hate PHP and use NodeJS. If inside our HTML website we imported "Controller" like this:

<script src="controller.js" controller></script>

WebTool will bind all data "exported" from controller into our website. For example, when we exporting "text" variable in controller, we can show it inside our website like this:

Our text: { text } <!-- between variable name and braces "{}" it has to be a whitemark (space) -->

The Controller

Our website/webapp can import more than one controller. Controller is a JavaScript file which for example fetch some data about weather from database etc, and export it into our website.

Why is "Controller" more safe than standard API fetching?

When we fetch API, inside DevTools (google F12) in "Network" user can easily check informations about this requests and check the response etc. Using our Controller mechanic all fetching data etc is secret. User only get the whole website as response.

Example Controller

class SuperComponent {
    tag = "SuperComponent"
    callback(element) {
        return JSON.stringify(element.dataset)
    }
}

class AppController {
    constructor(req) { this.req = req }

    $exports = {
        title: "Super website!",
        locale: "pl",
        params: null
    }

    async onInit({config, tags, document}) {
        tags.push(SuperComponent)

        document.body.innerHTML += `<h1>Hello from backend!</h1>`

        this.$exports.title = config.name
        this.$exports.params = JSON.stringify(this.req.params)

        return 0
    }
}

module.exports = AppController

The SuperComponent Class is a custom tag created by programmer. It could be used in .html file and it will show it's stringified dataset. The AppController Class is a controller. "$exports" is object, and all properties inside of this object could be bound in .html file using { variable }

The async onInit function is the main controller function. Webtool call it when user request website. This function can modify website document, custom tags, and can check the config The "req" inside constructor of Controller is visitor HTTP request.

The Controller is secret, and user/visitor cannot check it's code.

The Config

This is default config

{
    "name": "Super Application",
    "version": "1.0.0"
}

You can add more options to it.

Importing SCSS/SASS to website

To import scss or sass file to website we can use this:

<Resource type="sass" src="scss/style.scss"></Resource>
<Resource type="sass" src="scss/style.sass"></Resource>

and it will compile sass or scss to css and import to our website.

Unfortunetlly it works only with SCSS/SASS, LESScss isn't supported.

Import Tag

Few popular JavaScript Liblaries such as socket.io or JQuery can be imported using Import tag.

All existing imports:

<Import name="bootstrap/css"></Import>
<Import name="bootstrap/js"></Import>   
<Import name="jquery/core"></Import>
<Import name="jquery/ui"></Import>
<Import name="jquery/mobile"></Import>
<Import name="jquery/color"></Import>
<Import name="socket.io"></Import>

Invoke Tags

InvokeDate and InvokeTimespan is tags returning website request date or timespan. Example:

Invoke Timespan: <InvokeTimespan></InvokeTimespan> <br>
Today is: <InvokeDate format="HH:mm:SS DD.MM.YYYY"></InvokeDate>

Random Tag

Random tag returning random number between min and max formatted using javascript function specified in "format" attribute Example:

Random number between 0 and 100: <Random min="0" max="100" format="parseInt"></Random>

How to start?:

Install webtool npm install @xfacio/webtool

And add it to your code:

// Example:
const webTool = require("@xfacio/webtool")
const express = require("express")
const app = express()

app.get('/:type?/:name?', async (req, res) => res.send(await webTool(req, __dirname + '/tests').parse()))

app.listen(80)

Example application

1. index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{ title }</title>

        <script src="controller.js" controller></script>

        <Import name="bootstrap/css"></Import>
        <Import name="jquery/core"></Import>

        <!-- <Resource minify type="css" src="css/style.css"></Resource> -->
        <Resource minify type="sass" src="scss/style.scss"></Resource>
        <Resource minify type="sass" src="scss/style.sass"></Resource>
    </head>
    <link>
        Invoke Timespan: <InvokeTimespan></InvokeTimespan> <br>
        Today is: <InvokeDate format="HH:mm:SS DD.MM.YYYY"></InvokeDate> <br>
        Server info: <ServerInfo> </ServerInfo> <br>
        Random number between 0 and 100: <Random min="0" max="100" format="parseInt"></Random> <br>

        Request: <br> { params } 

        <Import name="bootstrap/js"></Import>   
        <Import name="socket.io"></Import>
    </body>
</html>```

2. config.json
```json
{
    "name": "Super Application",
    "version": "1.0.0"
}

3. controller.js

class SuperComponent {
    tag = "SuperComponent"
    callback(element) {
        return JSON.stringify(element.dataset)
    }
}

class AppController {
    constructor(req) { this.req = req }

    $exports = {
        title: "Super website!",
        locale: "pl",
        params: null
    }

    async onInit({config, tags, document}) {
        tags.push(SuperComponent)

        document.body.innerHTML += `<h1>Hello from backend!</h1>`

        this.$exports.title = config.name
        this.$exports.params = JSON.stringify(this.req.params)

        return 0
    }
}

module.exports = AppController

Also this application has scss/style.sass and scss/style.scss files.