Login to bookmark this video
Buy Access to Course
24.

Lodash & requiring Partial Libraries

Share this awesome video!

|

Keep on Learning!

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

At the bottom of the table, the user chooses an item and enter how many times they lifted it. I love it! But, management is never satisfied! Nope, they just sent us a new requirement. To inspire people to lift more, they want to auto-fill that box with a random number.

To get that random number, we're going to use a library called Lodash. Well, actually, you can easily get a random number with Math.random()... but using Lodash will be really interesting. Just trust me!

Google for the Lodash library. It's basically a big package of functions. Under Documentation, one of them is _.random().

Ok cool! Let's get this installed. In your terminal, run

yarn add lodash --dev

Next, in RepLogApp.js, on top, add const _ = require('lodash'):

215 lines | assets/js/Components/RepLogApp.js
// ... lines 1 - 7
const _ = require('lodash');
// ... lines 9 - 215

Go make sure it finished downloading. Perfect!

Find the clearForm() method near the bottom: this is called after we submit the form. Add $form.find() to fetch the reps field, then add .val(_.random(1, 10)):

215 lines | assets/js/Components/RepLogApp.js
// ... lines 1 - 7
const _ = require('lodash');
// ... lines 9 - 11
class RepLogApp {
// ... lines 13 - 171
_clearForm() {
// ... lines 173 - 177
// pre-fill with a random rep number
$form.find('[name="reps"]').val(_.random(1, 10));
}
// ... lines 181 - 195
}
// ... lines 197 - 215

To make sure that box has a value on load, head up to the constructor and add this._clearForm():

215 lines | assets/js/Components/RepLogApp.js
// ... lines 1 - 11
class RepLogApp {
constructor($wrapper, initialRepLogs) {
// ... lines 14 - 18
for (let repLog of initialRepLogs) {
// ... line 20
}
this._clearForm();
// ... lines 23 - 38
}
// ... lines 40 - 195
}
// ... lines 197 - 215

Perfect! Refresh now! Yes! There's our super random number. And it resets each time we submit. Management is going to love this.

Require only Part of a Library

So why the heck are we really doing this? It wasn't obvious, but the compiled rep_log.js file just got a lot bigger! It's 2.7Mb... but before, it was 1.27! Woh! That's all from lodash! We're importing every function from that library... even though we only need one!

So... question: is there a way for us to import just one thing? Well, it depends on how the library you're using is built. For lodash, it is possible! Look inside node_modules/ for lodash. The library is just a bunch of tiny functions all separated into individual files. When you require lodash, it loads a file that requires all of these. But... we could also require just a single file. In this case, number.js holds what we need... plus a few other things. We could require number.js or random.js.

Back in our code, change to const _ = require('lodash/number'):

215 lines | assets/js/Components/RepLogApp.js
// ... lines 1 - 7
const _ = require('lodash/number');
// ... lines 9 - 215

In the browser, everything still works. And the package is back down to 1.3Mb!

That's great! And we're now ready to talk about the require function's hipper, better-looking, and younger sibling: import.