Summerlin

WordCamp 2019 - Reacting to WP Plugin Development

July 21, 2019•616 words

head where the ball is going (not what reacting means)
ReactJS "is crucial to where WP is going" -- is it?!

education is evolving like WordPress
digital publishing is moving beyond words on a page

BU Learning Blocks (WP plugin for lightweight open online learning)

  • Agile Development v waterfall
  • React Questions (NPM package)
  • free and interactive alternative to required textbooks
  • innovative contribution to the field of open educational resources (OERs)
  • aligns directly with the BU libraries' goal of helpuing BU reduce its dependency on proprietary software, making things easier long term
  • collab with BU Digital Learning and Innov Center and other stakeholders

What isn't BULB

  • NOT a replacement for formal LMS systems like Blackboard (or Coursera or....)
  • not a replacement for MOOCs like edX
  • instead for less formal online instructional content with self-assessment quizzes
    • we could add in the xAPI tracking part to allow
    • the system doesn't require you sign in for example (so could make xAPI conditional)

Stakeholders

  • they had a persistent slack channel all stakeholders were part of to track ongoing changes and have conversations quickly
  • BU Digital Learning and Inno
  • Concept driven in part by Dr Wayne who has famous curriculum already out there

One core piece is that they picked starter tools/frame of thinking, and switched as they prototyped to the limits of what they had

Architecture

Planning

First thoughts in 2017 standard stuff

  • custom post types
  • CMB2
  • jQuery based front end scripts (slickquiz)

Early on switched backend

  • decided to switch to Gutenberg instead of CMB2, Custom Post Types
    • Gutenberg was core yet, but they could see that it was coming
  • started a new plugin with create-guten-block
    • custom meta blocks or Gutenberg boxes
    • willingness to through things out
  • took a productivity hit, but it was worth it
    • communicated to stakeholders the value and dely
  • kept Slickquiz for the frontend
  • opportunity for new name

Further CGB

  • ejected from cgb #question (what is ejected?) #definition
    • bu-ist/bu-learning-blocks/pull/45
    • customize webpack to deliver front end bundle
  • our blocks rendered to JSON which slickquiz consumed
  • use wp-enqueue-scripts to pass raw JSON to slickquiz on the front end
  • worked great for building the backend but we were worried about question types like the matching question that slickquiz didn't already suport -- but the idea of just making a simple JSON object to pass to the front end let them get the backend set up well, then eventually finalize the front end (stakeholder could review core concepts in flight)

Later on swtiched frontend

  • decided to switch to react rather than slickquiz
  • took a productivity hit to switch to react, but worth it
    • leverage modern frameworks
      • import MaterialUI
      • accessiblity is a key component
      • JS treeshaking #question #definition
      • set standard of ES6 everywhere
  • loading the gutenberg react libraries into the front end (like so?)
  • front end is not implemented as an independent react component, importable from npm
  • match question

Published react-questions on npm

Front End Styling

  • started with css modules (awesome)
  • nwb doesn't compile it into prod
  • switch to SASS strategy that only applies single class to element
  • react is easier that way

Status

Plugin not finished, but showing promise
several workshops with faculty, growing interest
ship the final 1.0 to public, availble now on GitHub

More from Summerlin
All posts