lazy load *

gluebert.js is a tiny helper lazy loading DOM elements, StyleSheets and JavaScript files using dynamic import and code splitting.

Lazy loaded components

Times are over where you manually had to find your elmements. Glueberts uses the power of MutationObserver and IntersectionObserver to load necessary dependencies when needed. No waste of payload.

Performance in the DNA

Gluebert has performance and best practices in mind at every step when it comes to first meaningful paint or first time to interaction. Designed that your application profits most from concepts like ShadowDOM or HTTP2.

OpenSource MIT

We love the OpenSource community and wanted to make Gluebert.js available for everyone and everywhere with the least reasonable restrictions so we decieded to publish under the MIT-License. Exited what you are building.

Underlaying Concepts

Code Splitting and dynamic import

Gluebert.js uses the power of code splitting and dynamic import feature for JavaScript, Stylesheets (Sass, less, stylus, whatever) and even HTML Templates including twig, handlebars, mustache or your own template engine.

Mutation- and IntersectionObserver

MutationObserver are tracking changes in your DOM and lazy binding module signatures and executes them, when an element appears in the viewport using IntersectionObservers.

Observable streams by RxJS

To organize, sending and receiving Data through your application there are observable streams available provided by [RxJS](http://reactivex.io/).

No payload and computation waste

The combination of the core concepts makes computation and payload overhead being a thing of the past.

Legacy Browser Support back to IE11

The aim of Gluebert.js is, to make it simple and intuitive using modern approaches even for legacy and outdated Browsers back to IE11.

Demo

On-the-fly generation through data-observer

Recommendation: To see whats going on behind the scenes, open your network tab in the browser console.

Balls
    Even
      Odd
        Number Statistics

          You want to see more complex stuff?

          Open your network-tab in your browsers console and reload the page and you see the advanced lazy loading stuff in action.

          ...or experiment locally

          git clone [email protected]:wildhaber/gluebert-getting-started.git
          cd gluebert-getting-started
          npm install
          npm run build
          npm run serve

          Features

          Shared template engines

          There are adapters ready for Handlebars, Mustache or Twig Template engines. This way you can share your templates across multiple interpreter if server-side or on-the-fly generated elements.

          You are using another engine? no problem - there is also a simple way to adapt your own template engine.

          Embedded JSON Schema validation

          You are sending data across your application and want to ensure data consistency without manual tons of manual validation. Generating on-the-fly elements can be validated with a JSON-Schema validator of your choice. We highly recommend ajv.

          ReactiveX for observable data streams

          Any module in gluebert.js can subscribe to a certain data stream reacting accordingly. Currently gluebert.js is using RxJS behind the scenes.

          Dynamic import of modules and dependencies

          Gluebert.js profits from dynamic code splitting and dynamic ESNext import() you only load the components needed in the document. The times are over where you had a huge payload and computation overhead of unused stylesheets, javascript files or other dependencies. Gluebert automatically loads and binds, when a component requests it.

          Adaptive to any System

          You don't need to change your current ecosystem. The only dependency is a proper Webpack workflow for code splitting enabling dynamic imports. So it can be used in any Smyfony-, Drupal-, WordPress-, Hugo-, Jekyll-Project or any other environment you have. Only for Single-Page-Applications you should stay within the framework of your choice.

          Reusable Modules

          Similarly to the concept of webcomponents modules you create are fully reusable across multiple projects. This stops you from re-inventing the wheels over and over again.

          Gluebert as artist