Component-based architectures are common nowadays: ReactJS components, VueJS components, AlpineJS components, Magewire components, Magento core UiComponents, etcetera. Loki Components could be added to this list. To understand the Loki Checkout, you will first need to know a bit more about AlpineJS and Loki Components.
The Yireo_LokiComponents module is available for free on GitHub: [github.com/yireo/Yireo_LokiComponents])(https://github.com/yireo/Yireo_LokiComponents)
The Loki Checkout uses components that are part of the Loki Component module. Loki Components on the client-side are AlpineJS components that make AJAX calls to the Magento backend and then refresh multiple HTML parts on the page based on the Magento response.
The challenge that Loki Components tries to solve is not only to make AJAX calls easier, but also to make sure that various parts of the page can be updated instantly. Loki Components make this possible quite easily: A single AJAX call is triggered, possibly updating a value in the backend (via ComponentRepository classes) and then a AJAX response is sent back including the HTML of various parts of the page that need to be updated (layout-based block output). These HTML parts are based upon HTML element IDs and are referred to as targets. Finally, each HTML element is replaced with the new AJAX-based HTML.
For example, when an input field firstname is updated, Loki Checkout tries to validate and filter the value first via a client-side AlpineJS component. Next, if validation succeeds, the firstname value is submitted to the Magento backend by using a simple AJAX call. On the Magento side, the firstname value is again filter and validated (you can never trust the client-side) and then an HTML response is sent back, including the HTML output of various blocks (the targets). This includes the firstname input field itself, but it could also include the sidebar and other parts of the page. All in one single HTTP request.
On the Magento side, every AJAX request always is sent to the same Yireo_LokiComponents controller, which reads a block name from the request: This block - from which the original AJAX request originated, so most likely some kind of form element - is declared in both XML layout and an XML file loki_components.xml. The XML layout simply makes sure that the block is added to the right place. The special loki_components.xml file declares a Component which is used both while rendering the page and while making changes in the backend.
A basic Loki Component uses the following parts:
loki_components.xml where the name of the component is equal to the block name;Yireo\LokiComponents\Component\ComponentViewModel;$viewModel variable automatically assigned;`A component is able to use various other logical parts:
A more advanced version could add the following:
ViewModel class;Repository class for making changes;Context class for adding dependencies to the ViewModel and/or Repository;And there is even the option to replace the default component class (while we actually recommend not to do this).
If you are building a Loki Component that should store data on the server (aka: a field component), a Repository class is required.