Magento PWA for Developers (On-Demand)

Magento Training Migration: Thank you for your interest in registering for a Magento U course during the Magento Training Migration period (June 26 – July 9). Please complete the Course Registration Inquiry Form to begin the process. Once you submit this form, a member of our Customer Engagement team will reach out to you with additional details. If you have any other questions, feel free to email adls@adobe.com.


Course Overview

Learn to use PWA Studio tools and set up a development environment. Create a store front with custom themes, change styles of an existing UI, create new UI components and manage them.

Learning Objectives

After completing this course, students should be able to:

  • Set up a PWA Studio development environment
  • Create a custom theme based on Venia
  • Change the style of an existing Venia UI component
  • Create a new UI component that uses Peregrine hooks and/or talons
  • Create a component that uses Peregrine's state management hooks to read/write state data

Target Audience

  • Magento front end developers

Prerequisites

  • Front end development skills (HTML, JavaScript, npm/yarn, CSS modules, React, Webpack)
  • Experience with modern JavaScript and React development
  • Familiar with Magento development
  • Familiar with REST and GraphQL

Course Outline

UNIT 1. Introduction to Magento PWA Studio

1.1 Introduction to Magento PWA Studio
1.2 What Is a Progressive Web Application (PWA)? 1.3 What Is Magento PWA Studio?
1.4 PWA Storefront vs. Magento Theme

UNIT 2. Environment Setup

2.1 Initial Project Setup
2.2 Generating a Local SSL Certificate
2.3 Defensive PHP Coding

UNIT 3. Build and Dev Tools

3.1 Configuration Management
3.2 Buildpack CLI Commands

UNIT 4. Storefront Structure

4.1 Storefront Structure Intro
4.2 Architecture of a Storefront

UNIT 5. UPWARD Server

5.1 UPWARD Overview
5.2 UPWARD Basics
5.3 UPWARD Implementations
5.4 UPWARD Configuration File

UNIT 6. Working with Components

6.1 Child Module Replacement
6.2 Override a Component's Style
6.3 Create a New Storefront Component

UNIT 7. Peregrine Hooks & Talons

7.1 Intro to Peregrine Hooks & Talons
7.2 Peregrine Hooks
7.3 Peregrine Talons

UNIT 8. Application State Management

8.1 Managing Application State
8.2 Updating Application State
8.3 Creating New Application State

UNIT 9. REST & GraphQL

9.1 Intro to REST & GraphQL with PWA
9.2 Using REST Endpoints
9.3 Using GraphQL

UNIT 10. Business Impact

10.1 Business Impact of PWA
10.2 PWA Performance Checklist