I'm developing pure JS + HTML application. To keep the code clean I would like to separate my application into the several html files (i.e. ClientView.html, HistoryView.html etc). Based on user actions one or another view (or several views) would be displayed. Each view is supposed to have an underlying code in a separate JS file.
What I really want to achieve is following:
Develop view as HTML page (do not use any kind of javascript templating)
Views and viewmodels are loaded on the fly (only loaded when needed)
Some way to control dependencies.
I would be very thankful if you advice me a good start for that, as I'm quite new to modern html applications development. I myself is from WPF world, and I've been working with MVVM applications for a very long time, probably I'm wrong trying to bring same experience to javascript development.
I've found several posts about "compiling" html - (HTML "compiler" / merging application), but I don't think that it is what I need.
p.s. In my project I'm very dependent from several features from Twitter Bootsrap (first of all from grid systems)
Use a master page which contains some div to make the layout. Use JQuery to dynamically load various pages and insert into the div in the master page as required.
I am new to web development and building a C# web MVC application in Visual Studios. I am using Jquery,AngularJS,Twitter Bootsrap CSS and a bunch of other 3rd party JavaScripts.
I have included reference to all these files on every page which looks very nasty. I am using a master layout page for all the other pages so I thought that referencing everything that is required would resolve my problem but that didnt work out.
How can I store all the required scripts and css in one place and have all web pages get everything from there?
Make sure you have a layout that is used very every page, and make sure that layout is calling a header. Then throw your script files in there.
Although I would suggest against loading ALL your javascript files for ALL of the pages, you might take a performance hit once you scale upward. You can put checks in your header to filter the ones you need.
So, I am using CodeIgniter to develop a website.
I noticed I had about ten javascript files all being loaded in my header even though they were not all being used on a given page.
As such I now pass an array to my header view which contains a list of the javascript files which need to be included. This way only the files I need on a given page are loaded.
I ran my site through a speed test, and although it is pretty fast it flagged up the numerous JS file loads and said to combine them into one file, and minify it.
I have my JS files as seperate files so I can use them as above, and also so if i want to edit my tabs js, I can easily find it in tabs.js
Combining all the javascripts into one file would remove the benefits above. Minifying them would make them a lot of effort to edit..
Is there a way of combining the JS files and minifying them when the server tries to load them, or any way to avoid the problems above?
Thanks
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.
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.
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!
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
Do you localize your javascript to the page, or have a master "application.js" or similar?
If it's the latter, what is the best practice to make sure your .js isn't executing on the wrong pages?
EDIT: by javascript I mean custom javascript you write as a developer, not js libraries. I can't imagine anyone would copy/paste the jQuery source into their page but you never know.
Putting all your js in one file can help performance (only one request versus several). And if you're using a content distribution network like Akamai it improves your cache hit ratio. Also, always throw inline js at the very bottom of the page (just above the body tag) because that is executed synchronously and can delay your page from rendering.
And yes, if one of the js files you are using is also hosted at google, make sure to use that one.
Here's my "guidelines". Note that none of these are formal, they just seem like the right thing to do.
All shared JS code lives in the SITE/javascripts directory, but it's loaded in 'tiers'
For site-wide stuff (like jquery, or my site wide application.js), the site wide layout (this would be a master page in ASP.net) includes the file. The script tags go at the top of the page.
There's also 'region-wide' stuff (eg: js code which is only needed in the admin section of the site). These regions either have a common layout (which can then include the script tags) or will render a common partial, and that partial can include the script tags)
For less-shared stuff (say my library that's only needed in a few places) then I put a script tag in those HTML pages individually. The script tags go at the top of the page.
For stuff that's only relevant to the single page, I just write inline javascript. I try to keep it as close to it's "target" as possible. For example, if I have some onclick js for a button, the script tag will go below the button.
For inline JS that doesn't have a target (eg: onload events) it goes at the bottom of the page.
So, how does something get into a localised library, or a site-wide library?.
The first time you need it, write it inline
The next time you need it, pull the inline code up to a localised library
If you're referencing some code in a localized library from (approximately) 3 or more places, pull the code up to a region-wide library
If it's needed from more than one region, pull it up to a site-wide library.
A common complaint about a system such as this, is that you wind up with 10 or 20 small JS files, where 2 or 3 large JS files will perform better from a networking point of view.
However, both rails and ASP.NET have features which handle combining and caching multiple JS files into one or more 'super' js files for production situations.
I'd recommend using features like this rather than compromising the quality/readability of the actual source code.
Yahoo!'s Exceptional Performance Team has some great performance suggestions for JavaScript. Steve Souders used to be on that team (he's now at Google) and he's written some interesting tools that can help you decide where to put JavaScript.
I try to avoid putting javascript functions on the rendered page. In general, I have an application.js (or root.js) that has generic functionality like menu manipulation. If a given page has specific javascript functionality, I'll create a .js file to handle that code and mimic the dir structure on how to get to that file (also using the same name as the rendered file).
In other words, if the rendered page is in public/dir1/dir2/mypage.html, the js file would be in public/js/dir1/dir2/mypage.js. I've found this style works well for me, especially when doing templating on a site. I build the template engine to "autoload" my resources (css and js) by taking the request path and doing some checking for the css and js equivalents in the css and js directories on the root.
Personally, I try to include several Javascript files, sorted by module (like YUI does). But once in a while, when I'm writing essentially a one-liner, I'll put it on the page.
Best practice is probably to put it on Google's servers.
(Depends what you mean by "your" javascript though I suppose :)
This is something I've been wrestling with, too. I've ended up by using my back-end PHP script to intelligently build a list of required JS files based on the content requested by the user.
By organizing my JS files into a repository that contains multiple files organized by purpose (be they general use, focused for a single page, single section, etc) I can use the chain of events that builds the page on the back-end to selectively choose which JS files get included based on need (see example below).
This is after implementing my web app without giving this aspect of the code enough thought. Now, I should also add that the javascript I use enhances but does not form the foundation of my site. If you're using something like SproutCore or Ext I imagine the solution would be somewhat different.
Here's an example for a PHP-driven website:
If your site is divided into sections and one of those sections is calendar. The user navigates to "index.phhp?module=calendar&action=view". If the PHP code is class-based the routing algorithm instantiates the CalendarModule class which is based on 'Module' and has a virtual method 'getJavascript'. This will return those javascript classes that are required to perform the action 'view' on the 'calendar' module. It can also take into account any other special requirements and return js files for those as well. The rendering code can verify that there are no duplicates of js files when the javascript include list is built for the final page. So the getJavascript method returns an array like this
return array('prototype.js','mycalendar.js');
Note that this, or some form of this, is not a new idea. But it took me some time to think it important enough to go to the trouble.
If it's only a few hundred bytes or less, and doesn't need to be used anywhere else, I would probably inline it. The network overhead for another http request will likely outweigh any performance gains that you get by pulling it out of the page.
If it needs to be used in a few places, I would put the function(s) into a common external file, and call it from an inline script as needed.
If you are targeting an iphone, try to keep anything that you want cached under 25k.
No hard and fast rules really, every approach has pros and cons, would strongly recommend you check out the articles that can be found on yahoo's developer section, so you can make informed decisions on a case by case basis.