This article is about the ZK Framework vs Sencha GXT brief comparison. During my experience of a frontend senior developer, I have used during my work Sencha GXT and used ZK Framework during my free time to realize my own custom framework. So, I would like to share with you my thoughts comparing these two great frameworks.
1. Overview
Let’s see below a short introduction about these frameworks:
Sencha GXT: It is a java User Interface framework proprietary of Sencha company which is built on top of the great framework GWT formerly maintained by google, it runs only in the client side browser.
ZK Framework: It is a java web framework maintained by Potix company which uses JQuery for its user interface components and offers advanced server side features, it runs on the client and server side centric.
Both frameworks are written in java and offer important user interface components and features, but one runs only in the client side (GXT) and the other one (ZK) on the server side centric.
2. Architectural patterns
Architectural patterns are required when designing your application’s architecture, so for your graphical user interface layer you will need to use one of the well known frontend patterns such as: MVC or MVVM or MVP, let’s see what both framework provide:
Sencha GXT: GWT uses the MVP pattern, more detailed are published in GWTproject, to use that with GXT, you have to adapt the Presenter’s implementation to GXT’s lifecycle logic.
fZK Framework: provides both the MVC and MVVM patterns. MVVM can be easily used in your development process using ZK Bind feature.
3. Responsive web design (RWD)
The approach of responsive web design (RWD) consists of adapting the appearance of your web application to be well displayed in all devices. There are patterns to use to design and implement your responsive application such as Grid-View. Let’s see below how we can realise a responsive web application with the compared frameworks:
Sencha GXT: there is one container FloatLayoutContainer provided to create floating elements, there are no other default containers such as Grid-View, you have to design your own responsive containers.
If you will use CSS Media queries to define your own breakpoints and rules, the width modification of the generated GXT components will be hard to do because all is calculated in pixel with GXT, no percentage used, even if some containers or components let you change their width to percentage, you will be at a parent level inside a container with fixed pixel width. There is a poor documentation about this section.
ZK Framework: provides the zul language to develop your html pages, all the components size can be either in pixel or percentage using vflex/ hflex property available in all components and containers. You can use CSS Grid , Vlayout with native html tags, CSS flex box, CSS of Bootstrap grid system, and serve-side media query. This section is well documented: https://www.zkoss.org/wiki/Small_Talks/2017/August/Responsive_Design_in_ZK_Part_1
4. Component flexibility
In some custom cases, component flexibility are very important to realize custom screens. I have chosen to compare the Grid component’s flexibility with both frameworks:
Sencha GXT: with GXT 2.x, you can add any widget available in GXT or GWT such as Container or ComboBox or CheckBox within a cell, but since version 4.x, the Grid component’s behaviour was totally changed to improve performance so the cells became customizable via GWT Custom Cells technique , you can’t render any widget within a cell like before, you have either to choose between available cells like CheckBoxCell, ButtonCell, DateCell… or create your own custom cell .
ZK Framework: with Grid component and zul language , you can add any component inside
each cell, like this:
<grid>
<columns>
<column label="From"/>
<column label="Subject" />
</columns>
<template name="model:group">
<group label="${each}" />
</template>
<template name="model">
<row>
<div>
<image src="/img/sample-image.png" />
<label value="${each.index}" />
</div>
<label value="${each.subject}" />
</row>
</template>
</grid>
If you want to make a cell editable you have to simply do this:
<textbox inplace="true" value="@bind(each.title)" width="99%" />
So, both framework offers a flexible ways to use the Grid component but with Zk it will be
more simple than GXT.
5. Theming and Styling
A web application must have at least one theme, creating new one or customizing an existing one should be a simple and easy step and also with low man/day cost, let’s see below what both frameworks provide us:
Sencha GXT: since 3.x version, GXT adopts the appearance pattern for all its components and containers design, this pattern separates the component functional logic from its appearance, so to customise the style or the view html of a component, you have to:
- Define appearance interface
- Implement the appearance interface
- Define the appearance style interface
- Define the appearance resources interface
- Define the template html
Below is an example of a custom appearance of the Grid component:
/***
* Custom appearance for Grid component
**/
public class MyCustomGridAppearance extends GridBaseAppearance {
private MyCustomGridResources resources;
public interface MyCustomGridResources extends GridResources {
@Source({"myCustomGrid.gss" })
@Override
MyCustomGridStyle css();
}
public interface MyCustomGridStyle extends GridStyle {
String rowSelected();
}
public MyCustomGridAppearance() {
this(GWT. create(MyCustomGridResources.class));
}
public MyCustomGridAppearance(MyCustomGridResources resources) {
super(resources);
this.resources = resources;
}
}This approach has many benefits such as allowing to define multiple appearances for the same component, separate the component’s appearance from its functional logic…ect But, it requires more code to do than working on a standard html page and add a custom style name like the following example:
<div>
<ui-combo class=”my-custom-class”>...</ui-combo>
</div>
.my-custom-class { … }
The available default GXT themes are Blue, Gray and Neptune: https://docs.sencha.com/gxt/3.x/guides/ui/theme/Themes.html
ZK Framework: provides a way to decouple your html pages from your java code with its zul language , you can work on the html pages and define your styles (it is recommended to follow a best practice methodology such as smacss for better organizing and writing your stylesheets), each tag in a zul page is by default a zk component which has a server side lifecycle, you can also use standard html tags for client side components with no server side lifecycle.
The official available ZK themes are Iceblue, Breeze, Sapphire and Silvertail:
https://www.zkoss.org/wiki/ZK_Developer’s_Reference/Theming_and_Styling/ZK_Official_Themes
6. Security
Sencha GXT: it is a java client side framework so all your presentation logic will be available in javascript files running in a web browser, each resource available in the browser is not safe, so you need to put efforts for not being hacked.
ZK Framework: it is a server side framework so your presentation logic will run on server side, no client side resource will expose your business rules.
7. Conclusion
Both framework are great for SPA applications, choosing one of them depends on your application’s architecture.
If you plan to use only a UI framework with no server side logic, you can think about GXT/ GWT but take care about the security, the responsive aspect and how to implement your own server side layer to manage your data.
If you plan to use a full web application framework with rich server side functionalities such as Reporting, charting, and spreadsheets, you can use ZK.
I hope that this post can help you to choose the right framework for your frontend application.
