PDA

View Full Version : Single Page Websites & ExtJS



Jonny
24 Apr 2008, 8:31 AM
Hello everyone, I

surfyogi
24 Apr 2008, 10:00 AM
I'm new as well, but have a fair bit of experience in single page apps. Looks to me like you are on the right track; loading your HTML first allows display of your basic layout immediately.

Ext usually needs to load it's output into dom elements, but can use document.body rather than divs. We don't usually worry about it too much because with Ext.onReady, I'm guessing that waits for Ext to load and be responsive, as well as document.body, but you may get better initial display if you put all your HTML first.

Ext has had a lot of performance issues (1.0 era) that seem to be steadily diminishing; lots of hope for 2.1, because I want to use it on a B2C site that needs some real performance in rendering the initial GUI.

There are probably some best practices you can find on most of this stuff, so please search for those links and post them here as a reference for all of us. I'm going to propose a few myself that I would love to see some comments on.

The best practices I'm counting on:

1) Gzip - ext-all.js is big, and you can build a smaller one but it's hard to give up anything but editor, tree and grid and still build a real app, so make sure you have Apache set up for gzip and you won't have to worry much about file sizes. Ext will compress from ~.5m to about 100k the first time somebody hits the site, and after that first page load, Ext should be cached for the rest of the session.

2) Build a custom ext-all.js so you are not downloading code to your app that it's not using. For me, not using grid, tree and editor right now, so those come out easily, reducing the lib size about 100k. Other items easy to take out, I have not yet discovered because there are many dependancies as soon as you use forms, dialogs, comboboxes and buttons.
3) Lazy rendering, lazing loading. Read about these new Ext features and make sure you are using them correctly. xtype is an important concept to use and understand. I'm still trying to userstand when it is entirely appropriate, when it is not, and when I should be using it, where I am not presently. It looks to me like xtype is not always possible to use, if you need hard constructors to pass to other components you want to nest within. Still looking at that but in general, xtype is an easy concept to use and grasp. Ext.reg is important as well, as far as extending a given Ext object and then making it globally available to your entire application.

4) Beyond what most would consider obvious above, I'm thinking there are many issues in the B2C space to be discussed as far as single page apps and things like user behavior analysis, advertising and SEO. These companies that do these things expect that a web site has various pages and each has a specific function. They pay out on user views based on page views, and they monitor user behavior and push users to your site, based on various pages in your site.... what if your site really only has one page?

I'm telling people that it can still work; ancillary pages that forward back to your single page app, etc. Once the user is in the main app, don't let them leave and you have the best user experience possible as far as interaction; but maybe not as far as advertisers and SEO companies are concerned. For example, if you put an event handler function that sends out tracking info on each button and link, then you can get by without separate pages for each function of your site (that would automatically be monitored). Of course, this is more work..

Still thinking about this but I think marketing is going to be tieing my hands on some of these decisions.

surfyogi
24 Apr 2008, 11:48 AM
Oh yeah,

5) JSON - use it. Since it is native to the browser, nothing will be more performant or easier to use. ScriptIO will allow you to do cross-domain apps with it if you need to, but simply using JSON in general will make your app lighter on both the client and server side.

Unless you have some reason not too (Enterprise app requires XML interchange with partners for example) and sometimes even if part of your app does use XML to open an API to vendors, you probably still want to use JSON.

I've noticed some great articles on how to integrate AJAX, JSON and STRUTS for example, so there is really no excuse not to use it. And XML parsers in the browser are slow, and a pain in the ass besides..