PDA

View Full Version : App diagramation: Doubts and best practices



pret
9 Nov 2010, 10:07 AM
Hi everyone!

I've always developed apps in a very different way than ExtJS seems to manage. I'd like to ask you which would be the best practices to follow in this matter.

In a simple and conventional web app, you send an HTTP request and receive a layout with a view/s inside it. Then, if the app uses AJAX to load sections, just make another HTTP request to ask just for the view and you put it inside the layout, in a typical "content" div or something like that.

Now, which would be the best way to do this on an desktop-like app that is handled 100% by ExtJS in terms of the view? (I mean, the layout and every view is handled by ExtJS components). You download the whole app in the very first request and then just interact with the server via JSON/XML web services, or you just download the layout and, for example, the "dashboard" section and, if the user wants to change the section, it makes an HTTP request via AJAX and you send something like this:



<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript">

// Here you create new Components that make up the section
// and call the App's panels to show them.

</script>


Sorry if this is a newbie question, but this is like a "new world" for me and I want to start with the right foot.

My idea es to create a class diagram like this. Suppose my company is "OF":

OF.js (namespace "OF" and class OF with global constants and static methods)
OF/App/App.js (namespace "OF.App" and class "App" with the Viewport, global Panels and a "init" method that initialize everything, with events firing up upon the initialization and other stuff)
OF/App/Module/Module.js (namespace "OF.App.Module" and a class "Module" with basic and reusable stuff for modules)
OF/App/Module/SomeModule.js (class SomeModule inside "OF.App.Module" namespace with specific stuff for that module, like forms, grids, etc.


So, having this structure. Which would be the best way to interact with the server? download everything upon the very first request and, on a click event in a button of the toolbar call, for example, OF.App.Module.SomeModule.show() and change the contents of the Panels with the Module stuff? or is a better way just to make an HTTP request and return:



<script type="text/javascript" src="App/Module/SomeModule.js"></script>
<script type="text/javascript">

// Do some stuff first

OF.App.Module.SomeModule.show();

// Do other stuff

</script>




Thanks in advance. And if this is a dumb question, don't be cruel! :)

Foster
9 Nov 2010, 10:27 AM
Some of what you are saying sounds like Content-Centric AJAX versus Data-Centric AJAX

I think there are arguments for both, but in my app we use Data-Centrix AJAX, meaning I have all of the javascript code on the client, which renders the HTML app the way I want it to look, and I make a bunch of AJAX calls just to get data and populate JsonStores, etc, to populate my grids, trees, and other data-aware components

EDIT: oh yeah and someone else posted this link earlier which talks about setting up the folder structures, it sounded like you have a question on that as well:
http://www.sencha.com/learn/Tutorial:Writing_a_Big_Application_in_Ext

pret
9 Nov 2010, 11:01 AM
Thanks for replying and for the link! I'll take a look at it.

pret
10 Nov 2010, 6:36 AM
After reading the link you've posted I see that the way I was thinking about is not so far from what the writer of that tutorial suggested. But one thing came to my mind after reading and planning my app:

I'm starting to develop a big "desktop-like" application with a lot of modules, and the AJAX way I choose is the one you described as "Data Centric AJAX". But my question is, is there a chance to have memory issues loading all at once? I'm planning to have a LOT of classes to avoid duplication and promote reusability, but having 10-15 big modules is certainly making me wonder how could I handle memory issues. As I said in my first post, is the first time I'll develop an almost 100% "local app", so I want to be sure how to do things on the right way :)

Is this a topic to be worried about? What do I have to know to avoid problems?


Thanks in advance!

Foster
10 Nov 2010, 6:50 AM
There has been some discussion on the board about Lazy Instantation/Lazy loading, which may be what you are looking for. EG
http://www.sencha.com/forum/showthread.php?112139-Lazily-Instantiation-to-decrease-load-on-application&highlight=lazy+load

The way I think about it is that since I have 1 server and many clients, I'd rather use up more memory on the client and only have the server process small bits and pieces as quickly as possible. Sure you want to be as efficient as possible, and if you have 15 modules but the client only logs in and uses 1 or 2 modules, why load all 15 into memory, but I created one single .JS file which was "MIN"ified, so my server sends this file to the client and its up to the app to be efficient

pret
10 Nov 2010, 9:54 AM
Hi Foster. I'm familiarized with the concept of lazy loading. It's nice to know that ExtJS has it in its components! this would solve the problem with memory usage on initialization. And building a big JS with every module file would solve bandwith usage problems.


Thanks!

rbastic
10 Nov 2010, 10:20 AM
Another option is the use of iframes.

pret
10 Nov 2010, 10:34 AM
Hi rbastic! I didn't read about iframe usage on ExtJS yet (I'm still learning this great lib :)). How does it work and what would be the benefit of using it?


Thanks!

rbastic
10 Nov 2010, 10:36 AM
There is an IFrame component in ExtJS and there is an IFrame tag in HTML.

Essentially, when opening a new window, you would use the IFrame component to render the inner panel of the window... And that would rely on a separate URL for whatever sub-application you wanted to display in the window.

Look into the IFrame tag a bit. If you're still curious, I'll post some sample code.

pret
10 Nov 2010, 10:58 AM
Yes, I know about the IFrame HTML tag (didn't know about the IFrame component though). Using it in that way would has some benefit in terms of memory usage? (I guess not because the modules are always the same, BUT.. I don't know if using a frame makes de browser manage the memory in some another way, or if changing to another module, the reload on the iframe releases the memory used by the old module).

And talking about separation of modules, which way do you find more useful / optimized / maintainable? Loading all JS code at once and show the appropiate module, having just server communication via JSON web services , or using an IFrame like you said and separate each module with its own web access url / controller / views?


Thanks.

rbastic
10 Nov 2010, 11:04 AM
Yes, I know about the IFrame HTML tag (didn't know about the IFrame component though). Using it in that way would has some benefit in terms of memory usage? (I guess not because the modules are always the same, BUT.. I don't know if using a frame makes de browser manage the memory in some another way, or if changing to another module, the reload on the iframe releases the memory used by the old module).


If you have a huge webtop application (like I do) with dozens of applications -- it would load faster to just load the desktop code on login than load all the application code alongside it.



And talking about separation of modules, which way do you find more useful / optimized / maintainable? Loading all JS code at once and show the appropiate module, having just server communication via JSON web services , or using an IFrame like you said and separate each module with its own web access url / controller / views?


Thanks.

I think it really all has to do with the size/complexity of the app. If you have a "big" CRM application, that might only be 5000 lines of code. If you've got 50+ apps like I do, then you're talking a *LOT* of code. I wouldn't ask the user to load 500,000 lines of front-end code all at once. That's where IFrames come in handy. Each app is only 300-1000 lines of front-end code -- but loading them all at once would be intolerably slow. *especially* on a mobile device.

-Ryan

pret
10 Nov 2010, 11:12 AM
Good point. My app won't be that big but I'm planning to extend it with (I hope) many modules. So it's a good idea to take a look at the IFrame way you suggested. Even if it won't be that big, it's better to be prepared.


Thanks a lot for your help!