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.
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
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!
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:
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.
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.
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
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.