Section 6: Customize and Create JavaScript (17%)

Previous Section | Next Section

Section 6: Customize and Create JavaScript (17%)

6.1 Include custom JavaScript on pages

What options exist to include custom JavaScript on a page? What are the advantages and disadvantages of inline JavaScript? How can JavaScript be loaded asynchronously on a page? How can JavaScript on a page be configured using block arguments in layout XML? How can it be done directly in a .phtml template?

6.2 Demonstrate understanding of using jQuery

Demonstrate understanding of jQuery and jQuery UI widgets. Demonstrate understanding of how to use Magento core jQuery widgets. How can jQuery UI Widget methods be instantiated? How can you call jQuery UI Widget methods? How can you add new methods to a jQuery UI Widget? How can a jQuery UI Widget method be wrapped with custom logic?

6.3 Demonstrate understanding of requireJS

How do you load a file with require.js? How do you define a require.js module? How are require.js module dependencies specified? How are module aliases configured in requirejs-config.js? How do you regenerate the compiled requirejs- config.js file after changes? How do you configure module aliases in requirejs-config.js? How do you debug which file a requireJS alias refers to? Demonstrate that you understand how to create and configure Magento JavaScript mixins.

6.4 Configure JavaScript merging and minify in the Admin UI

What options are available to configure JavaScript minification and bundling? How does Magento minify JavaScript? What is the purpose of JavaScript bundling and minification?

6.5 UI component configuration

How can you specify configuration options on a UiComponent widget in JSON and in Layout XML? What configuration options are available on UiComponents? How do you specify the ko template for a UiComponent? Demonstrate an understanding of default.tracks

6.6 Understanding knockout framework

How do you use knockout.js bindings? How do you bind a ko view model to a section of the DOM with the scope binding? How do you render a ko template of a UiComponent? Demonstrate an understanding of the different types of knockout observables. What common ko bindings are used? Demonstrate an understanding of ko virtual elements.

6.7 Understanding dependency between components

Demonstrate an understanding of the links, imports, exports, and listens UiComponent configuration directives.

6.8 Understanding string templates

Demonstrate an understanding of ES5 string literal templates like ${$.provider}. What does $. Inside of ${ } resolve to?