New Features of ZK 10.0.0 Beta

Author
Hawk Chen, Manager, Potix Corporation

Date
, 2023

Version
ZK 10.0.0 beta

Introduction

Welcome ZK 10 - faster, lighter, and cloud-ready. With a strong focus on improving the user experience and optimizing cloud-native scalability, ZK 10 introduces stateless components, client-side Model-View-ViewModel (MVVM), and embraces TypeScript. These client-side enhancements empower developers to better utilize client-side capabilities for building modern web applications.

Stateless components revolutionize ZK application development by eliminating server-side states. This shift enables auto-scaling, resource efficiency, and simplified cloud deployment. With stateless components, ZK apps can be deployed across regions, scaling elastically to meet varying workloads while delivering faster response times. Client-side MVVM ushers in a new era of data binding, reducing server memory usage and improving performance. Developers can seamlessly turn their pages into client-side MVVM with the help of the ZK Linter, which identifies compatibility issues in server MVVM code before upgrading. Additionally, the adoption of TypeScript brings reliability and robustness to ZK's front end, enhancing the development experience.

In summary, ZK 10's client-side innovations mark a significant leap forward in web application development. These features empower developers to build cloud-native, scalable, and efficient applications, making ZK an excellent choice for modern web applications.

Download

Highlighted Features

Stateless components

ZK 10 introduces brand-new stateless components called I-Components, allowing developers to build cloud-native, scalable ZK apps. Stateless components compose UI in a stateless manner with no server-side state. This enables auto-scaling, improves resource efficiency, and simplifies deployment on modern cloud platforms.

1. 1. 1. 插入一小段 I components 的用法。

By eliminating server-side states, stateless components make it easy to develop ZK apps that leverage the full power of cloud infrastructure. The apps can be deployed across regions and scale elastically based on load. With stateless components, ZK apps gain benefits like:

• Auto-scaling based on demand
• Improved resource utilization efficiency
• Fast elastic scaling up and down
• Service-oriented architecture and modular development
• Reduced memory usage on a server
• Faster response times

For more information on using stateless components, visit xxxx (link to ZK 10 product page, stateless section).

Client-side MVVM

ZK (server) MVVM has been a beloved feature since ZK 6 as it automatically binds the View and ViewModel for you. Now, ZK 10 takes a step further and brings data binding to the browser with client-side MVVM support. This significantly reduces server memory usage and improves performance by handling the bindings on the client side rather than the server. Migrating an existing MVVM apps is easy - just toggle a configuration flag and client MVVM is activated. You can choose to migrate the whole application or a specific part on a page to client MVVM.

Benefits of client-side MVVM include:

• Reduces memory usage on a server
• Improves response times
• Powerful data binding handled on the client side

插入一小段程式碼 (toggle the config flag 的部份)

For more information on how you can use client mvvm, visit xxxx (link to ZK 10 product page, client mvvm section)

ZK Linter Enables Smooth Migration from Server to Client MVVM

With the powerful new client-side MVVM in ZK 10, upgrading from server MVVM to client MVVM is recommended to enjoy benefits like reduced memory usage and faster performance. However, not all server MVVM syntax can be transparently upgraded to client MVVM due to the difference between the server-side and client-side processing. Some patterns like type casting and contextual parameters require tweaks to work properly with client MVVM's client-side data binding.

To help developers smoothly transition to client MVVM, ZK provides a tool called ZK Client MVVM Linter. This static analysis tool identifies potential compatibility issues in server MVVM code before upgrading.

The ZK linter analyzes Zul and Java files using a predefined set of rules covering common scenarios like:

• ContextParams that are not supported by client MVVM
• Unsupported binding parameter types
• Type casting that may cause issues

With the ZK Client MVVM Linter identifying compatibility issues even before upgrading, the transition to powerful client-side MVVM can be smooth and seamless, and you can leverage the benefits of client MVVM with minimal effort.

For more information about using the linter tool, please refer to this blog.

TypeScript adoption brings robustness and reliability

Since ZK 10, we have migrated all the client-side JavaScript code to TypeScript, a statically typed superset of JavaScript. This brings several key benefits:

• Reliable auto-completion and navigation from the IDE
• Catch errors early through static type-checking
• Enforce project conventions with custom lint rules
• Safer interoperability between modules
• Closer to Java programming experience

An NPM package, zk-types, with type definitions for the ZK JavaScript APIs, is also provided. This allows using TypeScript to customize ZK in a type-safe manner.

Overall, TypeScript adoption makes extending and customizing ZK's frontend much more reliable and robust.

Enhancements

Integrate Font Awesome 6 offering Over 1,600 Free Icons

ZK 10 upgrades the built-in Font Awesome icon library from 4.7.0 to 6.4.2. This update provides a comprehensive set of free icons and features:

• Over 1,600 icons in 3 styles - Solid, Regular, Brands
• Redesigned icons with a modern look
• Supports Font Awesome 6 and 4 syntax for backward compatibility

To use an icon, simply specify the CSS class name at the component's iconSclass, e.g.:

<button iconSclass="z-icon-house z-icon-solid"/>

No need to include any files or apply extra CSS. All icons are built-in and optimized for ZK.

This upgrade keeps ZK apps up-to-date with the latest Font Awesome icons and styles. You can leverage new icons and designs quickly with the familiar easy-to-use syntax.

All supported Font Awesome 6.4.2 icons

Enable InaccessibleWidgetBlockService by default

The InaccessibleWidgetBlockService is now enabled by default to enhance security. Previous versions require developers to enable it manually.

With this change, ZK applications will block requests from inaccessible widgets without any extra configuration needed. This prevents issues like users making disabled buttons clickable.

The default blocking rules are:

• Block all events from disabled and invisible components
• Block onChange, onSelect, etc for read-only components
• Allow onOpen events

You can customize the blocked events and rules if needed. For details, please see Block Request for Inaccessible Widgets.

Security Enhancements

• #5265 CSP provider (###describe more)
• #5142 get/post handling (###describe more)

Other Changes

• Remove outdated Applet, Flash, and FusionChart components since ZK 10
• Add all new HTML5 tags in ZK 10 ZHTML
• Support load locale-dependent resources in a relative path
• Deprecated org.zkoss.zk.ui.uuidRecycle.disabled (Not supported anymore)

Upgrade Notes

• Since ZK adopts TypeScript, please review your custom ZK JavaScript widget which might need to be modified for ZK 10.?? I thought it is backwards compatible?

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.