JavaScript lets us do a lot of things. It’s sometimes too forgiving in its syntax.
The organize our code, we should use some basic design patterns. In the article, we’ll look at using JSONP and deployment strategies.
JSONP
JSONP is JSON with padding. We can use this instead of JSON to bypass the same-domain browser policy.
We should use this carefully since we’re loading data from 3rd party sites.
With JSONP, we have JSON wrapped in a function call.
The function name is provided with a JSONP request.
For instance, a JSONP request URL may look like:
http://example.org/getdata?callback=myHandler
where the myHandler is the name of the function on our app that’ll be called once the request is made.
The URL is loaded into the script element and then it’ll call myHandler once it’s done loading.
Deploying JavaScript
There are some things that we have consider when we deploy JavaScript code.
We’ve to be sure that we combine scripts so that they’re compacted.
Whitespaces, long names, etc. are all removed and replaced with shorter spaces and names.
Combining scripts is one more step before we deploy.
And we may lose some caching benefits. It’s not good to invalidate the cache for a small change in the bundle.
Also, we got to come with some versioning pattern for the bundle so we don’t lose track of them.
Minifying and Compressing
Minifying and compression code is important. The smaller the bundle, the less code that users have to download.
This means users can use our app faster.
That’s definitely good for users.
Minification and compression can give up to a 50% reduction in size compared to the original code.
We can compress our bundles with gzip compression. Our web server can be configured to serve gzipped bundles instead of plain text.
This will also give us a size reduction.
Compression will give us 70% smaller files on average.
With minification and compression together, users only download files that are 15% of the size of the original code.
Expires Header
Our cache should expire after a while. This way, users don’t have to refresh manually to see the latest changes.
We can change the expiry header to a value that we’re comfortable with.
If we set the cache long, then we’ve to rename the files every time we deploy so that the cache will be invalidated automatically.
Using a CDN
CDN stands for a content delivery network. These are paid services that let us distribute copies of our files in different data centers around the world.
This way, because of the proximity in location, the files will be served faster to users.
We can link to library files on CDNs and use them.
Loading Strategies
If we load files in our app, then we can load them in a few ways.
We can have inline scripts for simple scripts:
<script>
console.log("hello");
</script>
Or we can load them from external sources:
<script src="external.js"></script>
There are some attributes that we can use to load scripts in different ways.
We can use the defer directive to make our script download in a way that doesn’t block our browser from running other code.
The Place of the Script Element
Script elements should be loaded as a bundle so that we don’t have lots of files that we have to load in order.
The more script tags we have, the more likely that we’ll screw up the order.
Therefore, we should make sure that we reduce the number of script tags by bundling.
HTTP Chunking
We can also chunk our pages so that they load in chunks.
We can move all the JavaScript to the head tag, while loading the rest of the body can load later.
Dynamic Script Elements
We can use the defer or async attributes in our script tags.
defer loads them asynchronously but in order.
async loads them asynchronously but may not be in order.
We can also create script tags dynamically by writing:
const script = document.createElement("script");
script.src = "foo.js"; document.documentElement.firstChild.appendChild(script);
This will create a script tag that we can attach to the head tag or anywhere else.
Conclusion
We can reduce the size of our script bundles by minifying and compressing them.
This way, our code can be less than half of the size of the original code.
We can also use the defer and async directives to load script files.
And we can create scripts on the fly to defer loading.
JSONP lets us load JSON without the same domain restriction.
