PDA

View Full Version : YSlow and Best Practices



Animal
10 Feb 2009, 5:42 AM
[ This discussion was moved by @mystix from Examples and Extras > Ext Sightings ]
[ original thread can be found here: http://www.extjs.com/forum/showthread.php?p=286045#post286045 ]

These implementations are looking good, and obviously show good Javascript skills, and a good knowledge of Ext.

But they should use YSLOW.

sonatype.org has 48 javascript files loaded seperately. A+ for gzipping them, but what about yuicompressor?

Released javascript should be concatenated up into one file, yuicompressed, and then served gzipped.

mask_hot
10 Feb 2009, 5:58 AM
These implementations are looking good, and obviously show good Javascript skills, and a good knowledge of Ext.

But they should use YSLOW.

sonatype.org has 48 javascript files loaded seperately. A+ for gzipping them, but what about yuicompressor?

Released javascript should be concatenated up into one file, yuicompressed, and then served gzipped.
can we consider this as a recommended best practice?

Animal
10 Feb 2009, 7:51 AM
Yes. In live code.

Not while developing obviously.

mask_hot
10 Feb 2009, 7:57 AM
Yes. In live code.

Not while developing obviously.

I just built my own Ext and I was thinking of this:
Should it be possible to use the "Ext Home-builder" engine to generate our own optimized JS?
In my case I have over 60 JS files with inter-dependance, and concanating them in the right order will not be an obvious task.

Is this engine open and available?

Animal
10 Feb 2009, 10:59 AM
You use the ext builder software locally? That's driven by XML, so if you add your own files to the XML, it should build your files into the end product.

brookd
10 Feb 2009, 1:00 PM
Is the YUICompressor different from the compression done when using jsbuilder? I am using jsbuilder to combine and compress my JS. Is there something better?

Also, what about variable name shortening? I have a bad habit (coming from server side programming where filesize does not matter and descriptive variable names are a good thing) of making long variable and class names. Now I see this is bloating my code.

Should I just do a big find and replace to shorten variable and class names selectively, or is there a compression engine that will do this. I don't think jsbuilder does this..

mask_hot
10 Feb 2009, 2:02 PM
You use the ext builder software locally? That's driven by XML, so if you add your own files to the XML, it should build your files into the end product.


No I did it online.
But if I well understand, as it is XML driven, it could be possible to use it for "personnal projects" ?

mystix
11 Feb 2009, 12:20 AM
[ moved posts from Examples and Extras > Ext Sightings to Open Discussion cos they were detracting from the main thread ]
[ feel free to rename this thread. ]

mask_hot
11 Feb 2009, 1:14 AM
Good idea Mystix. :)



So, is it possible to the Ext team to provide their "Builder" to build personnal projects?

Animal
11 Feb 2009, 1:56 AM
If you have the ext builder, look at the jsb file.

I haven't investigated it, but its XML, so you should be able to figure out hwo to edit it to include your files in the build.

And it doesn't compress the output, it sjust removes comments and blank lines. The result should be run through yuicompressor to achieve optimum packing.

And the result should be served gzipped.

mask_hot
11 Feb 2009, 2:02 AM
But I need the Ext builder locally for that, and I htink I don't have it :(

Animal
11 Feb 2009, 2:10 AM
http://extjs.com/learn/Tutorial:Building_Ext_From_Source#JS_Builder

mask_hot
11 Feb 2009, 2:37 AM
I'll sleep less dumb tonite :D

mask_hot
11 Feb 2009, 2:40 AM
Which max size is reasonnable for personnal JS (extjs excluded)?

I have now a 171ko file (unzipped).

Animal
11 Feb 2009, 3:14 AM
I don't know. We just use the complete ext-all.js, plus our javascript all concatenated into one huge file because its a single page app. We're prepared to take a hit shen the app is first launched. From then on, the user never leaves the page.

mask_hot
11 Feb 2009, 6:13 AM
Not an easy task to have in the right order the JS files... /:)

I had some issues to go from a JS on demand to JS-builded all in one...

In fact JSBuilder deleted too much lines like this :


// call parent
//*********************************************************************
FFv2.Root.Viewport.superclass.initComponent.apply(this, arguments);
//*********************************************************************


became


// call parent


even in debug file generation

SamuraiJack1
12 Feb 2009, 1:25 AM
I just built my own Ext and I was thinking of this:
Should it be possible to use the "Ext Home-builder" engine to generate our own optimized JS?
In my case I have over 60 JS files with inter-dependance, and concanating them in the right order will not be an obvious task.

Is this engine open and available?

http://extjs.com/learn/JScout, http://extjs.com/learn/Kanban

mask_hot
12 Feb 2009, 1:30 AM
Hi,

I just saw your post about jScout.
I think there is two (at least) schools here :
1- A unique big JS file (Animal, Saki, ...)
2- On Demand load (SamuraiJack, ...)

I cannot say which one is the best.

SamuraiJack1
12 Feb 2009, 1:38 AM
Hi

I'd say that, 1st approach is very suitable for classic html pages, where the functionality of each page is well-defined and known. And 2nd - for web-applications, where the most code is javascript (take a look at symbie.org - no server-side html at all).

Which one to use - depends from the nature of the project

mask_hot
12 Feb 2009, 1:46 AM
As I said earlier, I started using a OnDemand JS load ux, and this week I'm fighting with JS Builder to build a unique JS file.

I did not find JS Builder easy to organize my files (at least 60 JS files) and how to represent includes as I did in my OnDemand way.

I am going to have a look on jScout to see if it's easier than my first solution.

mask_hot
12 Feb 2009, 1:58 AM
Hi

I'd say that, 1st approach is very suitable for classic html pages, where the functionality of each page is well-defined and known. And 2nd - for web-applications, where the most code is javascript (take a look at symbie.org - no server-side html at all).

Which one to use - depends from the nature of the project

Niko,
I think jScout is not adapted in my case because I cannot install any perl module on my host as I don't have the hand on it.
Am I wrong?

SamuraiJack1
12 Feb 2009, 2:05 AM
Perl is not a requirement - I just used it to establish a small local web-server for testing. jScout is pure js solution.

SamuraiJack1
12 Feb 2009, 2:15 AM
jScout also has a package builder tool - Kanban, which allows to concatenate several inter-depended js files into one automatically (your current task as I understand), but unfortunately, it is currently not in production quality.

churcho
18 Mar 2009, 4:28 AM
Do you have a step by step description of how to achieve this? I believe its very important and I would like to give it a try.

What other options are out there?

SamuraiJack1
18 Mar 2009, 6:18 AM
For Kanban description take a look here - http://extjs.com/learn/Kanban
Though its more "proof of concept" description, not a production-ready tool.

As about other options, you may want to wait for release of a new major version of Joose (http://code.google.com/p/joose-js/) (should happen in the nearest future already). It will have built-in Kanban superseder tool - codename "Librarian", which will be suitable for production usage (more info: link1 (http://groups.google.com/group/joose-js/browse_thread/thread/90321e3e0daa3b1d), link2 (http://groups.google.com/group/joose-js/browse_thread/thread/62a2157b5636aa0e)).

Joose also have a bridge (http://extjs.com/forum/showthread.php?t=55968) to Ext.