This exam will validate the skills and knowledge needed to develop new JavaScript modules and customize existing ones. It will verify whether the developer understands the core Magento JavaScript framework, is able to use its components in the correct way, and understands best practices for customizing existing components and adding new ones. The exam pays particular attention to UI components, and will validate whether the developer understands their purpose, area of application, architecture, and lifecycle. This includes not only the in-browser JavaScript framework, but also the related server-side configuration for layout, customer data sections, and adminhtml UI components. This exam is for a JavaScript developer with broad experience in customizing Magento JavaScript for at least 1 year. The test is built for the 2.2.x version of Magento Commerce and Magento Open Source.
Supporting Magento U course: ➢ JavaScript Development in Magento 2 (Instructor-Led)
This exam consists primarily of scenario-based questions in a multiple-choice format. Sample questions are included at the end of this guide. Test time: 90 minutes. Passing score: 63% or above, 60 questions. Available to take remotely or at a test center.
- 1. Technology Stack 20%
- 2. Magento JavaScript Basics 25%
- 3. Magento Core JavaScript Library 19%
- 4. UI Components 24%
- 5. Checkout 12%
- What is the main purpose of the RequireJS framework?
- What are the pros and cons of the AMD approach to JavaScript file organization?
- Which capabilities does RequireJS provide to create and customize JavaScript modules?
- What is a requirejs-config.js file?
- In which cases it is necessary to add configurations to it?
- What tools does it provide?
- What are global callbacks?
- How can mappings be used? https://requirejs.org/docs/api.html#config-callback
- What are RequireJS plugins?
- What are the text and domReady plugins used for?
- What are the benefits of using the underscore library versus native JavaScript?
- Describe how underscore templates are used.
- What are the pros and cons of using underscore templates?
- Describe how underscore templates are used in Magento together with the text RequireJS plugin.
belvg, jason, devdocs, devdocs
- What is a jQuery library?
- What different components does it have (jQuery UI, jQuery events and so on)?
- How does Magento use it?
devdocs, codilar, magestore, belvg, rohanhapani
- Describe the architecture of the Knockout library: MVVC concept, observables, bindings.
- What is the main concept of knockout templates?
- What are the pros and cons of knockout templates?
- Compare knockout templates with underscore JavaScript templates.
- What file structure is used to organize JavaScript modules?
- Where does Magento locate a module’s JavaScript file?
- Where does Magento store the JavaScript library?
- How does Magento expose a module's static content to the web requests?
- What are the different ways to deploy static content?
devdocs, belvg, firebearstudio, webkul, jamersan
- How do you ensure that a module will be executed before other modules?
- How can an alias for a module be declared?
- What is the purpose of requirejs-config.js callbacks?
- Plain modules
- jQuery UI widgets
- UiComponents
alanstorm, toweringmedia, makandracards, stackexchange, inchoo, belvg
- What is the purpose and syntax of the data-mage-init attribute?
- How is it used to execute JavaScript modules?
- What is the purpose and syntax of the text/x-magento-init script tag?
- What is the difference between the text/x-magento-init and the data-mage-init methods of JavaScript module execution?
- How do you execute a JavaScript module in an AJAX response and in dynamic code stored in a string?
devdocs,magently, ibnab, kiwicommerce, jason, rakeshjesadiya
- What is the role of jQuery widgets in Magento?
- What are typical widgets?
- How are Magento jQuery widget modules structured?
- How are Magento jQuery widgets executed with data-mage-init and text/x-magento-init?
devdocs, alanstorm, webkul, meetanshi, learnmagento2
- Describe advantages and limitations of using mixins.
- What are cases where mixins cannot be used?
- How can a new method be added to a jQuery widget?
- How can an existing method of a jQuery widget be overridden?
- What is the difference in approach to customizating jQuery widgets compared to other Magento JavaScript module types?
- Magento pseudo ES6 literals and underscore templates in Magento
- How do you use cookies in the module?
- How isDemonstrate the ability to use the popup and modal widgets localStorage used in Magento?
- How are CSV translations exported to be available in JavaScript modules?
- How is a new translation phrase added using JavaScript methods?
- What are the different components available through the mage/utils module?
- What is the architecture of the validation modules in Magento?
- How can a custom validation rule be added?
- How can an existing rule be customized?
devdocs, stackexchange, alanstorm
- Which collapsible widgets are available in Magento?
- How do you use them?
- How do you create a new popup, dialog, or modal with the Magento components?
- Which other widgets are available in the Magento JavaScript library?
- How do you use them?
devdocs, stackexchange, , belvg, webkul, alanstorm, magecomp, hellomagento2
- What is private data?
- Why do we need to store information in the browser?
- What are performance considerations?
- How is the customer-data module structured?
- How is data accessed, invalidated, or set?
Describe how to use sections.xml to modify the information available through the customer-data module
- How can a sections.xml file be used to add a new section and to modify the invalidation rules of an existing section?
- How can a customization change the way existing sections work?
devdocs, amasty, alanstorm, mageplaza, inchoo, bizspice, belvg
- Describe the remote template engine, template syntax, custom tags and attributes, and the rendering mechanism
- Where can a full list of custom bindings be found?
- What are they used for?
- What alternatives are there?
- What is the purpose of the scope binding?
- What Knockout problem does it solve?
- How exactly does this binding work?
- How is the scope binding used?
- How do nested scopes work?
- How can data of a parent scope be accessed from a child?
- How can the scope binding be applied to HTML in Ajax responses?
devdocs, alanstorm, magently, devdocs, hexascholars
- What is the difference in uiCompnent execution compared to other JavaScript module types?
- What does it mean to "execute a uiComponent"?
- Why do we need the app component to execute uiComponents?
- What is the role of the layout component?
- What is uiClass?
- How does it instantiate uiComponents?
- How can existing component instances be accessed?
- How can a uiComponent be modified?
- How do you extend an existing uiComponent?
- What is the role of the uiElement and uiCollection modules?
Demonstrate the ability to create a uiComponent with its own data, or operate with data of existing uiComponents
- How does a uiComponent access the data it needs?
- What are the requirements for a subcomponent to provide data?
- How can data be loaded by Ajax?
- How can a component receive the data when it is loaded?
- How can one uiComponent instance access data of another instance?
- How can components communicate while taking into account their asynchronous nature?
devdocs, inviqa, stackoverflow
- What are the stages of uiComponent execution?
- What is the role of the layout module, and how does it load components, children, and data?
- What are the types of components it supports? Demonstrate the ability to use uiComponents configuration to modify existing instances and create new instances
- Describe the definitons.xml file and uiComponent instance XML files.
- How can you modify an existing instance of a uiComponent using a configuration file?
- What is the role of the Magento layout in the uiComponent workflow?
mage-world, webkul, magestore, meetanshi
- How do you create a grid?
- How do you add an image column, standard validation, custom validation rules, and custom column types to a grid?
- How do you modify existing grids?
- How do you customize the data loading process for a grid, including filters and sorting?
- How do you create a form, a form with tabs, a form with groups of fields, a form with dynamic fields (when one field change will cause a change in another place)?
- How do you customize existing forms?
- How do you add validation to fields, including custom validation rules?
- How can you add a file upload field, an image field, and a custom field to a form?
inviqa, devdocs, devdocs, mageplaza, paulnrogers, interactiv4, alanstorm, inchoo
- What are actions, models, and views used for in checkout?
- How does Magento store checkout data?
- What type of classes are used for loading/posting data to the server?
- How does a view file update current information?
- How do you add a new checkout step?
- How do you modify the order of steps?
- Debug the data flow of each step.
- How do you customize a step's logic?
- How does Magento save information about the shipping address for different types of checkout (logged in with default address, without default address, not logged in)?
- How does Magento obtain the list of available shipping methods?
- Which events can trigger this process?
- How does Magento save a selected address and shipping method?
mageplaza, devdocs, devdocs, javatpoint
- Add new payment method and payment methods renderers.
- Modify an existing payment method.
- How does a payment method send its data to the server?
- What is the correct approach to deal with sensitive data?
- Describe the data flow during order placement
- Which modules are involved?
- How can the payment step be separated from the order placement?