ubermanu/magento2-motu

An implementation of the island architecture for Magento 2

Maintainers

Details

github.com/ubermanu/magento2-motu

Source

Issues

Installs: 0

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Type:magento2-module

1.0.1 2024-02-29 09:44 UTC

Requires

MIT 105db84cfbd793c44146c2d4ce3f1b4aceba71c0

  • Emmanuel Vodor <emmanuel.vodor.woop@proton.me>

This package is auto-updated.

Last update: 2024-05-29 10:19:44 UTC

README

An implementation of the island pattern for Magento 2.

The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages. The output of islands is progressively enhanced HTML, with more specificity around how the enhancement occurs. Rather than a single application being in control of full-page rendering, there are multiple entry points. The script for these "islands" of interactivity can be delivered and hydrated independently, allowing the rest of the page to be just static HTML.

From Islands Architecture

Installation

composer require ubermanu/magento2-motu

Quick start

Create a new island block:

<?php

namespace Vendor\Module\Block\Island;

class Example extends \Ubermanu\Motu\View\Element\AbstractIsland
{
    public function getClientMethod(): string
    {
        return 'load';
    }
}

Add the block to your layout:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Island\Example"
                   name="example"
                   template="Vendor_Module::island/example.phtml" />
        </referenceContainer>
    </body>
</page>

That's it! The island will be rendered in the page and hydrated by the client-side script.