A clear and in-depth explanation of JavaScript in Magento 2 Luma

The Magento 2 Theming training part I dives into XML and PHTML. This part II continues with RequireJS and KnockoutJS, two essentially different theming parts in regards of M1. With these JavaScript technologies it has become possible to modify things like checkout, price modelling, shopping carts without core hacks and weird tricks. This training gives frontend developers an excellent kickstart with M2 JavaScript.

Your teacher will be Jisse Reitsma

This training will be held with Jisse Reitsma as your guide. Jisse is the founder of Yireo, three times Magento Master, member of ExtDN, trainer and author. Jisse has been in the Magento ecosystem since the beginning (v0.99) and has created numerous Magento extensions. He also has been pushing better coding practices, like CI/CD, clean coding, coding standards and testing.

Pick the learning method that fits you best

Because everyone has different needs

On Demand

Full access to this course with 94 lessons with 14+ hours of video
Student notes (421+ pages)
Learn at your own pace

€ 259

per year per individual

Blended

On-Demand package of this course
Teacher support via email & slack
Prioritized requests for new lessons
Get the personalized help that you need

€ 369

per year per individual

Custom

On-Demand package of this course
Economical for groups of 5 and more
Freely debate company-specific topics
Online or on-site at your company

Custom pricing

per training day

There are no scheduled live trainings available

At this moment, there are no trainings scheduled in our agenda. However, we are always busy with planning more, so make sure to check out our online agenda. Alternatively, checkout our on-demand content or feel free to contact us for a custom in-company training.

Current video lessons in one single view

We are constantly updating our courseware, but the following is a real-life snapshot

Luma JavaScript standards n/a

ES6 Strict Modefree06m 15s

JavaScript encapsulationfree08m 55s

Invocation patternsfree17m 34s

Binding the keyword thisfree06m 43s

Module patternfree06m 53s

Understandig the prototype chain n/a

ES6 Template literals n/a

jQuery in Magento n/a

Working with jQuery n/a

jQuery and the keyword this n/a

jQuery noConflict mode n/a

How JavaScript translations work 20m 10s

AMD standardfree12m 07s

RequireJS basicsfree05m 58s

RequireJS config per Magento modulefree19m 19s

RequireJS configurationfree07m 48s

RequireJS rewritesfree21m 18s

RequireJS shims 11m 59s

RequireJS mixins 33m 55s

Example for a jQuery widget n/a

Component initializations 34m 10s

Return values of RequireJS modulesfree22m 58s

Example: Changing the background color 48m 57s

Changing options of the StoreView switcher 13m 35s

using-loader n/a

Using underscore n/a

Dynamic dependencies n/a

RequireJS tips n/a

Imperative and declaritive n/a

Introduction to Knockout.jsfree09m 17s

Knockout Context Debugger browser pluginfree03m 41s

Binding Knockout the Magento wayfree17m 13s

Binding variables in Knockoutfree07m 13s

Text input with Knockout observable 11m 05s

Using ko.observableArray 11m 28s

Simple counter with Knockoutfree26m 32s

Interacting with Knockout ViewModelsfree08m 07s

Interacting with Magento uiComponents 16m 23s

Simple KO ViewModel linkingfree48m 33s

Analysing the customer greeting 14m 14s

Subscribing to the minicart 36m 47s

Working with computed observables n/a

Using domReady n/a

Knockout Components n/a

State component with Knockout n/a

Knockout extenders n/a

Debugging Knockout n/a

Using the uiRegistryfree12m 04s

Definition of UiComponents 16m 01s

Advanced UiComponent 18m 29s

Knockout HTML templates 17m 51s

Analysing the minicartfree22m 33s

Rendering child components 30m 35s

Templating with generic UiComponents n/a

Adding extra info to the minicartfree13m 28s

Using this.super or this._super? n/a

Analysing the add-to-cart button n/a

Tracking Knockout observables n/a

Custom Knockout bindings n/a

Linking properties n/a

ConfigProviders for window.checkoutConfig 10m 56s

Adding a new Layout Processor 15m 52s

Layout processorsfree23m 12s

Overview of checkout n/a

Adding a child component to the checkoutfree27m 45s

Adding a new step in checkoutfree37m 52s

Component configuration 15m 01s

Adding a field to the address form n/a

Adding a CMS block in checkout 24m 04s

Data sources in the checkoutfree06m 59s

Add additional email validation n/a

ZIP code validation n/a

Payment validators n/a

Observer quote changes n/a

Calling upon `checkoutProvider` n/a

Add a block to the sidebar n/a

Extending `window.checkout` n/a

Observing field validation n/a

Definition of Private Content 02m 42s

Dealing with `customerData` 17m 09s

Example for using `customerData` 10m 23s

Add a new customerData section 11m 21s

How `customerData` sections get their data 11m 26s

Showing `customer().lastname` in a Knockout template 11m 40s

Adding messages via KO n/a

Depersonalizer n/a

Overview of testing n/a

Magento tests with Jasmine n/a

Adding Karma to Magento n/a

Adding Mocha to Karma and Magento n/a

Adding Chai to Magento n/a

Adding Tape to Magento n/a

Some tips n/a

These videos are available as an On-Demand video training (with notes). See the pricing for details.

Get ready for certification with our Yireo course

This training prepares you for undertaking the following Adobe certifications:

Adobe Certified Expert - Adobe Commerce Front-End Developer (AD0-E710)
Adobe Certified Expert - Adobe Commerce JavaScript Developer (AD0-E705)

Note that more courses might be needed besides this training. For an overview, see our certification page

These are the options we give you:

Prepare for certification

Our Magento 2 (so Adobe Commerce) trainings are not part of the official Adobe ALS program. However, Yireo is known for providing training with high quality. Many Magento developers have reached official certification, thanks to Yireo. Additionally, we can supply our own Yireo Training Certificates.

At your place or ours?

Everyone learns at her/his own pace. We provide both in-house training and public training throughout Europe - whatever suits your team best. When 3 or more developers are attending, a custom training is often more economical. Contact us for more details.

You'll get courseware

Every workshop is accompanied with official Yireo coursematerial. Attendees are sent a digital version of this material after the training. It contains slides, comments and references. Additionally, our GitHub repos contain numerous more code samples.

Online classrooms

Online trainings are also our training: Via Zoom or Google Hangout sessions, our teacher is able to connect with your team. The benefit here is that the team is able to connect from various places itself as well, timeframes are more flexible. Afterwards, a video recording will be shared with all attendees for reference.

On-demand self-paced training

This training is also available as an On-Demand training: Via numerous video lessons, including accompanying student notes (equalling a book on their own), you'll learn about the topics in your own pace. And when you bump into questions, you can fall back to the teachers guidance.

This training is part of the following series

so that we'll be able to guide you all the way, step by step

Magento 2 Luma Frontend Development

Magento 2 Backend Development I

Magento 2 Luma JavaScript Development

Magento 2 Backend Development II

Why Yireo?

We have trained 1400+ Magento developers since 2009

Training topics

Luma JavaScript standards
ES6 Strict Mode
JavaScript encapsulation
Invocation patterns
Binding the keyword this
Module pattern
Understandig the prototype chain
ES6 Template literals
jQuery in Magento
Working with jQuery
jQuery and the keyword this
jQuery noConflict mode
How JavaScript translations work
AMD standard
RequireJS basics
RequireJS config per Magento module
RequireJS configuration
RequireJS rewrites
RequireJS shims
RequireJS mixins
Example for a jQuery widget
Component initializations
Return values of RequireJS modules
Example: Changing the background color
Changing options of the StoreView switcher
using-loader
Using underscore
Dynamic dependencies
RequireJS tips
Imperative and declaritive
Introduction to Knockout.js
Knockout Context Debugger browser plugin
Binding Knockout the Magento way
Binding variables in Knockout
Text input with Knockout observable
Using ko.observableArray
Simple counter with Knockout
Interacting with Knockout ViewModels
Interacting with Magento uiComponents
Simple KO ViewModel linking
Analysing the customer greeting
Subscribing to the minicart
Working with computed observables
Using domReady
Knockout Components
State component with Knockout
Knockout extenders
Debugging Knockout
Using the uiRegistry
Definition of UiComponents
Advanced UiComponent
Knockout HTML templates
Analysing the minicart
Rendering child components
Templating with generic UiComponents
Adding extra info to the minicart
Using this.super or this._super?
Analysing the add-to-cart button
Tracking Knockout observables
Custom Knockout bindings
Linking properties
ConfigProviders for window.checkoutConfig
Adding a new Layout Processor
Layout processors
Overview of checkout
Adding a child component to the checkout
Adding a new step in checkout
Component configuration
Adding a field to the address form
Adding a CMS block in checkout
Data sources in the checkout
Add additional email validation
ZIP code validation
Payment validators
Observer quote changes
Calling upon `checkoutProvider`
Add a block to the sidebar
Extending `window.checkout`
Observing field validation
Definition of Private Content
Dealing with `customerData`
Example for using `customerData`
Add a new customerData section
How `customerData` sections get their data
Showing `customer().lastname` in a Knockout template
Adding messages via KO
Depersonalizer
Overview of testing
Magento tests with Jasmine
Adding Karma to Magento
Adding Mocha to Karma and Magento
Adding Chai to Magento
Adding Tape to Magento
Some tips

Audience

Technical merchants
Webdesigners
Frontend developers

Requirements

Experience with Magento 2 Admin Panel
An installation of Magento 2 running locally
Knowledge of XML layouts in Magento 2 theming (part 1 of this course is recommended)
Knowledge of Magento 2 PHTML templating
Knowledge of jQuery and vanilla JavaScript

Frequently Asked Questions

There is a minimum number of attendees listed. What does this mean?

The training is only held when there is a number of attendees. This number is usually 4 but sometimes we bring this down to 2 or 3. This minimum number simply means that if a class is not "full", either you get a refund or your ticket is transferred to another date.

The teacher: Jisse Reitsma

Thus it came to be

When Jisse started with Magento, he already had years of experience programming in Joomla (back in the days when Joomla was actually the #1 CMS - believe it or not). Back then, open source cart solutions were lacking and Magento 1.0 brought a lot of hope.

Quickly Jisse dived into the new architecture: In 2009, he built his first extensions, among which the fundaments of a bridge between Joomla and Magento (MageBridge) and various project-specific extensions (among which payment providers and custom MVC/EAV modules).

A relieve

Over the years, he experienced what most Magento developers experienced with M1: A lot of power, but also frustration. After a couple of years, it no longer was cutting-edge and it barely adopted new developer standards. When the new Magento 2.0 alpha 1 came out, Jisse started playing with it. And he was relieved to see modern tools in its architecture: Composer, PHP namespacing, testability, CLI-driven management, proper design patterns.

Again, after building some modules and dummy projects, the first Magento 2 developer training was given in January 2017 (two months after the official release) and numerous M2 trainings have followed for both backend developers, frontend developers and devops.

Frontend sagas

Currently, with Magento 2 being several years old now, the fuzz is no longer about its backend architecture: It is the frontend that matters. Jisse has given numerous frontend development trainings, where people complain about LESS (and not SASS) being used, loading times to be slow (while in fact M2 allows for enough tuning to make it bloody fast), an archaic combo of Knockout/RequireJS (while they both serve their purpose in regards to backwards compatibility).

PWA is the new keyword. Jisse has dived into React, Redux & service workers in combination with GraphQL and NodeJS tools. He is currently working in various initiatives to help developers embrace the new frontend stack (ExtDN, Vue Storefront, DEITY). Also, he has added Docker and Kubernetes to his vocabulary.

As of yet, it is fair to say that Magento holds little surprises for Jisse. He is your guy to train you or your developers properly in both backend and frontend technology.

Magento 2 JavaScript