Rob Tweed rtweed@mgateway.com
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
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!
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.
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
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.
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 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!
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.
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.
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.
Copyright (c) 2023 MGateway Ltd,
Redhill, Surrey UK.
All rights reserved.
https://www.mgateway.com
Email: rtweed@mgateway.com
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.