DEV Community: Apoorv Saxena

Introducing AsyncResolver.js: Resolve async subscribed decisions

Apoorv Saxena — Mon, 18 Jun 2018 19:39:33 +0000

PubSub architecture implements a disjointed paradigm where subscribers just listen when an event is published. There are situations where we want to maintain multiple listeners/subscribers of an event, though want to act on the basis of how subscribers react.

Example

Let's consider a case where there are several components on a webpage, whose state can be changed by the user and we make every component to subscribe as listener to listen to a page transition so that we can check if a user is trying to move without saving data.

Now, when a user clicks on a link, we publish an event mentioning of the transition of user from the page, though we want to ask every listener (or component) if user has made any changes to their state and is moving without saving them.

In case there are any unsaved changes in any of the component, then we cancel the transition and instead display an information dialog to the user asking him to save information before proceeding further.

AsyncResolver.js is the solution for this need, it's an amalgamation of pub sub architecture and promises to provide decision making capability in asynchronous environment.

Install

### NPM
npm install async-resolver

### Yarn
yarn add async-resolver

Usage

const AsyncResolver = require('async-resolver');

let resolver = new AsyncResolver();
resolver.subscribe('locationChange', () => Promise.resolve());
resolver.subscribe('locationChange', () => Promise.reject());

resolver
    .publish('locationChange', {
        promiseMethod: 'any'
    })
    .then(() => console.log('location change allowed'))
    .catch(() => console.log('location change denied'))

For details, checkout AsyncResolver.js repo on Github

🚀 Introducing Lozad.js: Performant & light lazy loading library

Apoorv Saxena — Tue, 19 Sep 2017 04:09:44 +0000

Lazy loading is a programming practice in which a component is loaded only at the time of need. This gives great performance boost especially when the time taken to load a component is significant, and there are several such components in an application.

In webpages, images/social-widgets/ads/videos etc. contribute majorly to the increase in page load time because of their size or the resources loaded by them. Thus, to decrease page load time, it's absolutely necessary to lazy load all such components which are not critical, at the time of need.

Yet another Lazy Loading JavaScript library, why?

Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.

Introducing Lozad.js:

lazy loads elements performantly using pure JavaScript,
is a light-weight library, just 535 bytes minified & gzipped,
has NO DEPENDENCIES :)
allows lazy loading of dynamically added elements as well.

Install

# You can install lozad with npm
$ npm install --save lozad

# Alternatively you can use Yarn.
$ yarn add lozad

# Another option is to use Bower.
$ bower install lozad

Or load via CDN and include in the head tag of your page.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

Usage

In HTML, add an identifier to the element (default selector identified is lozad class):

<img class="lozad" data-src="image.png" />

All you need to do now is just instantiate Lozad as follows:

// lazy loads elements with default selector as '.lozad'
const observer = lozad();
observer.observe();

For details, checkout Lozad.js repo on Github

Hi, I'm Apoorv Saxena

Apoorv Saxena — Sat, 16 Sep 2017 03:51:08 +0000

I am a polygot programmer from India.

You can find me on GitHub as ApoorvSaxena

Most recent open source contribution is Lozad.js, light and performant lazy loading library.

Big fan of performance optimisations in webpages, checkout publications and links to conference talks on Linkedin.

Nice to meet you.