I have recently developed my first mobile web application using HTML5, CSS3, JavaScript and a bit of jQuery. At this stage I want to separate codes for HTML, CSS & JS in 3 different files and using a web server to establish connection between those files. Any solution?
Just declare references to your CSS & JS from within your HTML. For performance reasons, it's good to put the CSS reference in the head, and the JS reference at the end of the file just before closing out the tag. That way, your page will load and will look correct right off the bat and won't be blocked downloading the JavaScript. The JS will be the last thing to load. Here's an example of the HTML markup:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>
<body>
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>
I would recommend looking into builders like
Apache Ant
HTML5 Boilerplate Build Script
Grunt (based on node.js)
Make or Rake files
this allows you to separate all of your files and then lint the files. This also allows you to then combine and minify the files. As for the different css, html and javascript. Those should all remain in separate files. But minifying your files and combining them into single files will definitely reduce page load time.
A good reading and look through would be HTML5 Boilerplate. They spend a lot of time on performance and the developer process.
Related
I'm working on a browser library (based on vanilla JS) and I need to load multiple JS files.
Arbo
/
index.html
lib/
thelib.js
thelib.css
includes/
thelib-part1.js
thelib-part2.js
thelib-part3.js
...
Making some research I found some solution :
Multiple includes
I can easy resolve the issue by doing:
<link rel="stylesheet" type="text/css" href="lib/thelib.css">
<script type="text/javascript" src="./lib/includes/thelib-part1.js"></script>
<script type="text/javascript" src="./lib/includes/thelib-part2.js"></script>
<script type="text/javascript" src="./lib/includes/thelib-part3.js"></script>
<!-- ... -->
<script type="text/javascript" src="./lib/thelib.js"></script>
But it's annoying for the user..
NodeJs tools
I ear about some tools, like Browserify or RequireJs but can I use it without a server side rendering tools ?
Async loading
I also can load manually from lib/the.js the other files, but I'm scared about problems who could append on different server configuration (ex, relative/absolute path ?, read file authorization?)
And I worry about loading times (it will be longer to load each files one after the other right?)
I probably miss a solution, or not understanding well a listed solution ?
To answer this question, I'm using now WebPack who can merge JS + others files into a js bundle and allow you to dev only a browser file (no running web server required)
I am new to javascript and programming in general. I have been working on a web app that solves simple algebraic equations. I am using two libraries, algebra.js and katex.js. How do I use both libraries in my script? I would like to keep this as a client-side application.
I have looked at node.js but my understanding is that node is for server-side development. I have looked at RequireJS but that doesn't seem to handle directories well. Recently I found Enderjs which seems to use npm and allow for client-side development and still make use of require().
What should I use to make a web app like this? Please let me know if there is anymore information that is needed.
The most basic way to do this is to include multiple script tags at the top of your html file. So:
<head>
<script src="path/to/library1.js"></script>
<script src="path/to/library2.js"></script>
<script src="path/to/my/javascript.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
This will load more than one onto the page. The order might matter - be wary of which dependencies your chosen libraries have. For example, some will depend on jQuery, so you should load jQuery first then those that depend on it. Order is top down.
In my example, if we pretend library2 depends on library1, then the example would work. However if library1 depended on library2, it would not.
The simplest way is to include the script tags directly in your html file like so (this assumes that you have the algebra.js file in the same folder as your html file):
<script src="algebra.js"></script>
If you are loading the library from the internet you have to use the full web path in the src attribute, for example loading the jQuery library from a cdn (content distribution network):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Here are my scripts
<script type="text/javascript" src="../js/btgAportion.js"></script>
<script type="text/javascript" src="../js/tab.js"></script>
script type="text/javascript" src="../js/jquery_calc.js"></script>
<script type="text/javascript" src="../js/jquery_onload.js"></script>
<script src="../js/jquery-latest.js"></script>
<script src="../js/collapsible.js"></script>
They all are in common js folder
I want to combine all these scripts into one script to reduce HTTP requests
There are a number of approaches. Edit, if you're going to downvote me, let me at least say, this tool of mine is a java tool for aggregating javascript files together for exactly the purpose you want:
http://damonsmith.github.io/js-class-loader/
Otherwise, if you want to roll your own JSP based solution, you can create a scripts.jsp which reads each one and just concatenates them all together into the output, then use that scripts.jsp inside your HTML script tag. It's probably easier for small sites than my over-engineered tooling.
You can use https://github.com/dfsq/compressJS.sh shell script to compress multiple JS files to one.
From official ReadMe:
Very simple bash script which compresses javascript files with Google
Closure Compiler and then make a single file of them. Reduce file
sizes and save bandwidth with just one simple command.
Reduce number of HTTP round-trips by combining multiple JavaScript resources into one.
https://developers.google.com/speed/pagespeed/service/CombineJavaScript
compress javascripts by using : http://jscompress.com/
The sourcecode of the app.html in a meteor app will look like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/846a8d9499cc559cd36226c07803f069a9b314a4.css">
<script type="text/javascript" src="/bd418141a43a911de5fcb0fc9eef1599abd72874.js"></script>
<title>application title</title>
</head>
<body>
</body>
</html>
This is simple and nice. (you can add meta in the head part).
But what if I want to add a loader for the app ?
I use a few libraries and my main js is probably going to weight a little more than one mo. I cannot image display nothing while it's loading.
The easier way would be to write a few line of classic inline html. But when I write something in the html, it's inclueded in my templates.
How would you change the app.html ?
Short answer: You can't. As far as I'm aware, Meteor will always send down an empty <body> tag and fill it in via templates.
If you have so much code that the concatenated JavaScript is quite heavy, you can split parts of it off. See this question for some techniques on how to do so. Personally I try to load from CDN any libraries that I'm using "out of the box," like Bootstrap (not an option for jQuery, unfortunately). To load from CDN, just include a <head> block in one of your HTML files and link to the CDN-hosted library files like normal, and leave them out of your project. Another option is to use jQuery's $.getScript() to load specific scripts on demand only on the pages that need them.
But that just lessons the load of your concatenated JavaScript file, it still doesn't really answer your question of having some HTML sent to the client immediately. To accomplish that, the only method I'm aware of is to have some other Web server in front of Meteor. For example have an Apache or Nginx server listening on port 80 that sends down a simple HTML file that has your initial content, and also loads the two Meteor-generated concatenated .js and .css files. Meteor would either replace the contents of <body> on load, or you would need to write some JavaScript to do so so that it gets "handed off" to Meteor so that Meteor can start rendering its templates there. I doubt the handoff would be very smooth, unfortunately. Alternatively if your initial page is more of a splash page, for example a simple login form, it could exist by itself served by Apache/Nginx and then on submit the user moves into the Meteor-served world. While the user is filling in the form the concatenated .css file (if not both the .css and .js files, or the .css file and any CDN-served or non-concatenated .js files) could be downloading in the background and getting cached. To be honest though I'm not sure it's worth all this effort, it adds a lot of complexity for what's probably only a very slight speed improvement (and even then, only on the initial load of the home page).
I am learning jQuery and have a created several plug ins.
Unfortunately due to my company's coding practices they want all javascript code to be extract out to js files. This for me poses two challenges:
Can i extract the actual $(document).ready(..) call to a js file? So far with my limited knowledge I have not figured if this at all possible. If not, I welcome any suggestions to make this cleaner and more acceptable way to include this code.
There are too many javascript includes for each asp.net page header since I may be using several plugins. Is there a way to reduce the potential costly server trips that I would need to make each time I need these files?
Any suggestions, corrections are greatly appreciated
thanks
1. Absolutely.
Just add a script reference to your html like this:
<script type='text/javascript' src='js/yourfile.js'></script>
Then just start your .js file with
jQuery(function() {
foo;
...
bar;
});
or any other shortcut ways of starting the jQuery code block.
2. You should run your scripts through something like Minify before sending them off to the user. This will combine the files and pack them in nicely, so that they take up less space.
Using $(document).ready () in an external javascript file is fine - it will work exactly the same :) In fact - not only will it work, but it is good practice as it helps to seperate the content (HTML) from the behaviour (Javascript).
In response to your section question - you can combine all of your plugins into a single javascript file and link to that one inside the <head>. You could also try minifying the scripts, although this is normally a bit overkill until the site goes live.
When I use jQuery, I normally use this kind of structure:
<html>
<head>
<!-- html tags such as title, link, meta etc -->
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/plugin.js"></script>
<!-- more plugins included if required -->
</head>
<body>
<!-- html here -->
<!-- script is the last thing before the ending body tag (increases performance) -->
<script type="text/javascript" src="/path/to/your_jQuery_code.js"></script>
</body>
</html>
I think worrying about server trips for javascript includes is premature optimization. Do you have any evidence that these pages are loading slowly? The browser should be caching the javascript files.
If you do have evidence that this is a problem, you could
-combine the jquery code and any plugins into one file
-write an .net content handler to do this for you (probably overkill)
Then you can add a custom js file per page to handle page specific properties.
You can most definitely put your document.ready and all other JavaScript code in an external file.
Typically I have 2 calls - one for jQuery itself, and one minified global.js file that combines and minifies all of my individual files.
Personally, I like to use front end blender for this, but there are many other options available as well.
there's nothing wrong w/putting the document.ready call in an external file. in fact, it's what i do to separate my js from my html. if you're concerned about certain functions running on certain pages, you may sift through them with a
var path = window.location.pathname;
if (path == "/yourdir/yourpage.html") {
//do something for this page only
}
or you can just include certain files only on certain pages.