Ext JS is a (client-side) JavaScript library created for coding Rich Internet Applications. Nowadays no one uses bare JavaScript, without an abstraction layer over the browser JavaScript implementation. Along with JQuery, Dojo, MooTools and many others, Ext JS provides JavaScript developers with a reusable toolset for modifying the DOM, building form controls, or widgets like grids, tab panels and trees.

There has been some hype lately on Ext JS being renamed to Sencha, but it was a rebranding of the company behind this product, which proposes other libraries like Raphael (SVG-related). Ext JS is still available as a standalone product on Sencha’s website. Ext JS is released for free with its open source license adapt to other open source applications, but also as a commercial product, for commercial use.

Yii framework

Yii Web Programming Framework is a PHP 5 framework, mainly inspired by Prado. The goals of Yii are striving for high performance, achieved by simplicity of the design, and very loose coupling between the various components. Some of the features of Yii include the classic MVC implementation, database access infrastructure, and support for theming, caching and localization.

Yii is released under the BSD license, like Zend Framework, so there are no limitations to its use in open source or commercial projects.

Ext4Yii

Ext4Yii is essentially a bridge between these two projects, which aims to integrate Ext JS as an extension for Yii.

Ext4Yii is implemented as a templating system, which consumes XML models where you define widget elements like buttons or handlers (in embedded JavaScript code which can take advantage of Ext-powered methods and objects).

When using the provided ExtController as the superclass of the Yii application’s SiteController, the XML models are readily integrated and instantiated as Ext JS objects, without the need to include lots of .js files and event hooks.

In the Ext4Yii documentation, there are various examples of bootstrapping Ext JS widgets using these higher-level models, which deal with layout elements and forms. There are more advanced features included like AjaxMethods, which allows to call a registered PHP function via AJAX from the client side.

Learning a new modeling language can be complex, especially with verbose XML. Fortunately, there is a bundled plug-in for the NetBeans IDE which provides code completion for Ext4Yii. Even if you’re not a fan of IDEs, they sometimes are very handy in providing a rapid solution to bootstrap new tools like Ext4Yii.

Conclusion

PHP frameworks have been one of the most powerful innovations in the PHP landscape in the last years, and bridging them together with a JavaScript solution is important for being able to provide RIA behavior out of the box. There are similar successful solutions available on the web, like sfJqueryPlugin or Zend_Dojo, which prove that the concept of leveraging a JavaScript library into a PHP framework is an integration worth considering.

Listen as Ed talks about his tutorial, “JavaScript for PHP Developers” and his session, “Put down the Superglobals! Secure PHP Development with Inspekt“.

To hear Ed Finkler live in Chicago, Register for TEK·X today!

Background

The in-development HTML5 specification is becoming more and more supported by browsers such as Firefox, Safari and even Internet Explorer. Together with other standardizations, the specification defines a per-host relational database for data storage on the client side, to be accessed via JavaScript without any additional requirement than SQL knowledge.
Currently SQLite is used by all the browsers’ implementations, as it is the most popular lightweight relational database.

However, the available data model is not really limited to the relational one.

The solution

As often is the case, where there is a relational database, there is also an object-relational mapper. In JavaScript every variable is an object, so it makes sense to build an object-oriented application model, and transparently persist the data.

Thus the need for a DataMapper, like Impel, to store these objects automatically in the native database via metadata provided in the source code. Of course Impel comes with an automatical synchronization package for updating the rapidly changing schemas distributed all over the client machines. And it runs on the iPhone, as the authors like to point out.

Technology overview

Impel is built over MooTools, which is a required dependency. The API is modeled on Propel. Propel was one of the first object-relational mappers for PHP 5.

The original API is modified to accommodate an asynchronous model, which the JavaScript interpreters require. Blocking calls in JavaScript do not work very well, since with the usage of simple method calls the browser would effectively freeze while expecting that the database computes and returns its query result. Asynchronous model means that handlers (anonymous or named functions) are registered on querying, and are called when the result is available, fitting in the event-driven paradigm of JavaScript programming.

Impel is indeed a bleeding edge technology, but a standout in the new HTML5 environment. It fills the gap between JavaScript objects and the native local storage of HTML5, a significant feature especially for early adopters.

We are aware of the problems with the Download Builder and ThemeRoller and we apologize for any inconvenience this has caused. We have disabled those components on our web site until the problems with these components can be resolved.

While the problems are being worked out, users are being offered two jQuery UI zip files:

• Development bundle, which contains all of the jQuery UI plugins as well as the base theme
• Themes package, which includes all 21 pre-built themes.