I thought I’d finished up with UI Components, but then I started investigating the checkout application and stumbled across regions. In the aforementioned UI Components series, we learned that a “UI Component” is a nested tree of RequireJS modules and KnockoutJS templates which a programmer can use as an HTML [...]
astormThe Curious Case of Magento 2 Mixins Don’t let the title fool you – this article (from me) will teach you how to safely hook into the instantiation of any RequireJS module in Magento 2. This, in turn, enables all sorts of things including safe javascript rewrites/monkey-patching.
astormThis entry is part 4 of 6 in the series Magento 2: Advanced Javascript. Earlier posts include Magento 2: Javascript Init Scripts, KnockoutJS Primer for Magento Developers, and Magento 2: KnockoutJS Integration. Later posts include Knockout Observables for Javascript Programmers, and Modifying a jQuery Widget in Magento 2. We’re [...]
astormThis entry is part 8 of 13 in the series Magento 2 UI Components. Earlier posts include Magento 2: Introducing UI Components, Magento 2: Simplest UI Component, Magento 2: Simplest UI Knockout Component, Magento 2: Simplest XSD Valid UI Component, Magento 2: ES6 Template Literals, Magento 2: uiClass Data Features, and Magento 2: UI [...]
astormCommerce Bug 3.2 Released Pretty excited about this one – has the UI Component debugging features that should have been there from day one.
astormThis entry is part 7 of 13 in the series Magento 2 UI Components. Earlier posts include Magento 2: Introducing UI Components, Magento 2: Simplest UI Component, Magento 2: Simplest UI Knockout Component, Magento 2: Simplest XSD Valid UI Component, Magento 2: ES6 Template Literals, and Magento 2: uiClass Data Features. Later posts include [...]
astormMagento 2 Tool Chain I’ve learned to accept, in my head, that this sort of over complication always happens when the size of the team maintaining an application or system grows. That said, I’ll never quite understand why in my heart.
astormA technical guide to the Magento 2 checkout A deep dive (written by Inviqa) on the javascript checkout application in Magento 2. A nice companion to my UI Components series — the Inviqa article has some application specific details that will be useful to any developer customizing the checkout flow. (hat tip to Joe Constant)
astormI came across this code recently while researching Magento 2’s UI Component system initComponent: function (node) { if (!node.component) { return this; } loadDeps(node) .then(loadSource) .done(initComponent); return this; } That block in the middle might confuse a junior programmer, but I’m no spring chicken. That looks like [...]
astormMagento 2 uiClass Imports and Exports Explained I’m working on my own version of this as we speak, but the Jessie Maxwell does a nice job of breaking down the imports and exports feature of Magento’s UI Components.
astormOur last article covered Magento's implementation of ES6 template literals. Near its end, we started to bump up against some features (the defaults array) of Magento's UI Component focused classical-style object system. Before we can get to UI Component data sources, we'll need to
astormToday we need to take a small detour into ES6 template literals. Template literals are a newish javascript feature that Magento 2's UI Component system ends up leaning on for some key pieces of functionality. They're an important concept to understand by themselves, but
astormMagento 2: Approximating Local Code Pool Overrides Not sure if I like the idea of this becoming a common practice, but if you know your composer autoloading you can replace any class in Magento with a version of your own.
astormIn our previous two articles we ran through creating a new UI Component from scratch. While we were successful, we needed to add a class <preference/> (i.e. a rewrite) that disabled Magento 2's XSD validation. While this was useful as a learning
astormLast time we created (with the help of some <preference/> hackery) the simplest possible Magento 2 UI Component. If you made it all the way through, I bet you were a little disappointed that we left out the javascript. Today we'll try to
astormKnockoutjs context debugger Chrome extension for peeking at a node’s KnockoutJS context. Useful if you’re doing frontend Magento work and hewing to their view of the world. via Daniel Sloof.
astormAnother javascript debugging snippet for the intrepid Magento 2 javascript programmer. The Magento_Ui/js/core/app RequireJS module/application/program is an important part of Magento 2’s UI Component system. This is the program that registers KnockoutJS views and makes them available for use in the (custom to Magento 2) Knockout.js [...]
astormToday we're going to YOLO deep dive into Magento 2's UI Components and attempt to create one from scratch. At this stage in Magento 2's lifecycle this isn't something third party developers can do without taking extra ordinary "not production safe" measures, but sometimes
astormMagento 2: Syncing Backend and Frontend State/Cache Haven’t had time to check this out yet, but this is a far more cogent explaination of Magento 2’s mysterious sections.xml than anything I’ve seen so far.
astormIf you've dug into pestle, my command line PHP framework and Magento code generation tool, you've probably noticed it wasn't super friendly to use pestle based code in your own PHP projects. That changes starting today. Pestle is now a packagist library, which means
astorm