I'm very new to the JavaScript library world. I have used JS by itself before to create a mini social network but this is the first time I use a JS library and I really don't know how to go about this.
I'm planning to use Google Closure and I'm really not sure how I should go about organizing the code. Should I put everything in one file since it's a web app and should have one screen? Should I separate the code to many chunks and put them in different files? Or should I put different dialogs (like settings) in a separate page and thus a separate file?
Like all programmers I'm a perfectionist so please help me out with this one, thanks.
If you're using Closure, you can use the closure compiler. I'd recommend multiple js files that are compiled into a single resource by the compiler. You'd reference that single js file in your html, so you wouldn't have to link to all of them.
Then, since you have multiple JS file, you can organize them in a logical way that will help you separate logic from UI from communications, etc. Also, if you're writing unit tests (JsUnit) it will be easier to write one test file per js file.
Depends...
What I do is add all my code in one file(librarys are always in different files) and then even though some of it wont be used, there will be no need to add multiple scripts to the page. If you have 20 files with script, it can be very confusing knowing which one to use.
Related
I am currently working on a web page development. I have used downloaded one external javascript file from CanvasJs and I am using it locally to add some dynamic functionality to a graph in my page. I am using only a small functionality from the file. How do i remove the dead line that I don't use? I don't know which lines are not being used!
Note: I am using the script file to draw a spline chart, but the script file contains code for many more graphs and functionalities. How do I remove those redundant functionalities. The script file is too big with all the functions that I don't use. I wish to reduce the file size by removing the redundant line of codes.
If you are certain that you want to remove all but the code that your application calls:
Find all of the functions that your code calls in the library.
Copy each of these functions into a new file.
In each of these functions, find all functions and any global variables that they reference and return to point 2.
When you have all of the referenced functions and variables in a separate file, try your code out on it in as many different ways as you can think of to make sure that you did not miss anything out.
Do this on the un-minified version of the library and then minify the resulting code, so that it is readable for you.
Another way of stepping through the code is to use the debugger built in to your browser, by setting a breakpoint on your own code and stepping through it, then finding that code in the library file.
If you think that you might need more functionality from the library however, weigh the cost over the wire against the effort of extracting only the required code. It might be best to use the full library or to find another more specialised library if possible.
I was just wondering about some good practices when it comes to external files specifically with javascript and CSS.
For javascript, should you make an external file for every module/added feature so that it's easy to locate and find the code in one spot for the module?
Also is it bad to have too MANY external files connected to one page, to the point where it affects load time and general bad practice?
Same question appllies for css..
Thanks
You always want to your files to be organized and well structured in a project like manner during development time. It's okay to have many css,js files during development, but that's very costy and expensive in production or real-life phase due to the fact that each file load adds an overhead to the exact file size making the file fetching slower and increasing your page load times. So, when you are ready to deploy your application, it's a good idea to merge and minify all your css files into 1 css file, the same goes with your javascript files too. Just remember that if you are doing CSS overrides, you will have to maintain the file order while merging not to mess up your css logic.
You can merge and minify using that tool http://www.shrinker.ch/ ;)
Person I use external files for every code so they are all separate. One for my CSS, and one for my JavaScript. I wouldn't say it's bad practice, It keeps things organized.
Is it bad to have too many?
I don't see the point on have multiple external JavaScript or CSS files when you can use a comment line to separate it if you are really OCD about it being organized. If for some reason you want to have multiple files you could create a folder specifically for the group of files.
Overall
I organize a lot with external files, helps me keep track of things. So I would say it's good practice, just trying to not go overboard with it, keep it like at 2-3 of CSS, JavaScript, Or jQuery each.
Edit*
I think it's primarily for organization, so, yes it is good practice to use external files.
Best case scenario is to have a master css file for the high level layout, and then different css files for the sub layouts that are only called when the module is loaded (not sure what framework your using, but I suppose your modules can have independent layouts). However you would want to use a minifier:
code.google.com/p/minify/
This compiles your css to a smaller format / single file, which helps keep the size down by merging all called css files into 1 master css file.
At the same time you want to get an adequate balance between load time and maintainability, if lumping some layouts together makes the code easier to maintain and the load time trade off is minimal then there's no real harm in this.
I like keeping myself busy building modular web-applications, but don't want to spend time where I can save some..
For example I'm building a news module that should be easily implemented over multiple sites, because the same web-application is used.
However not all websites will need a news module. Is it better/easier/faster to create an inline stylesheet/javascript file built into the module itself, than to create a big external stylesheet/javascript with all the libraries? Even though the file for the news module is not needed on all other webpages?
It seems to be much easier to create an inline library in the module itself. So that this only gets loaded when needed, and saves load time and bandwidth on the other pages.
The other thing is that I like writing 'plug-and-play' modules. Say I move a file across the file server into the module folder, and the application will take care of the rest. With inline sheets, I dont have to add new lines to the header/footer etc.
What is the best solution for this? When also taking into account that I rather spend 10 minutes moving a file and it works, than to spend 1 hour appending external libraries just because its more of a 'good practice'?
If you re building web applications, are you using the MVC patern? Do you separate your concerns? (your Templates/Views, your Models, and your logic(Controllers))
If you follow MVC, it makes easier maintaining and customizing your app.
To answer to your exact question, what you need is RequireJS. This way you have only one place to declare your requirements, and RequireJS will handle the rest.. Load order and more..
Quoting from the requirejs website:
Over time, if you start to create more modular code that needs to be
reused in a few places, the module format for RequireJS makes it easy
to write encapsulated code that can be loaded on the fly.
Inline is never a solid way to maintain CSS. Take care to separate the description of your layout from your views. You can easily include the file in the same directory as the module so it should not be an issue.
Or if you want just to load "on fly" some script you can use jQuery.getScript , http://api.jquery.com/jQuery.getScript/ . Otherwise you should follow George's way.
I guess what I'm asking is that if grouping JavaScript is considered good practice, why don't more websites place the JavaScript and CSS directly into one HTML document?
why don't more websites place the JavaScript and CSS directly into one HTML document
Individual file caching.
External files have the advantage of being cached. Since scripts and styles rarely change (static) and/or are shared between pages, it's better to just separate them from the page making the page lighter.
Instead of downloading 500kb of page data with embedded JS and CSS, why not load 5kb of the page, and load from the cache the 495kb worth of JS and CSS - saves you 495kb of bandwidth and avoids an additional 2 HTTP requests.
Although you could embed JS and CSS into the page, the page will most likely be dynamic. This will make the page load a new copy all the time, making each request very heavy.
Modular code
Imagine a WordPress site. They are built using a tom of widgets made by different developers around the world. Handling that many code stuffed in one page is possible, but unimaginable.
if some code just short circuited or just didn't work on your site, it's easier to take out that code linking the external file, rather than scouring the page for the related code and possibly accidentally remove code from another widget.
Separation of concerns
It's also best practice to separate HTML from CSS and JS. That way, it's not spaghetti you are dealing with.
When you have a lot of code in a single document, it's harder to work with the code because you need more time to find the necessary string to change.
That is why it's good practice to divide code into separate files, with each of them solving its own special task, and then include them in code where it's necessary.
However, you can a write script which will join your files from the development version, which has many files, to a release version, which has fewer files, but this brings two problems:
People are often lazy to do additional coding to create this script and then change it when the structure of your project becomes more complex.
If you find a bug or add a small feature, you will need to rebuild your project again both in developed and release versions.
They separated them so that multiple webpages can use the same file. When you change a single file, multiple pages can aromatically updated also. In addition, big HTML file will cause a long time to download.
I'm writing a web app, using jsp to create the page content. I need a pretty good amount of javascript to make the app work. Does anyone have any recommendations on how to structure my project, such that it doesn't become a mess?
This is a broad question, but the basic problem is that I'm insert javascript code directly into my jsp content. Then I might have some external js files. Ids and such are strewn between multiple files. I'm not really sure what a best practice is for keeping this type of project organized. Do you always keep your javascript in separate files? There has to be a few hooks in the jsp pages though for them, right?
I tried using GWT because I'm really a c/java developer, and I was hoping it would help keep my project more organized (definitely helps) - but GWT is a pain to use with jsp, it really wants you to do all UI generation client side after the page is done loading, doesn't work for what I need to do.
Again, broad question, any tips would be great,
Thanks
JavaScript should be unobtrusive. That means that you use your JavaScript like CSS - target selectors on the page. The only 'hooks' you need are HTML classes and ids.
So keep all your JavaScript in separate files. It doesn't matter if you have it all in one file or in separate files, whatever works for you. This isn't quite true, there are technical reasons why you might choose one JavaScript file or lots of separate ones, but probably for now organise the files so they make sense. You can always use a tool to compile all your JavaScript into one file and minify it at the same time.
Put page-specific code (event handlers) inside the .jsp files, at the bottom, in an unobtrusive way (like Skilldrick) suggested.
Put general purpose methods (those reused in several .jsp files) in one (or more) javascript file(s) that you will link using . Try to find patterns in javascript code and create reusable library methods/components.
Use Enterprise Architect, Visio or some other software to architect your application (you might already be familiar with the MVC concept from the Java world). Make sure you put your JS functions into logical components. Each of these components will be a JavaScript file. Takes a little bit more time upfront, but you'll save a headache further down the line.