ExtJs 4.0 Class Hierarchy Browser

ExtJs 4.0 Class Hierarchy Browser


Above is a screenshot of an online class hierarchy browser for the ExtJs 4.0 JavaScript library.

It was built in about three hours using Sencha’s new Designer 2.0 GUI builder.

There are only a limited number of “good” fundamental ideas in computer programming and the same ideas keep get “rediscovered” and coming back into fashion.

This seems to have happened with Clojure Lisp – a 54 year-old language got some new syntax and some new VM’s (CLR,JVM) – and now is enjoying a surge in popularity. Code-as-data or “Homoiconicity” is a “good idea” for many types of programming tasks.

In a previous post, I commented on how much Ruby resembles Smalltalk with its “everything is an object” philosophy.

The newest JavaScript libraries are also borrowing heavily from the Smalltalk legacy.

In particular, the ExtJs 4.x libraries are structured in much the same way as Smalltalk libraries:
— the library is based upon classes
— classes are arranged in a hierarchy with method inheritance
— there are “static” methods and properties, similar to Smalltalk’s “class” methods
— parent classes are referred to by a “superclass” variable
— there are “self” and “super” functions for method calls

Browser interfaces for RIA (buzzword – Rich Internet Applications) applications are becoming as complex as desktop GUI’s.

As a result, JavaScript libraries are becoming larger and more capable as well.

And the best way to structure an extensive widget library is to organize it with classes as was pioneered by Smalltalk.

Another paradigm seeing resurgence is the Model-View-Controller pattern (again from Smalltalk).

The ExtJs 4.x libraries have Model, View, Controller classes and the ExtJs Designer 2.0 project tool automatically sets up this pattern by default.

MVC is gaining popularity on the server side as well. The online browser example that I linked above uses the CodeIgniter PHP library on the server – and CodeIgniter is also organized in a Model-View-Controller pattern.

So, in this example, both the browser JavaScript library and the server PHP library are using the MVC pattern.

As a language, Smalltalk’s popularity has decined over the years. But many of the ideas that Smalltalk was based upon are very much alive and well:

— windowed GUI interface => MS Windows, Apple Macintosh, etc
— bytecode interpreters => Perl, PHP, Java, C#, Python, Ruby, etc
— Object-Oriented programming => Java, C++, C#, Ruby, Python, etc
— Integrated Development Environments (IDE’s) => Eclipse, Visual Studio, etc
— MVC => many libraries

And, as Internet applications become more complex, I expect that we will see more of Smalltalk legacy being “rediscovered”.

ExtJs 4.0 Class Browser

ExtJs 4.0 Class Browser


ExtJs 4.0 is an advanced JavaScript library that I have chosen as the basis for rendering QuickSilver widgets across multiple browsers and mobile devices. It support SVG graphics, flexible data models, and dynamic component loading.

Currently, I am porting QuickSilver from ExtJs 3.3 to ExtJs 4.0. There has been a complete rewrite of much of the library and this has resulted in a great deal of work in migrating the Smalltalk widget libraries.

ExtJs 4.0 has a new class system which is more similar to the Smalltalk class system.

As an exercise, I tried building (in JavaScript) a Smalltalk-style class browser for the native ExtJs classes and the tool works quite well. In fact, it is very similar to tools currently being built by Dan Ingalls (who created both Squeak and the original Smalltalk-72 and Smalltalk-80).


Smalltalk has long had the reputation for being a highly productive language. I keep wondering whether the productivity has been due to the simple language syntax or to the powerful tools available in the environment. It seems that Dan Ingalls has built a complete Smalltalk development environment
using JavaScript as the only language.

Smalltalk tools for JavaScript? I would be glad to hear your thoughts.

I am currently updating the QuickSilver libraries to ExtJs 4.0.

The site will be back to normal in a few days.

Form Designer Code Generation Test

Form Designer Code Generation Test


The form window at the left was completely generated by the FormWindowDesigner tool shown at the right.

FormWindowDesigner does this by generating Smalltalk code from data developed during the design process. The Smalltalk code is then compiled into a Smalltalk class and methods. When using the tool, clicking “Save” will open the created form window and show the generated code in the Transcript.

Next steps are:

1) saving the generated code in a database file
2) adding channel and database behaviors to the generated form window

The same procedure will also enable building re-usable components and editing of existing windows and components.

As I have said in previous posts, using Smalltalk will enable the development of very sophisticated online tools and extremely rapid deployment of applications.

Sencha’s ExtJs 4.0 will be released in the next few weeks.

It has a number of things that will be very useful in QuickSilver:

  • SVG graohics implemented in JavaScript/CSS
  • dynamic loading resulting in faster startups
  • better client-server integration (Ext Direct)
  • constructors organized as classes

I have been reading the documentation for ExtJs 4.0 and it seems that the library structure has moved closer to Smalltalk. In particular, they have added Ext.Class and Ext.ClassManager.

There is now explicit support for calling parent methods like Smalltalk’s “super” (Ext.Base.callParent) and calling class methods (Ext.define({static: …})).

In the QuickSilver compiler, I wrote a number of library functions to support this type of Smalltalk behavior in JavaScript. Once ExtJs 4.0 is released, many of these might be replaced by the equivalent Ext functions.

Also, it means that it may be possible for the QuickSilver compiler to produce pure ExtJs 4.0 code.

Develop and prototype in Smalltalk and automatically generate JavaScript for deployment.

News Browser HTML Content

News Browser HTML Content


I have modified the News Browser to display HTML content instead of plain text.

And I can now use the new HTML File Editor to create the HTML content online.

The development tools will progressively get more capable as the site matures.

HTML File Editor

February 24, 2011

HTML File Editor

HTML File Editor


There is now an HTML file editor available from the desktop context menu.

This editor will initially be used to create QuickSilver documentation as well as content for some sample applications.