Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Irene Iaccio - Magento2 e RequireJS. The right way

937 views

Published on

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.

  • Be the first to comment

Irene Iaccio - Magento2 e RequireJS. The right way

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

×