Bower and Require.js Integration


In the past we've talked about Bower package manager and God knows, I have been obsessively repeating myself about using Require.js and it's integration with object oriented programming. So how do they integrate with each other? In this article we'll cover the integration of both and see how they get along together.

Bower Initiation


Let's start by defining, which packages we want to use in our project by filling the bower.json. You can create one yourself or run bower init command for interactive creation.
?
1
2
3
4
5
6
7
8
9
{
    "name": "RequireJS Starter",
    "version": "1.0.0",
    "dependencies": {
        "jquery": "1.9",
        "underscore": null,
        "requirejs": null
    }
}
So we'll be needing jQuery, Underscore and of course Require.js. Putting null as a version number will download the latest version. Now run bower install to download all the packages into bower_components folder. You can change the location along with other thing using .bowerrc configuration file. After everything is in place, we'll configure our dependencies in our entry point JavaScript file and use the libraries once retrieved:
?
1
2
3
4
5
6
7
8
9
require.config({
    paths: {
        "jquery": "bower_components/jquery/jquery",
        "underscore": "bower_components/underscore/underscore"
    }
});
require(['jquery', 'underscore'], function($, _) {
    $('body').text(_.range(10));
});

Automagical wire-up


This is how it works according to the writter of bower-requirejs plugin. It looks at the libraries installed by Bower and creates a JavaScript file with require.config call with all the paths in place. Just run the following line in your bash console:
./node_modules/.bin/bower-requirejs -c destination/config.js
It has some interesting flags you can use, all of them well described in the documentation.

CDN Integration


But my mother told me local libraries are bad. She was right! We should always try to use CDN for common libraries, since chances are it had been already downloaded to user's computer and cached version would be used instead of downloading fresh version from our server. Let's edit our code and add cdnjs urls as a first priority. I prefer them over others because they offer the biggest variety of libraries and it's always good practice to work with a single provider. We'll leave our versions as a fallback if something bad happens to the CDN:
?
1
2
3
4
5
6
7
8
9
10
require.config({
    paths: {
        "jquery": ["http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min", "bower_components/jquery/jquery"],
        "underscore": ["http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min", "bower_components/underscore/underscore"]
    },
    waitSeconds: 10
});
require(['jquery', 'underscore'], function($, _) {
    $('body').text(_.range(10));
});
Notice the waitSeconds parameter we've added configuring how much time to wait for the CDN's versions. Hope things started to clear bit by bit. What to use and how to use it. I'll continue to write articles on this topic including Grunt integration.

Comments

Post a Comment

Popular posts from this blog

CAP Theorem and blockchain

Image
In theoretical computer science, the CAP theorem states that it is impossible for a distributed data store (such as a blockchain network) to simultaneously provide more than two out of the three guarantees: Consistency, Availability & Partition tolerance. CAP Theorem – the parts C: Consistency – At any given time, all nodes in the network have exactly the same (most recent) value. A: Availability – Every request to the network receives a response, though without any guarantee that returned data is the most recent. P: Partition tolerance – The network continues to operate, even if an arbitrary number of nodes are failing. Due to the nature of distributed data stores (such as blockchain), Partition tolerance is a given fact; there will always be failing/unreachable nodes in the network (not least because of the unstable nature of the internet). CAP Theorem states that one has to choose between C (Consistency) or A (Availability) when in the presence of P (Partition): Av...
Read more

Deep dive into Elliptic Curve Signatures

Image
To popular demand, I have decided to try and explain how the ECDSA algorithm works. We've discussed a bit eliptic curve signatures before and a little bit more afte that , but it seems it's never enough. Admitedly, I've been struggling a bit to understand it properly and while I found a lot of documentation about it, I haven't really found any ECDSA for newbies anywhere. So I thought it would be good to explain in simple terms how it works so others can understand it better. Let's give it a stab ECDSA stands for Elliptic Curve Digital Signature Algorithm and it's used to create a digital signature of data (a file for example) in order to allow you to verify its authenticity, without compromising its security. Think of it like a real signature, you can recognize someone's signature, but you can't forge it without others knowing. The ECDSA algorithm is basically all about mathematics. But these maths are fairly complicated, so while I'l...
Read more

Proof of solvency and collateral

Image
Centralized exchanges (CEXs) are a critical part of the cryptocurrency ecosystem, but they also pose a significant risk to users. In the event of a hack or bankruptcy, users can lose all of their funds. One way to mitigate this risk is to require CEXs to provide regular proof of solvency. Proof of solvency is a way for CEXs to demonstrate that they have enough assets to cover all of their user deposits. There are a number of different ways to implement proof of solvency. One simple approach is for CEXs to simply publish a list of all of their addresses and the corresponding balances. This approach is transparent and easy to verify, but it does not provide any privacy for users. Zero-knowledge Proofs A more secure approach would be for CEXes to use zero-knowledge proofs (ZKPs) to prove their solvency. ZKPs allow exchanges to prove that they have a certain amount of assets without revealing any other information about their balance sheets. This would make it much more difficult fo...
Read more