Getting Started with JavaScript Development in Magento 2

View class schedule

Target Audience

Developers who want to upgrade their skills and knowledge of the Magento 2 JavaScript framework and its application.

Prerequisites

Students must be familiar with developing in a LAMP environment and have a basic understanding of Unix-based systems. Students must have a solid understanding of plain JavaScript.

Students must have basic knowledge of AMD, HVVM patterns, HTML, CSS, XML, and object-oriented programming techniques. We highly recommended that students be familiar with the following technologies: RequireJS, UnderscoreJS, jQuery and jQuery UI, and KnockoutJS.

Although technologies that are directly used in Magento JavaScript are covered in the course, it may be very challenging to learn them if this course is the first time the student is exposed to them. Students should have at least 1 year of JavaScript-related experience. Being familiar with Magento 2 and MVC concepts is strongly recommended but not required.

Course Overview

This course introduces developers to the Magento 2 JavaScript platform and associated development techniques. It is intended for developers who want to develop essential skills in implementing and customizing solutions using Magento 2 JavaScript-related functionality.

The course begins with a discussion of the main technology stack. Students learn essential components of JavaScript architecture, and are guided through the Magento modular structure, types of JS modules, JS modules execution flow, customizing JS modules, core JS library, mage widgets, customer data framework, and Magento UiComponents.

UiComponents are known to be challenging, so they are covered in-depth in this course. The course presents UiComponents concepts, and problems this framework aims to resolve. Students are guided through the different stages of a UiComponent life cycle and obtain a deep understanding of its workflow and areas of application. Specific examples of UiComponents such as grids and forms are also covered.

This course is based on Magento Open Source 2.2 and Magento Commerce 2.2.

Learning Objectives

  • Learn about Magento 2 JavaScript architecture
  • Learn how to customize existing JavaScript modules
  • Learn how to create new JavaScript functionality using development best practices
  • Obtain solid and deep understanding of Magento UiComponents and be able to use the Magento UI framework and customize existing components

Course Outline

1. Technology Stack
    1.1 RequireJS
    • 1.1.1 RequireJS overview
    • 1.1.2 RequireJS-config file
    • 1.1.3 Plugins
    1.2 UnderscoreJS
    • 1.2.1 Underscore utility functions
    • 1.2.2 Underscore templates
    1.3 JQuery/JQuery Widget
    • 1.3.1 JQuery overview
    • 1.3.2 JQuery widgets
    1.4 KnockoutJS
    • 1.4.1 KnockoutJS key concepts
    • 1.4.2 Templates
    • 1.4.3 Knockout-es5
2. Core Capabilities
    2.1 Magento modular structure
    • 2.1.1 Filesystem overview
    • 2.1.2 Static content in Magento
    2.2 JS modules in Magento
    • 2.2.1 requirejs-config.js
    • 2.2.2 Types of Magento js modules
    2.3 Executing JS-modules
    • 2.3.1 data-mage-init
    • 2.3.2 text/x-magento-init
    • 2.3.3 advanced execution methods
    2.4 jQuery widgets in Magento
    • 2.4.1 mage namespace
    • 2.4.2 executing widgets
    2.5 Customizing JS modules
    • 2.5.1 Requirejs customization techniques
    • 2.5.2 Mixins
    • 2.5.3 Customizing widgets
3. Magento core JS library
    3.1 mage library
    • 3.1.1 Templates
    • 3.1.2 Storage & cookies
    • 3.1.3 Translations
    • 3.1.4 Utils
    • 3.1.5 Validation
    3.2 mage widgets
    • 3.2.1 Collapsible elements
    • 3.2.2 Popups & modals
    • 3.2.3 Misc widgets
    3.3 Customer data
    • 3.3.1 Customer data concept
    • 3.3.2 Customer data architecture
    • 3.3.3 sections.xml
4. UI Components
    4.1 Knockout customizations
    • 4.1.1 Custom template engine
    • 4.1.2 Custom bindings
    • 4.1.3 Scope binding
    • 4.1.4 Advanced use of scope
    4.2 Emerging UI components
    • 4.2.1 Executing components
    • 4.2.2 Component Instance
    • 4.2.3 Component with data
    • 4.2.4 Data sharing between components
    4.3 UI components
    • 4.3.1 Lifecycle overview
    • 4.3.2 Configuration
    • 4.3.3 Backend side
    4.4 Grids and forms overview
    • 4.4.1 Grid
    • 4.4.2 Form