Lazy Loading Scripts

4 views
Skip to first unread message

afshin

unread,
Jun 24, 2010, 4:51:51 PM6/24/10
to jquery-claypool
Hi,

In jquery-claypool applications, all scripts load with first page, but
activate in a lazy maner. The thing I would like to say is, Is it
possible to load a script when needed and not in page load? something
like $.Plugin plugin.

Best,
-- afshin

chris thatcher

unread,
Jun 25, 2010, 9:42:54 AM6/25/10
to jquery-...@googlegroups.com
Yes that is possible, though not built into claypool yet.  It was part of the overall initial design and we hope to enable it soon.  If its a high priority for you I'll see if we can't go ahead and focus on it now. 

PS sorry for any delay right now, I'm expecting my second child to be born any moment so my schedule has been different for the past week and will likely be different next week (less time to check mail in evening etc.)

Thatcher


--
You received this message because you are subscribed to the Google Groups "jquery-claypool" group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to jquery-claypo...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jquery-claypool?hl=en.




--
Christopher Thatcher

afshin afzali

unread,
Jun 25, 2010, 9:50:08 AM6/25/10
to jquery-...@googlegroups.com
JUST CONGRATS TO YOU,

I'll follow it later.
-- afshin

Jrad

unread,
Jul 18, 2010, 3:32:45 PM7/18/10
to jquery-claypool
Dear Chris,
Hoping you have happy times with your new life present., I'm gonna ask
if you can make lazy-loading ready in claypool. We eagerly seem to
need it in 2 ways:

1) Performance: our single-page business app prototype has got >500Kb
of client-side code.
2) Security: we want authorized access to JS files. (e.g. non-admin
roles should not be able to see admin.js controller! )

On Jun 25, 5:50 pm, afshin afzali <a.afzali2...@gmail.com> wrote:
> JUST CONGRATS TO YOU,
>
> I'll follow it later.
> -- afshin
>
> On Fri, Jun 25, 2010 at 6:12 PM, chris thatcher <
>
>
>
> thatcher.christop...@gmail.com> wrote:
> > Yes that is possible, though not built into claypool yet.  It was part of
> > the overall initial design and we hope to enable it soon.  If its a high
> > priority for you I'll see if we can't go ahead and focus on it now.
>
> > PS sorry for any delay right now, I'm expecting my second child to be born
> > any moment so my schedule has been different for the past week and will
> > likely be different next week (less time to check mail in evening etc.)
>
> > Thatcher
>
> > On Thu, Jun 24, 2010 at 4:51 PM, afshin <a.afzali2...@gmail.com> wrote:
>
> >> Hi,
>
> >> In jquery-claypool applications, all scripts load with first page, but
> >> activate in a lazy maner. The thing I would like to say is, Is it
> >> possible to load a script when needed and not in page load? something
> >> like $.Plugin plugin.
>
> >> Best,
> >> -- afshin
>
> >> --
> >> You received this message because you are subscribed to the Google Groups
> >> "jquery-claypool" group.
> >> To post to this group, send email to jquery-...@googlegroups.com.
> >> To unsubscribe from this group, send email to
> >> jquery-claypo...@googlegroups.com<jquery-claypool%2Bunsubscribe@ googlegroups.com>
> >> .
> >> For more options, visit this group at
> >>http://groups.google.com/group/jquery-claypool?hl=en.
>
> > --
> > Christopher Thatcher
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "jquery-claypool" group.
> > To post to this group, send email to jquery-...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > jquery-claypo...@googlegroups.com<jquery-claypool%2Bunsubscribe@ googlegroups.com>
> > .

chris thatcher

unread,
Jul 19, 2010, 10:10:31 AM7/19/10
to jquery-...@googlegroups.com
Sounds good, I can work on it this week.  Lazy loading of scripts can help large application but a couple things that help in general  are concatination and minification of scripts, as well as ensuring the server is gzip enabled if the client requests it(all modern browsers are gzip enabled).  most 500Kb apps can be reduced to about 64Kb with minification and concatination, and with gzip you only have about 10Kb of wire transfer for the entire app with one http call and client caching means the app might load fastest with a single javascript file.

That said, I do believe lazy load scales to substantially larger apps (you should still have abuild process which publishes minified javascript files when possible and always ensure server gzip is enabled still).

One question has to do with the conventions that will be applied to discover lazy loaded files.  Basically i expect this will work by basically mapping MyApp.Controllers.FooBar to /myapp/controllers/foobar.js with an optional prefix set in environments.js, for example :

modules:{
 path:'/scripts/124-3596w/',
 secure: true,
 server: 'auto',
}

so that the app source will finally be resolved as

https://server:port/scripts/124-3596w/myapp/controllers/foobar.js

Let me know if you have additional requirements. 

The question of authorized access requires a server-side technology to enforce something like HTTP BASIC AUTH for a given path like https://server:port/scripts/124-3596w/myapp/controllers/admin.js.  Client-side technologies cannot enforce those requirements.

I use http basic auth to protect my json-rest-database for example.  the browser simply pops up a user/pass dialog the first time the user must verify their credentials.

Thatcher

To unsubscribe from this group, send email to jquery-claypo...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/jquery-claypool?hl=en.




--
Christopher Thatcher

Jrad

unread,
Aug 3, 2010, 2:14:41 PM8/3/10
to jquery-claypool
It took me some time to focus on this thread since I was busy on other
aspects of our application.
Your proposed "modules" is a good starting point, but let me add some
other points that may help:

1) We've added postfixes to our controller and view js files:
e.g our FooBar controller is in /myapp/controllers/
foobarController.js
and our FooBar view is in /myapp/views/foobarView.js
* However we can refactor our project to omit all postfixes.

2) I'm not clarified about the activation point of script loading.
Is it just the "event.c().m().v()" which should be able to load on
demand? since this is the single point of control of framework on
object lifecycles!
AND
What about $.$( "#objId" )? Does it just return already instantiated
objects? or tries to load on demand and instantiate?




On Jul 19, 6:10 pm, chris thatcher <thatcher.christop...@gmail.com>
wrote:
> Sounds good, I can work on it this week.  Lazy loading of scripts can help
> large application but a couple things that help in general  are
> concatination and minification of scripts, as well as ensuring the server is
> gzip enabled if the client requests it(all modern browsers are gzip
> enabled).  most 500Kb apps can be reduced to about 64Kb with minification
> and concatination, and with gzip you only have about 10Kb of wire transfer
> for the entire app with one http call and client caching means the app might
> load fastest with a single javascript file.
>
> That said, I do believe lazy load scales to substantially larger apps (you
> should still have abuild process which publishes minified javascript files
> when possible and always ensure server gzip is enabled still).
>
> One question has to do with the conventions that will be applied to discover
> lazy loaded files.  Basically i expect this will work by basically mapping
> MyApp.Controllers.FooBar to /myapp/controllers/foobar.js with an optional
> prefix set in environments.js, for example :
>
> modules:{
>  path:'/scripts/124-3596w/',
>  secure: true,
>  server: 'auto',
>
> }
>
> so that the app source will finally be resolved as
>
> https://server:port/scripts/124-3596w/myapp/controllers/foobar.js
>
> Let me know if you have additional requirements.
>
> The question of authorized access requires a server-side technology to
> enforce something like HTTP BASIC AUTH for a given path likehttps://server:port/scripts/124-3596w/myapp/controllers/admin.js.

chris thatcher

unread,
Aug 3, 2010, 4:49:11 PM8/3/10
to jquery-...@googlegroups.com
lazy load  will be connected through $.$() since this is the inversion of control container which sits under all of the other modules, eg MVC, AOP, and is used internally to resolve relationships and references to application managed instances.  Though in reality it is the mvc files that make up the bulk of files that are eligable to be lazy loaded.  I havent had a chance to pin point where its best to put it but I expect to be able to get to it very soon.

Thatcher

To unsubscribe from this group, send email to jquery-claypo...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/jquery-claypool?hl=en.




--
Christopher Thatcher

chris thatcher

unread,
Aug 11, 2010, 11:31:29 AM8/11/10
to jquery-...@googlegroups.com
Just wanted to let you know I'm still working on this.  It required another feature which has been asked for several times which will allow multiple applications to run without colliding when referencing application objects with $.$.  I expect to have it beta ready as a feature by this weekend and hopefully releasable by early next week.  Sorry for the delay as well, several other projects have been very busy as well.

Thatcher
--
Christopher Thatcher

chris thatcher

unread,
Aug 17, 2010, 11:01:22 PM8/17/10
to jquery-...@googlegroups.com
Taking a little longer than I hoped but progress is happening on lazy loading.  1.2.rc1 has all the additional work to support apps that are namespaced to allow multi-app pages to avoid app component id collisions and is backward compatible with 1.1 to allow simple apps that dont care to live in the default, empty namespace.

The upshot is I'll be able to finish the lazy loading of scripts now, allow apps to use an out-of-the-box convention for script loading or plug-in a simple loading strategy that suits their own file organization needs.

I hope to have the default lazy script load in place tomorrow with an example the following day along with some convenient new additions to the $.scan plugin to make configuration even simpler.

//no namespace app with mvc scanner
$.scan('MyApp');
//lazy load required script from $.env('base')/controllers/foo.js
$.$('#fooController');

//namespaced
$.scan({my: 'MyApp'});
//lazy load required script from $.env('base')/myapp/controllers/foo.js
$.$('my#fooController');

I'll keep you posted and I'm enjoying finally flushing out these features which have been on the whiteboard for awhile.  I know we'll be using them at work for sure since we tend to have many mini apps on a single page mixed with larger apps.

Let me know if you have any feedback, concerns or ideas.

Thatcher
--
Christopher Thatcher

chris thatcher

unread,
Aug 23, 2010, 4:37:33 PM8/23/10
to jquery-...@googlegroups.com
Sorry for the delay on these feature additions, another open source project of mine, envjs, has been really busy with bug fixes.  Normally I try to put bug fixes before feature additions, but I'm going to give my attention 80% to jquery.claypool for a couple days so I can finish the feature additions up.

Thanks for your patience.
Thatcher
--
Christopher Thatcher
Reply all
Reply to author
Forward
0 new messages