GLOT is both a language and a framework for building and publishing websites.
The language offers compositionality and multilingualism at the markup level, addressing two architectural limitations of HTML. Compositionality is achieved by facilitating the coding of a webpage using components, while multilingualism is achieved by representing attribute and parameter values as localizable objects.
The framework is a set of modules to render, build and publish websites. All modules of the framework can be extended with cross-language components. Community-made components can be obtained from standard repositories as well as the GLOT Bazaar, which is a marketplace where developers can discover widgets, collections, templates, plugins, tutorials, and much more.
The syntax of the GLOT language is the well-known JavaScript Object Notation (JSON), making it east to get started without having to learn a new syntax. Other syntaxes are available via plugins.
The GLOT markup of a webpage is often made entirely of nested JSON objects called widgets. The compositional nature of widgets enables the building of advanced webpages with little coding. For example, the GLOT page
{
"widget": "Page",
"data": [
{ "widget": "Navbar", "params": ..., "data": ... },
{ "widget": "Section", "params": ..., "data": ... },
{ "widget": "Section", "params": ..., "data": ... },
{ "widget": "Footer", "params": ..., "data": ... }
]
}uses the Page, Navbar, Section, and Footer widgets available from the marketplace to build the page below (see full code).
Developers can create new widget packages to solve a wide range of layout and functionality challenges. At a minimum, widget package defines a class in PHP or NodeJS with a render method that returns GLOT or HTML code for the given parameters of a widget. The package can also define client-side JavaScript, CSS, and general assets such as fonts and images.
Widget rendering can happen on the server or the client, and at build time or request time. In addition, widget packages can depend on shared libraries, which allows them to render components based on other frameworks such as React, Next.js, Angular, and more. New language syntaxes can be added via plugins for integrated coding experiences.
Widget composition also allows for widgets that are made out of other widgets. For example, a common building block of many advanced widgets is the standard Image widget, which includes lazy loading, automatic srcset attribute, and even priority loading for images whose location after pre-rendering is "above the fold".
The GLOT philosophy is to avoid ad-hoc page markup and aim to build all pages using only widgets. A group of design principles are available to widget developers interested in striking a balance between easy of use and versatility.
The GLOT project started with the objective of creating a markup language for generating webpages in multiple languages, or, in other words, a polyglot HTML. The project's objective soon expanded to include coding modularity in terms of full-stack components.
Eventually the project took a life of its own, and its scope began to expand in response to developers' needs with features such as master pages, pre-rendering, website-level theming, data sources, dynamic folders, and git conflict resolution. Today, GLOT is an end-to-end framework for building and publishing dynamic and static websites.
The name GLOT is a backronym that stands for Generative Language with Objects and Text. The term expansion fits because the language is designed to express generative rules that control the rendering of HTML using JSON objects and localizable text. In the GLOT language, the generative rules are the parametric logic defined by the methods and assets controlling the rendering of a webpage.
In its simplest form, the language is indeed a polyglot HTML with a JSON syntax. For example, the GLOT markup:
{
"tag": "body",
"data": {
"tag": "h1",
"data": { "en": "Hello, World!", "es": "¡Hola, mundo!" }
}
}leads to the rendering of an HTML page for English
<html lang="en">
<body>
<h1>Hello, World!</h1>
</body>
</html>and another HTML page for Spanish
<html lang="es">
<body>
<h1>¡Hola, mundo!</h1>
</body>
</html>More advanced options for localization are also supported, such as code-based dictionary files, multi-language sources, and rendering logic for missing language-region tags.
Coding modularity is implemented by an abstract language construct (widget) and by a concrete framework implementation (widget package). The term widget is often used in both cases and must be disambiguated by context. In the context of the language, a widget is the parametric declaration of a widget package. In the context of the framework, a widget is a type of component package, which is the set of source and asset files needed to render the HTML, JS, and CSS code of widget instances.
The GLOT framework is composed of three core modules: Renderer, Builder, and Publisher.
The Renderer is the main module and has no dependencies. It is a standalone project with all that is needed to render HTML webpages written in GLOT. That makes the Renderer the only essential dependency of dynamic GLOT websites. It can also be used from NodeJS or other languages to transform GLOT to HTML (e.g., see rendering using gulp)
The Builder is the development module responsible for optimizing a website for production environments. It also performs code transformations, such as converting SCSS to CSS, and enables common optional GLOT syntaxes, such as YAML and GLAML.
The Publisher is the last module in the development pipeline, and is responsible for uploading websites to web hosting services.
The modules of the framework can be extended via components (see Fig. 1). Widgets are abstract components of the language and concrete components of the Renderer. The Renderer can also be extended with plugins. Similarly, the Builder and the Publisher can be can extended with building tasks and hosting providers, respectively. Moreover, both modules and components can be extended via class inheritance.
The input is GLOT code, { }, and assets (JS and CSS libraries, images, fonts, etc). The output is a static or dynamic website. For static websites, the Builder sends the Renderer-generated HTML code, < / >, to the Publisher, whereas for dynamic websites, it sends the given GLOT code so that a Renderer in the host can generate the HTML code when needed.
This tutorial covers the creation of a website project, the testing of it within a development environment, and the publication of the website to a production server. The entire process only involves the execution of three command-line scripts.
The minimum requirement to render a GLOT website is to have PHP 7.1+ installed.
There are three main ways to work with the framework:
- use the Composer package manager;
- use the glot CLI app; or
- download modules and components manually.
The following steps are for option 1, and assume that composer is globally available from the command line.
An empty website project can be created by:
$ mkdir {PROJECT-PATH}
$ cd {PROJECT-PATH}
$ composer require glot/glotwhere {PROJECT-PATH} is the path to the new folder that is to be created and initialized. The pages and folders of the website should be added under a pages sub-folder.
Alternatively, it is often more convenient to start from a website template. In that case, a website project can be created with the following composer command:
$ composer create-project glot/basic-site {PROJECT-PATH}The argument glot/basic-site instructs Composer to initialize the folder with a basic website template, which is made out of a small set of standard widgets, such as Page, Navbar, and Footer.
Other standard templates to consider to get started:
-
glot/blank-siteA blank website template defining the standard folder structure, a single home page and no widgets. -
glot/blog-siteThe simple blogging websites with static search functionality that allows for efficient and inexpensive static website hosting.
Many more website templates are available at the GLOT Bazaar.
The next step is to choose the web server that will answer HTTP requests generated from localhost in a development environment. Common options are Apache, NodeJS Express, and the built-in PHP web server. In this tutorial we will use the built-in web server offered by PHP because it requires no additional installations, is available in all PHP development environments, and runs with user writing permissions.
User writing permissions are needed by the Renderer only to write to thewww/publicsub-folder. If using a different web server, thewww/publicfolder should simply be made writable by it.
To launch the built-in web server, change directory to the www folder within the website project, and start the web server there.
$ cd {PROJECT-PATH}/www
$ php -S localhost:8000While the PHP web server is running, the URL http://localhost:8000 should display the website.
The first step to publish a GLOT website with the Publisher is to create a host.json file. The file can be created manually according to the host file schema. It can also be created with the following interactive script:
$ composer create host {HOST-NAME}The script will prompt for the information needed to upload the website to a hosting provider, such as the name of the provider, the credentials needed to connect to it, the name of the website to publish, the domain name for the website, and an optional the security certificate. When finished, the script will create the sub-folder hosts/{HOST-NAME} with the requested host.json file in it.
Please note that the interactive script simplifies the process of collecting the parameters of a host but it does not cover advanced cases such as compilation options or the use of extended classes for the Renderer and/or Builder. For advanced cases, the script can still be used to create the initial host.json file, which can then be edited manually according to the host file schema.
The {HOST-NAME} is the only argument that one needs to publish and re-publish a website since everything else, including the target website, is included in the generated host.json file.
To publish a website based on the {HOST-NAME} parameters, execute the following script.
$ composer publish {HOST-NAME}The website should now be live on the web at the selected domain!
To re-publish a website, simply run the same command again. The Publisher will compare the local files against the remote files and only transfer and delete what is needed to synchronize the remote files with the local ones. If the host defines a Content Delivery Network (CDN), the Publisher will also invalidate the CDN contents as needed.
By default, the Publisher offers only a short list of providers, such as AWS, Azure, GoogleCloud, GitHub and Self hosting. More providers can be found at the GLOT Bazaar and installed with Composer.
$ composer add provider {PROVIDER-NAME}Once installed, the host creation script should start offering the newly added provider among the options.
The framework is ideal for building websites focused on content. While appropriate for both static and dynamic websites, it is not meant for building app-like websites. Some usage scenarios are:
- Website developing for static and dynamic websites built around content that is multilingual and based on reusable parametric components;
- Templating systems that want to go beyond the functionality of handlebars and add reusable HTML patterns;
- Exporting functionality that needs a standard language for exporting/importing website projects based on components.
Web developers can start by creating unilingual websites and then add more languages as needed. GLOT is always multilingual, even if one starts with a single language.
Templating engines, such as Mustache and HandlebarsJS, can be implemented in GLOT, or be integrated with it via syntax plugins.
Web design/building apps can use GLOT as a standard file format for exporting and importing component-based website projects. GLOT is a JSON-based language that represents a website project in terms of parametric components that can be consumed by different design and development tools.
The GLOT framework can be integrated with other tools across different languages, including PHP, NodeJS, and Python. For example, it is possible to use glot as a NodeJS package, or manage users using the PHP Symphony plugin. It is also natural to create React components in glot using a plugin to process JSX code.
GLOT projects integrate naturally with other web libraries and platforms because the language is simply a different way of defining web content (i.e. HTML, JS, and CSS). Some advanced integrations might require the development of Renderer plugins in order to bridge the different technologies.
Widgets are a special component type in the framework due to several reasons. They are components of the GLOT language itself, whereas other component types extend modules of the framework. Moreover, they are instantiated in a webpage alongside other widgets with different origins and objectives. Since the rendering of a widget leads to the addition of HTML, JS, CSS, and other assets into a common webpage, the potential for code conflicts is significant, and it falls on the framework to provide orchestration.
There are five mechanisms in charge of facilitating the harmonious co-existence of widget instances within a webpage.
- Namespace encapsulation in JS and CSS
- Dependency graph analysis
- Declaration of compositional constraints
- Shared CSS variables for theming and media selectors
- Collections
While all these mechanisms are mostly relevant to widget developers, the idea of collections is relevant to everyone. A collection is a grouping of widgets that are meant to be used together. Since it's a general concept, they can be used to address the following consistency types:
- compositional: to ensure that widgets "snap" well with one another;
- graphic: to enforce common design principles;
- coding: to guaranty the inclusion of coherent dependencies on JS and CSS libraries.
The GLOT Bazaar makes it easy to discover collections and install them with a single command.
-
Learn more about the GLOT language
-
Follow a visual tutorial on website building with GLOT
-
Learn how to create widget packages
-
Search the GLOT Bazaar for solutions to your website needs
- 1.0.1: ...
- 1.0.0: Initial public release.
- Better examples on how to ...
- Making it possible to ...
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to and actually do, grant us the rights to use your contribution. For details, visit our Contributor License Agreement (CLA).
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Proximify Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact support@proximify.com with any additional questions or comments.
Copyright (c) Proximify Inc. All rights reserved.
Licensed under GPLv2 (or later) from the Free Software Foundation.
GLOT is made by Proximify. We invite the community to participate.