Top Banner
38

Require js and Magento2

Apr 12, 2017

Download

Technology

Irene Iaccio
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Require js and Magento2
Page 2: Require js and Magento2

Javascript is a crazy language

Page 3: Require js and Magento2

TypeError: undefined is not a function

Page 4: Require js and Magento2

Magento 1

Page 5: Require js and Magento2

Sorting JS files is a big mess1

Page 6: Require js and Magento2

Dead scripts2

Page 7: Require js and Magento2

Wall of code3

Page 8: Require js and Magento2

RequireJS

Page 9: Require js and Magento2

NOOOOO! another JavaScript

Library

Page 10: Require js and Magento2

define(ID?, dependencies?, function)

AMD

Module Definition

Page 11: Require js and Magento2

define(['jquery', 'underscore'], function($, _) { // Do stuff});

RequireJS

Module Definition

Page 12: Require js and Magento2

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

Page 13: Require js and Magento2

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

Page 14: Require js and Magento2

head.appendChild()

Page 15: Require js and Magento2

Wrapping upRequireJS

http://requirejs.org

Page 16: Require js and Magento2

Magento 2

Page 17: Require js and Magento2

Resource optimization

Page 18: Require js and Magento2

Resource optimization

Page 19: Require js and Magento2

Resource optimization

Page 20: Require js and Magento2

var config = { //Settings};

require-config.js

Page 21: Require js and Magento2

baseUrl

site / static / area / vendor / theme / locale

Page 22: Require js and Magento2

baseUrl

baseUrl + Vendor_Module/script + .js

Page 23: Require js and Magento2

Pathsvar config = { paths: { "module-name": "Vendor_Module/script" }};

Page 24: Require js and Magento2

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

Page 25: Require js and Magento2

define([ "jquery"], function ($) { 'use strict';

function awesomeMenu() { return "this is a private function"; } return function () { var message = awesomeMenu(); alert(message); }});

Page 26: Require js and Magento2

Shim

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

Page 27: Require js and Magento2

shim: {

'jquery-plugin': {

deps: ['jquery']

}

}

Page 28: Require js and Magento2

Config config: { “module-name”: { key: “value” } }

define([“module”], function (module) { module.config().key});

Page 29: Require js and Magento2

Mixinsvar config = { 'config':{ 'mixins': { 'target/module': { 'Vendor_Module/script' : true } } }};

Page 30: Require js and Magento2

Do something between the checkout steps

config: { mixins: { 'Magento_Checkout/js/model/step-navigator': { 'js/checkoutCustomization': true } }}

Page 31: Require js and Magento2

define([ "jquery" ], function ($) { 'use strict';

return function (target) { target.next = function() { // do stuff }; return target };});

Page 32: Require js and Magento2

define(['jquery'], function ($) { return function (widget) {

$.widget('mage.SwatchRenderer', widget, {

updateBaseImage: function (images, context, isProductViewExist) { //do stuff }

}); return $.mage.SwatchRenderer; }});

Page 33: Require js and Magento2

Want more?

Page 34: Require js and Magento2

Plugins

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

text!

Page 35: Require js and Magento2

Plugins

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

domReady!

Page 36: Require js and Magento2

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: Require js and Magento2

Write modular code!

Page 38: Require js and Magento2

“Using a modular script loader like RequireJS will improve the speed and quality of your code."

Questions?@Nuovecode github.com/nuovecode