We just published a completely new generation of our WebComponents which are now reactive with fast template rendering system.
It is a major upgrade, not compatible with previous version. There are a lot of new classes and new components added.
Full source code is available at our GitHub pages.
What's new ...
Reactivity and templating
Along Bootstrap CSS, we refactored WebComponents on top of a Lit Elements 3.0 which brings reactivity and fast and memory efficient templating engine - faster than Virtual DOM. Why we did that switch, please read in the second half of the page.
Removal of GS-STYLE and GS-LINK components
Instead, we are using MutationObserver internally, hidden from front-end. Developers can now use standard LINK and STYLE HTML elements only.
Dynamic CSS class
We significantly improved dynamic CSS styles, which some components require. They are faster, and local to the component.
Improved theming support
Bootstrap uses CSS rules for theme switching. We significantly improved our theming module to allow extremely easy theme switching with full support for global and individual component themes, all on the same page.
Data helpers
A new module "helpers" is added. A set of classes to handle raw JSON data, such as Tree and TreeController for handling JSON as a tree structure. Data helpers simplifies development with some combination of MVC and MVVM models.
DataHandler WebComponent
This is a new UI component which purpose is easy activation of JSON data readers. Simply add HTML tag to the page. It simplifies dynamic registration. Can be very useful when creating SPA applications and reduce code writing.
Component storage linking
New WebComponent structure, allowed improved and easier WebComponent-Data-Storage linking and integration. Now ,linking data with tables, trees, lists, menus etc. are easier than ever. In most of the cases, it is enough to add a named gs-data-handler component to the page to activate remote data reader/writer and reference it to the data components. All without a single piece of JavaScript code.
Self-rendering components
Now, all components which elements can be rendered from data can be easily linked for dynamic server side (JSON based) data UI rendering. It even allows you to create custom components responsible to render other components based on JSON data.
New GSTreeReader
New data reader which automatically converts JSON data into navigational linked Tree data. Mostly used by GSTreeElement.
New bindable actions
Bindable actions are part of reactivity and WebComponents interlinking and user based interactions. This feature allows rapid creation of UI with minimal JavaScript code.
Bootstrap uses data-bs-* attributes to create user clickable interactions between various elements on the page. We supported that in previous version. Bootstrap attributes support was removed... Instead, we created a powerful GSAttributeHandler, a complete refactoring and distinction from data-bs-* to data-gs-* attributes.
New localization engine
Multi language support is completely refactored and significantly improved. Now, every WebComponent support automatic translation to the selected language.
We added GSLocalization class deeply integrated into WebComponents and responsible for UI translation.
Improved code separation
Implementation of Lit Elements allowed us better code separation through "controller" classes separated from main WebComponent development. Code is cleaner, lighter, easier to understand and finally, much more modular.
Why we introduced additional (but tiny) library Lit Elements is related to our another project - UI Modernization for Web 5250. But let start from beginning...
From the beginning, we had an idea that our product and extendable elements for end users should be easy and simple, but also having in our minds how to do web based 5250 screen modernization in a purest and simplest form so even small teams or individuals at the client side can do their own modification without knowing too much about advanced web development and without need for complex tolling installation at the server side.
We needed something general we can use across the whole web front end, and at the same time not requiring "layer on top of the layer" of technologies just to get the final single JavaScript file.
Several years ago, there were no JavaScript classes (only functions), there were no modules (external libraries such as require.js) etc... And finally, there were no WebComponents, but various frameworks existed which simulated component based development. All such libraries and frameworks were predecessors to today JavaScript natively supported features. Many of them requires complex server side tooling and compilation, transpilation into JavaScript.
We were not satisfied with available technologies, so we decided to develop our own that suits us the best for our needs. It happened in late 2020. It took us about 18 months to create, test and stabilize the framework - now known as Green Screens Web Components.
When you start to develop your own, vanilla JavaScript, and start to dig deeper into the technology, the further and deeper you go with the project, you start to realize that "oh moments" when things get complicated and tricky.
We estimated that the features we wanted to introduce are not important in the moment of initial component development, and some of the features are postponed for some future releases.
One of the features we needed is "reactivity" and another is a fast UI templating engine. We realize, that implementing reactivity, we would need to do a lot of code refactorings.
In the meanwhile, other frameworks and libraries also improved, bringing exactly what we need, features that did not exist before. So, to not reinvent the wheel, we decided to introduce a 3rd party tiny lib. In October 2023. Lit Elements 3.0 was published. As Lit is covering all our requirements, it was a logical decision to use it.
In a very short period of time, a lot has changed in JavaScript ecosystem world. To keep up with the technology, we needed such a code change. That's how front-end development is live and very active, and sometimes demanding.
Project vanilla-lit
When we were investigating possibilities, Lit Elements 3.0 get our attention. Especially, as it took only a few hours to understand the Lit concept. Clean and easy, with the feel of natural JavaScript instead of fancy languages and tooling. Before we made a final decision, we wanted to learn it deeply, so we simply decided to rewrite Lit Elements 3.0 from TypeScript into vanilla JavaScript.
It took us 1 single day to refactor.
The full source code can be found at our GitHub pages. It is our toy project we do not use internally, but it is fully operational. Actually, Lit Elements 3.0 can be easily replaced with our vanilla-lit, and Green Screens Web Component 2.0 will work out of the box without any additional changes.
We were impressed by simplicity, flexibility and the elegant approach to the WebComponent development. The only currently unsupported part is "decorators" as they are not supported by the browser just yet. When become available, server side source compilation and TypeScript will not be required at all (required only if you plan to use @decorators). It showed us where this is heading in the near future, which was additional confirmation of our choice.
After seeing official videos, and which companies are using Lit, was additional reassurance about our choice. So, we decided to accept Lit as a building block for next generation of Green Screens WebComponents which will be the basis for web based 5250 terminal modernization also.
Project bootstrap-lit
This is a complete rewrite of Green Screens WebComponents into Lit Elements. The code size and complexity was significantly reduced. In the same time, we got WebComponent reactivity support and fast UI rendering for highly interactive elements in a generic form.
How migration was an easy task, lays in a fact that we needed only 6 weeks to migrate something that took us 18 months to develop.
Here is a list of changes:
28 base modules (no migration needed)
63 components (complete rewrite)
30 components (new)
12 property definitions (new)
17 controllers (new)
7 data helpers (new)
3 directive (new)
8 components (removed)
That is about 160 modules, out of which 65 new modules and 62 completely rewritten. Production ready build and gziped script is only 60KB. Accompanying resources: Lit engine 10KB, Bootstrap 30KB and custom theme 4KB.
Project Facelift
Facelift Engine is Green Screens Web 5250 terminal UI modernization engine we are currently working on. It will be based on this new Green Screens WebComponents 2.0.
One of the biggest benefits of Green Web Components 2.0 is support for self rendering from JSON data and extremely easy UI updating based on native "Object.assign" function. Additionally, with support for bindable actions between components will make the whole process quite easy.
Our goal is that our end customers can easily use, develop, extend or create new 5250 UI WebComponents without requiring complicated installations, complex tooling setup etc.
We want that our customers can use simple pure vanilla JavaScript but not to be in a technology lock-in for a specific vendor if they want to use a different approach. We simply want this to be as painless as possible to all parties involved.
The best part is that, once when ready, The project Facelift will be open-sourced. Until then, stay tuned and keep watching our online channels for updates.