It’s time of exciting news in the frontend and Javascript world, Magento2 embraces the changes by acquiring modern instruments. One of these is Require.js, the most popular module loader for Javascript. The speech has the intent to illustrate, through practical examples, the potential of this library, how to use it to create new javascript modules within Magento 2 and how to extend and replace the existing ones.

2. Javascript is a
crazy language

3. TypeError: undefined is not a function

4. Magento 1

5. Sorting JS files is a big mess1

6. Dead scripts2

7. Wall of code3

8. RequireJS

9. NOOOOO!
another JavaScript
Library

10. define(ID?, dependencies?, function)
AMD
Module Definition

11. define(['jquery', 'underscore'], function($, _) {
// Do stuff
});
RequireJS
Module Definition

12. <script data-main="scripts/main" src="scripts/require.js"></script>

13. // scripts/main.js
require(['foo', 'bar'], function(foo) {
// Do stuff
});

14. head.appendChild()

15. Wrapping up
RequireJS
http://requirejs.org

16. Magento 2

17. Resource optimization

18. Resource optimization

19. Resource optimization

20. var config = {
//Settings
};
require-config.js

21. baseUrl
site / static / area / vendor / theme / locale

22. baseUrl
baseUrl + Vendor_Module/script + .js

23. Paths
var config = {
paths: {
"module-name": "Vendor_Module/script"
}
};

24. Map
map: {
'*': {
"menu": "Vendor_Module/js/menu"
}
}

25. define([
"jquery"
], function ($) {
'use strict';
function awesomeMenu() {
return "this is a private function";
}
return function () {
var message = awesomeMenu();
alert(message);
}
});

26. Shim
define([ “jquery”, “jquery-plugin” ], function($) {
// do stuff
});

27. shim: {
'jquery-plugin': {
deps: ['jquery']
}
}

28. Config
config: {
“module-name”: {
key: “value”
}
}
define([“module”], function (module) {
module.config().key
});

29. Mixins
var config = {
'config':{
'mixins': {
'target/module': {
'Vendor_Module/script' : true
}
}
}
};

30. Do something between the checkout steps
config: {
mixins: {
'Magento_Checkout/js/model/step-navigator': {
'js/checkoutCustomization': true
}
}
}

31. define([ "jquery" ], function ($) {
'use strict';
return function (target) {
target.next = function() {
// do stuff
};
return target
};
});

32. define(['jquery'], function ($) {
return function (widget) {
$.widget('mage.SwatchRenderer', widget, {
updateBaseImage: function (images, context, isProductViewExist) {
//do stuff
}
});
return $.mage.SwatchRenderer;
}
});

33. Want more?

34. Plugins
define([
'text!mage/gallery/gallery.html',
], function (galleryTpl) {
// Gallery
});
text!

35. Plugins
define(['domReady!'], function (doc) {
//This function is called
//once the DOM is ready
});
domReady!

36. Benefits
1. Asynchronous module loading, deferred execution.
2. More clean and maintainable code.
3. Code & data sharing between different modules.
4. Global variables avoidance.

37. Write modular
code!

38. “Using a modular script loader like RequireJS will
improve the speed and quality of your code."
Questions?
@Nuovecode github.com/nuovecode