This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

no Framework JS – DEV Community


TL;DR

NoFrameworkJS

Quick kind

Within the following I wish to present you the framework of HTML, CSS and Javascript I used to create my first sigle web page utility,
with out utilizing any framework (Vue, React, and many others) or webcomponents.

Introduction

To this point I’ve at all times created web sites the classical method:

PHP will get knowledge from the database and creates a template from it.
The server generates, relying on the URL, the whole web page every time and delivers it.

The browser has to rebuild the supply code each time the web page is modified.
Since usually solely the content material of part of the web page adjustments, that is various work,
this can be a lot of labor with none actual added worth.

It’s extra elegant to load solely the a part of the information that’s wanted for the brand new view and to dynamically combine it into the prevailing supply code.
and combine it dynamically into the prevailing supply code.
This strategy is adopted by Javascript frameworks similar to Vue, React or Angular.
Such pages will also be created with Svelte or through net elements.
For my first try, nevertheless, the hurdle of a framework was too nice and I made a decision to implement all the things with strategies I used to be accustomed to,
to implement all the things with strategies I used to be accustomed to:

Knowledge
All knowledge for the web site should be delivered as JSON objects from the online server. On this instance, I take advantage of freely out there APIs that generate random content material.

File construction

index.html
├── css
   └── kinds.css
└── js
    ├── app.js
    ├── utils.js
    └── pages
        ├── StartPage.js
        ├── ProfilPage.js
        └── ImagePage.js
Enter fullscreen mode

Exit fullscreen mode

The index.html file incorporates solely a listing with the entries essential for navigation, a DIV aspect with the ID app and a hyperlink to the primary Javascript file.

Essential, this should be built-in as a module.

<physique>
  <header>
    <ul>
      <li data-hash="">Begin</li>
      <li data-hash="profil">Profil</li>
      <li data-hash="photos">Pictures</li>
    </ul>
  </header>
  <div id="app"></div>
  <script kind="module" src="./js/app.js"></script>
</physique>
Enter fullscreen mode

Exit fullscreen mode

In App.js, the scripts of the person pages and the script with the assistance features are imported first:

import StartPage from './pages/StartPage.js';
import ProfilPage from './pages/ProfilPage.js';
import ImagePage from './pages/ImagePage.js';
import u from "./utils.js"
Enter fullscreen mode

Exit fullscreen mode

Then a perform from utils.js is named that reacts to clicks on the navigation and brings the content material of the respective data-hash into the handle bar of the browser.

Modifications to this hash are registered through the next occasion listener after which the router() perform is named:

window.addEventListener('DOMContentLoaded', router);
window.addEventListener('hashchange', router);

perform router() {

    let web page = u.getHashFromURL();
    swap (web page) {

        case '/':
            StartPage.render();
            break;

        case 'profil':
            ProfilPage.render();
            break;

        case 'photos':
            ImagePage.render();
            break;

        default:
            StartPage.render();
            break;
    }
}
Enter fullscreen mode

Exit fullscreen mode

This perform first reads the hash from the URL and makes use of it to render a particular web page view.

Earlier than we take a look at the construction of the web page views, two features of utils.js ought to be briefly launched:

This perform creates a <model> tag within the header of the HTML file with the content material from the string styleTags and the ID styleID.

createStyle: async(styleID, styleTags) => {
    if (!doc.getElementById(styleID + "Fashion")) {
        var model = doc.createElement("model");
        model.kind = "textual content/css";
        model.id = styleID + "Fashion";
        model.innerHTML = styleTags;
        doc.getElementsByTagName("head")[0].appendChild(model);
    }
},
Enter fullscreen mode

Exit fullscreen mode

This perform replaces the HTML code of the aspect el with the string innerHTML.

setInnerHTML: async(el, innerHTML) => {
    let aspect = doc.getElementById(el);
    aspect.innerHTML = innerHTML;
},
Enter fullscreen mode

Exit fullscreen mode

Lastly, the construction of the person pages, which at all times follows the identical sample:

  1. combine CSS code into the header
  2. insert HTML code into the aspect with the ID app
  3. load knowledge from the API and combine it into the DOM.
let TextPage = {
    render: async() => {
        u.createStyle('TextPage_style', Fashion);
        await Content material();
        await getData();
    }
};

export default TextPage;
Enter fullscreen mode

Exit fullscreen mode

The final line releases the item for export to different information.

The CSS and HTML elements are mainly similar, however may be carried out in several methods:

  • Both as a string with the perform name within the object:
const Fashion = /*CSS*/ `
    #TextPage h2 {
        coloration: blue;
    } 

    #TextPage p{
        font-family: sans;
    }`; 
Enter fullscreen mode

Exit fullscreen mode

  • Or the perform is named straight afterwards:
let Content material = async() => {
    let innerHTML = /*HTML*/ `
    <div id=TextPage>
       <h1> nonsense Textual content</h1>
       <h2 id=sentence></h2>
       <p id=paragraph></p>
    </div>`;
    await u.setInnerHTML('app', innerHTML);
}
Enter fullscreen mode

Exit fullscreen mode

Lastly, solely the precise knowledge is lacking; that is fetched from the API utilizing fetch and built-in into the corresponding tags utilizing getElementById():

let getData = async() => {
    fetch('https://random-data-api.com/api/hipster/random_hipster_stuff')
        .then((resp) => resp.json())
        .then(perform(knowledge) {
            doc.getElementById('sentence').innerHTML = knowledge.sentence;
            doc.getElementById('paragraph').innerHTML = knowledge.paragraph;
        })
}
Enter fullscreen mode

Exit fullscreen mode

So, that is it.

In fact, this method may be prolonged as a lot as you want, particularly elements (slideshows) which can be wanted repeatedly may be saved in separate information.

I ask you for constructive criticism of this technique and my description (it is the primary time I’ve written one thing like this).

You could find the whole instance on Github: NoFrameworkJS

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?