DEV Community: Filip Biterski

UI components in pure Javascript

Filip Biterski — Tue, 21 Jul 2020 03:40:18 +0000

Javascript UI libraries and frameworks often come with large files and sometimes are an overkill for small to medium projects. That's why I'd like to show you a way of building UI components with pure (vanilla) javascript, so that you can at least consider avoiding large UI libraries, and increase site's download performance as a result.

Here's an interactive example. We'll design a card with some text and a button that changes card's background color. You can see the final version on JSFiddle.

Card component

We first create the HTML Element node and add a class to it; Then declare a function for changing the background color; And append child components, passing applyRandomColor to the button component.

Note: for older browser support, instead of append method, use appendChild for each child.

function Card() {
    const node = document.createElement('div');
    node.classList.add('card');

    function applyRandomColor() {
        node.style.background = '#' + Math.floor(Math.random()*16777215).toString(16);
    }

    node.append(
        CardContent(),
        CardButton({pressHandler: applyRandomColor})
        )

    return node
}

CardContent component

More of the same.

Note: older browsers don't support classList method, for wider support use node.setAttribute('class', 'card__content');

function CardContent() {
    const node = document.createElement('div');
    node.classList.add('card__content');
    node.textContent = 'Text text text text text text text text text text text text';

    return node
}

CardButton component

More of the same.

Note how components can accept arguments and how all the variables and functions are contained inside their respective functions, and don't pollute the global scope.

function CardButton({pressHandler}) {
    const node = document.createElement('div');
    node.textContent = 'Press me';
    node.classList.add('card__button');

    node.addEventListener('click', pressHandler);

    return node
}

Append the Card component

document.body.appendChild(Card())

Let's build a simple Javascript Router

Filip Biterski — Thu, 16 Jul 2020 04:01:57 +0000

Can we create a Single Page Application (SPA) without server side modifications, frontend libraries / frameworks, and without a need to define routes? Yes and it's easy. Let me show you how I did it. (Also, there's a demo at the end that you can try out)

Once completed, the router will be capable of:

fetching pages from the server
navigating without triggering a reload
storing pages to avoid resending the same request and retain DOM state

Finally we run it with a single function that takes care of everything:

enableSpaNavigation()

Don't worry about the compatibility. Browsers that don't support the router's features will be ignored thanks to our awesome feature detection that we're going to define as well

1. Modify HTML

We need to tell the router which <a> tags should be prevented from causing a page reload, and instead fetch the page in the background by marking them like this: class="interlink"

Content of each web page you want to update also needs a container. I mark it like this: id="app"

<div id="app">
    <a classname="interlink" href="./about">About Us</a>
    <!--rest of the page content comes here-->
</div>

2. Modify Javascript

Define a state variable

const pages = [];

Yes, that's all the state we're going to need

2. "Possess" the "interlinks"

Remember those <a> tags we marked? Now's the time to change their behavior. We do this by adding a click event listener on each. The listener stops them from reloading the page with preventDefault function, and calls navigateTo function passing in the url...

function possessInterlinks() {
    Array.from(document.getElementsByClassName('interlink')).forEach(link => {
        link.addEventListener('click', function (evt) {
            evt.preventDefault()
            navigateTo(evt.target.href)
        })
    })
}

Navigation

this function updates the browser's history stack and the address bar with window.history.pushState method if necessary. It also fetches the page, if the page hasn't been previously stored; And it calls possessInterlinks if the links haven't been previoulsy 'possessed'.

function navigateTo(url, isHistoryUpdated) {
    const targetPage = getStoredPage(new URL(url).pathname)
    if (!isHistoryUpdated) window.history.pushState({}, '', url)

    if (!targetPage.content)
        fetchPage(url).then(pageText => {
            targetPage.content = pageFromText(pageText)
            replacePageContent(targetPage.content)
            setTimeout(() => {
                possessInterlinks()
            }, 1)
        })
    else replacePageContent(targetPage.content)
}

Page storage

Stores and accesses the pages from the pages state variable we declared earlier.

function getStoredPage(pathname) {
    // returns the stored page, if it doesn't exist, creates one and returns it
    const page = pages.filter(p => p.pathname === pathname)[0]
    if (page) return page

    const newPage = {pathname}
    pages.push(newPage)
    return newPage
}

function storeCurrentPage() {
    getStoredPage(window.location.pathname).content = document.getElementById('app')
}

Utility functions

function fetchPage(url) {
    return fetch(url).then(res => res.text())
}

Converts the fetched page text into DOM and returns the new #app element.

function pageFromText(pageText) {
    const div = document.createElement('div')
    div.innerHTML = pageText
    return div.querySelector('#app')
}

replaces the previous #app element with a new one.

function replacePageContent(newContent) {
    document.body.replaceChild(newContent, document.querySelector('#app'))
}

enableSpaNavigation

This function sets up the router. It calls possessInterlinks and takes care of browser's navigation back / forward buttons.

function enableSpaNavigation() {
    // feature detection: proceed if browser supports these APIs
    if (window.fetch && window.location && URL && window.history && window.history.pushState) {
        //store the page (optional)
        storeCurrentPage()

        // add 'click' event listeners to interlinks
        possessInterlinks()

        // handle browser's back / forward buttons
        window.addEventListener('popstate', evt => {
            const page = getStoredPage(location.pathname)
            if (page && page.content) {
                evt.preventDefault()
                navigateTo(evt.target.location, true)
            } else {
                window.location.reload()
            }
        })
    }
}

Finally call `enableSpaNavigation`

we make sure the document is ready before calling enableSpaNavigation

if (document.readyState !== 'loading') enableSpaNavigation()
else
    window.addEventListener('load', () => {
        enableSpaNavigation()
    })

That is all.

Here's the demo
And here's the source in github repository

I'd like to know what you guys think of this.

Convert Wikipedia Articles into Mind Maps

Filip Biterski — Tue, 30 Jun 2020 03:35:25 +0000

There’s a new web app that makes use of Wikipedia’s information format to draw a symbolic structure, which allows its users to gain a deeper understanding of the article.

The Abstraxo web app have recently had a new and interesting feature released. Named “Wiki Import”, it allows users to search Wikipedia articles, select them, and let the app draw symbolic structures, known as mind maps from the articles.

During the search phase, once the user finds the relevant page (article), pressing the Load button will make the app attempt to fetch and parse the article. If successful, the article is transformed into a mind map.

You can start using the app now, along with the new feature on abstraxo.com

A new tool for drawing mind maps: Abstraxo

Filip Biterski — Tue, 26 May 2020 01:05:38 +0000

Abstraxo is a new web tool for visualizing, and sharing information by generating mind maps, or concept maps, through an intuitive user interface.

These are some of the highlights of what the app can do:

nodes dynamically self position, no need to move them manually
each node can hold user defined properties
relations can be labeled
create multiple maps (clusters) in the same view
export (save) maps as a text in JSON format
import (load) text in JSON format as a map
multiple color schemes
It is only going to get better, as I spend more time on rolling out improvements and gathering feedback.

The app starts with a single node. Once pressed and selected, it provides users with several actions to choose from:

new child: creates a child of the slected node
edit: modify the node’s label
open: opens a modal for managing properties (name-value pairs)
delete: deletes the node and all its descendants
expand/collapse: if the node’s children are visible: collapses the node (hides all the descendants), otherwise expands the node (spawns hidden descendants)

Additional mind maps (clusters) can be created by pressing the central button on the top.

Browser support

Chrome v67 — latest Chrome
Firefox v69 — latest Firefox
Edge v79 — latest Edge Exact cross browser compatibility is unknown at this time.

The app is developed and published by me, on May 25th 2020. If you want to help me improve it, consider supporting me by buying me a “coffe” on app’s donation page. Thank you.

The problem with DOM’s event listeners

Filip Biterski — Wed, 11 Mar 2020 00:45:21 +0000

The way we add and remove event listeners on DOM elements hasn’t change much for two decades. It's methods: addEventListener, and removeEventListener do a decent job, but if we want to dynamically add and remove the listeners, these methods become impractical.

Let’s see why is that so, and consider a potential solution.

The problem

This is how an event listener is registered on the target element:

target.addEventListener(type, listener, options);

And this is how it’s removed:

target.removeEventListener(type, listener, options);

The problem with this is the fact that removeEventListener method, requires parameters of identical value the listener was registered with, requiring us to save and keep track of these parameters.

For each registered listener that we might want to remove later, we would need to store it’s defining variables: target, type, and listener.

Imagine how cluttered our code would become if we register a dozen removable event listeners. We would potentially need a lot of variables... This practice then becomes cluttery and repetitive.

The solution

A better way DOM could handle this is if the addEventListener method would return an instance of the subscription object which would hold all the defining parameters. Such object instances could hold methods like ‘unmount’, ‘mount’, or ‘update’...

So instead of just registering the listener, we could also reference the subscription:

const sub1 = target.addEventListener(type, listener, options);

Unmount the subscription:

sub1.unmount();

// instead of this:
target.removeEventListener(type, listener, options);

Update the subscription:

sub1.update({name: type2});

// instead of this:
target.removeEventListener(type, listener, options); 

target.addEventListener(type2, listener, options);

Good news is that I've made a library that implements this idea: It’s called Subvent and You can read more about it here...

Subvent.js: Managing event subscriptions in DOM

Filip Biterski ・ Mar 7 ・ 2 min read

#dom #event #library #javascript

... or start using it straight away:

filiBit / subvent

Define and manage DOM Event subscriptions

Subvent

Create event subscriptions in DOM. Manage them with update, unmount and mount methods.

Abstracts DOM's addEventListener, and removeEventListener methods into a subscription object.

Installation

In node projects:

npm install --save subvent

import {Subvent} from 'subvent'
// or use the shorthand:
import {on} from 'subvent'

In browsers:

<head>
  <script src="https://unpkg.com/subvent@latest/dist/iife/subvent.js"></script>
</head>

Usage

Get the DOM nodes first:

const el1 = document.getElementById('element-1');
const el2 = // ...
const el3 = // ...
const el4 = // ...

Define the event subscription

const evtSub1 = new Subvent(el1, 'click', () => {...});

creates an instance of Subvent
the instance represents an event subscription

The shorthand on function is also available:

const evtSub2 = on(el2, 'click', (

…

View on GitHub

Subvent.js: Managing event subscriptions in DOM

Filip Biterski — Sat, 07 Mar 2020 22:28:36 +0000

Subvent is a small javascript library for defining and managing event subscriptions in an intuitive and practical way. The human friendly way.

If You're wondering what's wrong with the way DOM handles event listeners currently, I wrote about it in another post, now we'll focus on the solution. Let's get to the code:

Let's include the library first in the head of our HTML document:
<script src="https://unpkg.com/subvent@1.1.0/dist/iife/subvent.js"></script>

Getting the DOM Nodes (elements) we're going to use
throughout this article:

const el1 = document.getElementById('element-1');
const el2 = // ...
const el3 = // ...
const el4 = // ...

Define the event subscription:

const evtSub1 = new Subvent(el1, 'click', () => {...});

creates an instance of Subvent
the instance represents an event subscription

The shorthand on function is also available:

const evtSub2 = on(el2, 'click', () => {...});

If preferred, use an object to pass parameters:

const evtSub3 = on({node: el3, name: 'click', handler: () => {...}});

Manage the subscription

Unmount it:

evtSub1.unmount();
evtSub1.isMounted; // false

Mount it:

evtSub1.mount();
evtSub1.isMounted; // true

Update it:

evtSub2.update({name: 'dblclick'});

takes care of mounting and unmounting for us
only changes the specifed arguments, retaining previous parameters.

Duplicate it:

const evtSub4 = evtSub3.duplicate({node: el4})

uses Subvent's instance as a template for creating a new instance
instance being duplicated provides fallback values for undefined parameters

About the library

The library works by gathering all the related variables of the event listener into a subscription object, an instance of Subvent class. This instance holds all the relevant properties: (node, name, handler, options, thisArg and isMounted), and all the methods (mount, unmount, update and duplicate). Very usefull stuff.

Subvent also error-checks all the parameters by value and type, and provides warnings.

To start using Subvent head on over to it's repository here:

filiBit / subvent

Define and manage DOM Event subscriptions

Subvent

Create event subscriptions in DOM. Manage them with update, unmount and mount methods.

Abstracts DOM's addEventListener, and removeEventListener methods into a subscription object.

Installation

In node projects:

npm install --save subvent

import {Subvent} from 'subvent'
// or use the shorthand:
import {on} from 'subvent'

In browsers:

<head>
  <script src="https://unpkg.com/subvent@latest/dist/iife/subvent.js"></script>
</head>

Usage

Get the DOM nodes first:

const el1 = document.getElementById('element-1');
const el2 = // ...
const el3 = // ...
const el4 = // ...

Define the event subscription

const evtSub1 = new Subvent(el1, 'click', () => {...});

creates an instance of Subvent
the instance represents an event subscription

The shorthand on function is also available:

const evtSub2 = on(el2, 'click', (

…

View on GitHub

Feedback is welcome

If You have an opinion, or and idea on how to improve it, feel free to share it with us, or contact me directly.

Thank You

DEV Community: Filip Biterski

UI components in pure Javascript

Card component

CardContent component

CardButton component

Append the Card component

Let's build a simple Javascript Router

1. Modify HTML

2. Modify Javascript

Define a state variable

2. "Possess" the "interlinks"

Navigation

Page storage

Utility functions

enableSpaNavigation

Finally call enableSpaNavigation

Convert Wikipedia Articles into Mind Maps

A new tool for drawing mind maps: Abstraxo

The problem with DOM’s event listeners

The problem

The solution

Subvent.js: Managing event subscriptions in DOM

Filip Biterski ・ Mar 7 ・ 2 min read

filiBit / subvent

Define and manage DOM Event subscriptions

Subvent

Installation

In node projects:

In browsers:

Usage

Define the event subscription

Subvent.js: Managing event subscriptions in DOM

Manage the subscription

About the library

filiBit / subvent

Define and manage DOM Event subscriptions

Subvent

Installation

In node projects:

In browsers:

Usage

Define the event subscription

Feedback is welcome

Finally call `enableSpaNavigation`