You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Lance Java <la...@googlemail.com> on 2013/01/27 13:30:16 UTC
5.4 - Javascript best practices
I'm using the new 5.4-alpha-2 and I'm not 100% sure how I should be managing
my javascript. I'm a require.js newbie and I've got a few questions:
1. Are @Import(library=x) and JavascriptSupport.importJavaScriptLibrary(x)
now considered deprecated or are there still valid use cases?
2. What would a best-practice "hello world" component look like if it
requires one of the existing modules (eg bootstrap.js)
3. What would a best-practice "hello world" component look like if it does
not require any other modules.
Thanks,
Lance.
--
View this message in context: http://tapestry.1045711.n5.nabble.com/5-4-Javascript-best-practices-tp5719568.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: 5.4 - Javascript best practices
Posted by Volker Lamp <vl...@vlamp.de>.
Here is another piece of information I had to figure out before the above
worked for me: the META-INF folder needs to be under /src/main/resources
(not /src/main/webapp).
--
View this message in context: http://tapestry-users.832.n2.nabble.com/5-4-Javascript-best-practices-tp7584721p7587037.html
Sent from the Tapestry Users mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: 5.4 - Javascript best practices
Posted by Steve Eynon <st...@alienfactory.co.uk>.
I've just noticed that @Import now has a "module" parameter, that can
be used for modules & methods that take no parameters.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: 5.4 - Javascript best practices
Posted by Steve Eynon <st...@alienfactory.co.uk>.
Yup. That's right.
On 28 January 2013 00:00, Lance Java <la...@googlemail.com> wrote:
> Thanks Steve, I've lost a few hours trying to figure this out.
>
> So I only need to contribute to ModuleManager if I don't follow the
> convention? (ie module "foo" is located at "/META-INF/modules/foo.js").
>
>
>
> --
> View this message in context: http://tapestry.1045711.n5.nabble.com/5-4-Javascript-best-practices-tp5719568p5719579.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: 5.4 - Javascript best practices
Posted by Lance Java <la...@googlemail.com>.
Thanks Steve, I've lost a few hours trying to figure this out.
So I only need to contribute to ModuleManager if I don't follow the
convention? (ie module "foo" is located at "/META-INF/modules/foo.js").
--
View this message in context: http://tapestry.1045711.n5.nabble.com/5-4-Javascript-best-practices-tp5719568p5719579.html
Sent from the Tapestry - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: 5.4 - Javascript best practices
Posted by Steve Eynon <st...@alienfactory.co.uk>.
My last email assumes your RequireJS modules live in the
/META-INF/modules/ dir and follow the same naming convention. If
that's not the case then you can 'Alias' your module.
define(["highcharts"], function(highcharts) { ... }
If 'highcharts' lives elsewhere I can re-route the call to
"/META-INF/modules/highcharts" like this:
@Contribute(ModuleManager.class)
public static void
configureHighchartModule(MappedConfiguration<String, Object> config,
AssetSource assetSource) {
// injecting "@Path("classpath:/") Resource context" gives a service
// recursion error during tests - so we use AssetSource instead
Resource classpath = assetSource.resourceForPath("classpath:/");
Resource highcharts =
classpath.forFile("/META-INF/assets/highcharts-2.3.5/highcharts.js");
config.add("highcharts", new
JavaScriptModuleConfiguration(highcharts).exports("Highcharts"));
}
Steve.
On 27 January 2013 23:13, Steve Eynon <st...@alienfactory.co.uk> wrote:
> Good questions - I had to work this out myself when moving to T5.4!
>
> Yes, I personally consider @Import'ing JS deprecated - though it is
> still valid if you don't wish to use RequireJS.
>
> In your component put:
>
> JSONObject params = new JSONObject();
> jsSupport.require("alienfactory/stuff").with(params);
>
> then create the JS file:
> /META-INF/modules/alienfactory/stuff.js
>
> define(["jquery", "t5/core/console", "bootstrap"], function($, console) {
> return function(params) {
> console.warn("jQuery version: " + $().jquery);
> };
> });
>
> The above will give you access to jQuery (assuming you've chosen it as
> your SymbolConstants.JAVASCRIPT_INFRASTRUCTURE_PROVIDER), will also
> inject the T5 logger and ensure the bootstrap module is loaded and
> initialised before calling your function.
>
> If you want multiple functions, i.e.
>
> jsSupport.require("alienfactory/stuff").invoke("f2");
>
> then your JS module looks more like:
>
> define(["jquery", "t5/core/console", "bootstrap"], function($, console) {
> return {
> f1: function() { .. }
> f2: function() { .. }
> };
> });
>
> CoffeeScript, if you wanna get into it, makes everything look a lot neater!
>
> Steve.
> --
> Steve Eynon
> -------------------------------
> "If at first you don't succeed,
> so much for skydiving!"
>
>
>
> On 27 January 2013 20:30, Lance Java <la...@googlemail.com> wrote:
>> I'm using the new 5.4-alpha-2 and I'm not 100% sure how I should be managing
>> my javascript. I'm a require.js newbie and I've got a few questions:
>>
>> 1. Are @Import(library=x) and JavascriptSupport.importJavaScriptLibrary(x)
>> now considered deprecated or are there still valid use cases?
>>
>> 2. What would a best-practice "hello world" component look like if it
>> requires one of the existing modules (eg bootstrap.js)
>>
>> 3. What would a best-practice "hello world" component look like if it does
>> not require any other modules.
>>
>> Thanks,
>> Lance.
>>
>>
>>
>> --
>> View this message in context: http://tapestry.1045711.n5.nabble.com/5-4-Javascript-best-practices-tp5719568.html
>> Sent from the Tapestry - User mailing list archive at Nabble.com.
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: 5.4 - Javascript best practices
Posted by Steve Eynon <st...@alienfactory.co.uk>.
Good questions - I had to work this out myself when moving to T5.4!
Yes, I personally consider @Import'ing JS deprecated - though it is
still valid if you don't wish to use RequireJS.
In your component put:
JSONObject params = new JSONObject();
jsSupport.require("alienfactory/stuff").with(params);
then create the JS file:
/META-INF/modules/alienfactory/stuff.js
define(["jquery", "t5/core/console", "bootstrap"], function($, console) {
return function(params) {
console.warn("jQuery version: " + $().jquery);
};
});
The above will give you access to jQuery (assuming you've chosen it as
your SymbolConstants.JAVASCRIPT_INFRASTRUCTURE_PROVIDER), will also
inject the T5 logger and ensure the bootstrap module is loaded and
initialised before calling your function.
If you want multiple functions, i.e.
jsSupport.require("alienfactory/stuff").invoke("f2");
then your JS module looks more like:
define(["jquery", "t5/core/console", "bootstrap"], function($, console) {
return {
f1: function() { .. }
f2: function() { .. }
};
});
CoffeeScript, if you wanna get into it, makes everything look a lot neater!
Steve.
--
Steve Eynon
-------------------------------
"If at first you don't succeed,
so much for skydiving!"
On 27 January 2013 20:30, Lance Java <la...@googlemail.com> wrote:
> I'm using the new 5.4-alpha-2 and I'm not 100% sure how I should be managing
> my javascript. I'm a require.js newbie and I've got a few questions:
>
> 1. Are @Import(library=x) and JavascriptSupport.importJavaScriptLibrary(x)
> now considered deprecated or are there still valid use cases?
>
> 2. What would a best-practice "hello world" component look like if it
> requires one of the existing modules (eg bootstrap.js)
>
> 3. What would a best-practice "hello world" component look like if it does
> not require any other modules.
>
> Thanks,
> Lance.
>
>
>
> --
> View this message in context: http://tapestry.1045711.n5.nabble.com/5-4-Javascript-best-practices-tp5719568.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org