DEV Community: Lars Roettig

How i learned React?

Lars Roettig — Tue, 05 Jan 2021 00:00:00 +0000

In 2019 I resolved to learn React because I have seen that PWA will be one of the critical technologies of the future.

In 2020 has shown that it was the right decision because the headless hype train will roll in soon.

I know React is not a golden hammer and is maybe not the right choice for your Project.
If you want to more when you should select a PWA Approche, you should read Getting started with Magento PWA Studio.

Now when you get into headless architecture, there is significantly much to learn and understand.
Because the development of backend and frontend is independent.

From my perspective, an advantage new frontend developers can use already known technologies like ReactJS without going through the learning curve of Magento.

But without data from Back-End is not possible to build an online store with actual inventory. So we also need developers to build API between head and backend.

After almost two years working in React and TypeScriprt in my spare time i am ready to summarize what help me to tame the technology stack.

The Foundation before you start with React

If you are not familiar with all ES6 (ECMAScript 2015) Features you should check out

Good Ressources to learn TypeScript

In my experience with a nice TypeScript Setup, you found already many bugs in development also It reduces the technical dep.
If you haven't used it yet, I strongly recommended you should give it a shot, and you will never use plain JavaScript again if you can prevent it.

Also, there is a Big shift in React Community Trainers like Kent C. Dodds, Sebastian Springer also recommends using TypeScript.

TypeScript in 50 Lessons by Stefan Baumgartner (39.00 €)

Stefan Baumgartner breaks down the quirks of TypeScript into short, manageable lessons.

I would call it the TS Bible a Complete guide for TypeScript.
I highly recommended to read it, especially the chapters on generics and conditional types.

https://www.smashingmagazine.com/printed-books/typescript-in-50-lessons/

Good Ressources to learn React.JS

There are incredibly many courses and books to learn to React.
Unfortunately, many are outdated or do not explain enough.

Foundation materials

The Beginner's Guide to React (Free)

This course requires little knowledge of Javascript but shows everything newbies need to know to build a small React application.
If you're working longer with React, you can learn a solid foundation of React, so I recommending don't skip it!

https://egghead.io/courses/the-beginner-s-guide-to-react

React Hooks in Action ($39.99)

Build interfaces in React without writing custom classes.
React Hooks in Action teaches you to use pre-built hooks like useState, useReducer and useEffect, and build your own hooks.

I really enjoyed the clear examples you also find many Graphic Materials what descript flow and how to React hooks works.
In this book, you also learn about all the essential things to write maintainable React Code.

https://www.manning.com/books/react-hooks-in-action

Advanced Materials

TypeScript Plus React = Love (Free)

Fullstack React with TypeScript ($39.99)

I practical guidelines you learn building professional React Application with TypeScript.

I find the examples very practical and help one deepen the React Pattern and remember My opinion often missing explanations for the basics like how the pattern works in theory with graphics. Without React knowledge, you will not understand many important topics.

Mainly for 39 $ but is extremely good if you do not know what to build with the newly acquired knowledge.

https://www.newline.co/fullstack-react-with-typescript

Full Course

Epic React (599$)

This course is a 19-hour collection of an interactive self-paced workshop exercise.

I finish the first 5 sections of it.
From my point of view it has excellent Examples I think you can spend
four full days to understand all sections and build all things with all extra credits, which helps real applications.

https://epicreact.dev/

Helpful React, Blogs and posts to understand:

Summerize

In my experience, if you learn a new language or it is essential to train it to get Professional. Train in the Job is not really an option. Mostly it leads to a not maintainable code base, and your Team and customer will be unhappy. From my point of view, it is beneficial to start with contributions to project like PWA-Studio.
I can recommend before you start a Headless Project, make sure your Team know about all Technologies.
This means your Frontend Team should spend 2-3 days to get familiar with React. Also, you need an Expert what your Team lead and train show the gaps.

Getting started with PWA Studio Extensibility

Lars Roettig — Mon, 29 Jun 2020 22:00:00 +0000

The 7.0 release improves on the extensibility framework. I want to prove if we can already build a real PWA extension or where we run in limitation. This blogpost contains two parts. The first part is about the technical strategies behind the Extensibility Apis. In the second part, we will write a small extension.

Technical strategies

The new extensibility Apis allows extending Build pack, Peregrine, and Venia UI library components. The main goal is developers can make changes in storefront projects or standalone extensions without duplicating or maintaining the PWA-Studio code. The PageBuilder is integrated via targets. It is the first Magento Content plugin. Also, it is an excellent example of your plugins. For replacing or extend already existing ui components, we need a workaround currently. Replacing a part can be dangerous. It is not a compound change, so if two extensions both want to replace the same file, it can lead to errors. Currently, the Core Team doesn't want to support a fallback structure by default. From my perspective, we need a way how a plugin can register its new components to already existing ui components. PWA Studio packages should declare which of their ui-components are safe to replace and make them replaceable. A reliable replacement strategy will help that vendors can build Standalone Marketplace Extensions.

Venia UI extension points

Currently, it is allowed to add new routes or create a new richContentRenderers to create new blog plugin based on CMS like NEOS. The richContentRenderers are used to integrate the Magento Page Builder Plugin in PWA Studio.

Dokumentation Link: https://github.com/magento/pwa-studio/blob/release/7.0/packages/venia-ui/lib/targets/venia-ui-declare.js

Peregrine extension points

We can now wrap any individual Peregrine talons when Peregrine talons are invoked, and/or to modify the behavior and output of those talons. Like the around plugin concept knowen as interceptor pattern of Magento.

targets.of('@magento/peregrine').talons.tap(talons => {
    talons.App.useApp.wrapWith('./log-wrapper');
})

log-wrapper.js

export default function wrapUseApp(original) {
    return function useApp(...args) {
        console.log('calling useApp with', ...args);
        return original(...args);
    }
}

Build pack extension points

These extension points are based on the Webpack Compiler Hooks. This the Webpack API is very well documented and often used to build plugins.

Dokumentation Link: https://github.com/magento/pwa-studio/blob/release/7.0/packages/peregrine/lib/targets/peregrine-declare.js

This post contains interactive elements that are cannot be displayed on dev.to view it: https://larsroettig.dev/getting-started-with-pwa-studio-extensibility/

How to create a GraphQL Mutation Endpoint for Magento 2.3

Lars Roettig — Wed, 18 Mar 2020 09:59:56 +0000

In my last Magento 2 tutorial, I showed how to build a basic GraphQL module with filtering.The primary purpose of GraphQL is to retrieve data (query), but every complete data exchange format needs a way to change server-based data (mutations).Therefore I want to show now how we can change data or create new pickup stores via the frontend.

Currently, the Magento 2 GraphQL Endpoint supports only access controls based on customers. This GraphQL will only allow a queryon the customer data if the customer’s token must proived in the header section.

Since I would like to show only exemplarily how such a thing could look, I did without access control!

Before we can start here, you can find the first module that we need ground for this tutorial.

How to create a GraphQL Endpoint for Magento 2.3

Github Repo

Create a new php file app/code/LarsRoettig/GraphQLStorePickup/Model/Resolver/CreatPickUpStore.php

This Class holds the logic for that endpoint is responsible for any GraphQL call that creates a new pickup store in the Database.Every Resolver Class is forced to implements Magento\Framework\GraphQl\Query\ResolverInterface to work correctly.

<?php

declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Model\Resolver;

use LarsRoettig\GraphQLStorePickup\Model\CreatePickUpStore as CreatPickUpStoreService;
use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Exception\GraphQlInputException;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;

class CreatPickUpStore implements ResolverInterface
{
    /**
     * @var CreatPickUpStoreService
     */
    private $creatPickUpStore;

    /**
     * @param CreatPickUpStore $creatPickUpStore
     */
    public function __construct(CreatPickUpStoreService $creatPickUpStore)
    {
        $this->creatPickUpStore = $creatPickUpStore;
    }

    /**
     * @inheritDoc
     */
    public function resolve(Field $field, $context, ResolveInfo $info, array $value = null, array $args = null)
    {
        if (empty($args['input']) || !is_array($args['input'])) {
            throw new GraphQlInputException(__('"input" value should be specified'));
        }

        return ['pick_up_store' => $this->creatPickUpStore->execute($args['input'])];
    }
}

File app/code/LarsRoettig/GraphQLStorePickup/Model/CreatePickUpStore.php:

The second step is to create a service class that will convert a given array to a pickup store and saves them in the database.A service class help us to have single small bussiness logic that can be used by differnt other php services.

<?php
declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Model;

use LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterface;
use LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterfaceFactory;
use LarsRoettig\GraphQLStorePickup\Api\StoreRepositoryInterface;
use Magento\Framework\Api\DataObjectHelper;
use Magento\Framework\Exception\CouldNotSaveException;
use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\GraphQl\Exception\GraphQlInputException;

class CreatePickUpStore
{

    /**
     * @var DataObjectHelper
     */
    private $dataObjectHelper;
    /**
     * @var StoreRepositoryInterface
     */
    private $storeRepository;
    /**
     * @var StoreInterfaceFactory
     */
    private $storeFactory;

    /**
     * @param DataObjectHelper $dataObjectHelper
     * @param StoreRepositoryInterface $storeRepository
     * @param StoreInterfaceFactory $storeInterfaceFactory
     */
    public function __construct(
        DataObjectHelper $dataObjectHelper,
        StoreRepositoryInterface $storeRepository,
        StoreInterfaceFactory $storeInterfaceFactory
    ) {
        $this->dataObjectHelper = $dataObjectHelper;
        $this->storeRepository = $storeRepository;
        $this->storeFactory = $storeInterfaceFactory;
    }

    /**
     * @param array $data
     * @return StoreInterface
     * @throws GraphQlInputException
     */
    public function execute(array $data): StoreInterface
    {
        try {
            $this->vaildateData($data);
            $store = $this->saveStore($this->createStore($data));
        } catch (\Exception $e) {
            throw new GraphQlInputException(__($e->getMessage()));
        }

        return $store;
    }

    /**
     * Guard function to handle bad request.
     * @param array $data
     * @throws LocalizedException
     */
    private function vaildateData(array $data)
    {
        if (!isset($data[StoreInterface::NAME])) {
            throw new LocalizedException(__('Name must be set'));
        }
    }

    /**
     * Persists the given store in the data base.
     * +
     * @param StoreInterface $store
     * @return StoreInterface
     * @throws CouldNotSaveException
     */
    private function saveStore(StoreInterface $store): StoreInterface
    {
        $this->storeRepository->save($store);

        return $store;
    }

    /**
     * Create a store dto by given data array.
     *
     * @param array $data
     * @return StoreInterface
     * @throws CouldNotSaveException
     */
    private function createStore(array $data): StoreInterface
    {
        /** @var StoreInterface $store */
        $store = $this->storeFactory->create();
        $this->dataObjectHelper->populateWithArray(
            $store,
            $data,
            StoreInterface::class
        );

        return $store;
    }
}

File app/code/LarsRoettig/GraphQLStorePickup/etc/schema.graphqls

This need to be added to the file:

type Mutation {
    createPickUpStores(input: PickUpStoreInput!): PickUpStoreOutput @resolver(class: "\\LarsRoettig\\GraphQLStorePickup\\Model\\Resolver\\CreatPickUpStore") @doc(description: "Create a new pickup store")
}

type PickUpStoreOutput {
    pick_up_store: PickUpStore!
}

input PickUpStoreInput {
    name: String @doc(description: "")
    street: String @doc(description: "")
    street_num: Int @doc(description: "")
    city: String @doc(description: "")
    postcode: String @doc(description: "")
    latitude:Float @doc(description: "")
    longitude: Float @doc(description: "")
}

Full File:

type Query {
    pickUpStores(
        filter: PickUpStoresFilterInput @doc(description: "")
        pageSize: Int = 5 @doc(description: "How many items should show on the page")
        currentPage: Int = 1 @doc(description: "Allows to ussing paging it start with 1")
    ):PickUpStoresOutput @resolver(class: "\\LarsRoettig\\GraphQLStorePickup\\Model\\Resolver\\PickUpStores") @doc(description: "Allow to query for a pickup store.")
}

type Mutation {
    createPickUpStores(input: PickUpStoreInput!): PickUpStoreOutput @resolver(class: "\\LarsRoettig\\GraphQLStorePickup\\Model\\Resolver\\CreatPickUpStore") @doc(description: "Create a new pickup store")
}

type PickUpStoreOutput {
    pick_up_store: PickUpStore!
}

input PickUpStoreInput {
    name: String @doc(description: "")
    street: String @doc(description: "")
    street_num: Int @doc(description: "")
    city: String @doc(description: "")
    postcode: String @doc(description: "")
    latitude:Float @doc(description: "")
    longitude: Float @doc(description: "")
}

input PickUpStoresFilterInput {
    name: FilterTypeInput @doc(description: "")
    postcode: FilterTypeInput @doc(description: ""),
    street: FilterTypeInput @doc(description: ""),
    street_num: FilterTypeInput @doc(description: ""),
    city: FilterTypeInput @doc(description: ""),
    latitude:FilterTypeInput @doc(description: ""),
    longitude: FilterTypeInput @doc(description: ""),
    or: PickUpStoresFilterInput
}

type PickUpStoresOutput {
    total_count: Int @doc(description: "")
    items: [PickUpStore] @doc(description: "")
}

type PickUpStore {
    entity_id: Int @doc(description: ""),
    name: String @doc(description: ""),
    street: String @doc(description: ""),
    street_num: Int @doc(description: ""),
    city: String @doc(description: ""),
    postcode: String @doc(description: ""),
    latitude:Float @doc(description: ""),
    longitude: Float @doc(description: ""),
}

3. Installation:

bin/magento module:enable LarsRoettig_GraphQLStorePickup
bin/magento setup:db-declaration:generate-whitelist --module-name=LarsRoettig_GraphQLStorePickup
bin/magento setup:upgrade

The repo bramch can founded at Github:

https://github.com/larsroettig/module-graphqlstorepickup/tree/2.0-develop

How to call your GraphQL Endpoint

Attention the Url https://your\_domain.test/graphql work only with an valid GraphQL-Request!

GraphQL-Mutation:

mutation {
  createPickUpStores(
    input: {
      name: "Mustation Store"
      street: "sweswq"
      street_num: 12
      postcode: "83059"
      latitude: 22.3
      longitude:22.3
    }
  )
  {
    pick_up_store {
      name
    }
  }
}

(This article was posted to my blog at https://larsroettig.dev. You can read it online by clicking here.)

Enable Notify me when this product is in stock in Magento 2

Lars Roettig — Wed, 18 Mar 2020 09:53:46 +0000

This feature is available in Magento 2 Open Source, Commerce and B2B

As Merchant, you can enable this feature for registered customers.It allowed subscribing to two types of alerts, first is price change alert, and the sound is in-stock alert.For each alert example, you can choose a different email template.

Allow show Display Out of Stock Products

Stores/Catalog/Inventory/Display Out of Stock Products Option

Enable Allow alert when product comes back in stock

Stores/Catalog/Catalog/Product Alerts/Allow Alert When Product Comes Back in Stock

Optional Step

With the Frequency settings, it possible to change how often Magento checks for changes that require alerts sent to the subscribers.

Stores/Catalog/Catalog/Product Alerts Run Settings/Frequency

The in-stock alert setting creates a link called “Notify me when this product is in stock” for every product that is out of stock. Customers can click the link to subscribe to the alert. When the product is back in stock, customers receive an email notification that the product is available.

Attention the Mail is only sent by the configured time (Magento cron job).

Products with alerts have a Product Alerts sections in the Product Information panel that lists the customers who have subscribed to an alarm.

Links:

(This article was posted to my blog at https://larsroettig.dev. You can read it online by clicking here.)

Getting started with Magento PWA Studio

Lars Roettig — Wed, 11 Mar 2020 21:04:42 +0000

I want to divide this blog post into two parts. The first part is more from the business side. Is PWA the right technology for me?In the second part, I will explain how you can build your own build your own PWA Theme for Magento 2.

Is PWA the right technology for my requirements

As with all software, it should start with the why. What can a customer or a developer expect from a PWA Studio project? In my experience, when new technology appears, stakeholders do not ask about any added business values or requirements. What is the advantage of using this new shining technology? PWA Studio storefronts enhance the user experience, especially if the target customer group uses smartphones or modern browsers. Google page ranking, loading speed, and offline support(to handle short interruptions) are important reasons online businesses should consider PWA storefronts.

Questions online businesses should ask:

What are the target group of my PWA Project
Which features I need for an MVP
- Payments
- Shipping methods
- Language support

As already mentioned in my previous blog post, it is useful to now with a small project to gather experience with the new PWA. But it would be best if you thought about what you need and what helps to earn more money or meet your business goals.

How to create an own PWA Studio Theme

Basic requisites:

Essential Experience with React, HTML, CSS, Webpack

From my point of view, there currently two ways to start with a project. Project scaffolding default supported by Magento Core Team and Fallback Studio by Jordan Eisenburger. Fallback Studio creates a wrapper aroundPWA Studio). It provides a basic fallback structure. So you can develop storefronts that depend on the venia-concept storefront. It also supports scss.

You can find the project here: https://github.com/Jordaneisenburger/fallback-studio

Create a PWA Theme with Scaffolding

In this tutorial, we are going to extend the Main and create our TopBar component as the first element to our site.

PWA Studio comes with a Project scaffolding command, and this is a technique for auto-generating support for your project/theme. Early adopters of the PWA Studio project forked , and the Core Team recommends to don’t use this practice. With scaffolding, we should have the opportunity to build our own PWA Theme on top of Magento 2. The full documentation of https://magento.github.io/pwa-studio/pwa-buildpack/scaffolding/

Command to create a new Project:

yarn create @magento/pwa

It should look like:

Overwrite/Extend PWA Studio default component

Create the library dir and copy main component:

cd myproject
mkdir -p src/lib/components/
cp -R node_modules/@magento/venia-ui/lib/components/Main src/lib/components/

Update Main Component:

// src/lib/components/Main/main.js
import React from 'react'
import { bool, shape, string } from 'prop-types'
import { useScrollLock } from '@magento/peregrine'
import { mergeClasses } from '@magento/venia-ui/lib/classify'import Footer from '@magento/venia-ui/lib/components/Footer'import Header from '@magento/venia-ui/lib/components/Header'
import defaultClasses from './main.css'

const Main = props => {
    const { children, isMasked } = props;
    const classes = mergeClasses(defaultClasses, props.classes);

    const rootClass = isMasked ? classes.root_masked : classes.root;
    const pageClass = isMasked ? classes.page_masked : classes.page;

    useScrollLock(isMasked);

    return (
        <main className={rootClass}>
            <div>Static Block for TopBar</div>
            <Header />
            <div className={pageClass}>{children}</div>
            <Footer />
        </main>
    );
};

export default Main;

Main.propTypes = {
    classes: shape({
        page: string,
        page_masked: string,
        root: string,
        root_masked: string
    }),
    isMasked: bool
};

Create a overwrite webpack plugin:

// webpack.config.js

const path = require('path');
const glob = require('glob');

module.exports = class NormalModuleOverridePlugin {
  constructor(moduleOverrideMap) {
  this.name = 'NormalModuleOverridePlugin';
        this.moduleOverrideMap = moduleOverrideMap;
    }

  requireResolveIfCan(id, options = undefined) {
  try {
  return require.resolve(id, options);
        } catch (e) {
  return undefined;
        }
 }
  resolveModulePath(context, request) {
  const filePathWithoutExtension = path.resolve(context, request);
        const files = glob.sync(`${filePathWithoutExtension}@(|.*)`);
        if (files.length === 0) {
  throw new Error(`There is no file '${filePathWithoutExtension}'`);
        }
  if (files.length > 1) {
  throw new Error(
  `There is more than one file '${filePathWithoutExtension}'`
 );
        }

  return require.resolve(files[0]);
    }

  resolveModuleOverrideMap(context, map) {
  return Object.keys(map).reduce(
 (result, x) => ({
  ...result,
                [require.resolve(x)]:
                this.requireResolveIfCan(map[x]) ||
 this.resolveModulePath(context, map[x])
 }),
            {}
 );
    }

  apply(compiler) {
  if (Object.keys(this.moduleOverrideMap).length === 0) {
  return;
        }

  const moduleMap = this.resolveModuleOverrideMap(
  compiler.context,
            this.moduleOverrideMap
  );

        compiler.hooks.normalModuleFactory.tap(this.name, nmf => {
  nmf.hooks.beforeResolve.tap(this.name, resolve => {
  if (!resolve) {
  return;
                }

  const moduleToReplace = this.requireResolveIfCan(
  resolve.request,
                    { paths: [resolve.context] }
 );
                if (moduleToReplace && moduleMap[moduleToReplace]) {
  resolve.request = moduleMap[moduleToReplace];
                }

  return resolve;
            });
        });
    }
};

Create overwrite mapping file:

//componentOverrideMapping.js module.exports = componentOverride = {
 [`@magento/venia-ui/lib/components/Main`]: 'src/lib/components/Main' };

Register the webpack plugin:

// webpack.config.js
const {
  configureWebpack,
    graphQL: { getMediaURL, getUnionAndInterfaceTypes }
} = require('@magento/pwa-buildpack');
const { DefinePlugin } = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const moduleOverridePlugin = require('./moduleOverrideWebpackPlugin');
const componentOverrideMapping = require('./componentOverrideMapping');

module.exports = async env => {
  const mediaUrl = await getMediaURL();

    global.MAGENTO_MEDIA_BACKEND_URL = mediaUrl;

    const unionAndInterfaceTypes = await getUnionAndInterfaceTypes();

    const { clientConfig, serviceWorkerConfig } = await configureWebpack({
  context: __dirname,
        vendor: [
  '@apollo/react-hooks',
            'apollo-cache-inmemory',
            'apollo-cache-persist',
            'apollo-client',
            'apollo-link-context',
            'apollo-link-http',
            'informed',
            'react',
            'react-dom',
            'react-feather',
            'react-redux',
            'react-router-dom',
            'redux',
            'redux-actions',
            'redux-thunk'
 ],
        special: {
  'react-feather': {
  esModules: true
 },
            '@magento/peregrine': {
  esModules: true,
                cssModules: true
 },
            '@magento/venia-ui': {
  cssModules: true,
                esModules: true,
                graphqlQueries: true,
                rootComponents: true,
                upward: true
 }
 },
        env
    });

    /**
* configureWebpack() returns a regular Webpack configuration object. * You can customize the build by mutating the object here, as in * this example. Since it's a regular Webpack configuration, the object * supports the `module.noParse` option in Webpack, documented here: * https://webpack.js.org/configuration/module/#modulenoparse */ clientConfig.module.noParse = [/braintree\-web\-drop\-in/];
    clientConfig.plugins = [
  ...clientConfig.plugins,
        new DefinePlugin({
  /**
* Make sure to add the same constants to * the globals object in jest.config.js. */ UNION_AND_INTERFACE_TYPES: JSON.stringify(unionAndInterfaceTypes),
            STORE_NAME: JSON.stringify('Venia')
 }),
        new HTMLWebpackPlugin({
  filename: 'index.html',
            template: './template.html',
            minify: {
  collapseWhitespace: true,
                removeComments: true
 }
 }) ];

    clientConfig.plugins.push( new moduleOverridePlugin(componentOverrideMapping) );
    return [clientConfig, serviceWorkerConfig];
};

Execute Watch Command:

yarn watch

Result:

Create your own PWA Component

// src/lib/components/TopBar/topbar.css
.root
{
  background-color: rgb(var(--venia-teal));
  padding: 0.5rem;
  color: #fff;
  display: flex;
  justify-content: center;
}

// src/lib/components/TopBar/topbar.js
import React from 'react'
import { shape, string } from 'prop-types'
import { mergeClasses } from '@magento/venia-ui/lib/classify'

import defaultClasses from './topbar.css'

const TopBar = props => {
    const classes = mergeClasses(defaultClasses, props.classes);
    return (
        <div className={classes.root}>
 Your first custom react component </div>
  )
};

TopBar.propTypes = {
    classes: shape({
        root: string,
    })
};

export default TopBar;

// src/lib/components/TopBar/index.js
export { default } from './topbar';

// src/lib/components/Main/main.js
import React from 'react'
import { bool, shape, string } from 'prop-types'
import { useScrollLock } from '@magento/peregrine'

import { mergeClasses } from '@magento/venia-ui/lib/classify'
import Footer from '@magento/venia-ui/lib/components/Footer'
import Header from '@magento/venia-ui/lib/components/Header'
import defaultClasses from './main.css'
import TopBar from "../TopBar";
const Main = props => {
    const { children, isMasked } = props;
    const classes = mergeClasses(defaultClasses, props.classes);

    const rootClass = isMasked ? classes.root_masked : classes.root;
    const pageClass = isMasked ? classes.page_masked : classes.page;

    useScrollLock(isMasked);

    return (
        <main className={rootClass}>
  <TopBar/> <Header />
  <div className={pageClass}>{children}</div>
  <Footer />
  </main>
  );
};

export default Main;

Main.propTypes = {
    classes: shape({
        page: string,
        page_masked: string,
        root: string,
        root_masked: string
    }),
    isMasked: bool
};

Result:

Summary

In my opinion, starting a new PWA Studio project using the scaffolding command is the best approach for setting up a maintainable project.

Tips and Tricks

SEO

For JavaScript applications, it essential to use Server-Side Rendering (SSR). The benefit of using SSR isthe website content can crawl from crawlers that don’t execute JavaScript code. I recommend using tools like prerender.io or seosnap.io.When you use SSR to mind those errors, the request still can returns a 200 status code.You don’t want these to cached by Rendertron or Seosnap your need to set <meta name="render:status_code" content="404" /> at the appropriate places.

(This article was posted to my blog at https://larsroettig.dev. You can read it online by clicking here.)

A Review of Magento PWA Studio

Lars Roettig — Wed, 26 Feb 2020 23:40:15 +0000

Before we start, I want to provide a short overview of the PWA Studio architecture. With Magento PWA Studio, we should have the opportunity to build a complex Progressive Web Applications on top of Magento 2. Can we already realize real customer projects with PWA Studio? I would like to have a look at that with you. This blog post will be updated at regular intervals.The Magento Core Team selected React ( JavaScript ), GraphQL , CSS Modules as the leading technologies to build this theme to build from scratch.

Magento PWA Studio uses a Monorepo structure.For those reasons, after checkout, we already see ten subfolders.They packages are most likely unrelated, loosely connected, or connected. To give an example, venia-ui needs elements from peregrine. Let’s take a look at which components we have in the current state.

Main Libraries If we start our a PWA-Project, we mostly change components from these two libraries to have our own PWA theme.

peregrine - A component library for adding logic to visual elements
venia-ui - Library of React Component for PWA storefront projects

Elements for building

pwa-buildpack - A tooling library to help with PWA storefront development
upward-spec - UPWARD specification and test suite
upward-js - A reference implementation of the UPWARD specification
babel-preset-peregrine - A babel preset plugin that is required to use peregrine components
graphql-cli-validate-magento-pwa-queries - A script to validate your project’s GraphQL queries against a schema

Other elements

venia-styleguide - The style guide for venia components
venia-concept - A concept storefront project built using PWA Studio tools
pwa-devdocs - Source for the documentation site (http://pwastudio.io/)

Current features in PWA Studio version 5.0

Currently, the PWA Studio offers a small collection of tools and components.For me, it is a library that allows building a custom PWA Theme for Magento.

Support Simple and Configurable Product
Category Page
CMS Pages and Blocks
Magento PageBuilder
Product Detail Page
Cart
Checkout
Page Builder integration
Braintree payment

Release Notes:

https://github.com/magento/pwa-studio/releases/tag/v5.0.0

Release 5.0.1

PWA Studio 5.0.1 is a patch release to fix an Image loading issue. Also, a security fix prevents invalid mutation caching.With fetchPolicy: 'no-cache' it is possible to define mutation the should not be added to Apollo query cache.

For more Information see:

https://www.apollographql.com/docs/react/caching/cache-interaction/#bypassing-the-cache

Release Notes:

https://github.com/magento/pwa-studio/releases/tag/v5.0.1

Features that are currently not supported

Sort and Filters on the category and search page (Planned for v6)
Payment Methods for Central European Market
Deployment scripts
”More” Extension Points
- build
- env valid
- talon
- routing
Shipping methods
Wishlist
Translation support
Bundle product support
Multi-Store support of multi-currency, and languages

Summary

Although the project is still in an early stage of development, the PWA Studio already offers a toolkit for creating a PWA theme. Due to the lack of extension points and multilingualism, you will have to write many React extensions yourself, which can make large projects very complicated and expensive.With build things from scratch, it is possible to ignore legacy problems and create new great ideas. On the other hand, it takes a long time to get a stable software anyway with a production-ready feature set.From my point of view, it is good to now with a small project to gather experience with the new PWA Studio even there are already a few bigger projects live.

(This article was posted to my blog at https://larsroettig.dev. You can read it online by clicking here.)

How to write proper Software Documentation?

Lars Roettig — Mon, 06 Jan 2020 20:42:24 +0000

Whenever I talk to developers at conferences, I hear about the topic of software documentation mostly to the following phrase.Well, we had to finish it quickly, and there was no time left for documentation. But is documentation essential or not and what we should know about this topic?

Why is Software Documentation underestimated?

In my experience, most developers underestimated the value of proper software documentation. Back in the time as a junior developer, I also took every opportunity to avoid documentation. So the documentation for certain features was the code and me.

As you can imagine, this behaviour leads to many problems, and I had to realize that the code alone is not enough. Especially if you want to take a vacation or need additional developers in the team, missing documentation is terrible. Unfortunately, writing documentation is not much fun as building new great things for the customer.

For me, as a developer, documentation, and communication have become one of the essential skills a good software developer needs. But what does it mean to attribute proper documentation, and what is the minimum requirement for us as developers? This question I try to answer in the next section. There are many articles about software documentation and literature. I will summarize things that help me to write better documentation.

Requirements for effective documentation

The first thing I had to understand was that documentation valuable for your customer and team.This enlightenment helped me to get a better feeling if I have to write documentation.

For new documentation, I try to be a focus on for whom I write the documentation.A typical project team consists of a vast number of stakeholders, including customer employees, product owners, developers, and many more that are needed to develop a project successfully.

If we define the team in this way, we quickly realize that we need different documentation for the different roles.

The editor wants to know how to maintain new features.
The product owner needs contact persons to coordinate the requirements.
The developer needs guidance on how to set up the development environment.

These are just examples to show how different documentation can be. With the help of the following questions, you can put yourself in the role of the person.

Who has to read this documentation?
What needs the reader to know about this?
What will the reader get done?

In my experience, a little documentation focus on a problem is better than a 70-page document that covers all aspects!

Variation of questions and example answers:

For whom am I writing this documentation?
- So that the editors can maintain the content without help
What do I want to document?
- A process of how an editor can edit or change the content in the system.

Readable documentation

From my perspective, software documentation is sometimes not readable, or I can not find any useful information. I search for a way to make my docs better. I found Beth Aitman blog post

Read Tip: Writing effective documentation - the Lead Developer Berlin 2019

6 Tips to make your software documentation great!

Link: https://bethaitman.com/posts/tld-2019/

She has a great stragigie I try it out it work well:

Write outline first
Add useful information in bullet point or nots to answering the outline
Add more details and than structure it

The full talk you can find at:

https://www.youtube-nocookie.com/embed/R6zeikbTgVc

Example of cupcakes backing documentation:

This example shows that a structure helps the user to understand what he gets after backing. Add helpful graphics and pictures in the documentation!

For architecture communication and documentation.

I started using the templates from arc42. This template helps to have an excellent structure for this kind of documentation.

Example Table of Contents by arc42:

Introduction and Goals
Architecture Constraints
System Scope and Context
Solution Strategy
Building Block View
Runtime View
Deployment View
Concepts
Design Decisions
Quality Scenarios
Technical Risks
Glossary

The Templates you can download at:

https://arc42.org/download

Summary

For me should have proper software documentation the following attributes. Maintainable, this means easy and quick to adjustable if something is changed in the project. Up-to-date and correct all changes need to be written down. Understandable and readable you should use the same terms every time and have explanations of terms. Focus on the target group of readers answer, the questions of your readers, the documentation should help get things done! Compact and low cost concentrating on the essential facts for your reader.

Good ressources over software documentation

(This article was posted to my blog at https://larsroettig.dev. You can read it online by clicking here.)

How to create a GraphQL Endpoint for Magento 2.3

Lars Roettig — Sun, 03 Nov 2019 00:00:00 +0000

In this tutorial, I will show how you can build your GraphQL for Magento 2.3 and extend them with a filter logic. Our use case is a Pickup from Store endpoint what our frontend team needs to create an interactive map.

In the story, we have the following acceptance criteria.

As a frontend developer, I need Endpoint to search for the next Pickup Store in a Postcode Area. Use a setup script initial import Allow search for Postcode or Name. API will return the following attributes for a Pickup Store

Arrribute Name	GraphQL field
Name	name
Postcode	postcode
Street	street
Street Number	street_num
City	city
Longitude	longitude
Latitude	latitude

System Requirements:

Installed Magento 2.3
PHP 7.1 | 7.2 | 7.3
Mysql 5.6

For Lokal Development I Recommended use Development Mode: Run the following comand bin/magento deploy:mode:set developer

Table of Content:

How to create the basis Magento 2 Module
How add Magento 2 GraphQL specific impelemention
Github Repo and how to install
How to use GraphQL with Magento

1. How to create the basis Magento 2 Module

This section is not GraphQL specific and and apply to any Magento2 Module!

In this part, we learn how to created a new Database table and fill this with some sample data.

Write and Repository Pattern for Magento 2
Write Database Model and Collection
Write and Setup

Lets start with new Folder under app/code/LarsRoettig/GraphQLStorePickup in your installed magento.

1. registration.php - Path: (app/code/LarsRoettig/GraphQLStorePickup/registration.php)

<?php

declare(strict_types=1);

Magento\Framework\Component\ComponentRegistrar::register(
    Magento\Framework\Component\ComponentRegistrar::MODULE,
    'LarsRoettig_GraphQLStorePickup',
    __DIR__
);

2. module.xml - Path: (app/code/LarsRoettig/GraphQLStorePickup/etc/module.xml)

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="LarsRoettig_GraphQLStorePickup" setup_version="1.0.0">
        <sequence>
            <module name="Magento_GraphQl"/>
        </sequence>
    </module>
</config>

3.Create new Database Table with db_schema.xml - Path: (app/code/LarsRoettig/GraphQLStorePickup/etc/db_schema.xml)

<?xml version="1.0"?>
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
    <table name="pickup_stores" resource="default" engine="innodb" comment="Pick Up Stores">
        <column xsi:type="int" name="entity_id" padding="10" unsigned="true" nullable="false" identity="true"
                comment="Entity ID"/>
        <column xsi:type="varchar" name="name" nullable="true" length="64"/>
        <column xsi:type="varchar" name="street" nullable="true" length="64"/>
        <column xsi:type="int" name="street_num" nullable="true"/>
        <column xsi:type="varchar" name="city" nullable="true" length="64"/>
        <column xsi:type="varchar" name="postcode" nullable="true" length="10"/>
        <column xsi:type="decimal" name="latitude" default="0" scale="4" precision="20" />
        <column xsi:type="decimal" name="longitude" default="0" scale="4" precision="20" />
        <constraint xsi:type="primary" referenceId="PRIMARY">
            <column name="entity_id"/>
        </constraint>
    </table>
</schema>

4. Store Interface - Path: (app/code/LarsRoettig/GraphQLStorePickup/Api/Data/StoreInterface.php)

<?php

declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Api\Data;

/**
 * Represents a store and properties
 *
 * @api
 */
interface StoreInterface
{
    /**
     * Constants for keys of data array. Identical to the name of the getter in snake case
     */
    const NAME = 'name';
    const STREET = 'street';
    const STREET_NUM = 'street_num';
    const CITY = 'city';
    const POSTCODE = 'postcode';
    const LATITUDE = 'latitude';
    const LONGITUDE = 'longitude';

    /**#@-*/

    public function getName(): ?string;

    public function setName(?string $name): void;

    public function getStreet(): ?string;

    public function setStreet(?string $street): void;

    public function getStreetNum(): ?int;

    public function setStreetNum(?int $streetNum): void;

    public function getCity(): ?string;

    public function setCity(?string $city): void;

    public function getPostCode(): ?int;

    public function setPostcode(?int $postCode): void;

    public function getLatitude(): ?float;

    public function setLatitude(?float $latitude): void;

    public function getLongitude(): ?float;

    public function setLongitude(?float $longitude): void;
}

5. Model - Path: (app/code/LarsRoettig/GraphQLStorePickup/Model/Store.php)

<?php

declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Model;

use LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterface;
use LarsRoettig\GraphQLStorePickup\Model\ResourceModel\Store as StoreResourceModel;
use Magento\Framework\Model\AbstractExtensibleModel;

class Store extends AbstractExtensibleModel implements StoreInterface
{

    protected function _construct()
    {
        $this->_init(StoreResourceModel::class);
    }

    public function getName(): ?string
    {
        return $this->getData(self::NAME);
    }

    public function setName(?string $name): void
    {
        $this->setData(self::NAME, $name);
    }

    public function getStreet(): ?string
    {
        return $this->getData(self::STREET);
    }

    public function setStreet(?string $street): void
    {
        $this->setData(self::STREET, $street);
    }

    public function getStreetNum(): ?int
    {
        return $this->getData(self::STREET_NUM);
    }

    public function setStreetNum(?int $streetNum): void
    {
        $this->setData(self::STREET_NUM, $streetNum);
    }

    public function getCity(): ?string
    {
        return $this->getData(self::CITY);
    }

    public function setCity(?string $city): void
    {
        $this->setData(self::CITY, $city);
    }

    public function getPostCode(): ?int
    {
        return $this->getData(self::POSTCODE);
    }

    public function setPostcode(?int $postCode): void
    {
        $this->setData(self::POSTCODE, $postCode);
    }

    public function getLatitude(): ?float
    {
        return $this->getData(self::LATITUDE);
    }

    public function setLatitude(?float $latitude): void
    {
        $this->setData(self::LATITUDE, $latitude);
    }

    public function getLongitude(): ?float
    {
        return $this->getData(self::LONGITUDE);
    }

    public function setLongitude(?float $longitude): void
    {
        $this->setData(self::LONGITUDE, $longitude);
    }
}

6. Resource Model - Path: (app/code/LarsRoettig/GraphQLStorePickup/Model/ResourceModel/Store.php)

<?php
declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Model\ResourceModel;

use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
use Magento\Framework\Model\ResourceModel\PredefinedId;

class Store extends AbstractDb
{
    /**
     * Provides possibility of saving entity with predefined/pre-generated id
     */
    use PredefinedId;

    /**#@+
     * Constants related to specific db layer
     */
    private const TABLE_NAME_STOCK = 'pickup_stores';
    /**#@-*/

    /**
     * @inheritdoc
     */
    protected function _construct()
    {
        $this->_init(self::TABLE_NAME_STOCK, 'entity_id');
    }
}

7. Resource Collection - Path: (app/code/LarsRoettig/GraphQLStorePickup/Model/ResourceModel/StoreCollection.php)

<?php
declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Model\ResourceModel;

use LarsRoettig\GraphQLStorePickup\Model\ResourceModel\Store as StoreResourceModel;
use LarsRoettig\GraphQLStorePickup\Model\Store as StoreModel;
use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;

class StoreCollection extends AbstractCollection
{
    /**
     * @inheritdoc
     */
    protected function _construct()
    {
        $this->_init(StoreModel::class, StoreResourceModel::class);
    }
}

8. StoreRepositoryInterface - Path: (app/code/LarsRoettig/GraphQLStorePickup/Api/StoreRepositoryInterface.php)

<?php
declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Api;

use LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterface;
use Magento\Framework\Api\SearchCriteriaInterface;
use Magento\Framework\Api\SearchResultsInterface;

/**
 * @api
 */
interface StoreRepositoryInterface
{
    /**
     * Save the Store data.
     *
     * @param \Magento\InventoryApi\Api\Data\SourceInterface $source
     * @return void
     * @throws \Magento\Framework\Exception\CouldNotSaveException
     */
    public function save(StoreInterface $store): void;

    /**
     * Find Stores by given SearchCriteria
     * SearchCriteria is not required because load all stores is useful case
     *
     * @param \Magento\Framework\Api\SearchCriteriaInterface|null $searchCriteria
     * @return \Magento\InventoryApi\Api\Data\SourceSearchResultsInterface
     */
    public function getList(SearchCriteriaInterface $searchCriteria = null): SearchResultsInterface;
}

8. StoreRepository - Path: (app/code/LarsRoettig/GraphQLStorePickup/Model/StoreRepository.php)

A repository is an architecture layer that handles communication between the application and the data source (DataBase). Repository Pattern helps to switch to another data source or making structural changes to the existing data source.

For all my repositories, usually, i have an interface that helps to decouple the implementation.

<?php
declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Model;

use LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterface;
use LarsRoettig\GraphQLStorePickup\Api\StoreRepositoryInterface;
use LarsRoettig\GraphQLStorePickup\Model\ResourceModel\Store as StoreResourceModel;
use LarsRoettig\GraphQLStorePickup\Model\ResourceModel\StoreCollection;
use LarsRoettig\GraphQLStorePickup\Model\ResourceModel\StoreCollectionFactory;
use Magento\Framework\Api\Search\SearchCriteriaBuilder;
use Magento\Framework\Api\SearchCriteria\CollectionProcessorInterface;
use Magento\Framework\Api\SearchCriteriaInterface;
use Magento\Framework\Api\SearchResultsInterface;
use Magento\Framework\Api\SearchResultsInterfaceFactory;
use Magento\Framework\Exception\CouldNotSaveException;

class StoreRepository implements StoreRepositoryInterface
{
    /**
     * @var StoreCollectionFactory
     */
    private $storeCollectionFactory;
    /**
     * @var CollectionProcessorInterface
     */
    private $collectionProcessor;
    /**
     * @var SearchCriteriaBuilder
     */
    private $searchCriteriaBuilder;
    /**
     * @var SearchResultsInterfaceFactory
     */
    private $storeSearchResultsInterfaceFactory;
    /**
     * @var StoreResourceModel
     */
    private $storeResourceModel;

    public function __construct(
        StoreCollectionFactory $storeCollectionFactory,
        CollectionProcessorInterface $collectionProcessor,
        SearchCriteriaBuilder $searchCriteriaBuilder,
        SearchResultsInterfaceFactory $storeSearchResultsInterfaceFactory,
        StoreResourceModel $storeResourceModel
    ) {
        $this->storeCollectionFactory = $storeCollectionFactory;
        $this->collectionProcessor = $collectionProcessor;
        $this->searchCriteriaBuilder = $searchCriteriaBuilder;
        $this->storeSearchResultsInterfaceFactory = $storeSearchResultsInterfaceFactory;
        $this->storeResourceModel = $storeResourceModel;
    }

    /**
     * @inheritDoc
     */
    public function getList(SearchCriteriaInterface $searchCriteria = null): SearchResultsInterface
    {
        /** @var StoreCollection $storeCollection */
        $storeCollection = $this->storeCollectionFactory->create();
        if (null === $searchCriteria) {
            $searchCriteria = $this->searchCriteriaBuilder->create();
        } else {
            $this->collectionProcessor->process($searchCriteria, $storeCollection);
        }
        /** @var SearchResultsInterface $searchResult */
        $searchResult = $this->storeSearchResultsInterfaceFactory->create();
        $searchResult->setItems($storeCollection->getItems());
        $searchResult->setTotalCount($storeCollection->getSize());
        $searchResult->setSearchCriteria($searchCriteria);

        return $searchResult;
    }

    /**
     * @inheritDoc
     */
    public function save(StoreInterface $store): void
    {
        try {
            $this->storeResourceModel->save($store);
        } catch (\Exception $e) {
            throw new CouldNotSaveException(__('Could not save Source'), $e);
        }
    }
}

9. Create di.xml to link interface to impelemention - Path: (app/code/LarsRoettig/GraphQLStorePickup/etc/di.xml)

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterface" type="LarsRoettig\GraphQLStorePickup\Model\Store"/>
    <preference for="LarsRoettig\GraphQLStorePickup\Api\StoreRepositoryInterface" type="\LarsRoettig\GraphQLStorePickup\Model\StoreRepository"/>
</config>

10. Setup Patch with Sample Data - Path: (app/code/LarsRoettig/GraphQLStorePickup/Setup/Patch/Data/InitializePickUpStores.php)

<?php

declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Setup\Patch\Data;

use LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterface;
use LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterfaceFactory;
use LarsRoettig\GraphQLStorePickup\Api\StoreRepositoryInterface;
use Magento\Framework\Api\DataObjectHelper;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\Patch\DataPatchInterface;

class InitializePickUpStores implements DataPatchInterface
{
    /**
     * @var ModuleDataSetupInterface
     */
    private $moduleDataSetup;
    /**
     * @var StoreInterfaceFactory
     */
    private $storeInterfaceFactory;
    /**
     * @var StoreRepositoryInterface
     */
    private $storeRepository;
    /**
     * @var DataObjectHelper
     */
    private $dataObjectHelper;

    /**
     * EnableSegmentation constructor.
     *
     * @param ModuleDataSetupInterface $moduleDataSetup
     */
    public function __construct(
        ModuleDataSetupInterface $moduleDataSetup,
        StoreInterfaceFactory $storeInterfaceFactory,
        StoreRepositoryInterface $storeRepository,
        DataObjectHelper $dataObjectHelper
    ) {
        $this->moduleDataSetup = $moduleDataSetup;
        $this->storeInterfaceFactory = $storeInterfaceFactory;
        $this->storeRepository = $storeRepository;
        $this->dataObjectHelper = $dataObjectHelper;
    }

    /**
     * {@inheritdoc}
     */
    public static function getDependencies()
    {
        return [];
    }

    /**
     * {@inheritdoc}
     * @throws Exception
     * @throws Exception
     */
    public function apply()
    {
        $this->moduleDataSetup->startSetup();
        $maxStore = 50;

        $citys = ['Rosenheim', 'Kolbermoor', 'München', 'Erfurt', 'Berlin'];

        for ($i = 1; $i <= $maxStore; $i++) {

            $storeData = [
                StoreInterface::NAME => 'Brick and Mortar ' . $i,
                StoreInterface::STREET => 'Test Street' . $i,
                StoreInterface::STREET_NUM => $i * random_int(1, 100),
                StoreInterface::CITY => $citys[random_int(0, 4)],
                StoreInterface::POSTCODE => $i * random_int(1000, 9999),
                StoreInterface::LATITUDE => random_int(4757549, 5041053) / 100000,
                StoreInterface::LONGITUDE => random_int(1157549, 1341053) / 100000,
            ];
            /** @var StoreInterface $store */
            $store = $this->storeInterfaceFactory->create();
            $this->dataObjectHelper->populateWithArray($store, $storeData, StoreInterface::class);
            $this->storeRepository->save($store);
        }

        $this->moduleDataSetup->endSetup();
    }

    /**
     * {@inheritdoc}
     */
    public function getAliases()
    {
        return [];
    }
}

2. How add Magento 2 GraphQL specific impelemention

1.Create GraphQL Schema File - Path: (app/code/LarsRoettig/GraphQLStorePickup/etc/schema.graphqls)

This the schema.graphql contains the following information

Defines the structure of queries and mutations.
Determines which attributes can be used for input and output in GraphQL queries and mutations. Requests and responses contain separate lists of valid attributes.
Points to the resolvers that verify and process the input data and response.
Serves as the source for displaying the schema in a GraphQL browser.
Defines which objects are cached.

Full Magento Dokumentation:https://devdocs.magento.com/guides/v2.3/graphql/develop/create-graphqls-file.html

type Query {
    pickUpStores(
        filter: PickUpStoresFilterInput @doc(description: "")
        pageSize: Int = 5 @doc(description: "How many items should show on the page")
        currentPage: Int = 1 @doc(description: "Allows to ussing paging it start with 1")
    ):pickUpStoresOutput @resolver(class: "\\LarsRoettig\\GraphQLStorePickup\\Model\\Resolver\\PickUpStores") @doc(description: "The Impelemention to resolve PickUp stores")
}

input PickUpStoresFilterInput {
    name: FilterTypeInput @doc(description: "")
    postcode: FilterTypeInput @doc(description: ""),
    latitude:FilterTypeInput @doc(description: ""),
    longitude: FilterTypeInput @doc(description: ""),
    or: PickUpStoresFilterInput
}

type pickUpStoresOutput {
    total_count: Int @doc(description: "")
    items: [PickUpStore] @doc(description: "")
}

type PickUpStore {
    name: String @doc(description: ""),
    street: String @doc(description: ""),
    street_num: Int @doc(description: ""),
    city: String @doc(description: ""),
    postcode: String @doc(description: ""),
    latitude:Float @doc(description: ""),
    longitude: Float @doc(description: ""),
}

2.Create GraphQL Resolver File - Path: (app/code/LarsRoettig/GraphQLStorePickup/Model/Resolver/PickUpStores.php)

<?php

declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Model\Resolver;

use LarsRoettig\GraphQLStorePickup\Api\StoreRepositoryInterface;
use LarsRoettig\GraphQLStorePickup\Model\Store\GetList;
use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Exception\GraphQlInputException;
use Magento\Framework\GraphQl\Query\Resolver\Argument\SearchCriteria\Builder as SearchCriteriaBuilder;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;

class PickUpStores implements ResolverInterface
{

    /**
     * @var GetListInterface
     */
    private $storeRepository;
    /**
     * @var SearchCriteriaBuilder
     */
    private $searchCriteriaBuilder;

    /**
     * PickUpStoresList constructor.
     * @param GetList $storeRepository
     * @param SearchCriteriaBuilder $searchCriteriaBuilder
     */
    public function __construct(StoreRepositoryInterface $storeRepository, SearchCriteriaBuilder $searchCriteriaBuilder)
    {
        $this->storeRepository = $storeRepository;
        $this->searchCriteriaBuilder = $searchCriteriaBuilder;
    }

    /**
     * @inheritdoc
     */
    public function resolve(Field $field, $context, ResolveInfo $info, array $value = null, array $args = null)
    {

        $this->vaildateArgs($args);

        $searchCriteria = $this->searchCriteriaBuilder->build('pickup_stores', $args);
        $searchCriteria->setCurrentPage($args['currentPage']);
        $searchCriteria->setPageSize($args['pageSize']);
        $searchResult = $this->storeRepository->getList($searchCriteria);

        return [
            'total_count' => $searchResult->getTotalCount(),
            'items' => $searchResult->getItems(),
        ];
    }

    /**
     * @param array $args
     * @throws GraphQlInputException
     */
    private function vaildateArgs(array $args): void
    {
        if (isset($args['currentPage']) && $args['currentPage'] < 1) {
            throw new GraphQlInputException(__('currentPage value must be greater than 0.'));
        }

        if (isset($args['pageSize']) && $args['pageSize'] < 1) {
            throw new GraphQlInputException(__('pageSize value must be greater than 0.'));
        }
    }
}

3.Create Dependencies Injection File (di.xml) - Path: (app/code/LarsRoettig/GraphQLStorePickup/etc/di.xml)

This file we need to inject our FilterArgument Class that maps the graph attribute for filtering. Currently there is no general implementation.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="LarsRoettig\GraphQLStorePickup\Api\Data\StoreInterface" type="LarsRoettig\GraphQLStorePickup\Model\Store"/>
    <preference for="LarsRoettig\GraphQLStorePickup\Api\StoreRepositoryInterface" type="\LarsRoettig\GraphQLStorePickup\Model\StoreRepository"/>
    <type name="Magento\Framework\GraphQl\Query\Resolver\Argument\FieldEntityAttributesPool">
        <arguments>
            <argument name="attributesInstances" xsi:type="array">
                <item name="pickup_stores" xsi:type="object">
                    \LarsRoettig\GraphQLStorePickup\Model\Resolver\FilterArgument
                </item>
            </argument>
        </arguments>
    </type>
</config>

4. Create FilterArgument File - Path: (app/code/LarsRoettig/GraphQLStorePickup/Model/Resolver/FilterArgument.php)

<?php
declare(strict_types=1);

namespace LarsRoettig\GraphQLStorePickup\Model\Resolver;

use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\ConfigInterface;
use Magento\Framework\GraphQl\Query\Resolver\Argument\FieldEntityAttributesInterface;

class FilterArgument implements FieldEntityAttributesInterface
{
    /** @var ConfigInterface */
    private $config;

    public function __construct(ConfigInterface $config)
    {
        $this->config = $config;
    }

    public function getEntityAttributes(): array
    {
        $fields = [];
        /** @var Field $field */
        foreach ($this->config->getConfigElement('PickUpStore')->getFields() as $field) {
            $fields[$field->getName()] = '';
        }

        return array_keys($fields);
    }
}

3. Installation:

bin/magento module:enable LarsRoettig_GraphQLStorePickup
bin/magento setup:upgrade

The repo can founded at Github:

https://github.com/larsroettig/module-graphqlstorepickup

4. How to use GraphQL

Test for your new Endpoint (Client Sample Call)

I recommend as Testing client tool to use Altair GraphQL Client

Endpoint Url: https://your_domain.test/graphql

Simple Query without an filter:

{
  pickUpStores {
    total_count
      items {
        name
        street
        street_num
        postcode
      }
  }
}

Query with an filter:

{
  pickUpStores(
    filter: { name: { like: "Brick and Mortar 1%" } }
    pageSize: 2
    currentPage: 1
  ) {
    total_count
    items {
      name
      street
      postcode
    }
  }
}

Query with an longitude filter:

{
  pickUpStores(
    filter: { longitude: {
    gt: "11.66"
  }
   }
    pageSize: 2
    currentPage: 1
  ) {
    total_count

    items {
      name
      street
      postcode
      latitude
      longitude
    }
  }
}

(This article was posted to my blog at https://larsroettig.dev. You can read it online by clicking here.)

Book Review of Object Design Style Guide by Matthias Noback

Lars Roettig — Wed, 16 Oct 2019 00:00:00 +0000

Book Review of Object Design Style Guide by Matthias Noback

Introduction

As Software Developers, we need to know how a suitable object looks like if working with an object-oriented programming language like PHP, Java, C#. To learn the syntax of the programming language (classes, methods, properties, etc.), it doesn’t take too much effort, but with a proper design for your objects, it mutch more complex.

I’m always looking for ways to make the job easier, and less demanding. I’m writing tests for my code, to prevent regressions. I keep my code simple, so debugging it will be easier. By writing this book, I’ve tried to do the same thing. Following the rules in this guide will free up the mental energy you’ll need for the more difficult parts of object design.

Matthias Noback - Object Design Style Guide

Who this book is for?

This book is for programmers with at least some basic knowledge of an object-oriented programming language. You should understand the language’s possibilities regarding class design. That is, I expect you to know what it means to define a class, instantiate it, extend it, mark it as abstract, define a method, call it, define parameters and parameter types, define return types, define properties and their types, etc.I also expect you to have some actual experience with all of this, even if it’s not much. I think you should be able to read this book if you’ve just finished a basic programming course, but also if you’ve been working with classes for years.

What is in this book

The book contains nine sections:

Creating services
Creating other objects
Manipulating objects
Using objects
Retrieving information
Performing tasks
Dividing responsibilities
Changing the behavior of services
A field guide to objects

I can highly recommended. Grab a copy now! This book has helped me better understand object design and deepen architectural patterns. It is an excellent complement to clean code. I was able to understand the examples much better through generalization.

Link: https://www.manning.com/books/object-design-style-guide

Four pillars to improve the quality of your E-Commerce Project or Module

Lars Roettig — Thu, 08 Aug 2019 00:00:00 +0000

For every Developer, it is essential to make sure that code works. Nobody likes if the live or staging system has a fatal error or whole page/website doesn’t work anymore after a deployment.

In this blog post, I will share my learnings from Magento Community Team and my experience what I did in the past. For me, they are four crucial pillars to make sure you get fewer blocker tickets for your new Module/Projects. The four areas are clean code, testing, and automation as well as continuous process improvement.

Clean Code

In my experience, Clean Code helps to reduce the cost of maintaining, writing tests, on board developers to the project.

My favorite quote from Martin Fowler is:

Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

The means any developer should write for code that humans can understand. Usually, Developers read more code than we write in the average development/lifetime of a project.

This short example from a Clean Code Book shows the value of Clean Code for new Implementations.

Code before Refactoring:

class FunnyName
{
    /**
     * Demo data
     */
    private $theList = [
        [0 => 4],
        [0 => 2]
    ];

    public function getThem() // what means getThem ?
    {
        $list = [];
        foreach ($this->theList as $x) { // what is theList there ?
            if ($x[0] === 4) { // what 0 and 4 there ?
                $list[] = $x;
            }
        }

        return $list; // list of what ?
    }
}

Code after Refactoring:

class GameBoard
{
    private const STATUS_KEY = 0;
    private const FLAGGED = 4;

    /**
     * Demo data
     */
    private $cells = [
        [self::STATUS_KEY => 4],
        [self::STATUS_KEY => 2]
    ];

    /**
     * Returns all flagged game board cells.
     * @return array
     */
    public function getFlaggedCells()
    {
        $flaggedCells = [];
        foreach ($this->cells as $cell) {
            if ($cell[self::STATUS_KEY] === self::FLAGGED) {
                $flaggedCells[] = $cell;
            }
        }
        return $flaggedCells;
    }
}

Clean Code is an excellent book that all programmers should read,

The rules from Clean Code Book can apply to your old code by refactoring. I recommend reducing the technical debt with your sprint Tickets as subtasks. Estimated these subtasks and define a benefit for your team or customer.

A benefit can be:

We reduce the change time for the next change on this feature.

Before you refactor you should cover your Implementation with Intitragtionstests. In an existing framework like Magento, it is sometimes not easy to apply rules from a Book. With Magento 2 it is more comfortable to build clean code. You can use features like Dependency Injection. In an example, Magento Inventory (MSI) already use Pattern like Command Query Responsibility Segregation.

Read Tip: Object Design Style Guide by Matthias Noback

Object Design Style Guide is a good foundation book. Applying best practices for object design means that your code will be easy to read, write, and maintain. All Code Examples in this book are in a generalized object-oriented programming language.

Link: https://www.manning.com/books/object-design-style-guide

Backward compatible development

If you develop Module for the Magento Market place. It is important to know how to develop backward compatible. I strongly recommend following the rules of this guideline:

https://devdocs.magento.com/guides/v2.3/contributor-guide/backward-compatible-development/

Testing

For production-ready software, it is required to have tests that verify the software behaves as expected. You can do to this with myriads of manual software testers. But the cost and maintains are expansive for manual software testing also the feedback is slow.

In the IBM research “Minimizing Code Defects to Improve Software Quality and Lower Development Costs” is a good statement:

The costs of discovering defects after release are signed up to 30 times more than if you catch them in the design and architectural phase.

This statement leads me to we need different types of automated tests to reduce the feedback time. But you as a developer don’t like run tests that take hours before you can push. To split test Mike Cohn came up with a concept “Test Pyramid” in his book Succeeding with Agile .

If you like to know more about Test Pyramid you should read :

The Practical Test Pyramid.

In the ground we have Unit-Tests it followed by Integration tests and User Interface test at the top.

Unit tests

Unit tests are relatively easy to create also quick to run. We can use them to achieve good coverage and detect most errors at a very early stage of development. Unit-Test should run before we commit your code the version. Ideally, they even develop with TDD or follow the principles of Clean Code.

Integration tests

Integration tests can be automated relatively well these tests required an installed Magento with Database. An install can take time should not run locally.

Documentation for setup and running integrations test with Magento 2.

https://devdocs.magento.com/guides/v2.3/test/integration/integration_test_execution.html

User Interface (UI) tests

UI tests can be complex and tricky to run automatically. Also, the automation maintenance is very time-intensive, therefore you should consider well if automation makes sense. Tools like Selenium or Cypress I use by many projects. For UI Test I can recommend evaluated two tools and find the best fit for your project.

Mutations testing

With the help of the infection library, it is possible to check how resilient the test suite is. The library runs the units tests on the manipulated code to calculate the Mutation Score Indicator.

Attention this step is an extension but should be done on the CI-System because it can take a long time.

Smoke Testing

Manuelle Testing is expansive but covers some complex it can be to difficult by automation. I recommend collecting a test-case step by step in a system currently we using currently only google docs. Better it is to use as test case management software and run later by automated tests.

Coding Standards

Most developer teams define programming style (Coding Standard). Coding standard allows getting better understandable code. That can reduce the on boarding time for new developers. The Coding Standard Tools (PHP_CodeSniffer) should also run on commit via git hooks.

Conclusion

Learn to write tests and use Test Driven Development
Tests are not free but very helpful
Code Coverage only shows what has not yet been executed
Use Code Coverage to find gaps in the test-suite
Bugs in Production are extremely expensive
Find the errors best during development

Allure Report

Allure Framework is a test report tool that shows a representation of performed tests. The representation can be much essential to get an overview of failing tests.

Documentation can be found at:

https://devdocs.magento.com/mftf/docs/reporting.html

Automation

With automation, it is possible to save time and money over the project time. For setup, you will have minor one-time expenses. I think over project live time it is a good investment in quality. With CI-System like Gitlab, it is possible to set up automatic reviews. Automatic reviews can reduce the time and rejection rate for review.

To get best from of automation we need checks for before we push. To setup git hooks I recommend tools like GrumPHP or Captian Hook. The following tests should run before any push:

Commit Message
Coding Standard
Unit Tests
Read Tip: How to Write a Git Commit Message

A Blog post about seven rules for a great Git commit message

Link: https://chris.beams.io/posts/git-commit/
### Continuous Improvement

Continuous Improvement is a foundational principle agile. In the agile manifesto is defined with:

At regular intervals, the team reflects on how

to become more effective, then tunes and adjusts

its behavior accordingly.

That suggests to have regular meeting with all member to speak about:

What was great? - let’s keep it
What is not working? - find ways do it rightly
What we should to more?

Not only is the continuous improvement necessary for the team. There should also be time for self-improvement to getting a better engineer.

But for me there is more programming is a kind of mastery, when you train, you get better. You can learn the foundations by reading books and blog entries, the basics help you understand patterns. On the other hand, training is essential coding kata are the choice for practice. To detect arias to improvement help to use peer feedback or mentoring if you are more a junior developer.

Create GraphQL Endpoint for Magento 2.3 — Part 1

Lars Roettig — Tue, 18 Dec 2018 00:00:00 +0000

In this tutorial, we will implement a sample module with an essential endpoint without the database. At Tutorial 2 we will extend the test module with Declarative Schema for a new table, use data patch to import sample data to get a more dynamic endpoint.

But before we should take a short look at what is GraphQL, for me it is a powerful query language for API’s and convenient for javascript or Progressive Web App solutions (PWA). Magento 2 use GraphQL to connect there new PWA-Theme (Venia Storefront) with Magento.

Requirements:

Installed Magento 2.3
PHP 7.1 or 7.2

Recommended (Development):

bin/magento deploy:mode:set developer

Lets start with new Folder under app/code/Test/GraphQL in your installed magento.

1. Create new module registration.php - Path: (app/code/Test/GraphQL/registration.php)

<?php

declare(strict_types=1);

// register our new Test_GraphQL
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Test_GraphQL',
    __DIR__
);

2 Create new module.xml - Path: (app/code/Test/GraphQL/etc/module.xml)

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Test_GraphQL" setup_version="0.0.1">
      <sequence>
         <module name="Magento_GraphQl"/>
      </sequence>
   </module>
</config>

3. Create an GraphQL Schema File - Path: (app/code/Test/GraphQL/etc/schema.graphqls)

type Query {
    pickUpStores:pickUpStoresOutput @resolver(class: "\\Test\\GraphQL\\Model\\Resolver\\Store") @doc(description: "")
}
type pickUpStoresOutput {
    total_count: Int @doc(description: "")
    items: [pickUpStore] @doc(description: "")
}
type pickUpStore {
    name: String @doc(description: ""),
    street: String @doc(description: ""),
    street_num: String @doc(description: ""),
    city: String @doc(description: ""),
    postcode: String @doc(description: ""),
}

4. Implement a service class to handle a request by clients- Path (app/code/Test/GraphQL/Model/Resolver/Store.php)

! Importent @resolver(class: in schema.graphqls must be the PS-0 path from your php service class.

<?php
declare(strict_types=1);

namespace Test\GraphQL\Model\Resolver;

use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;

class Store implements ResolverInterface
{
    /**
     * @inheritdoc
     */
    public function resolve(
        Field $field,
        $context,
        ResolveInfo $info,
        array $value = null,
        array $args = null
    ) {
        $stores = [
            [
                'name' => 'Brick and Mortar Kolbermoor',
                'street' => 'JosefMeier Straße',
                'street_num' => '1002',
                'postcode' => '83059',
            ],
            [
                'name' => 'Brick and Mortar Erfurt',
                'street' => 'Max Meier Straße',
                'street_num' => '102',
                'postcode' => '99338',
            ],
        ];
        return [
            'total_count' => count($stores),
            'items' => $stores
        ];
    }
}

Installation:

bin/magento module:enable Test_GraphQL
bin/magento setup:upgrade

Test for your new Endpoint (Client Sample Call)

I recommend as Testing client tool to use Altair GraphQL Client

Endpoint Url: https://your_domain.test/graphql

An Test Query:

{
  pickUpStores {
    total_count
      items {
        name
        street
        street_num
        postcode
      }
  }
}

Example Module:

https://gitlab.com/larsroettig/test_graphql/tree/v1