February 2021 - Paragon Engineering Survey Results

Raw survey results →

Our frontend and React knowledge is spread pretty evenly from novice to expert.

Also, look at our collective humility - no 10s

Open

Open

In the past six months…

• Most respondents didn’t write frontend code very often

• Comparing usage of React with usage of Paragon, Paragon is used occasionally.

• Zero used Paragon many times a day, and only one every day.

Ease of use

Paragon’s average ease of use score is 7.7.

Summary of issues using Paragon

• Inconsistency in the component design

  • not always clear when you can passthrough regular properties

  • Not understanding how to properly use the components, i.e. what props to pass to get it to do what I want.

• Lack of access to Paragon at all

• Project’s include out-of-date versions of Paragon

  • Breaking changes when upgrading causing upgrade pain

  • .container keeps changing and doing scary things

  • Upgraded to a new Paragon release (w/ breaking changes) in a project to bring in a new component, but the props API of other component(s) changed as well so I had to spend more time fixing up our use of the other components (I'd be in favor of independent versions of components in some form or another).

• Finding the right components or ways to assemble them

  • Trying to figure out which feature would match what I was using (we don't really have a form design, but do have inputs and validation groups, so how those interact is a bit of a challenge)

• Inflexibility of some components causes the need to create workarounds

  • Modal re: Button(s)

  • The component I was using wasn’t quite flexible enough for my needs. However, there was an update in the middle of my work that had what I needed!

• Lack of clarity in documentation

  • It does rely on knowing a lot of bootstrap stuff that I wasn't familiar with either couldn't import an Icon for some reason

  • Not being clear after reading getting started page, where to go. usually I click on a component name making a guess, but perhaps a bit more guidance on the getting started page would be nice on what typically users do after reading getting started? like add a component, setup your project's theme etc etc... an alternative idea is a quick guided sample app built using paragon, utilizing most of the major features

Summary of useful features when using Paragon

• Simple, reusable components

  • The ease at which you can quickly build UIs given the component toolkit this library provides (which will only improve as the design system is formalized), knowing that most of the a11y concerns are taken care of under the hood and it follows the edX theme.

  • Having flexible building blocks that you can compose together is really cool. It's nice to just get best practices/focus handling, etc., for free.

• Getting styling for free

  • Having CSS already work out of the box without having to do anything to make it match our style preferences. That is beautiful. I love it.

  • Buttons and colors

  • Bootstrap forwarding

• Built-in accessibility concerns

• CSS utilities

• Doc site is useful

  • The documentation site slaps. Paragon's atoms and many of the components are great, and the utility CSS/SASS variables too.

  • the live demos on the doc pages are extremely useful!

Summary of what would make Paragon more useful or easier to use?

• Consistent, predictable and well-architected components

  • Consistent, un-opinionated component composition patterns and props.

• Make sure Paragon is up-to-date

  • Update paragon in edx-platform, at a minimum

  • Not sure, I guess make sure all components are up to date

• Better standardizing of components

  • ex: see the way-too-many variations of form layouts and component usage in the admin portal) and adding those standardizations to Paragon is all we really need. The overall system is really easy to use and super cool.

• Component flexibility:

  • There's occasionally a need to find workarounds to support some given functionality or styling when using a Paragon component when UX does not strictly follow what the component styling/functionality provides. It's often difficult to reason whether time should be spent making those components more flexible in favor of finding workarounds as it increases the scope of the work in the sprint. That said, this doesn't happen too frequently as Paragon has improved in its flexibility and functionality over the past 3 years, especially when the library began using react-bootstrap under the hood.

• More thorough/nuanced example code

• More components

  • Really, the only thing is more components, its already very useful/easy to use

• Testing guidance

  • (like how to correctly mock, maybe even offer mock utils).

Paragon documentation is pretty discoverable

If you do not use Paragon, why?

• I hardly do frontend work

  • I haven't had any front-end tickets needing changes to shared components

  • I haven't needed to write any new front end code since we created it.

  • Haven't needed to for the work that I've been doing. Haven't done any front-end work.

  • My frontend work is usually just tweaks and bug fixes

• Paragon is not available in my code base

  • I also don't believe I can use paragon in ORA, because of the way it is loaded in or something?

  • The code we own does not support Paragon

  • Some of the frontend work I've done involves non-MFE pages (django in edx-platform) where I cannot use Paragon, but follow it for stylistics purposes. And optimizely experiments as well, I usually mock the Paragon looks with HTML/CSS/JS

• I don't know what it is

The five people who contributed to Paragon rate its ease of contribution highly

What challenges existed when contributing?

• Local development of components was hard

  • but I think module.config.js fixes that. Should be pretty easy-peasy now. Updating the documentation site is a bit opaque to me, and I'm not familiar with how to make new pages in there.

  • Figuring out how the mdx files worked was a challenge at first, especially figuring out how to get custom components into an mdx file for example code purposes.

  •  

• Lack of engineering clarity in Paragon proposals

  • Even as an engineer who participates in the recurring Paragon & design system discussions each week/month who has a fair bit of context around Paragon's history and where it's headed, I sometimes find it difficult to understand how the design system component proposals will translate to Paragon from a technical/code perspective without more in-depth engineering-related discussions around how we will use/change the components we have today to build out the formal design system as it gets established.

• Lack of time

  • Also, I find it difficult to push Paragon forward in any meaningful way from an engineering perspective given my focus on my team's normal sprint work. I typically only contribute to Paragon when it overlaps with sprint work in some way (e.g., UX wants to use a component that doesn't exist in Paragon yet, some component needs to be made more flexible).

  • It took a while to complete the process

What could make contributing easier?

• Documentation for the technical process -around- the component development itself.

• Checklists for what should be tested in a component and what should be in the component's documentation.

Final thoughts

• I love the sound of it, I just haven't had many opportunities to use it yet.

• This is the first place I've worked that has had such a thing, so it's super cool to me. Thanks to all for making it and updating it!

• I think it's a cool system and I'm glad we have it!

• Paragon is awesome! ;) As more of the edX platform comes on board to the world of microfrontends and React, I'm excited to see Paragon's adoption and contribution throughout the organization increase and the impact it will have on our users/customers by finally having a truly consistent design across the entire edX platform.

• Generally positive though I have not had the pleasure to use it yet.

• It's great

• Because I haven't used it in a while, there are lots of more recent changes that were done that I did not follow and don't know exactly what has changed, but would like to.

• I <3 paragon

• After working in repo's without it, I've realized how great of a system it is!

• would be nice if you could search across all the pages in the docs, for instance if i'm trying to set the width of an element but don't know which section I should be looking under

• I don't know what it is

• It is superb to have access to such a great library, with accessibility put at the forefront, appreciate all the hard work from all.a