Thoughts # 4: WordPress Progressive Themes & React JS

Occasionally, I take a small break (a day or two) from my regular JavaScript learning routine. This sort of breaks often happens whenever my learning gets little intense or it is triggered by other events. Yesterday, Morten Rand-Hendriksen released Building Progressive Themes with WP Rig in Lynda library and this was a breaking event for me. Just like any breaking news events, if I browse any WordPress related posts or tutorials from Morten, it breaks my regular learning routine and I immediately jump into to learn more about it. So, what I learned yesterday from Morten’s Progressive theme tutorial?

Progressive WordPress

Alberto Madina‘s post on Progressive WordPress provides a comprehensive look – how AMP (accelerated mobile pages) technologies can be applied to WordPress platform.

WordPress users can get a first-class AMP experience without compromising the fidelity of their content or surrendering the flexibility of the WordPress platform. Alberto Medina
AMP WordPress

Progressive WordPress themes utilize recent progressive technologies including best coding practices, improved performance, AMP (accelerated mobile pages) compatibility.

Progressive WordPress Theme

LinkedIn Learning has announced The Progressive WordPress Theme Riga starter theme with build process, bundled into a single boilerplate theme development package. This open-sourced project was created by Morten Ran-Hendriksen and source code is available from GitHub. How this project was inspired, story behind WP Rig and is eloquently described by its development lead Morten Rand-Hendriksen as a development rig built to let developers harness the winds of the web and control where they take us.

WP Rig is an evolution on the tried and true starter theme model: a modern build process and WordPress starter theme bundled together, created to simplify the process of building advanced, accessible, performant, progressive themes. WP Rig does the heavy lifting of optimization so developers can focus on what they do best: designing and building great user experiences. It provides a unified build process promoting the latest performance best practices, and a starter theme that rethinks how WordPress themes are built and what they should do. Morten Rand-Hendriksen
WP Rig Lead Developer

WP Rig project collaborator and Google Developer Advocate Alberto Medina describes the project as follows:

One of the key elements in a progressive web is tooling to help developers do the right thing in an easier and faster way. An important tool to have in the toolbox of WordPress developers is one that facilitates the development of Progressive WordPress themes.  Our colleagues at LinkedIn Learning have been busy developing a Progressive WordPress Theme Boilerplate, which is a theme development starter kit that makes it easier for WordPress theme developers to get from 0 to a fully progressive theme. The boilerplate comes out of the box with:

  • A modern development workflow, which is highly-configurable, and uses tools such as Composer, Gulp, and browser sync
  • A range of coding and performance best practices baked in, such as asynchronous loading of resources, and lazy loading of images
  • And it has opt-in integration with the AMP plugin, so that if the developer so chooses, a fully AMP compatible WordPress starter theme can be generated from the get go

The underscores (_S) starter theme, an brainchild, is widely used starter theme by the WordPress community and only time will tell how WP Rig will be received by its user community.

React JS Overview

Currently I am deep dive learning into ECMA2015 (ES6) JS syntax like Class, Maps, Sets and other new features. Yesterday I thought to review Learning React Js by Eve Porcello in Lynda library to get a general idea that which JS syntax more commonly used in React JS.

From Eve’s tutorial, it appears the following JS features need deep diving before I jump into learning React JS library: function (especially arrow function), Objects, Classes, Maps, Sets and other ES6 features.

Long Way to Go!

React Js is advanced JS library. Many developers suggest to enter into React JS learning with at at least intermediate level of JS programming. Without deep understanding of JS language and its ES6 features often creates knowledge gap and makes it much harder to understanding React JS features, like components, prop, state etc. The bottom line is without mastering ES6 features & DOM it does not make sense to start deep diving into React JS learning.