Roy van Kaathoven
Full Stack Developer

19 Aug

Scalext: Ext JS module for Play Framework

I've been working on a project called Scalext for a while and want to share the current version and upcoming ideas. Scalext is a module for Play Framework 2.1 which makes working with Ext JS a lot easier.

I've already implemented a Ext JS Module for Zend Framework 2 in the past which made writing a similair module in Scala a way to compare the language with PHP. The current version of the module has most features from KJSencha implemented and took a lot less code than the PHP version.

The most notable improvements are:

  • Parallel execution of Direct API actions
  • Compiler checked annotations
  • DSL for javascript objects

Direct API

The api generator scans a project for classes which have a @Remotable annotation (in later versions a trait) configured and generates Ext JS Direct configuration which can be called in a Ext JS Project.

When the Direct API calls a javascript method then it will be routed to the Scalext module which then dispatches the request to the correct Direct action. The incoming requests are JSON objects which will be deserialized by Google GSON to Scala values. This makes working with javascript requests a lot easier. Any return values given by Direct action are again automatically serialized by Google GSON again and returned as JSON.

The combination of generating the API plus handling serialization and deserialization makes working with the Ext JS Direct API a lot more enjoyable.

Component DSL

A common issue for newcomers to Ext JS is configuring Ext JS classes. Writing classes is not a problem, but the massive amount of available options overwhelm most users. Only a few IDE's have plugins available to support Ext JS syntax, and most do not support the Ext.define('Classname', { key: value}) syntax which prevents the IDE to build a autocompletion list for available classes or properties. Ofcourse there is the Ext JS documentation which is a pleasure to work with but it may take some time to find what you need, and you have to leave the IDE. A second issue which newcomers often encounter is case-sensitive properties.

To tackle these issues in future versions of Scalext there needs to be autocompletion and syntax checking available. Both can be achieved by implementing Ext JS classes in Scala and output them as javascript files. Although this is perfect to configure class and their properties, there is still the question how can inline functions be defined? Something like the following snippet will be hard to implement:

Ext.create('Ext.Window', {
    title: 'Popup',
    html:'This is a test popup',
    buttons: [
            text: 'OK',
            // How to handle inline functions?
            handler: function() {

Hopefully Scala.js solves this problem, it is still an early version but the Reversi example shows that a simple game can already be build.

Apart from the syntax checking and autocompletion it also tackles the following problems:

  • Building highly dynamic components
  • Components which are restricted by ACL rules, unauthorized parts will never reach the client-side
  • i18n

The current version only supports Play Framework 2.1, upcoming versions will depend on other modules which can easily be used in different frameworks.

More info can be found by checking out Scalext on Github or running the Example Application