Golgi: Dynamically-loading WebComponent Assembly Framework

Rob Tweed [email protected]
23 May 2023, MGateway Ltd https://www.mgateway.com

Twitter: @rtweed

Google Group for discussions, support, advice etc: http://groups.google.co.uk/group/enterprise-web-developer-community

What is Golgi?

Golgi (pronounced Gol-jee) is a new approach to browser-based User Interface (UI) development that makes use of the latest Web Technologies, in particular WebComponents, ES6 Modules, Proxies and MutuationObserver.

Golgi allows you to build UIs using WebComponents as composable units, abstracted as XML/XHTML tags and delivered progressively on-demand, without the need for a time-consuming bundling/compilation step, and without the need for Node.js, WebPack or large, complex build chains during development or deployment.

Just develop and go, edit and go!

Try It Out!

ToDo Demo

Run this live ToDo application.

NOTE: You must use a modern browser that supports WebComponents to run this example!

For details about and source code for this application, see the ./examples/todo folder.

SBAdmin Demo

Run this live example, demonstrating the use of a Golgi Component Library:
golgi-sbadmin

NOTE: You must use a modern browser that supports WebComponents to run the example!

For details about and source code for this application, see the ./examples/sbadmin folder

About Golgi

Golgi can only be used where you know that the very latest browsers are in use, but if they are, then it provides one of the fastest and leanest frameworks for UI development, since it makes use of the built-in capabilities of the browser, avoiding the need to download large bundled JavaScript framework files. Golgi itself a mere 45Kb in size in its uncompressed source version, and just 19Kb if you use the minimised version, and is literally all that is needed to make everything work!

Golgi can be used with many other standard UI frameworks such as Bootstrap 5, Chart.js etc. Of course, if you make use of these, their JavaScript and CSS resource files must be downloaded into your application. However, Golgi allows such resources to be downloaded on demand and only when needed, resulting in very short application load and start times. You'll see this happening in the live example.

Unlike many of the UI frameworks that are currently in vogue, Golgi does not require or make use of bundling (eg using WebPack etc). Your JavaScript files and WebComponents that define a Golgi application are dynamically loaded, on demand, as ES6 Modules. Avoiding a separate compilation/bundling step speeds up application development considerably, and doesn't require the creation and configuration of a complex build chain. All you need to get up and running is the tiny Golgi JavaScript file, and everything else is done by the Web Technology built into modern browsers.

Why Is It Named Golgi?

The Golgi Apparatus (or Golgi Body) exists in every living cell, and its purpose is to package proteins into membrane-bound vesicles inside the cell, before the vesicles are sent to their destination. Proteins are constructed from simpler building blocks called Amino Acids.

The analogy is that WebComponents provide the basic building-blocks for what we call Assemblies, and the Golgi framework allows you to fetch, configure and send these Assemblies to their correct destination within the UI layout.

Golgi In A Nutshell

Golgi is very much an atomic design methodology:

• The basic building blocks are Golgi Components. These are WebComponents that you package as ES6 Modules. They can be as simple or as complex as you like, but typically they are simple and small. Many may represent just a single HTML tag. By being defined as WebComponents, you can define methods and properties that are relevant to the purpose of the tag or set of tags within the Component.

• Golgi Assemblies are your "proteins", built from Golgi Components, and visualised by the develper as nested XML/XHTML tags, each of which represents a Golgi Component.
  Golgi Assemblies can optionally configure each instance of its constituent Golgi Components, adding state values and optional methods that are invoked when each constituent Golgi Component is rendered. Golgi Assemblies are also packaged as ES6 Modules, allowing Golgi to dynamically import and load them on demand. When a Golgi Assembly is loaded, its constituent Golgi Component modules are dynamically imported, loaded and rendered.

• Within Golgi Assemblies, you can optionally define mappings for data binding, automatically invoking Golgi Component setState() methods when specified paths within Golgi's state object are set or changed.

• You can optionally specify Mutation Observers within Golgi Components, allowing dynamic behaviour to be defined in response to specified changes in the rendered Component.

In Golgi Components, you can decide whether or not to make use of the ShadowDOM that WebComponents provide. For most of the time you'll find that you won't actually use ShadowDOM, for reasons that will become clear later. This may surprise a lot of people, since the general impression is that ShadowDOM is an essential part of WebComponents: it's actually not. ShadowDOM is entirely optional, and understanding that makes all sorts of things possible with WebComponents, as Golgi demonstrates.

From these simple building blocks, anything is then possible!

Installation

Just copy the golgi.js or golgi.min.js file to a directory accessible by your web server and you're ready to go.

Alternatively, to quickly try it out without installing anything, just import the golgi.js or golgi.min.js file directly from this repository using the URL:

• https://cdn.jsdelivr.net/gh/robtweed/golgi/src/golgi.min.js

  NOTE: If you do this, you must specify absolute paths in your component and assembly path configurations, since the import relative paths used within the Golgi module will be with respect to its original path, in this case https://cdn.jsdelivr.net/gh/robtweed/golgi/src/. See the tutorial below for details.

Tutorials

Follow this tutorial to quickly learn how to use Golgi.

If you're a React.js developer and want to compare application development using Golgi versus React, read this tutorial.

Optimising Golgi Applications

This repository includes a set of optional server-side tools for optimising the performance and initial load-times of Golgi applications, and also for simplifying how you can build your Golgi Components.

Read all about these Optimisation Tools and Techniques here.

You'll find that by using these simple, lightweight server-side tools, you can achieve extremely fast initial load times for Golgi applications without having to resort to Server-Side Rendering (SSR) or complex hydration techniques, and without the need for huge and complex build chains.

License

Copyright (c) 2023 MGateway Ltd,
Redhill, Surrey UK.
All rights reserved.

https://www.mgateway.com
Email: [email protected]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0                           
                                                                       

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and
limitations under the License.