browse the blogs

[ 16 Feb 2017 ]

Tangentially Magento related: Magento uses the lusitanian/oauth composer package to handle some oAuth related tasks. In addition to the usual “create the cryptic Authorization: headers” code you’d expect to find in an oAuth library, there’s also these two folders of code

Each service class listed here attempts to capture each individual oAuth API’s unique take on how to authenticate, authorize, and call an API endpoint for a particular third party service.

Whenever someone like me quips that “oAuth is a tire fire”, what we’re really saying is “I wish oAuth was a protocol with a standard implementation for authentication, authorization, and method calling across corporate providers”. The effort David’s made to write and/or collect these …

[ 15 Feb 2017 ]

In a typical adminhtml UI Form Component, each individual form element has a corresponding view model object. For text input fields, these view models come from the constructor function returned by the Magento_Ui/js/form/element/abstract RequireJS module.

The view model’s value property, an Knockout observable object, contains the field’s value.

This value property is set with the uiElement’s links feature.

#File: vendor/magento/module-ui/view/base/web/js/form/element/abstract.js
defaults: {
    /* ... */
    links: {
        value: '${ $.provider }:${ $.dataScope }'

The links default will set observable values on an object at the time of instantiation by pulling items from the uiRegistry. …

[ 9 Feb 2017 ]

Keeping with UI Component form theme but drawing a wider circle, if you take a look at HTML source of a button on a backend Magento 2 HTML form, you’ll see something like the following

<button id="back"
class="action- scalable back"
onclick="location.href = '';"

<button id="save"
title="Save Page"
class="action- scalable save primary ui-button ui-widget ui-state-default ...

[ 9 Feb 2017 ]

Merged Layout schema validation error in Magento 2:

A peek at the complexity deep in Magento 2’s layout rendering engine.

[ 8 Feb 2017 ]

It surprised me that over a year after Magento 2’s introduction I haven’t had an opportunity to create a new form component using the UI Component system. In the extensions and themes I’ve helped folks port over it made a lot more sense to just convert the old PHP rendered HTML to the new extension. When time is money known technology trumps new, fancy, and undocumented technology.

Having a chance to touch the backend form generation code this week, any doubts I had about my previous approach with clients evaporated. Whether you call it a technology demo or a mess, form components perfectly encapsulate a lot of the the problems Magento developers face with Magento 2’s incomplete rendering …

[ 7 Feb 2017 ]

For backend UI Components, the rendered x-magento-init JSON argument contains two top level keys: types and components

    "*": {
        "Magento_Ui/js/core/app": {
            "types": {/*...*/},
            "components": {/*...*/}

The Magento_Ui/js/core/app module/application uses the data in components to instantiated a nested tree of uiClass based objets and register them as KnockoutJS view models (accessible via Magento’s customer KnockoutJS scope binding). It was never clear to me what the types information was for. I’ve sort of figured that out – …

[ 7 Feb 2017 ]


For folks still playing “wait and see” with Magento 2, (i.e. most current Magento systems), and who are using some sort of Composer workflow (not most Magento 1 systems), this is a small autoloader optimization that fixes Magento 1’s selfish “if I try to load someone else’s class and it doesn’t exist I’ll explode” autoloader.

[ 4 Feb 2017 ]

So, over the summer I covered how to invoke a function returning RequireJS modules via an x-magento-init script. Today I discovered there’s a syntax for doing this with an object returning RequireJS module. If you’ve got an x-magento-init that looks like this

<script type="text/x-magento-init">
        "*": {
            "Package_Namespace\/js\/example": {/* ... config object ... */}

just define a module that looks like this

#File: app/code/Package/Namespace/view/web/frontend/js/example.js

define([], function(){
return {

[ 3 Feb 2017 ]

One of the challenges Magento 2, (and all “full stack” oriented frameworks), face is data synchronization between the front end and the server. Server data will always represent the “source of truth” for any particular piece of data, but good front end developers will always be looking to reduce to number of round trips they make to the server. Magento 2 faces an additional cultural challenge in that it remains a PHP framework, and most developers doing Magento 2 work are going to rely on its many code injection features to change how server side data is saved. In other words, reducing a client side round trip may work out of the box, but may result …