The new Tangible Theme in Action

Qooxdoo 6.0 — The JavaScript framework for people who love coding

Tobias Oetiker
Qooxdoo News
Published in
5 min readFeb 8, 2021

--

Writing a complete web application, in JavaScript, without ever touching HTML or CSS, using class-based object orientation going far beyond what even ES7 has to offer, while still writing unadulterated JavaScript. Sounds fantastical? Just wait! We also throw in a compiler to optimize your code, a testing framework, superb theming, a rich widget set, and full support for multilingual applications. All this comes as an easy to install npm package with an MIT license.

Later on in this story we will show you how to get your first Qooxdoo app up and running on no time. So before you read-on, let’s start the installation¹ of the Qooxdoo compiler.

$ mkdir myqxapp
$ cd myqxapp
$ npm init
$ npm install --save-dev @qooxdoo/framework

But let’s start at the beginning

Over 15 years ago, some visionary developers at the German ISP 1&1 created a JavaScript framework for writing full page web applications. This was the heyday of Internet Explorer 6, with web developers breaking down in crying fits over all the things they could not do because their pages also had to support that web browser.

The new Qooxdoo framework did incredible things: it allowed for writing beautiful-looking web applications that rivaled desktop applications in their usability. The name of the new framework was chosen to be “Qooxdoo” because in German the phrase “Kuckst du!” roughly translates to “Careful or your eyes might pop out in amazement!”

Qooxdoo not only looked beautiful on the outside but also on the inside. The whole framework was extremely well-designed, copying many advanced programming concepts from the Qt GUI library as well as from Java to provide an optimal environment for writing large, industrial-strength web applications.

The best thing about Qooxdoo for the Open Source world was that 1&1 published the framework under an open source license and made it available for free. Unfortunately, despite its great features, the new framework did not take the world by storm. This was probably because writing a web application in pure JavaScript was not something that sounded very appealing to the average web developer who was more into HTML and CSS and only accepted JavaScript as a necessary evil rather than seeing the beauty of it.

After the release of Qooxdoo 5.0 in 2015, the interest in the technology started to fade at 1&1 and the company decided to turn the project over to the Qooxdoo Association, a motivated group of professional software developers who were using Qooxdoo in their own applications and were highly interested in the continued development and availability of the technology.

The Qooxdoo Association at work

The first big post-1&1 addition to Qooxdoo came from John Spackman who donated an all new, super fast Qooxdoo compiler running on node.js. Over the years, the compiler was enhanced to finally become the qx tool which today sits at the heart of Qooxdoo 6.

If you executed the npm command further up in this article, you should now have a copy of the Qooxdoo compiler installed in your qxmyapp folder. You are only seconds away from your first Qooxdoo app.

$ cd ~/qxmyapp
$ npx qx create myapp --type desktop --noninteractive --out=.
$ npx qx serve

The qx tool also lets you add extra packages to your application providing additional functionality. The package browser shows you which packages are available.

Package Browser in action showing the ville.Clean theme

There is also extensive documentation, an interactive API viewer, and a demo browser and widget browser showing the various widgets in action. If you want to try your hand at a little coding there is even a playground app for tinkering with Qooxdoo directly in your browser.

The Qooxdoo Playground

Whats new in Qooxdoo 6.0.0

If you were previously exposed to Qooxdoo, you might wonder what actually changed in the framework since the release of version 5.

First the good news. All the Qooxdoo developers run large applications of their own with Qooxdoo and are thus very careful to not break their own applications with changes to the framework. Most applications written for Qooxdoo 5 will work without change on Qooxdoo 6. See the release notes for the short list of incompatible changes.

While Qooxdoo 6 still works with the classic Qooxdoo generator, we urge you to use the opportunity to switch over to the new Qooxdoo compiler, as the forthcoming Qooxdoo 7 will not support the old generator anymore.

Not only does the new compiler run much faster, it also lets you use all the latest JavaScript language extensions. Even better, thanks to the integrated Babel support, the compiler can down-compile your modern JavaScript to run on older browsers which do not have ES6 support, for example.

Here is an incomplete list of all the new things that appeared in Qooxdoo since the release of Qooxdoo 5:

  • All of Qooxdoo now comes with an MIT license.
  • A GitHub-based Qooxdoo package system allowing everyone to provide their own Qooxdoo extension packages by simply tagging their GitHub repos appropriately.
  • Greatly simplified memory management taking advantage of the better garbage collection abilities of modern JavaScript engines.
  • A new official Qooxdoo theme called Tangible, inspired by Google’s Material design guidelines.
  • A new command line test engine called TestTAPper which can run your test suite using Playwrite, ideal for adding automated testing of your Qooxdoo application in your CI/CD process.
  • Better support for web fonts and font icons.
  • Support for Promises and the new async keyword in ES6.
  • An ID mechanism, allowing identifying DOM elements when using external tools for E2E front-end testing.
  • Many new extension packages with additional widgets and themes.
The Qooxdoo Testing Framework in action, testing itself.

Although Qooxdoo 6.0.0 is a very new release, it’s stable because the core developers as well as many others have been using the master branch of the framework over the last 6 years in their production applications.

All code is available on GitHub, where we have published policies and rules on contributing, and we actively encourage anyone to submit Pull Requests to contribute to the project. We chat in public on Gitter and answer questions on StackOverflow. Visit our new website featuring our portfolio of real world examples and links to the live Qooxdoo applications and to documentation.

And we have exciting plans for the future!

[1] These instructions assume you have node already up and running on your account. Otherwise, have a look at NVM, which is a very convenient way to install and mange Node.js installations.

--

--