ExtJs 4.0 Class Hierarchy Browser

February 4, 2012

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”.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: