@outwalk/iris NPM

Iris

Iris is a simple but powerful framework for building Single Page Web Applications using HTML, CSS, and JavaScript.

Installation

Install using npm:

npm install --save @outwalk/iris

Install using yarn:

yarn add @outwalk/iris

You can learn the JavaScript API by reading the documentation.

Iris is available in CommonJS and ES Module formats.

Iris Routing

Iris uses location hashing to route urls. It achieves this through the Router component. Whenever a route is reached, the router will run the response tied to it, a response can be a View or a Function. If the View has a after function assigned, it will be run after the view is done rendering.

Example:

import { Router, View } from "@outwalk/iris";

const router = new Router({
    "/": new View("<h1>Home</h1>"),
    "/contact": new View("<h1>Contact</h1>"),
    "/about": function() {
        new View("<h1>About</h1>").render();
    }
});

router.listen();

When working with urls in Iris, they use the follow the pattern localhost:3000/#/fragment/:param/fragment. Routes with fragments starting with : such as /users/:user are a paramenter, they accept any value in the url and can be used to change the content in the view based on the value provided.

Example:

import { Router, View } from "@outwalk/iris";

const viewSrc = `
    <h1>Url Data</h1>
    <div id="data"></div>
`;

const view = new View(viewSrc);

view.after = function(params){

    let element = document.getElementById("data");

    element.innerText = JSON.stringify(params);
}

const router = new Router({
    "/" : new View("<h1>Home</h1>"),
    "/items/:id": view,
    "/items/:id/action": view
});

router.listen();

Iris Views

Iris uses a View system for creating web pages. Each view takes in a String as the first argument and the optional second argument is an element ID to load the view into. The default element ID is "app".

Example:

import { View } from "@outwalk/iris";

const viewSource =  `
    <h1>Hello World!</h1>
`;

let view = new View(viewSource);

Iris Request

Iris can do CRUD operations using its Request API, The Request API has bindings to GET, POST, PUT, PATCH, DELETE.

Example:

import { View, Request } from "@outwalk/iris";

/* create the view */
const requestViewSrc = `
    <h1>HTTP REQUESTS</h1>
    <div id="getRequest"></div>
    <div id="postRequest"></div>
    <div id="putRequest"></div>
    <div id="patchRequest"></div>
    <div id="deleteRequest"></div>
`;

const requestView = new View(requestViewSrc);

/* when the view is done rendering run this code */
requestView.after = async function() {

    /* make a get request and display the result */
    let getElement = document.getElementById("getRequest");
    let getResponse = await Request.get("https://jsonplaceholder.typicode.com/todos/5");
    getElement.innerText = "Get Request: " + JSON.stringify(getResponse.data);

    /* make a post request and display the result */
    let postElement = document.getElementById("postRequest");
    let postResponse = await Request.post("https://jsonplaceholder.typicode.com/todos", { 
        userId: 1,
        title: "clean room",
        completed: false
    });
    postElement.innerText = "Post Request: " + JSON.stringify(postResponse.data);

    /* make a put request and display the result */
    let putElement = document.getElementById("putRequest");
    let putResponse = await Request.put("https://jsonplaceholder.typicode.com/todos/5", {
        userId: 1,
        id: 5,
        title: "hello task",
        completed: false
    });
    putElement.innerText = "Put Request: " + JSON.stringify(putResponse.data);

    /* make a patch request and display the result */
    let patchElement = document.getElementById("patchRequest");
    let patchResponse = await Request.patch("https://jsonplaceholder.typicode.com/todos/1", {
        completed: true
    });
    patchElement.innerText = "Patch Request: " + JSON.stringify(patchResponse.data);

    /* make a delete request and display the result */
    let deleteElement = document.getElementById("deleteRequest");
    let deleteResponse = await Request.patch("https://jsonplaceholder.typicode.com/todos/1");
    deleteElement.innerText = "Delete Request: " + JSON.stringify(deleteResponse.data);
};

Iris FileLoader

Iris can load an html file to be passed as an argument to a view using the FileLoader Component.

Example:

import { View, FileLoader } from "@outwalk/iris";

let view = new View("");
view.after = async () => {
    let html = await FileLoader.load("file.html");
    view.element.innerHTML = html;
};

Why?

Iris was developed to bring SPA functionality to vanilla JavaScript, without the need for large frameworks such as React or Angular. With Iris, you can use your existing HTML, CSS, and JavaScript skills to build modern Single Page Applications. Iris provides a minimal amount of components needed to build your apps, making your app size smaller.