Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Irene Iaccio - Magento2 e RequireJS. The right way

945 vues

Publié le

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.

  • Login to see the comments

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

×