Javascript modules using browserify

[futafutafuta]

Hey, just a quick suggestion you may or may not find useful.

I often use browerify in combination with npm for my client side javascript. (Grunt is also great for any compilation steps you may need)

Using browserify, each javascript file (module) will have its own scope. Any variable you would like to expose will have to be explictly exported: module.exports.foo = 'bar'. Other modules will have to include your module using require: require('./path/to/module.js').foo. Browserify does this by combining all your modules into a single bundle file (chrome & firefox will show the original line numbers if you enable source maps).

There are also a lot of modules on npm that you can use with browserify, for example jquery is on there (not that I actually like jquery ;p). This also avoids having to commit libraries in the git repo, a single command npm install will install all the dependencies you need.

[dantheman629]

I'll take a look at it. Unfortunatley this project has become weekend only, and my list right now is pretty full. I'll get around to that eventaully though, thank you for the suggestion.

On Wed, Apr 8, 2015 at 7:07 PM, futafutafuta notifications@github.com wrote:

Hey, just a quick suggestion you may or may not find useful.

I often use browerify http://browserify.org/ in combination with npm https://www.npmjs.com/ for my client side javascript. (Grunt http://gruntjs.com/ is also great for any compilation steps you may need)

Using browserify, each javascript file (module) will have its own scope. Any variable you would like to expose will have to be explictly exported: module.exports.foo = 'bar'. Other modules will have to include your module using require: require('./path/to/module.js').foo. Browserify does this by combining all your modules into a single bundle file (chrome & firefox will show the original line numbers if you enable source maps).

There are also a lot of modules on npm that you can use with browserify, for example jquery is on there (not that I actually like jquery ;p). This also avoids having to commit libraries in the git repo, a single command npm install will install all the dependencies you need.

— Reply to this email directly or view it on GitHub https://github.com/dantheman629/FlexibleSurvival-2.0/issues/20.

[aldergames]

Tangentially related: look up the libraries underscorejs (or the expanded lodash). These are utility libraries that makes working with javascript easier in general. If you have an object oriented background, you may want to take a look at prototypejs too, which has some functions to create classes (not supported out of the box in javascript atm. Not cleanly at least).

Finally, for markup and layout, maybe have a look at bootstrap. It certainly makes prettier sites than basic html. Two others you might want to look at are raphaeljs (the graphics library that FoE uses), or createjs (haven't worked with this one, but heard good things about it). These two later ones work like a traditional canvas (comparable to SDL or similar 2D libraries on desktop), if you want to style things up a bit graphically.

Taking in a ton of new frameworks can be a bit intimidating at first, but in the end, it'll likely save time and a lot of headache.

[dantheman629]

So at least for something like prototypejs, i will definitley check that out, but for switching to a graphic library that uses a canvas, i wanted to stay away from that. Although it is great because it gives you vector graphics and more pretty stuff, I wanted to stay away from it for that very reason. Being able to highlight and grab text is something i wanted to preserve, and switching to a canvas removed that since the text is just an image then not actual text. I might transition the buttons on the buttom to simulated buttons in a canvas but that is for another time. I still need to get the inform parser up and running before I move on, and the inform parser is actually pretty done as it is for now. I've been focusing more on getting something working then getting something pretty, so once it gets functional I will go back and get everything working. Commiting to a framework with me being this new felt like a disaster waiting to happen.

On 4/9/15, aldergames notifications@github.com wrote:

Tangentially related: look up the libraries underscorejs (or the expanded lodash). These are utility libraries that makes working with javascript easier in general. If you have an object oriented background, you may want to take a look at prototypejs too, which has some functions to create classes (not supported out of the box in javascript atm. Not cleanly at least).

Finally, for markup and layout, maybe have a look at bootstrap. It certainly makes prettier sites than basic html. Two others you might want to look at are raphaeljs (the graphics library that FoE uses), or createjs (haven't worked with this one, but heard good things about it). These two later ones work like a traditional canvas (comparable to SDL or similar 2D libraries on desktop), if you want to style things up a bit graphically.

Taking in a ton of new frameworks can be a bit intimidating at first, but in the end, it'll likely save time and a lot of headache.

---

Reply to this email directly or view it on GitHub: https://github.com/dantheman629/FlexibleSurvival-2.0/issues/20#issuecomment-91265516

[aldergames]

It's actually possible to have the cake and eat it too :P

Have a look at the markup for FoE: https://github.com/AlderArts/foe/blob/master/foe_min.html

See the mainTextArea div? That's a regular text div where the main bulk of content is output. You can copy paste etc. I apply a canvas style rendering behind it, and for buttons etc.

[aldergames]

But yeah, I can defo understand wanting to avoid committing to stuff. That's why you keep things nice and separated so that it's possible to change later :P

[dantheman629]

you should have seen what it looked like when all the code was in one file. Not fun.

On Thu, Apr 9, 2015 at 12:48 PM, aldergames notifications@github.com wrote:

But yeah, I can defo understand wanting to avoid committing to stuff. That's why you keep things nice and separated so that it's possible to change later :P

— Reply to this email directly or view it on GitHub https://github.com/dantheman629/FlexibleSurvival-2.0/issues/20#issuecomment-91288297 .