13 Replies Latest reply on Oct 10, 2011 1:16 PM by FM_Flame

    What do you find to be best practice when it comes to writing AS code to manage a big app ?

    FM_Flame Level 1

      Right now I am considering 3 options:

       

      1) I write all the code in a root component that extends group for example like this:

      <s:Application>

           <s:AppGroup>

                     <s:List />

           </s:AppGroup>

      </s:Application>

       

      So in it I will write the code to manage the list. Ok but Imagine now I have 10 views inside that AppGroup each having a list which needs to be managed. So here comes my option 2.

       

      2) I write code in the AppGroup component to manage what's on it's level and for new level (view for example) I create another component like ViewGroup1, ViewGroup2 etc which extends group or something else and I write code in it to manage what's inside of it. This looks like this:

       

      <s:Application>

           <s:AppGroup>

                <s:ViewGroup1>

                     <s:List />

                </s:ViewGroup1>

                <s:ViewGroup2>

                     <s:List />

                </s:ViewGroup2>

           </s:AppGroup>

      </s:Application>

       

      So this time the code to manage the views will be in AppGroup and the code for managing the Lists will be in the ViewGroup1/2 component.

       

      3) of course sometimes mixed architecture if for example the ViewGroup1 is very simple and doesn't have list but a label or something like that the code could be written in the AppGroup.

       

       

      What do you think of this code structure? Is my logic good or there's something else considered a best practice at the moment ? Thanks!

        • 1. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
          pauland Level 4

          You need to learn about OO design and the MVC (Model view Controller) design pattern. Write as little code in MXML components as possible. There are various frameworks out there - Cairngorm, PureMVC, RoboLegs, Swiz,etc.. that elaborate on the MVC theme.

           

          Above all don't use MXML components as a repository for code to put your app logic in.

          • 2. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
            FM_Flame Level 1

            Hi, thanks for the answer. I prefer not to use a framework for the framework at this point (although I've gathered some info to get to know the MVCs of the frameworks you mentioned).

             

            Above all don't use MXML components as a repository for code to put your app logic in.

            Actually I was extending the AS component Group which is kinda the base flex component to build on and if the component meet my requirements then I extend the skinnableComponent rather than Group and write the logic for it's skin parts in it like the flex team does for it's components. But as you know I can't make my app one big skinnableComponent that's why I used group to mimic that technique and I write the logic after creation complete. And at each level as I mentioned in my previous post cause the app builds up and I can't write all the code in one class, I extend more groups and write the code in them. It also makes it easy to reference them and call their functions. There are many examples written with as into mxml code. I tried to put it in as only in this way and in the mxml file of the group I only have the layout structure of my components.

             

            So from your answer I do get your point extending group to write my app logic even not mxml is using a component as a repository for my code. Ok, but what do you suggest then ? Cause If I don't use group but I create some custom class of mine than I will have to reference that group so it's pretty much the same thing to me, so to understand you, please explain how you would do it without any frameworks please, I want to keep things as flex framework only as possible.

             

            Thanks!

            • 3. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
              pauland Level 4

              You need to understand the basic principles of the MVC architecture, even if you don't use an established framework.

               

              UI components are for displaying UI elements, not for the application logic.

               

              My application logic sits in a controller class. The UI elements report changes to the controller class using events (they don't need to know what the controller will do with the event). The controller class manipulates the underlying data in a seperate data model and the UI is bound to the data model to reflect changes in the data. That's the basic principle. Get to know MVC before embarking on a large project.

              • 4. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                FM_Flame Level 1

                http://tv.adobe.com/watch/flex-in-a-week-day-2/introducing-the-mvc-pattern/

                 

                The MVC I am currenly using is taken from the video above, with the difference I write my AS code not in the view mxml file but in AS. To do that as I already explained I extend the Group as CustomGroup.as for example and then I use it to create a MXML component - in the end I have 1 mxml file for UI components layout and 1 AS file to handle that view. The controller is my Main app as in this example which gets data and passes it to the view.

                 

                This sounds a lot like:

                My application logic sits in a controller class. The UI elements report changes to the controller class using events (they don't need to know what the controller will do with the event). The controller class manipulates the underlying data in a seperate data model and the UI is bound to the data model to reflect changes in the data. That's the basic principle. Get to know MVC before embarking on a large project.

                 

                I started asking for best practices here because having 1 file to be your controller is doomed to have a LOT of code if the project is very big and as the video suggest this is not a good practice for big projects. Having your answer I can't really figure out what's wrong with my approach and how do I extend it - without using Framework for the Framework. So Is your advice "start using a Framework" ? If it is ok let me know which one you think is best - maybe Adobe's Cairngorm 3 ?

                 

                But apart from that when it comes to MVC without additional Framework, could you be more specific about (I will repeat myself) "what's wrong with my approach and how do I extend it" ?

                 

                Thanks.

                • 5. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                  bucpatr1

                  The is no hard rule that you are only allowed one controller class per application. If ViewGroup1/2 are complex enough you may want to move the logic for those components into seperate controllers. As for your approach, there is no need to extend Group unless you actually plan to use the component as a group.

                   

                  Let take the example of a typical CRUD application. You are going to have an Application, usually with a list of existing items as the main view. You are also going to have additional views for creating new items and editing existing ones. So you have an Application component that displays the list and the navigation controls. You also have a top level controller that is responsible for handling anything that goes on in the top level view, including hiding/displaying the secondary views. For the creation/editing views your are going to have addional mxml components based on a container like Panel. Each of those major views will have a corresponding controller class that is resposible for things that are specific to that view. 

                  • 6. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                    UbuntuPenguin Level 4

                    Like Pauland said , the first and foremost step is to learn the principles of OOP and MVC/MVP.  There isn't a single framework in the world that can help you write decent code if you don't know the "whys" and "whens" of architecture.

                     

                    The problem with using a Group as a repository is that it is a visual component ( the V in MVC/MVP ) and not a controller, presenter or model class.  At first it may seem harmless, but long term you may find yourself implementing business logic in Groups which you are using as actual visual components.  You may also want to google the term "separation of concern" which will get you pretty far in terms of what responsibilities a class should have.

                     

                    As far as frameworks go there are many to choose from Mate, Swiz, Parsley, Robotlegs.  For the most part they are all very similar as they work off of dependency injection (DI) except for Robotlegs, I think that is an MVC framework.  Basically pick the one that you feel has the best documentation and can help you get off the ground quickly and go with it.  In terms of Cairngorm 3 it really isn't a complete framework, it works with other frameworks which came about as the first generation frameworks (Cairngorm and PureMVC) where fairly heavy in application footprint and light on documentation.

                     

                    You could use Flex only, but that would be dependent on singletons.  While they may feel fun and exhilarating they are prime candidates for creating brittle and hard to test and debug code.  I stay away from them like its my job, unless the requirement is that there be only ONE of a certain class ( PopUpManager for instance ).

                    • 7. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                      pauland Level 4

                      Just like to add - the controllers don't contain all your application code - that should be sitting in classes that the controller will call and manipulate, so the controller is just a hub that binds together the meat of the application and the data and UI. You don't need to have a controller with thousands of lines of code. You don't need any class with thousands and thousands of lines of code..

                      • 8. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                        bucpatr1 Level 2

                        I you do decide to go with a framework, I would also highly recomend the Tide framework from GraniteDS.

                        • 9. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                          UbuntuPenguin Level 4

                          @bucaptr1 

                           

                          I checked out Tide, it looks kind of "violent" for a beginner don't you think ?  Not trying to start a holy war, but it seems like Tide excels at tying together the Flex side with the server side push and object state, not exactly for someone who is a beginner.

                          • 10. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                            bucpatr1 Level 2

                            It is true that trying to use the entire Tide framework would be overkill for a beginner. The nice thing about it though is that GraniteDS is very flexible. You can use just the DI features and not worry about more advanced things like code generation.

                            • 11. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                              FM_Flame Level 1

                              Thank you all for the thoughts. Could we please stick to flex only for now...

                               

                              Currently I have a project where I see this structure:

                              <Application creationComplete="init();">

                                   <fx:Script source="MainApp.as" /> - all initialization code is here

                                   <components /> - many components
                              </Application>

                              In the creation complete of the Application which is in MainApp.as, dataProviders are set and a controller class is initiated to which the Application is passed as Object and everything is manipulated from that controller. As you mentioned I guess you can always create additional controllers and pass them the Application or some other components from which they could start controlling so to speak.

                               

                              I am not sure if this structure is good or not, I started comparing it with mine and I ended up here...

                              What I see at this point compared to mine is that:

                              - in the included MainApp.as in Application I have question marks when i type something like "stage" in a function, I needs me to type "this.stage", which I don't like. To me it looks like including is bad and maybe everything should have started with creationComplete in the Application mxml with importing and initiating the controller with passing him the Application right away. Is that correct?

                              - in the example given above, after MainApp initiates the controller by passing him the Application, the controller looses all of the nice code hints since now the Application is an object... maybe it's wrong for it to be object ? Should it be something else?

                              Compared to my approach when I separate my logic into AS Group which is then extended as MXML Group. All I have to do is declare the instances in AS which I have as IDs in MXML and voila... I can control them and write their logic with all the nice code hints present.

                               

                              So basicly at this point you say instead of extending Group in AS every time I want to separate logic, write a controller right ?

                               

                              Here is what I summarized for now:

                              1) Create a RootController class

                              2) Initiate it in the creation complete of the Application passing the Application (as what type - object or something else?)

                              3) manage all logic in that controller

                              4) if parts of the application are too complex they can be separated into additional controllers.

                              5) the RootController can initiate SubControllers which can initiate SubSubControllers

                              6) to all controllers a component must be passed as a starting point for the logic

                               

                              Is this correct? If yes, what about the code hinting compared to my approach?

                               

                              Would be very nice if someone of you could make a very very very simple app with the model you are talking about, or if you have an article you took it from share the link! Thanks!

                              • 12. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                                bucpatr1 Level 2

                                Sounds like you are on the right track. If I understand correctly what you mean by 'code hints', what you want to do is pass in your application component as whatever Class it actually is. So if the class of your main app is com.mypackage.MyApp then in your controller you would have a method along the lines of:

                                 

                                public function init( myApp:com.mypackage.MyApp):void

                                {

                                     ...

                                }

                                 

                                If you do that you should have access to all the code hints for that class.

                                • 13. Re: What do you find to be best practice when it comes to writing AS code to manage a big app ?
                                  FM_Flame Level 1

                                  I just tested this so here is my final model:

                                   

                                  1) Create a RootController class like this:

                                   

                                  package fmn

                                  {

                                      public class RootController

                                      {

                                          private var application:SomeProject;   

                                          public function RootController(application:SomeProject)

                                          {

                                              this.application = application;

                                          }

                                      }

                                  }

                                   

                                  2) Initiate it in the creation complete of the Application passing the Application:

                                   

                                  <s:Application creationComplete="application1_creationCompleteHandler(event)">

                                      <fx:Script>

                                          <![CDATA[

                                              import fmn.RootController;     

                                              import mx.events.FlexEvent;

                                             

                                              private var rootController:RootController;

                                             

                                              protected function application1_creationCompleteHandler(event:FlexEvent):void

                                              {

                                                  rootController = new RootController(this);               

                                              }

                                             

                                          ]]>

                                      </fx:Script>

                                  </s:Application>

                                   

                                  3) manage all logic in that controller

                                  4) if parts of the application are too complex they can be separated into additional controllers.

                                  5) the RootController can initiate SubControllers which can initiate SubSubControllers etc

                                  6) to all controllers a component instance must be passed in the constructor as a starting point for the logic

                                   

                                  Any corrections to this structure? Something to add ? Thanks!