SlideShare ist ein Scribd-Unternehmen logo
1 von 7
Downloaden Sie, um offline zu lesen
Architecting Your App in Ext JS 4, Part 1                                                           Search



                      16          Tw eet   16        Like   7
                                                                                                                         3 Comments

               Published Jun 21, 2011 | Tommy Maintz | Tutorial | Easy                                                   Ext JS, v4.x
               Last Updated Aug 10, 2011
                                                                                                                         RSS | Responses
               This Tutorial is most relevant to Ext JS, 4.x.

               The scalability, maintainability and flexibility of an application is mostly determined by the       Community
               quality of the application’s architecture. Unfortunately, it’s often treated as an afterthought.        Tw itter         Facebook
               Proofs of concept and prototypes turn into massive applications, and example code is                    Tum blr          LinkedIn
               copied and pasted into the foundations of many applications. You may be tempted to do this              RSS Feed         Vim eo
               because of the quick progress that you see at the start of a project.

               However, the time saved will be relatively low compared to the time spent on having to
                                                                                                                  Related Posts
               maintain, scale and often refactor your application later in the project. One way to better
                                                                                                                  The Sencha Class System
               prepare for writing a solid architecture is to follow certain conventions and define application     Nov 29
               views, models, stores and controllers before actually implementing them. In this article, we’ll
                                                                                                                  Architecting Your App in Ext
               take a look at a popular application and discuss how we might architect the user interface to        JS 4, Part 3 Sep 19
               create a solid foundation.
                                                                                                                  Ext Designer 1.2 Overview
               Code Organization                                                                                    Aug 4

                                                                                                                  Any ideas?
               Application architecture is as much
                                                                                                                  If you have any ideas to
               about providing structure and
                                                                                                                  improve this article, please
               consistency as it is about actual classes                                                          let us know
               and framework code. Building a good
               architecture unlocks a number of
               important 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

               In Ext JS 4, we have defined
               conventions that you should consider
               following when building your
               applications — most notably a unified
               directory structure. This simple structure
               places all classes into the app folder,
               which in turn contains sub-folders to

www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/                                                                                     1/7
namespace your models, views, controllers and stores.

               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 SDK Tools beta.

               Striking a Balance
               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.




               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 many views.




www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/                                                     2/7
Splitting up the UI into too many 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
               many 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.




               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 many 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
www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/                                                      3/7
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 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 should really become
               one, or a view is too generic and should be split into multiple views, but it helps to start out
               with a good base. I think we’ve done that here.

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




               We’ve decided to use only two models — Song and Station. We could have defined two
www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/                                                    4/7
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.

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




               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.

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




www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/                                                       5/7
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 could have created additional Controllers, one for
               managing playback and another for searching stations, I think we’ve found a good
               separation of responsibilities.

               Measure Twice , Cut Once
               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.

               Continue on to Architecting Your App in Ext JS 4, Part 2


               Share this post:                                                                                 Leave a reply

               Written by Tommy Maintz
               Tommy Maintz is the original lead 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.
               Follow Tommy on Twitter

              0 Comments

                 K Ramesh Babu                                                                                12 months ago
                             What is the motivation behind the ‘stores’ concept? Should we call this
                             paradigm MVCS rather than MVC?



                 Ali                                                                                          11 months ago
                             Isn’t a store part of the model? At least, that’s how MVC sees it. Also don’t
                             understand the reason for a clientside “controller”. Should that contain all

www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/                                                                  6/7
clientside handlers, and then redirect to the serverside MVC controller?
                            Would like to see this more detailed..



                 Ed Spencer Sencha Employee                                                               11 months ago
                            Stores are really nothing more than a glorified array of Model *instances*.
                            They’re mostly used in our data-bound components like grids. We could
                            just use an array but the Store gives all kinds of benefits like sorting,
                            filtering and firing events whenever Model instances are added, removed or
                            updated, which makes acting on those changes much easier

               Commenting is not available in this channel entry.




            Find Sencha developers at SenchaDevs                                                                          © 2012 Sencha Inc. All rights
                                                                                                                          reserved.




www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/                                                                                            7/7

Weitere Àhnliche Inhalte

Was ist angesagt?

Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018Helios Solutions
 
Spring Tools 4 - Eclipse and Beyond
Spring Tools 4 - Eclipse and BeyondSpring Tools 4 - Eclipse and Beyond
Spring Tools 4 - Eclipse and BeyondVMware Tanzu
 
angular js and node js training in hyderabad
angular js and node js training in hyderabadangular js and node js training in hyderabad
angular js and node js training in hyderabadphp2ranjan
 
Which is Best for Web Application Development—Dot Net, PHP, Python, Ruby, or...
 Which is Best for Web Application Development—Dot Net, PHP, Python, Ruby, or... Which is Best for Web Application Development—Dot Net, PHP, Python, Ruby, or...
Which is Best for Web Application Development—Dot Net, PHP, Python, Ruby, or...Simpliv LLC
 
Angular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad indiaAngular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad indiaphp2ranjan
 
Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022 Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022 Moon Technolabs Pvt. Ltd.
 
Php Framework
Php FrameworkPhp Framework
Php Frameworkcncwebworld
 
Java vs python comparison which programming language is right for my business
Java vs python comparison  which programming language is right for my business Java vs python comparison  which programming language is right for my business
Java vs python comparison which programming language is right for my business Katy Slemon
 
Adobe CQ at LinkedIn Meetup February 2014
Adobe CQ at LinkedIn Meetup February 2014Adobe CQ at LinkedIn Meetup February 2014
Adobe CQ at LinkedIn Meetup February 2014nyolles
 
What do you need to know about g rpc on .net
What do you need to know about g rpc on .net What do you need to know about g rpc on .net
What do you need to know about g rpc on .net Moon Technolabs Pvt. Ltd.
 
MVC 3.0 KU Day 1 v 1.1
MVC 3.0 KU Day 1 v 1.1MVC 3.0 KU Day 1 v 1.1
MVC 3.0 KU Day 1 v 1.1Lek Pongpatimet
 
Top 6 leading PHP frameworks for web development
Top 6 leading PHP frameworks for web developmentTop 6 leading PHP frameworks for web development
Top 6 leading PHP frameworks for web developmentAppfinz Technologies
 
Java Development Company | Xicom
Java Development Company | XicomJava Development Company | Xicom
Java Development Company | XicomRyanForeman5
 
JavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanJavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanAdam Boczek
 
PRG/420 ENTIRE CLASS UOP TUTORIALS
PRG/420 ENTIRE CLASS UOP TUTORIALSPRG/420 ENTIRE CLASS UOP TUTORIALS
PRG/420 ENTIRE CLASS UOP TUTORIALSSharon Reynolds
 

Was ist angesagt? (19)

Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018
 
Training report
Training reportTraining report
Training report
 
Spring Tools 4 - Eclipse and Beyond
Spring Tools 4 - Eclipse and BeyondSpring Tools 4 - Eclipse and Beyond
Spring Tools 4 - Eclipse and Beyond
 
angular js and node js training in hyderabad
angular js and node js training in hyderabadangular js and node js training in hyderabad
angular js and node js training in hyderabad
 
Which is Best for Web Application Development—Dot Net, PHP, Python, Ruby, or...
 Which is Best for Web Application Development—Dot Net, PHP, Python, Ruby, or... Which is Best for Web Application Development—Dot Net, PHP, Python, Ruby, or...
Which is Best for Web Application Development—Dot Net, PHP, Python, Ruby, or...
 
Dtacs
DtacsDtacs
Dtacs
 
Angular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad indiaAngular 6 Training with project in hyderabad india
Angular 6 Training with project in hyderabad india
 
Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022 Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022
 
Php Framework
Php FrameworkPhp Framework
Php Framework
 
Top 5 advanced php framework in 2018
Top 5 advanced php framework in 2018Top 5 advanced php framework in 2018
Top 5 advanced php framework in 2018
 
Best PHP Frameworks
Best PHP FrameworksBest PHP Frameworks
Best PHP Frameworks
 
Java vs python comparison which programming language is right for my business
Java vs python comparison  which programming language is right for my business Java vs python comparison  which programming language is right for my business
Java vs python comparison which programming language is right for my business
 
Adobe CQ at LinkedIn Meetup February 2014
Adobe CQ at LinkedIn Meetup February 2014Adobe CQ at LinkedIn Meetup February 2014
Adobe CQ at LinkedIn Meetup February 2014
 
What do you need to know about g rpc on .net
What do you need to know about g rpc on .net What do you need to know about g rpc on .net
What do you need to know about g rpc on .net
 
MVC 3.0 KU Day 1 v 1.1
MVC 3.0 KU Day 1 v 1.1MVC 3.0 KU Day 1 v 1.1
MVC 3.0 KU Day 1 v 1.1
 
Top 6 leading PHP frameworks for web development
Top 6 leading PHP frameworks for web developmentTop 6 leading PHP frameworks for web development
Top 6 leading PHP frameworks for web development
 
Java Development Company | Xicom
Java Development Company | XicomJava Development Company | Xicom
Java Development Company | Xicom
 
JavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin GermanJavaScript & Enterprise BED-Con 2014 Berlin German
JavaScript & Enterprise BED-Con 2014 Berlin German
 
PRG/420 ENTIRE CLASS UOP TUTORIALS
PRG/420 ENTIRE CLASS UOP TUTORIALSPRG/420 ENTIRE CLASS UOP TUTORIALS
PRG/420 ENTIRE CLASS UOP TUTORIALS
 

Andere mochten auch

A wise builder
A wise builderA wise builder
A wise builderAdrian Buban
 
Gran excursiĂłn a acapulco 3 dias
Gran excursiĂłn a acapulco 3 diasGran excursiĂłn a acapulco 3 dias
Gran excursiĂłn a acapulco 3 diasCplaza21
 
троĐșĐž Ń€Đ°Đ·Ń€Đ°Đ±ĐŸŃ‚Ń‡ĐžĐșĐ° ĐŒĐŸĐ±ĐžĐ»ŃŒĐœŃ‹Ń… огр
троĐșĐž Ń€Đ°Đ·Ń€Đ°Đ±ĐŸŃ‚Ń‡ĐžĐșĐ° ĐŒĐŸĐ±ĐžĐ»ŃŒĐœŃ‹Ń… огртроĐșĐž Ń€Đ°Đ·Ń€Đ°Đ±ĐŸŃ‚Ń‡ĐžĐșĐ° ĐŒĐŸĐ±ĐžĐ»ŃŒĐœŃ‹Ń… огр
троĐșĐž Ń€Đ°Đ·Ń€Đ°Đ±ĐŸŃ‚Ń‡ĐžĐșĐ° ĐŒĐŸĐ±ĐžĐ»ŃŒĐœŃ‹Ń… огрAlexander Degtyarev
 
Hasil Sementara PPDB SMAN 1 Randublatung
Hasil Sementara PPDB SMAN 1 RandublatungHasil Sementara PPDB SMAN 1 Randublatung
Hasil Sementara PPDB SMAN 1 RandublatungRaden Asmoro
 
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČàžˆàžčàč€àžŹàžàžȘàžČàžŽàžàč”
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČàžˆàžčàč€àžŹàžàžȘàžČàžŽàžàč”àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČàžˆàžčàč€àžŹàžàžȘàžČàžŽàžàč”
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČàžˆàžčàč€àžŹàžàžȘàžČàžŽàžàč”àž§àž±àž”àž”àž­àž™àž—àž­àž‡ àžàžČàžŹàžȘàžŽàž™àž˜àžžàčŒ
 
The benefits of a small church
The benefits of a small churchThe benefits of a small church
The benefits of a small churchAdrian Buban
 
Christian lifestyle
Christian lifestyleChristian lifestyle
Christian lifestyleAdrian Buban
 
àžàžČàžŁàč€àž„àž·àž­àžàž‹àž·àč‰àž­àžàž„àč‰àž­àž‡àž§àž‡àžˆàžŁàž›àžŽàž”
àžàžČàžŁàč€àž„àž·àž­àžàž‹àž·àč‰àž­àžàž„àč‰àž­àž‡àž§àž‡àžˆàžŁàž›àžŽàž”àžàžČàžŁàč€àž„àž·àž­àžàž‹àž·àč‰àž­àžàž„àč‰àž­àž‡àž§àž‡àžˆàžŁàž›àžŽàž”
àžàžČàžŁàč€àž„àž·àž­àžàž‹àž·àč‰àž­àžàž„àč‰àž­àž‡àž§àž‡àžˆàžŁàž›àžŽàž”Avtech Thai
 
Three dangerous sins
Three dangerous sinsThree dangerous sins
Three dangerous sinsAdrian Buban
 
Architecting your app in ext js 4, part 2 learn sencha
Architecting your app in ext js 4, part 2   learn   senchaArchitecting your app in ext js 4, part 2   learn   sencha
Architecting your app in ext js 4, part 2 learn senchaRahul Kumar
 
United Arab Emirates
United Arab EmiratesUnited Arab Emirates
United Arab EmiratesOksana Lomaga
 
Abf medborgarlon-150506023929-conversion-gate01
Abf medborgarlon-150506023929-conversion-gate01Abf medborgarlon-150506023929-conversion-gate01
Abf medborgarlon-150506023929-conversion-gate01Pierre Ringborg
 
He was abandon
He was abandonHe was abandon
He was abandonAdrian Buban
 
PresentaciĂłn corporativa INSTALA Vidrio y Aluminio MĂ©xico (2016)
PresentaciĂłn corporativa INSTALA Vidrio y Aluminio MĂ©xico (2016) PresentaciĂłn corporativa INSTALA Vidrio y Aluminio MĂ©xico (2016)
PresentaciĂłn corporativa INSTALA Vidrio y Aluminio MĂ©xico (2016) William GOURG
 
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČ àžˆàžčàč€àžŹàžàžȘàžČàžŽàž
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČ àžˆàžčàč€àžŹàžàžȘàžČàžŽàžàčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČ àžˆàžčàč€àžŹàžàžȘàžČàžŽàž
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČ àžˆàžčàč€àžŹàžàžȘàžČàžŽàžàž§àž±àž”àž”àž­àž™àž—àž­àž‡ àžàžČàžŹàžȘàžŽàž™àž˜àžžàčŒ
 

Andere mochten auch (20)

Grön ekonomi 4
Grön ekonomi 4Grön ekonomi 4
Grön ekonomi 4
 
A wise builder
A wise builderA wise builder
A wise builder
 
Gran excursiĂłn a acapulco 3 dias
Gran excursiĂłn a acapulco 3 diasGran excursiĂłn a acapulco 3 dias
Gran excursiĂłn a acapulco 3 dias
 
Chapt 5
Chapt 5Chapt 5
Chapt 5
 
троĐșĐž Ń€Đ°Đ·Ń€Đ°Đ±ĐŸŃ‚Ń‡ĐžĐșĐ° ĐŒĐŸĐ±ĐžĐ»ŃŒĐœŃ‹Ń… огр
троĐșĐž Ń€Đ°Đ·Ń€Đ°Đ±ĐŸŃ‚Ń‡ĐžĐșĐ° ĐŒĐŸĐ±ĐžĐ»ŃŒĐœŃ‹Ń… огртроĐșĐž Ń€Đ°Đ·Ń€Đ°Đ±ĐŸŃ‚Ń‡ĐžĐșĐ° ĐŒĐŸĐ±ĐžĐ»ŃŒĐœŃ‹Ń… огр
троĐșĐž Ń€Đ°Đ·Ń€Đ°Đ±ĐŸŃ‚Ń‡ĐžĐșĐ° ĐŒĐŸĐ±ĐžĐ»ŃŒĐœŃ‹Ń… огр
 
Hasil Sementara PPDB SMAN 1 Randublatung
Hasil Sementara PPDB SMAN 1 RandublatungHasil Sementara PPDB SMAN 1 Randublatung
Hasil Sementara PPDB SMAN 1 Randublatung
 
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČàžˆàžčàč€àžŹàžàžȘàžČàžŽàžàč”
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČàžˆàžčàč€àžŹàžàžȘàžČàžŽàžàč”àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČàžˆàžčàč€àžŹàžàžȘàžČàžŽàžàč”
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČàžˆàžčàč€àžŹàžàžȘàžČàžŽàžàč”
 
The benefits of a small church
The benefits of a small churchThe benefits of a small church
The benefits of a small church
 
Christian lifestyle
Christian lifestyleChristian lifestyle
Christian lifestyle
 
àž«àž„àž±àžàžàžČàžŁàžȘàž±àžĄàžžàž±àž™àž˜àčŒàžšàž—àž•àž•àžŽàžąàžČàž§àžŽàž àž±àž•àž•àžŽ
àž«àž„àž±àžàžàžČàžŁàžȘàž±àžĄàžžàž±àž™àž˜àčŒàžšàž—àž•àž•àžŽàžąàžČàž§àžŽàž àž±àž•àž•àžŽàž«àž„àž±àžàžàžČàžŁàžȘàž±àžĄàžžàž±àž™àž˜àčŒàžšàž—àž•àž•àžŽàžąàžČàž§àžŽàž àž±àž•àž•àžŽ
àž«àž„àž±àžàžàžČàžŁàžȘàž±àžĄàžžàž±àž™àž˜àčŒàžšàž—àž•àž•àžŽàžąàžČàž§àžŽàž àž±àž•àž•àžŽ
 
àžšàž—àž—àž”àčˆ àč” àžȘàž±àžĄàžžàž±àž™àž˜àčŒàč€àžšàč‡àž”àč€àž•àž„àč‡àž”
àžšàž—àž—àž”àčˆ àč” àžȘàž±àžĄàžžàž±àž™àž˜àčŒàč€àžšàč‡àž”àč€àž•àž„àč‡àž”àžšàž—àž—àž”àčˆ àč” àžȘàž±àžĄàžžàž±àž™àž˜àčŒàč€àžšàč‡àž”àč€àž•àž„àč‡àž”
àžšàž—àž—àž”àčˆ àč” àžȘàž±àžĄàžžàž±àž™àž˜àčŒàč€àžšàč‡àž”àč€àž•àž„àč‡àž”
 
àžàžČàžŁàč€àž„àž·àž­àžàž‹àž·àč‰àž­àžàž„àč‰àž­àž‡àž§àž‡àžˆàžŁàž›àžŽàž”
àžàžČàžŁàč€àž„àž·àž­àžàž‹àž·àč‰àž­àžàž„àč‰àž­àž‡àž§àž‡àžˆàžŁàž›àžŽàž”àžàžČàžŁàč€àž„àž·àž­àžàž‹àž·àč‰àž­àžàž„àč‰àž­àž‡àž§àž‡àžˆàžŁàž›àžŽàž”
àžàžČàžŁàč€àž„àž·àž­àžàž‹àž·àč‰àž­àžàž„àč‰àž­àž‡àž§àž‡àžˆàžŁàž›àžŽàž”
 
Three dangerous sins
Three dangerous sinsThree dangerous sins
Three dangerous sins
 
Architecting your app in ext js 4, part 2 learn sencha
Architecting your app in ext js 4, part 2   learn   senchaArchitecting your app in ext js 4, part 2   learn   sencha
Architecting your app in ext js 4, part 2 learn sencha
 
àžšàž—àž—àž”àčˆ àč‘ (àžˆàžŁàžŽàž‡)
àžšàž—àž—àž”àčˆ àč‘ (àžˆàžŁàžŽàž‡)àžšàž—àž—àž”àčˆ àč‘ (àžˆàžŁàžŽàž‡)
àžšàž—àž—àž”àčˆ àč‘ (àžˆàžŁàžŽàž‡)
 
United Arab Emirates
United Arab EmiratesUnited Arab Emirates
United Arab Emirates
 
Abf medborgarlon-150506023929-conversion-gate01
Abf medborgarlon-150506023929-conversion-gate01Abf medborgarlon-150506023929-conversion-gate01
Abf medborgarlon-150506023929-conversion-gate01
 
He was abandon
He was abandonHe was abandon
He was abandon
 
PresentaciĂłn corporativa INSTALA Vidrio y Aluminio MĂ©xico (2016)
PresentaciĂłn corporativa INSTALA Vidrio y Aluminio MĂ©xico (2016) PresentaciĂłn corporativa INSTALA Vidrio y Aluminio MĂ©xico (2016)
PresentaciĂłn corporativa INSTALA Vidrio y Aluminio MĂ©xico (2016)
 
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČ àžˆàžčàč€àžŹàžàžȘàžČàžŽàž
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČ àžˆàžčàč€àžŹàžàžȘàžČàžŽàžàčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČ àžˆàžčàč€àžŹàžàžȘàžČàžŽàž
àčàž›àž„àč‚àž”àžąàžžàžąàž±àžàžŠàž™àž°àč€àžŁàž·àčˆàž­àž‡àžžàžŁàžČàž«àžĄàž“àčŒàžŠàž·àčˆàž­àž§àčˆàžČ àžˆàžčàč€àžŹàžàžȘàžČàžŽàž
 

Ähnlich wie Architecting your app in ext js 4, part 1 learn sencha

NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdfNestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdfLaura Miller
 
Oops design pattern intro
Oops design pattern intro Oops design pattern intro
Oops design pattern intro anshu_atri
 
Fame
FameFame
Famerpatil82
 
Software design.edited (1)
Software design.edited (1)Software design.edited (1)
Software design.edited (1)FarjanaAhmed3
 
Flutter vs React Native: A Comparison of UI Components and Performance
Flutter vs React Native: A Comparison of UI Components and PerformanceFlutter vs React Native: A Comparison of UI Components and Performance
Flutter vs React Native: A Comparison of UI Components and PerformanceExpert App Devs
 
Function Oriented and Object Oriented Design,Modularization techniques
Function Oriented and Object Oriented Design,Modularization techniquesFunction Oriented and Object Oriented Design,Modularization techniques
Function Oriented and Object Oriented Design,Modularization techniquesnimmik4u
 
Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Goran Kljajic
 
Notes on software engineering
Notes on software engineeringNotes on software engineering
Notes on software engineeringErtan Deniz
 
from-analysis-to-design-the-art-of-object-oriented-programming-2023-6-5-5-17-...
from-analysis-to-design-the-art-of-object-oriented-programming-2023-6-5-5-17-...from-analysis-to-design-the-art-of-object-oriented-programming-2023-6-5-5-17-...
from-analysis-to-design-the-art-of-object-oriented-programming-2023-6-5-5-17-...Data & Analytics Magazin
 
Building a design system with (p)react
Building a design system with (p)reactBuilding a design system with (p)react
Building a design system with (p)reactBart Waardenburg
 
Java Web Frameworks Sweetspots
Java Web Frameworks SweetspotsJava Web Frameworks Sweetspots
Java Web Frameworks SweetspotsMatt Raible
 
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...ijait
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in ComponentsFITC
 
Spring Book – Chapter 1 – Introduction
Spring Book – Chapter 1 – IntroductionSpring Book – Chapter 1 – Introduction
Spring Book – Chapter 1 – IntroductionTomcy John
 
Software Architecture for Agile Development
Software Architecture for Agile DevelopmentSoftware Architecture for Agile Development
Software Architecture for Agile DevelopmentHayim Makabee
 
Express JS and Django Web Frameworks Analyzed
Express JS and Django Web Frameworks AnalyzedExpress JS and Django Web Frameworks Analyzed
Express JS and Django Web Frameworks AnalyzedTien Nguyen
 
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdfNestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdfchristiemarie4
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan RosuRazvan Rosu
 
Dependency Injection, Design Principles and Patterns
Dependency Injection, Design Principles and PatternsDependency Injection, Design Principles and Patterns
Dependency Injection, Design Principles and PatternsJuan Lopez
 
DevExForPlatformEngineers, introducing Kratix
DevExForPlatformEngineers, introducing KratixDevExForPlatformEngineers, introducing Kratix
DevExForPlatformEngineers, introducing KratixAbigail Bangser
 

Ähnlich wie Architecting your app in ext js 4, part 1 learn sencha (20)

NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdfNestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
 
Oops design pattern intro
Oops design pattern intro Oops design pattern intro
Oops design pattern intro
 
Fame
FameFame
Fame
 
Software design.edited (1)
Software design.edited (1)Software design.edited (1)
Software design.edited (1)
 
Flutter vs React Native: A Comparison of UI Components and Performance
Flutter vs React Native: A Comparison of UI Components and PerformanceFlutter vs React Native: A Comparison of UI Components and Performance
Flutter vs React Native: A Comparison of UI Components and Performance
 
Function Oriented and Object Oriented Design,Modularization techniques
Function Oriented and Object Oriented Design,Modularization techniquesFunction Oriented and Object Oriented Design,Modularization techniques
Function Oriented and Object Oriented Design,Modularization techniques
 
Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)Ext Js In Action January 2010 (Meap Edition)
Ext Js In Action January 2010 (Meap Edition)
 
Notes on software engineering
Notes on software engineeringNotes on software engineering
Notes on software engineering
 
from-analysis-to-design-the-art-of-object-oriented-programming-2023-6-5-5-17-...
from-analysis-to-design-the-art-of-object-oriented-programming-2023-6-5-5-17-...from-analysis-to-design-the-art-of-object-oriented-programming-2023-6-5-5-17-...
from-analysis-to-design-the-art-of-object-oriented-programming-2023-6-5-5-17-...
 
Building a design system with (p)react
Building a design system with (p)reactBuilding a design system with (p)react
Building a design system with (p)react
 
Java Web Frameworks Sweetspots
Java Web Frameworks SweetspotsJava Web Frameworks Sweetspots
Java Web Frameworks Sweetspots
 
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...
ABSTRACT FACTORY AND SINGLETON DESIGN PATTERNS TO CREATE DECORATOR PATTERN OB...
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
Spring Book – Chapter 1 – Introduction
Spring Book – Chapter 1 – IntroductionSpring Book – Chapter 1 – Introduction
Spring Book – Chapter 1 – Introduction
 
Software Architecture for Agile Development
Software Architecture for Agile DevelopmentSoftware Architecture for Agile Development
Software Architecture for Agile Development
 
Express JS and Django Web Frameworks Analyzed
Express JS and Django Web Frameworks AnalyzedExpress JS and Django Web Frameworks Analyzed
Express JS and Django Web Frameworks Analyzed
 
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdfNestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
NestJS vs. Express The Ultimate Comparison of Node Frameworks.pdf
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan Rosu
 
Dependency Injection, Design Principles and Patterns
Dependency Injection, Design Principles and PatternsDependency Injection, Design Principles and Patterns
Dependency Injection, Design Principles and Patterns
 
DevExForPlatformEngineers, introducing Kratix
DevExForPlatformEngineers, introducing KratixDevExForPlatformEngineers, introducing Kratix
DevExForPlatformEngineers, introducing Kratix
 

KĂŒrzlich hochgeladen

Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxCeline George
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17Celine George
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxEsquimalt MFRC
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxmarlenawright1
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jisc
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseAnaAcapella
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...ZurliaSoop
 

KĂŒrzlich hochgeladen (20)

Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
Spellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please PractiseSpellings Wk 3 English CAPS CARES Please Practise
Spellings Wk 3 English CAPS CARES Please Practise
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 

Architecting your app in ext js 4, part 1 learn sencha

  • 1. Architecting Your App in Ext JS 4, Part 1 Search 16 Tw eet 16 Like 7 3 Comments Published Jun 21, 2011 | Tommy Maintz | Tutorial | Easy Ext JS, v4.x Last Updated Aug 10, 2011 RSS | Responses This Tutorial is most relevant to Ext JS, 4.x. The scalability, maintainability and flexibility of an application is mostly determined by the Community quality of the application’s architecture. Unfortunately, it’s often treated as an afterthought. Tw itter Facebook Proofs of concept and prototypes turn into massive applications, and example code is Tum blr LinkedIn copied and pasted into the foundations of many applications. You may be tempted to do this RSS Feed Vim eo because of the quick progress that you see at the start of a project. However, the time saved will be relatively low compared to the time spent on having to Related Posts maintain, scale and often refactor your application later in the project. One way to better The Sencha Class System prepare for writing a solid architecture is to follow certain conventions and define application Nov 29 views, models, stores and controllers before actually implementing them. In this article, we’ll Architecting Your App in Ext take a look at a popular application and discuss how we might architect the user interface to JS 4, Part 3 Sep 19 create a solid foundation. Ext Designer 1.2 Overview Code Organization Aug 4 Any ideas? Application architecture is as much If you have any ideas to about providing structure and improve this article, please consistency as it is about actual classes let us know and framework code. Building a good architecture unlocks a number of important 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 In Ext JS 4, we have defined conventions that you should consider following when building your applications — most notably a unified directory structure. This simple structure places all classes into the app folder, which in turn contains sub-folders to www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/ 1/7
  • 2. namespace your models, views, controllers and stores. 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 SDK Tools beta. Striking a Balance 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. 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 many views. www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/ 2/7
  • 3. Splitting up the UI into too many 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 many 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. 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 many 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 www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/ 3/7
  • 4. 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 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 should really become one, or a view is too generic and should be split into multiple views, but it helps to start out with a good base. I think we’ve done that here. Models 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. We’ve decided to use only two models — Song and Station. We could have defined two www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/ 4/7
  • 5. 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. Stores Now that we’ve thought about the models our application will use, lets do the same for stores. 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. Controllers There are several ways you can distribute the application’s responsibilities across your application’s controllers. Let’s start by thinking about the different controllers we need in this example. www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/ 5/7
  • 6. 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 could have created additional Controllers, one for managing playback and another for searching stations, I think we’ve found a good separation of responsibilities. Measure Twice , Cut Once 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. Continue on to Architecting Your App in Ext JS 4, Part 2 Share this post: Leave a reply Written by Tommy Maintz Tommy Maintz is the original lead 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. Follow Tommy on Twitter 0 Comments K Ramesh Babu 12 months ago What is the motivation behind the ‘stores’ concept? Should we call this paradigm MVCS rather than MVC? Ali 11 months ago Isn’t a store part of the model? At least, that’s how MVC sees it. Also don’t understand the reason for a clientside “controller”. Should that contain all www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/ 6/7
  • 7. clientside handlers, and then redirect to the serverside MVC controller? Would like to see this more detailed.. Ed Spencer Sencha Employee 11 months ago Stores are really nothing more than a glorified array of Model *instances*. They’re mostly used in our data-bound components like grids. We could just use an array but the Store gives all kinds of benefits like sorting, filtering and firing events whenever Model instances are added, removed or updated, which makes acting on those changes much easier Commenting is not available in this channel entry. Find Sencha developers at SenchaDevs © 2012 Sencha Inc. All rights reserved. www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/ 7/7