Zebkit, an Introduction

With the arrival of the new version of the Zebkit framework, I thought it would be good to step back and cover just some the ways that Zebkit has helped us at Massive Analytic build out some of the great features of Oscar. Also, as Zebkit doesn't get much coverage in the web media, I felt a general introduction to the uninitiated was warranted. Follow the links throughout the article to learn more.

Zebkit is primarily a frontend GUI framework built on HTML5 canvas, it has been used throughout Oscar to provide a fast Dashboarding interface, an easy way to organise and build components, and in our Chart-API and Scripting modules it provides the top level constructs which make everything possible.

A common use for Zebkit is as a SPA (Single Page Application) framework. Unlike most other SPA frameworks however, you get the benefit of zero or very little DOM manipulation and no need to worry about CSS styles, all stylistic elements can be defined as json Views or just overridden by JavaScript at runtime. All native Zebkit components are rendered via HTML5 canvas at lightning speed.

For example, some of the most common Oscar elements such as the Dashboard Edit mode , Organizer, Data Workshop and Admin sections are 100% Zebkit built GUI. In Dashboard Edit Mode we get an infinite canvas to add charts, only what you see is rendered. In the Organizer you can manage all your Big Data in a single place because Zebkit makes sure to only render what you are looking at any given moment.

Why did we choose Zebkit? Oscar is a large application, we needed a way to harmonise packages, dependencies, stop repeating ourselves every time we wanted to add a new chart for example. The Zebkit Easy OOP can also run in NodeJS no problem, so we instantiate some things (entire Dashboards if necessary) on the server, create configs, etc, before anything even gets rendered.

Zebkit doesn't have a massive user base (yet!) or big players such as Facebook or Google backing it. Luckily Massive Analytic is a highly innovative company and aren't afraid of being an early adopter for new technologies. There are however plenty of examples on the website and in the help files to make your first steps.

For programmers, anyone one who was familiar with ActionScript will know the advantages of subclassing display objects, the same is true for Zebkit, the Easy OOP structure combined with base classes such as Panel gives the coder immense power to execute any designs they want from the ground up. Coders can plan clearly what they want to do and not be encumbered by limitations in frameworks, CSS edge cases or nested DOM objects, making the whole design to execution process a lot more pleasing.

There is also a huge opportunity for designers to get involved here, we've done quite a bit to improve the general look and feel of the default Zebkit theme in Oscar's own json view definitions, but there are no limitations to what themes you can create, if you want a 'Material Design' template for Zebkit for example, then go make one!

For frontend devs, have you ever tried to re-style a Bootstrap modal or HTML select tag? Plenty of frameworks are there to help, Bootstrap and jQuery plugins in particular, each of which will drop a bag of DIV elements and CSS classes over the object you want to manipulate with some javaScript thrown in, and often, as in the case of select tags, masking the original object entirely. With Zebkit you can use the many components of the UI package to cover most things, a Zebkit class is the ultimate reusabale component, so if you do need to write your own component you won't reget the decision. At Massive Analytic we originally had a lot of Bootstrap stuff, so as we transitioned to Zebkit we re-styled the default Zebkit views (json file) to look like our existing CSS, if you take a modular approach it is possible to port over your App piece by piece until you get the point where you are running 100% Zebkit.

At Massive we've created our own Zebkit components for modal, file explorer, and rich text editor classes, all of which we are contributing back to the Zebkit community.

One component needs a special shout out, and that is the Grid component, with that you can load many millions of dynamically generated cells with zero DOM load, at Massive Analytic we have combined that with lazy loading methods to create the ultimate extendable grid component, used for our Spreadsheet chart type and to create a Table class that takes the power of Grid but renders in a way that has the familiar look and feel of styled HTML tables.

That's all great, but what can we get with the new version? There are several game changers in the new version, a powerful re-implementation of Promises called 'D-then', the ability to define your whole UI in an extended json format called 'Zson', and massive improvements in the ability to mix and match Zebkit with HTML elements. Try it out!