Best practices for creating a reusable javascript web-app

Question

I'm writing a web-app, using javascript, for the first time.

I was wondering what is the best method to make the web-app easily reusable, i.e. to make a "package" containing the js files, html and css, and load them like "load webapp"->launch it.

Currently I have an index.html which contains two divs:

the first one is a site-specific home page
the second one, initially hidden, is the panel of the web-app

once an initial selection is done in the homepage, I launch the app invoking a js method.

I'd like to make this more general, and I was wondering whether using jquery load() could be a clean solution (I'm currently using jquery). This would load the html, but I think I should still manually load the css in the page using the lib/app.

Any idea is appreciated.

Mathew Thompson · Accepted Answer · 2012-04-16 20:32:18Z

1

Just make sure you don't embed any CSS or JS into your ASPX pages wherever possible, always keep them in separate files it'll be much easier to reuse certain aspects without having to dig around for the code. I've even seen JavaScript classes used to encapsulate a range of functionality, which could also be an option if you're that way inclined :).

In your said example, you're probably best calling a function in an external JS file on document ready.

answered Apr 16, 2012 at 20:32

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

cdarwin Over a year ago

you are right, and I'm currentyl doing what you suggest. But how can I "package" the app, i.e. how can I load the app, say, with a single js call? I think this is possible, but now I have to include at least the css the app uses

Mathew Thompson Over a year ago

Well then you could do that with a JavaScript class, that way whenever you created a new instance of the class in your document ready, the class constructor will do everything that you need to do to "package" the information. If you're new to JS classes, the basics are listed on here: javascript.about.com/library/bltut35.htm

cdarwin Over a year ago

I'm using classes heavily... but I don't know what is the best way to load all the components of the app: I have css, js files and html, and I'd like to build a single page site, i.e. once the selection is done in the homepage, the app should be shown. For example, how can I load a css on demand?

Mathew Thompson Over a year ago

You can even load CSS on demand with JQuery, using $("<link/>", { rel: "stylesheet", type: "text/css", href: "/styles/yourcss.css" }).appendTo("head");

Mathew Thompson Over a year ago

Hehe, always the case, sometimes trying to think of complicated solutions one can overlook the easier ways, happens to all of us :)

|

marteljn · Accepted Answer · 2012-04-16 21:09:07Z

0

Organizing your JS as JQuery plugins may also be an option for you. It may not make sense to put all of your JS into one plugin but if you split up your work into bite sized components this may make sense. Im not going to mention any particular resource because there are so many and I don't want to look like a spammer.

Hope this helps!

answered Apr 16, 2012 at 21:09

marteljn

6,5263 gold badges32 silver badges44 bronze badges

Comments

standup75 · Accepted Answer · 2012-04-16 21:34:58Z

0

jQuery load won't help you organize your code, or load js dynamically, it has a complete other function (register to the onLoad event, or load an html page, or partial page via ajax)

If you're looking for dynamically load js libraries, use lab.js (at http://labjs.com) or require.js (at http://requirejs.org). But keep in mind that it can also be ok to have just one big js file that will get cached and load at once.

As far as organizing your js, it depends on the app. Sometimes jQuery plugin is the way to go. I had developed a solution that I am using on my projects, I just share it with you here: http://thebeast.heroku.com

answered Apr 16, 2012 at 21:34

standup75

4,8246 gold badges32 silver badges49 bronze badges

Collectives™ on Stack Overflow

Best practices for creating a reusable javascript web-app

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related