SymfonyCasts stands united with the people of Ukraine
If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeAt 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'):
| ... 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)):
| ... 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():
| ... 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.
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'):
| ... 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.
Hey einue!
No reason really :). Well, actually, I was a bit lazy. It makes senes to use _ when you are importing all of lodash. But, when we import just lodash/number, we should probably give it a different name, like _number or something like that.
Cheers!
// composer.json
{
"require": {
"php": "^7.2.0",
"symfony/symfony": "3.3.*", // v3.3.16
"twig/twig": "2.10.*", // v2.10.0
"doctrine/orm": "^2.5", // v2.7.0
"doctrine/doctrine-bundle": "^1.6", // 1.10.3
"doctrine/doctrine-cache-bundle": "^1.2", // 1.3.5
"symfony/swiftmailer-bundle": "^2.3", // v2.6.3
"symfony/monolog-bundle": "^2.8", // v2.12.1
"symfony/polyfill-apcu": "^1.0", // v1.4.0
"sensio/distribution-bundle": "^5.0", // v5.0.22
"sensio/framework-extra-bundle": "^3.0.2", // v3.0.26
"incenteev/composer-parameter-handler": "^2.0", // v2.1.2
"friendsofsymfony/user-bundle": "^2.0", // v2.1.2
"doctrine/doctrine-fixtures-bundle": "~2.3", // v2.4.1
"doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.2
"composer/package-versions-deprecated": "^1.11", // 1.11.99
"friendsofsymfony/jsrouting-bundle": "^1.6" // 1.6.0
},
"require-dev": {
"sensio/generator-bundle": "^3.0", // v3.1.6
"symfony/phpunit-bridge": "^3.0" // v3.3.5
}
}// package.json
{
"dependencies": [],
"devDependencies": {
"babel-core": "^6.25.0", // 6.25.0
"babel-loader": "^7.1.1", // 7.1.1
"babel-plugin-syntax-dynamic-import": "^6.18.0", // 6.18.0
"babel-preset-env": "^1.6.0", // 1.6.0
"bootstrap-sass": "^3.3.7", // 3.3.7
"clean-webpack-plugin": "^0.1.16", // 0.1.16
"copy-webpack-plugin": "^4.0.1", // 4.0.1
"core-js": "^2.4.1", // 2.4.1
"css-loader": "^0.28.4", // 0.28.4
"extract-text-webpack-plugin": "^3.0.0", // 3.0.0
"file-loader": "^0.11.2", // 0.11.2
"font-awesome": "^4.7.0", // 4.7.0
"jquery": "^3.2.1", // 3.2.1
"lodash": "^4.17.4", // 4.17.4
"node-sass": "^4.5.3", // 4.5.3
"resolve-url-loader": "^2.1.0", // 2.1.0
"sass-loader": "^6.0.6", // 6.0.6
"style-loader": "^0.18.2", // 0.18.2
"sweetalert2": "^6.6.6", // 6.6.6
"webpack": "^3.4.1", // 3.4.1
"webpack-chunk-hash": "^0.4.0", // 0.4.0
"webpack-dev-server": "^2.6.1", // 2.6.1
"webpack-manifest-plugin": "^1.2.1" // 1.2.1
}
}
Is there any reason why you named the constant _ for loadash/number?