edX Pattern Library: Paragon

TL;DR: As part of our efforts to support faster delivery timelines across all edX product delivery teams, the Architecture theme (along with edX’s front end working group - FEDX and our design team) have been making progress on Paragon, our front end pattern library. Pattern libraries such as Paragon help reduce the time spent building basic components, helping teams focus on higher order problems.

Release date: Summer 2019, with ongoing updates.

Product owner: @Marco Morales (Deactivated)
Engineering Lead: @Adam Butterworth (Deactivated)

What is it?

Paragon is edX’s pattern library, and it helps ensure development teams can spend less time building basic components and more time on higher order problems / development areas. Paragon is included in all of our modern micro front ends, and updates to the pattern library components are incorporated into Paragon via a lightweight review process.

If you expect to make use of Paragon you may find the rest of this email valuable, but if you don’t plan to use it directly I would recommend a quick spin through Paragon’s documentation site, and a quick scroll over the rest of this update down to the Credits / thank you section!

What is it, details please? (Principles → Library Status → Example Component)

Principles: Our pattern library echoes a development methodology called atomic design, where component patterns start at the atomic level and build up, helping other teams reuse basic atomic items like buttons as well as more complex molecules / organisms such as a configurable header or footer. While pattern libraries have been around for a while, this analogy, expressed visually below helps convey the goal of the effort: atoms → molecules → organisms → templates → pages.

(Optional: See the article associated with the image above)

Library Status: As part of our updates to Paragon, we have overhauled the way we convey the status of various components to help other development teams at edX understand the state of each component. This full list can be seen on the Paragon Status page, and is visually shown below.

Open

Example Component: Finally, each component is conveyed visually in the pattern library documentation site, with examples, and an interactive code editor area to let developers try out edits / adjustments if they wanted to on the live documentation site. The screenshot below shows an example of a new component called “Stateful Button” which helps streamline the inclusion of buttons with confirmation, disabled, and loading states.

Key talking points for customers:

Why focus on a pattern library, haven’t we tried / done this before?
As more teams move toward deploying micro front ends, the more we expect to rely on Paragon. A strong foundation was started with Paragon in 2018 that incorporated an installable package with support for accessibility and other baseline requirements. Our 2019 efforts build on this foundation, and pairs this with an update process (supported by the FEDX group) to ensure maintenance and upkeep.

Who will notice the change, and where (LMS/Studio)?
The visual look and feel of the Paragon pattern library will roll out to each new micro front end, but it will emulate some of the existing pages on the site such as prospectus (our new marketing site pages), the learner profile, account settings, etc.

What impact will it have on development teams?

We expect to see faster delivery timelines as a result of this effort for teams working on MFEs. If you have thoughts or feedback on why you might not be seeing / feeling this development speed increase please share this feedback with @Adam Butterworth (Deactivated) or me (@Marco Morales (Deactivated)).

Credits / A Group Effort!
In addition to the Architecture squad, which has been guiding this effort and driving many of the updates, we wanted to call out two other groups: FEDX + our Design team! (Arch: @Adam Butterworth (Deactivated), @David Joy (Deactivated), @Douglas Hall (Deactivated), @Nimisha Asthagiri (Deactivated), @Robert Raposa, @Juliana Kang, @Albemarle (Deactivated) )

A special call out here to the FEDX working group, a team of developers interested in advancing front end development at edX. This group’s direction, stewardship, and use of the pattern library is critical to ensuring it is a valuable tool for teams across edX. (@Alasdair Swan (Deactivated), @Adam Stankiewicz, @Jeff Witt (Deactivated), @TJ Tracy (Deactivated), @Matt Hughes (Deactivated), Erina Kii, @Brandon Baker (Deactivated), et al. )

Additionally, thanks to the Design team who has helped review all of the pattern library components to help make sure that when used, these components advance the experience forward. (@Darren Domingos (Deactivated), @Brandon Cooley (Deactivated), @Gabriel Weinberg, Roya)