Sencha Ext JS, building web apps that fit to your business needs

Sencha Ext JS is the market leading framework to build applications that run in a web browser. It is based on JavaScript and communicates well with PHP, Java or Ruby written backends. The touch and feel of an Ext JS applications is very much like Windows. The large number of components make it possible to develop applications just the way you like it.

Ext JS is suitable for large projects

enovision_2585

The last 5 years I have build large projects with Ext JS in combination with the Codeigniter PHP framework. With the experience I have with developing business applications on the IBM AS/400, I am very satisfied with developing with Ext JS and a PHP backend. It is not so much different when it comes to designing and developing software.

Internet is much about design. Many creative websites with high visual appeal can be found. Sencha Ext JS is not about the optical design, it is about process, functions and logic. A frontend build with Ext JS is already very attractive, but it is useful for building web applications that support business processes.

The application flow

Ext JS is based on Ajax communication with a server backend. We use mainly the CodeIgniter PHP framework, but any other PHP backend can be used. The frontend is used for user interaction, where the backend is used for handling the processes of communicating with the database or retrieving data from web services that offer API’s.

Simple Ext JS Backend Structure

Sencha Touch, bring applications to mobile devices

Sencha TouchNext to Ext JS for desktop browser application, Sencha is also offering Sencha Touch, for creating frontends specially for mobile devices like iPad, iPhone or Android systems.

Touch applications run in a web browser like Safari, but can also be made native with the Phonegap framework.

 

It’s HTML and CSS so it has style

Ext JS and Touch generate HTML and therefor it is fairly easy to modify the styling with the use of CSS. With the support of SASS it is possible to design your own themes. Unfortunately this sounds a bit easier than it is. Ext JS is delivered with a number of very eye-catching themes.

The Enovision Movieworld application is an Ext JS based application that is using the TMDB free moviedatabase API to show a live sample of what is possible with this framework. It can be seen here.

MVC principles in Ext JS and Touch

The model view controller (MVC) is a widely adopted way to structure applications. Sencha is supporting this structure too in their frameworks. Once you get the right understanding for it, it is a very logical way of designing your applications.

Model View Controller Structure (1)

Ext JS Frontend

Controller

Controllers are used to manage the application. Usually you have a controller for every module in your application. A module can be seen as a logical block that is performing task in the flow. For example if you have customers, articles and orders you will have at least 3 controllers in your software. I like to keep my controllers small, so I usually split it up by logical objects. Every uniquely identified object (like customer, users, orders, articles, help) has its own controller. That makes maintenance also a lot easier.

A controller manages the behavior of components in your views. It also performs supporting tasks regarding your model objects like models and stores. The controller is a very powerful mechanism in Ext JS and Touch.

Model

A model is the representation of your Ext JS models (class definitions of your data structures) and stores (the Ajax proxy to your backend). A model tells you how your data is structured and a store tells you where the data comes from. The model/store concept in Ext JS is very powerful and can do much more than just telling how your data is structured and load data with an Ajax call. You can also convert data when it arrives, validate data or manage a master/detail structure.

View

Views are components that actually put something on the display. This can be a panel, grid, button or a combo box. Your application will most likely have quite a lot of views. Every view object is an extension of a standard Ext JS view class (component). For example when a user is pressing a button its handler could fire an event that is listened to by a controller. The controller can then execute code to take appropriate action to this event and communicate with other objects in your application.

PHP Backend

It is useful to use a PHP framework to handle server activities the easy way. We use CodeIgniter because it is lightweight, easy to learn and has good performance. But you can also use any other framework or even none.

Controller

Backend controllers intercept all requests that are send from the frontend. Like in the Ext JS frontend you can have more controllers in the backend. Most of the time you will have a controller for every uniquely defined object (users, customers, orders). A number of times you would like to do something with tables (schemes) in your database. The controller will handle these tasks by calling methods in a model object.

Model

Models are object instances of classes that hold all functions required to perform activities with the database. I always use different model classes for inquiries and maintenance. Otherwise your models can become quite big. And practice learns us that anything that is big, is hard to handle (maintain).

CodeIgniter makes it easy to work with library objects. Libraries are special classes performing a specific task (creating pdf’s or Excel spreadsheets). Libraries can also be used to interact with third-party classes or with web services.

View

When building PHP applications like a website, CodeIgniter views create the HTML code to show something in the browser. When building an Ext JS web application not much is done with views. We mostly use one view to start the Ext JS frontend application. Ext JS applications are one display applications that don’t require to use the "back" button in your browser.

Upcoming articles about Ext JS

In upcoming articles I will explain more on how you can build an application with Ext JS. I will tell about the MVC (model-view-controller) structure and how you communicate with the backend. If you like to read more on Ext JS or Sencha Touch you can follow this link.

And please visit our free movieworld demo application.

image

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.