The In Action PatternBuilding extensible and maintainable            applications              JAY GARCIA,            TDG ...
A little about me...Author of Ext JS in Action   Evangelist since 2006   Community Supporter    Extensions & Plugins Produ...
AgendaDefine the In Action Pattern           Along the way...         Learn about benefits    Define rules for naming classes...
The In Action Pattern
The In Action Pattern   A set of suggestions that define how web applications    can be developed withreusability and maint...
It’s also...A way of thinking of your code   as a set of modular and  reusable pieces instead of        balls of code or  ...
Code segmentation  Class naming guidelines  Namespace organizationClass abstraction techniques   Simple coding practices
Code Segmentation- Our first rule is about code segmentation
Suggestion #1                    One class per JavaScript file- developers are placing many classes in a single file or deve...
- Instead of looking through each file, I run some unix commandsto parse through the application code.- These are the top 5...
- One file “appointmentForms” is over 5 thousand lines long!!- Its name is a clear indication that there is more than one F...
- Again, I use the unix grep command to find instances ofExt.extend inside the file- We can see that many lines appeared as ...
Eleven!- *That’s eleven instances* of Ext.extend in *one file!*-
- Looking at the output, we can quickly spot a pattern.
- Inside of the file, they named their classes rather well- All of these classes sure would be much easier to manage if the...
Why single class per file?                        Code is manageable.                     Reduces debugging pains.         ...
Naming classes                            (and files)- Here’s where we get into the discussion about naming yourclasses pro...
Suggestion #2                   Name classes according to                           purpose.- While this may seem obvious ...
XFi.grid.GridPanel- While doing a code review for a customer, I found file namedXFi.grid.GridPanel- This GridPanel was used...
XFi.grid.GridPanel- It should be quite obvious that the name “GridPanel” for a classused in an application is vague.
XFi.grid.GridPanel                   XFi.grid.ReportingGridPanel- So, I suggested they change the name to ReportingGridPan...
XFi.grid.ReportingGridPanel                              XFi.grid.                     AbstractReportingGridPanel- Since t...
Abstract Reporting GridPanel                     Abstract ?   Purpose   Superclass- We can break out class names into thre...
Suggestion #3                     Organize namespace by                        screens/purpose- While this may seem obviou...
- For this customer, I found files that were named in a way thatprovided some level of organization, but these files were al...
We’ll use Suggestion #1,to clean things up a bit..
ArchivePanel                        XFi                              ExplorerPanel                     Namespace      confi...
Code Segmentation- For this, we’ll discuss another facet of code segmentation
Suggestion #3                     Break code up into layers- As we’ll soon learn, breaking your code up into packages isgo...
Ext JS- Any other base framework could exist, but for argument’s sake,we’ll use Ext JS.
App                               Ext JS- Application code typically rides on top of your base framework.- This is OK for ...
Reusability layer                                   Ext JS- Enter the “Reusability layer”.- In the reusability layer, you ...
Abstract Reporting GridPanel                  Abstract ?   Purpose   Superclass- Remember the AbstractReportingGridPanel?
el                                                Pan                                          G rid                      ...
Workflow/business logic                            Reusability layer                                  Ext JS- The app layer...
Workflow/business logic                                Reusability layer                                      Ext JS- In th...
App1 App2 App3 App4                             Reusability layer                                   Ext JS- In this extens...
Abstraction guidelines- For this, we’ll again discuss code segmentation
Suggestion #4     Abstract repeatable patternsOK
Configuring a                          Paging GridPanel                  Store                  ColumnModel                ...
- In this slide, we have an abstract class for our reusable layer thatwill take care of all of the repeatable patterns for...
- When looking at this extension to the AbstractPagingGridPanel,we can see that all the code is going to be responsible fo...
Summary- OK, we’ve gone through a lot. Lets sum things up.
Suggestion #1One class per JavaScript file
Suggestion #2Name classes according to        purpose.
Suggestion #3Organize namespace by   screens/purpose
Suggestion #3Break code up into layers
Suggestion #4Abstract repeatable patterns
In closing...
...on the book front          AnnouncingExt JS in Action Second Edition              (4.0)   Sencha Touch In Action
Thank you!http://manning.com/garcia          http://tdg-i.com      Twitter: @_jdg, @tdgi        jgarcia@tdg-i.com
The "In Action" Pattern for RIA Development
Upcoming SlideShare
Loading in …5
×

The "In Action" Pattern for RIA Development

2,400 views

Published on

With RIAs growing in complexity, JavaScript developers today have to make tough choices on how to organize their code and do so in a manner that both allows for growth and ease of management. Often the wrong choices are made, impacting the maintenance cycles of the applications. In this session, we'll discuss exactly how to organize your code from ground up by exploring popular patterns used by today's industry leaders.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,400
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
69
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The "In Action" Pattern for RIA Development

  1. 1. The In Action PatternBuilding extensible and maintainable applications JAY GARCIA, TDG INNOVATIONS
  2. 2. A little about me...Author of Ext JS in Action Evangelist since 2006 Community Supporter Extensions & Plugins Producer of Screencasts
  3. 3. AgendaDefine the In Action Pattern Along the way... Learn about benefits Define rules for naming classes Walk through code organization
  4. 4. The In Action Pattern
  5. 5. The In Action Pattern A set of suggestions that define how web applications can be developed withreusability and maintainability in mind.
  6. 6. It’s also...A way of thinking of your code as a set of modular and reusable pieces instead of balls of code or “Function Soup”
  7. 7. Code segmentation Class naming guidelines Namespace organizationClass abstraction techniques Simple coding practices
  8. 8. Code Segmentation- Our first rule is about code segmentation
  9. 9. Suggestion #1 One class per JavaScript file- developers are placing many classes in a single file or developingtheir entire app- obviously this is not good practice- Let me walk you through a quick example of what I’ve seen out inthe field
  10. 10. - Instead of looking through each file, I run some unix commandsto parse through the application code.- These are the top 5 largest JS files in their code base- Seeing numbers like these are concerning.
  11. 11. - One file “appointmentForms” is over 5 thousand lines long!!- Its name is a clear indication that there is more than one Form- Lets take a closer look
  12. 12. - Again, I use the unix grep command to find instances ofExt.extend inside the file- We can see that many lines appeared as a result- For those of you who can’t see in the back
  13. 13. Eleven!- *That’s eleven instances* of Ext.extend in *one file!*-
  14. 14. - Looking at the output, we can quickly spot a pattern.
  15. 15. - Inside of the file, they named their classes rather well- All of these classes sure would be much easier to manage if theywere in separate files.
  16. 16. Why single class per file? Code is manageable. Reduces debugging pains. Helps you focus!- Naturally, code that is broken up into chunks is moremanageable.- Scrolling through thousands of lines for one file is justunproductive.- Debugging a few hundred lines is much easier than a fewthousand.- It is exponentially easier to focus on code that is broken up.- OK, we know to break up our code into classes. How do weorganize them?
  17. 17. Naming classes (and files)- Here’s where we get into the discussion about naming yourclasses properly, which will lead us into our second and third rules.(aside) Some of this stuff will seem familiar to you, if you do a lotof programming on the server side with lower level languages.
  18. 18. Suggestion #2 Name classes according to purpose.- While this may seem obvious to some, I’m always surprised howdevelopers name their classes.- Lets go through another example of what I’ve seen out there.
  19. 19. XFi.grid.GridPanel- While doing a code review for a customer, I found file namedXFi.grid.GridPanel- This GridPanel was used for reporting screens in theirapplication.
  20. 20. XFi.grid.GridPanel- It should be quite obvious that the name “GridPanel” for a classused in an application is vague.
  21. 21. XFi.grid.GridPanel XFi.grid.ReportingGridPanel- So, I suggested they change the name to ReportingGridPanel- Prepending the word “Reporting” in the class name immediatelytells us the purpose this class serves.- After some time, I learned that this class was actually notinstantiated, rather was extended for various reporting screens.- Time for another name change!
  22. 22. XFi.grid.ReportingGridPanel XFi.grid. AbstractReportingGridPanel- Since this class is not directly instantiated, and is /abstract/, itshould be named as such.- Prepending the word “Abstract” to “ReportingGridPanel” tells usexactly what purpose it serves.- Given this exercise, we can deduce a simple formula to name ourclasses.
  23. 23. Abstract Reporting GridPanel Abstract ? Purpose Superclass- We can break out class names into three pieces- The Abstract portion can be omitted if this is not a base class.- The negative side effect of this pattern is the potential for longclass and file names.- I’d rather have to deal w/ that than not knowing how classes arepurposed.- OK, we know how to name our classes, but how do we organizethem?
  24. 24. Suggestion #3 Organize namespace by screens/purpose- While this may seem obvious to some, I’m always surprised howdevelopers name their classes.- Lets go through another example of what I’ve seen out there.
  25. 25. - For this customer, I found files that were named in a way thatprovided some level of organization, but these files were all in theroot of their javascript directory.- For the most part, the names told the tail of the screen, section,and purpose.- This could be better managed if they simply used directories toorganize their files.(aside) If you find yourself mixing hyphens and underscores innames, please stop.
  26. 26. We’ll use Suggestion #1,to clean things up a bit..
  27. 27. ArchivePanel XFi ExplorerPanel Namespace configExplorer TemplatesContainer RunNowPanel job JobMgmtPanel jobs CustomIssuesPanel configMgmt PolicyDesignPanel SpecsPanel TriggeredJobsPanel ConfigMgmtPanel- This diagram represents the “configMgmt” namespace (or package),which resides inside of the XFi namespace.- In this case, configMgmt is a major screen with sub-screens. Each subscreen that has multiple classes are split into their own namespace.- Organizing code in this fashion will allow your code to be much moremanageable, not to mention clean up the root of your JS directory!- This level of code organization can benefit your projects, but can quicklyget cluttered, this is where further code segmentation can come into play.
  28. 28. Code Segmentation- For this, we’ll discuss another facet of code segmentation
  29. 29. Suggestion #3 Break code up into layers- As we’ll soon learn, breaking your code up into packages isgood, but is not the final step in JS code organization.- For this we’ll have to break code up into layers.- We’ll begin by discussing how web apps are built with baseframeworks.
  30. 30. Ext JS- Any other base framework could exist, but for argument’s sake,we’ll use Ext JS.
  31. 31. App Ext JS- Application code typically rides on top of your base framework.- This is OK for smaller apps, but for medium to larger apps, thisquickly gets to be unmanageable.- Not to mention, components that are reusable all around the apphas no logical separation from the app namespace.
  32. 32. Reusability layer Ext JS- Enter the “Reusability layer”.- In the reusability layer, you typically place components that havelittle to no workflow/application logic.- So-called “preconfigured” classes could exist here.
  33. 33. Abstract Reporting GridPanel Abstract ? Purpose Superclass- Remember the AbstractReportingGridPanel?
  34. 34. el Pan G rid ing Abst p ort ractE d e itorW ra ctR indow Abst Reusability layer Ext JS- Such a class belongs in the Reusability layer.- Think of it as your own custom framework of extensions thatExtend Ext JS or any other library.- It is after we have a place for our reusability later that we canplace our application layer.
  35. 35. Workflow/business logic Reusability layer Ext JS- The app layer (dubbed workflow/business logic), is now placedon top of the reusability layer, which sits on top of our baseframework of choice.
  36. 36. Workflow/business logic Reusability layer Ext JS- In this model, the app layer implements the usability layer *and* baseframework layers.- The reusability layer only implements the base frameworks, and knowsnothing of the app layer above.(aside)Keep in mind that the base layer, could contain one or more JSlibraries, such as Ext JS, raphael, and more.- After working through this model for a rather large single page app, Irealized that this model could be further expanded for larger applicationsor multiple projects requiring portions of the resusable layer.
  37. 37. App1 App2 App3 App4 Reusability layer Ext JS- In this extension to our layer model, we have multipleapplications riding on top of our reusability layer.- I’ve worked on some projects where multiple single page appsrequired to share classes across apps. This is where this modelreally shines.- With tools like JSBuilder, you could develop specific packages ofyour reusable components for deployment to production.
  38. 38. Abstraction guidelines- For this, we’ll again discuss code segmentation
  39. 39. Suggestion #4 Abstract repeatable patternsOK
  40. 40. Configuring a Paging GridPanel Store ColumnModel ViewConfig SelectionModel PagingToolbar- Configuring a paging GridPanel is a repeatable pattern.- If you think about it, there is a lot of duplicated code when doingthis by hand every single time.- This is a good case for an abstract class.
  41. 41. - In this slide, we have an abstract class for our reusable layer thatwill take care of all of the repeatable patterns for us.- What we see are factory methods to construct the variouscomplex configuration options for the GridPanel.<DEMO :: Look at the real code behind this class>- Here’s what an extension to this class might look like:
  42. 42. - When looking at this extension to the AbstractPagingGridPanel,we can see that all the code is going to be responsible for isconstructing the fields for the records and columns.- This class would exist in our application tier, and extends a piecefrom our reusable tier.- Some have asked, “why the factory pattern instead of usinggeneric arrays?”- My answer is simple : “To give the end-class the choice onwhether or not it will execute some business-specific logic beforereturning the configuration.
  43. 43. Summary- OK, we’ve gone through a lot. Lets sum things up.
  44. 44. Suggestion #1One class per JavaScript file
  45. 45. Suggestion #2Name classes according to purpose.
  46. 46. Suggestion #3Organize namespace by screens/purpose
  47. 47. Suggestion #3Break code up into layers
  48. 48. Suggestion #4Abstract repeatable patterns
  49. 49. In closing...
  50. 50. ...on the book front AnnouncingExt JS in Action Second Edition (4.0) Sencha Touch In Action
  51. 51. Thank you!http://manning.com/garcia http://tdg-i.com Twitter: @_jdg, @tdgi jgarcia@tdg-i.com

×