Architecting your app in ext JS 4, part 1

Document directory

• Views
• Models Model
• Stores Storage
• Controllers Controller

June 21,201 1 | Tommy maintz

The scalability, maintainability and flexibility of an application is mostly determined by the quality of the application's architecture. unfortunately, it's often treated as an afterthought. proofs of concept and prototypes turn into massive applications, and example code is copied and pasted into the foundations of program applications. you may be tempted to do this because of the quick progress that you see at the start of a project.

The scalability, maintainability, and flexibility of an application mainly depend on the Architecture Quality of the application. Unfortunately, this is often considered as an afterthought thing. The concept and prototype become a large-scale application, and the sample code is copied and pasted to the foundation of many applications. Because there is a fast progress at the beginning of the project, you may plan to do so.

However, the time saved will be relatively low compared to the time spent on having to maintain, scale and often refactor your application later in the project. one way to better prepare for writing a solid architecture is to follow certain conventions and define application views, models, stores and controllers before actually implementing them. in this article, we'll take a look at a popular application and discuss how we might should ect the user interface to create a solid foundation.

In any case, the time saved is relatively lower than the time spent-you have to maintain, scale, and often rebuild your applications in later projects. There is a better solution to writing a reliable architecture, that is, to define the view, model, storage, and Controller of the application before the actual implementation. In this article, we will see a popular application and discuss how to create a reliable foundation by building a user interface.

Code Organization

Application Architecture is as much about providing structure and consistency as it is about actual classes and framework code. Building a good architecture unlocks a number of important benefits:

The application architecture is largely about providing structure and consistency, for example, it is about actual classes and framework code. Building a good architecture has the following benefits:

• Every application works the same way so you only have to learn it once
• It's easy to share code between apps because they all work the same way
• You can use ext JS build tools to create optimized versions of your applications for production use

• Every application works in the same way, so you only need to understand it once.
• It is easy to share code between different applications because they all work in the same way.
• For use in production, you can use ext JS build toosl to create optimized application versions.

In ext JS 4, we have defined conventions that you shoshould consider following when building your applications-most notably a uniied directory structure. this simple structure places all classes into the app folder, which in turn contains sub-folders to namespace your models, views, controllers and stores.

In ext JS 4, we have defined the convention you should consider when creating an application-the most significant thing is a unified directory structure. This simple structure places all classes in the app folder-in turn, it contains sub-directories and creates namespaces based on your models, views, controllers, and storage.

While ext JS 4 offers best practices on how to structure your application, there's room to modify our suggested conventions for naming your files and classes. for example, you might decide that in your project you want to add a suffix to your controllers with "controller," e.g. "users" becomes "userscontroller. "In this case, remember to always add a suffix to both the Controller file and class. the important thing is that you define these conventions before you start writing your application and consistently follow them. finally, while you can call your classes whatever you want, we strongly suggest following our convention for the names and structure of folders (controller, model, store, view ). this will ensure that you get an optimized build using our sdktools beta.

Ext js 4 provides the best practices for constructing your application, and there is room to adjust our suggested naming conventions for files and classes. In this example, you can decide in your project to add a "controller" suffix to your controller, for example, "users" is changed to "userscontroller ". In this case, remember to always add a suffix to the Controller files and classes. It is important to define these conventions before you start writing your applications and keep following them. In the end, when you can call any class you want, we strongly recommend that you follow our naming and directory structure (controller, model, storage, view) Conventions. This ensures that you can use our sdktools Beta to get an optimized release.

Striking a balance discover balanced views

Splitting up the application's UI into views is a good place to start. often, you are provided with wireframes and UI mockups created by designers. imagine we are asked to rebuild the (very attractive) Pandora application using ext JS, and are given the following mockup by our UI Designer.

Splitting the application UI to the view is a good start. Generally, you will be provided with wireframes and UI mockups created by the designer. Imagine that we were asked to use ext js to recreate (very attractive) Pandora applications, and our UI Designer had provided mockup to be followed.

What we want to achieve is a balance between the views being too granular and too generic. Let's start by seeing what happens if we divide our UI into too preview views.

What we want is to strike a balance between a view becoming too granular and too generalized. Let's see what will happen if we divide the UI into too many views.

Splitting up the UI into too small views will make it difficult to manage, reference and control the views in our controllers. also, since every view will be in its own file, creating too preview views might make it hard to locate the View File where a piece of the ui or view logic is defined.

On the other hand, we don't want our views to be too generic because it will impact our flexibility to change things.

Splitting the UI into too many small views makes it difficult for us to manage, reference, and control views in the controller. Similarly, because each view will be in its own file, creating too many views will make it difficult for us to locate and define the View File of the UI block or view logic.

On the other hand, we don't want the view to be too general-because it will affect the flexibility of changing things.

In this scenario, each one of our views has been overly simplified. when several parts of a view require custom view-logic, the view class will end up having too response responsibilities, resulting in the View class becoming harder to maintain. in addition, when the designers change their mind about the arrangement of the UI, we will end up having to refactor our view definition and view logic; which can get tedious.

The right balance is achieved when we can easily rearrange the views on the page without having to refactor them every time. for example, we want to make the ad a separate view, so we can easily move it around or even remove it later.

In this scenario, each of our views is too simplified. When several parts of a view require custom view logic, the view class ends because it contains too many responsibilities, making it difficult to maintain the view class. In addition, when designers change their ideas about UI arrangement, we will end up, because we have to refactor our view definition and view logic-this will be boring.

When an appropriate balance is achieved, we can simply arrange the views on the page without restructuring them each time. For example, if we want to advertise a single view, we can simply move it around or even delete it later.

In this version, we 've separated our UI by the roles of each view. once you have a general idea of the views that will make up your UI, you can still tweak the granularity when you're actually implementing them. sometimes you may find that two views shocould really become one, or a view is too generic and shocould be split into multiple views, but it helps to start out with a good base. I think we 've done that here.

In this version, we have separated the UI by the role of each view. Once you have a general idea that will make up the UI, you can adjust the granularity when you actually implement them. Sometimes, you may find that two views must be merged into one, or a view is too general and should be divided into multiple views, but it helps lay a good foundation. I believe we have achieved this goal here.

Models Model

Now that we have the basic structure of our views in place, it's time to look at the models. by looking at the types of dynamic data in our UI, we can get an idea of the different models needed for our application.

Now we have a basic structure where views are placed properly. It's time to look at the model. By observing the Dynamic Data Types in our UI, we can get the idea of different models needed in the application.

We 've ve decided to use only two models-song and station. we cocould have defined two more models called artist and album. however, just as with views, we don't want to be too granular when defining our models. in this case, we don't have to separate artist and album information because the app doesn't allow the user to select a specific song by a given artist. instead, the data is organized by station, the song is the center point, and the artist and album are properties of the song. that means we're able to combine the song, artist and album data into one model. this greatly simplifies the data side of our app. it also simplifies the API that we have to implement on the server-side because we don't have to load individual artists or albums. to summarize, for this example, we'll only have two models-song and station.

We have decided to use only two models-song and station )". We can define two models: artist and album )". Even so, like a view, we don't want to be too granular when defining a model. In this example, we do not want to separate artist and album information, because this application does not allow users to select a specific song through a given artist. On the contrary, data is maintained by radio stations. songs are the central point, and artists and records are the attributes of songs. This means that we can combine the data of songs, artists, and records into a model. This greatly simplifies the data layer of our application. This also simplifies the APIS we must implement on the server, because we do not want to load independent artists and records. In this example, we only need two models: songs and radio stations.

Stores Storage

Now that we 've thought about the models our application will use, lets do the same for stores.

Now, we have figured out the model used in the application, and think about storage.

Figuring out the different stores you need is often relatively easy. A good strategy is to determine all the data bound components on the page. in this case, we have a list with all of the user's favorite stations, a scroller with the recently played songs, and a search field that will display search results. each of these views will need to be bound to stores.

Understanding the various types of storage you need is usually relatively simple. A good policy is to determine all data binding components on the page. In this example, we have a list of favorite radio stations, a slide component with recently played songs, and a search domain that displays search results. Each of these views needs to be bound to the storage.

Controllers Controller

There are several ways you can distribute the application's responsibilities within SS your application's controllers. Let's start by thinking about the different controllers we need in this example.

You can use controllers to distribute application responsibilities in several ways. Let's look at the various controllers required in this example.

Here we have two basic controllers-A songcontroller and a stationcontroller. ext js 4 allows you to have one controller that can control several views at the same time. our stationcontroller will handle the logic for both creating new stations as well as loading the user's favorite stations into the stationslist view. the songcontroller will take care of managing the songinfo view and recentsong store as well as the user's actions of liking, disliking, pausing and skipping songs. controllers can interact with each other by firing and listening for application events. while we coshould have created additional controllers, one for managing playback and another for searching stations, I think we 've found a good separation of responsibilities.

Here we have two basic controllers: songcontroller and stationcontroller. Ext js 4 allows you to use a single controller to control multiple views at the same time. Our stationcontroller will process the logic of creating new radio stations and loading user-preferred radio stations to the stationlist view. Songcontroller will focus on managing songinfo views, recentsong storage, and user behavior-such as liking, dislike, pause, and skip songs. The controller can interact with each other by triggering and listening to events. When we create an additional controller-one for managing replay and one for searching for a station-I think we have found a good separation of duties.

Measure twice, cut once think twice

I hope that sharing our thoughts on the importance of planning your application architecture prior to writing code was helpful. we find that talking through the details of the application helps you to build a much more flexible and maintainable architecture.

I hope to share with you the idea about the importance of developing an application architecture plan prior to coding. We found that talking about the details of this application from start to end can help you build a more flexible and maintainable architecture.

Written by Tommy maintz
Tommy maintz leads the development of sencha touch. with extensive knowledge of Object Oriented JavaScript and mobile browser idiosyncracies, he pushes the boundaries of what is possible within Mobile browsers. tommy brings a unique view point and an ambitious philosophy to creating engaging user interfaces. his attention to detail drives his desire to make the perfect framework for developers to enjoy.