Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Add a standard way to create js module for client and server side use #516

Merged
merged 1 commit into from Dec 18, 2013

Conversation

Projects
None yet
3 participants
Contributor

percygrail commented Dec 17, 2013

Emulating the way the models are bundled for client side use, I've updated build.js to bundle up any xxx.shared.js files in app/helpers and publish them to public/js/core/helpers.js.

To test, create a file called test.shared.js in app/helpers and add this code to it:

if(typeof exports == 'undefined'){
  var exports = this['helpers'] = {};
}
exports.testSharedHelpers = function() {
  return '---------------Testing shared helpers---------------';
};

Add this line to the appropriate place in app/views/layouts/layout_header.html.ejs (or whatever templating you are using):

<%- scriptLink('/js/core/helpers.js', {type: 'text/javascript'}) %>

Add this require and line of code somewhere server-side (I used config/init.js):

var sharedHelperTest = require('../app/helpers/test.shared.js');
...
  console.log(sharedHelperTest.testSharedHelpers());
...

Start geddy and look for the console.log output server side.

Load up your app in a browser and type the following at the js console prompt:

console.log(helpers.testSharedHelpers());

Look for the console.log output client side.

If you like this functionality, I hope you will comment on the following:

  1. Should I add the scriptLink to all the layout header templates or leave it like it is and let the developer add it as needed?
  2. If so, should I use gen/base/realtime/views/xxx/layouts/layout_header.html.ejs or gen/base/views/xxx/layouts/layout_header.html.ejs
  3. This whole thing could also be done by adding a new directory somewhere (app/shared_helpers?) and bundling everything in there (as opposed to specially named files in app/helpers), but this would require touching generator code and may have ramifications beyond a geddy noob's (that's me) understanding.
  4. Is the way I've done this tied up with realtime in such a way that it is not available without turning on realtime (and if so, does anyone care)?
updated build.js to bundle up any shared.js files in app/helpers and …
…publish them to public/js/core/helpers.js. also gitignored this new file
Contributor

percygrail commented Dec 17, 2013

I forgot to mention.

  1. You guys do some cool magic in geddy.model.register that abstracts away the client side "exports" problem. I suppose I could do something similar, but I'm not sure where I would put it. Suggestions?

mde added a commit that referenced this pull request Dec 18, 2013

Merge pull request #516 from percygrail/helpers_shared_client_server
Add a standard way to create js module for client and server side use

@mde mde merged commit 62b77d5 into geddy:master Dec 18, 2013

1 check passed

default The Travis CI build passed
Details
Contributor

mde commented Dec 18, 2013

Very nice, thanks!

Contributor

Techwraith commented Dec 18, 2013

We should probably have the helpers strung off of the geddy global so we don't pollute the window with too many globals.

Contributor

mde commented Dec 18, 2013

Oh, good call. @percygrail, could you add that -- just hang them on geddy? @Techwraith, would this handle the exports problem too?

Contributor

Techwraith commented Dec 18, 2013

No, the geddy global is not shared between the server and the client.

Contributor

mde commented Dec 18, 2013

Oh, right, they're just plain Node modules. You'd have to write your helpers differently. Maybe it's time to start thinking about packaging stuff up for client-side use in a better way, instead of relying on magical hacks.

Contributor

percygrail commented Dec 18, 2013

If I adjust the contents of my test shared helper file (test.shared.js) to this:

if(typeof exports == 'undefined'){
  var exports = this.geddy['helpers'] = {};
}
exports.testSharedHelpers = function() {
  return '---------------Testing shared helpers---------------';
};

Then my client side access turns into this:

console.log(geddy.helpers.testSharedHelpers());

Does that look better?

Contributor

Techwraith commented Dec 18, 2013

It would be better if those first three lines were handled for you. I guess we could do that when we push it up.

Contributor

percygrail commented Dec 18, 2013

I have a solution for that. I'll push it up as soon as I get it tidied up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment