Irene Iaccio - Magento2 e RequireJS. The right way
-
Upload
meet-magento-italy -
Category
Presentations & Public Speaking
-
view
63 -
download
2
Transcript of Irene Iaccio - Magento2 e RequireJS. The right way
![Page 1: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/1.jpg)
![Page 2: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/2.jpg)
Javascript is a crazy language
![Page 3: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/3.jpg)
TypeError: undefined is not a function
![Page 4: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/4.jpg)
Magento 1
![Page 5: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/5.jpg)
Sorting JS files is a big mess1
![Page 6: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/6.jpg)
Dead scripts2
![Page 7: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/7.jpg)
Wall of code3
![Page 8: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/8.jpg)
RequireJS
![Page 9: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/9.jpg)
NOOOOO! another JavaScript
Library
![Page 10: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/10.jpg)
define(ID?, dependencies?, function)
AMD
Module Definition
![Page 11: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/11.jpg)
define(['jquery', 'underscore'], function($, _) { // Do stuff});
RequireJS
Module Definition
![Page 12: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/12.jpg)
<script data-main="scripts/main" src="scripts/require.js"></script>
![Page 13: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/13.jpg)
// scripts/main.jsrequire(['foo', 'bar'], function(foo) { // Do stuff});
![Page 14: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/14.jpg)
head.appendChild()
![Page 15: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/15.jpg)
Wrapping upRequireJS
http://requirejs.org
![Page 16: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/16.jpg)
Magento 2
![Page 17: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/17.jpg)
Resource optimization
![Page 18: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/18.jpg)
Resource optimization
![Page 19: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/19.jpg)
Resource optimization
![Page 20: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/20.jpg)
var config = { //Settings};
require-config.js
![Page 21: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/21.jpg)
baseUrl
site / static / area / vendor / theme / locale
![Page 22: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/22.jpg)
baseUrl
baseUrl + Vendor_Module/script + .js
![Page 23: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/23.jpg)
Pathsvar config = { paths: { "module-name": "Vendor_Module/script" }};
![Page 24: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/24.jpg)
Map map: { '*': { "menu": "Vendor_Module/js/menu" } }
![Page 25: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/25.jpg)
define([ "jquery"], function ($) { 'use strict';
function awesomeMenu() { return "this is a private function"; } return function () { var message = awesomeMenu(); alert(message); }});
![Page 26: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/26.jpg)
Shim
define([ “jquery”, “jquery-plugin” ], function($) { // do stuff });
![Page 27: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/27.jpg)
shim: {
'jquery-plugin': {
deps: ['jquery']
}
}
![Page 28: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/28.jpg)
Config config: { “module-name”: { key: “value” } }
define([“module”], function (module) { module.config().key});
![Page 29: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/29.jpg)
Mixinsvar config = { 'config':{ 'mixins': { 'target/module': { 'Vendor_Module/script' : true } } }};
![Page 30: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/30.jpg)
Do something between the checkout steps
config: { mixins: { 'Magento_Checkout/js/model/step-navigator': { 'js/checkoutCustomization': true } }}
![Page 31: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/31.jpg)
define([ "jquery" ], function ($) { 'use strict';
return function (target) { target.next = function() { // do stuff }; return target };});
![Page 32: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/32.jpg)
define(['jquery'], function ($) { return function (widget) {
$.widget('mage.SwatchRenderer', widget, {
updateBaseImage: function (images, context, isProductViewExist) { //do stuff }
}); return $.mage.SwatchRenderer; }});
![Page 33: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/33.jpg)
Want more?
![Page 34: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/34.jpg)
Plugins
define([ 'text!mage/gallery/gallery.html',], function (galleryTpl) { // Gallery});
text!
![Page 35: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/35.jpg)
Plugins
define(['domReady!'], function (doc) { //This function is called //once the DOM is ready});
domReady!
![Page 36: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/36.jpg)
Benefits1. Asynchronous module loading, deferred execution.
2. More clean and maintainable code.
3. Code & data sharing between different modules.
4. Global variables avoidance.
![Page 37: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/37.jpg)
Write modular code!
![Page 38: Irene Iaccio - Magento2 e RequireJS. The right way](https://reader033.fdocuments.us/reader033/viewer/2022042907/58e5720f1a28abd82b8b6273/html5/thumbnails/38.jpg)
“Using a modular script loader like RequireJS will improve the speed and quality of your code."
Questions?@Nuovecode github.com/nuovecode