/
2024-02-27 Frontend Working Group Meeting Notes: to pin or not to pin, renovate vs dependabot, etc

2024-02-27 Frontend Working Group Meeting Notes: to pin or not to pin, renovate vs dependabot, etc

Owned by Adolfo Brandes
Last updated: Mar 04, 2025 by Adam Stankiewicz
3 min read

 Date, time, location

 Discussion topic(s)

One, maybe two topics to be presented or discussed in depth in the upcoming meeting.

  1. To pin or not to pin… (NPM dependencies in package.json)

    1. https://github.com/openedx/open-edx-proposals/pull/687

      1. Proposed changes

        1. Preview: OEP-67 (preview)
          Preview: ADR for using caret ranges in dependency versions (preview)

  2. Renovate vs. Dependabot

    1. OEP-67 recommends Renovate, but some repos continue to have Dependabot automation. In some repositories, both Renovate and Dependabot are running together, generating PRs for the same upgrades.

🎥 Recording

 Participants

Adam Stankiewicz, Adolfo Brandes, Ayesha Waris, Brian Smith

🤖 Summary

1. Dependency Pinning Policy

  • Discussion: Whether to formalize a policy of not pinning npm dependencies in package.json.

  • Key Points:

    • Pinning top-level dependencies does not fully lock transitive dependencies.

    • Pinning increases dependency fragmentation across projects.

    • Using caret ranges (^) better reflects engineering intent (allowing minor and patch updates).

    • Reduces noise from Renovate PRs, since Renovate can update the package-lock.json directly.

    • Consensus: Move towards not pinning dependencies, rely on semantic versioning, and leverage npm’s default behavior.

2. Renovate vs Dependabot

  • Issue: Some repositories are configured to use both Renovate and Dependabot, leading to redundant and conflicting PRs.

  • Next Steps:

    • Consider standardizing on Renovate across all repositories.

    • Check with the maintenance team and historical reasons for using Dependabot.

    • Document and align automation practices for dependency management.

3. Renovate Configuration Improvements

  • Goals:

    • Group all non-major updates into a single Renovate PR (reducing noise).

    • Require manual approval for major version updates (gatekeeping larger, riskier changes).

  • Proposal: Create a central Renovate configuration that projects can inherit from, stored in a shared GitHub repo.

4. Automerging Policy Discussion

  • Current: Automerge only patch updates (except for Open edX packages which allow minor updates too).

  • Open Question: Should minors also be auto-merged for all packages?

  • Debate Points:

    • Trust in upstream semantic versioning.

    • Risk vs. reward for reducing stale dependencies.

    • Tentative conclusion: Default to a conservative policy (patch-only automerge) but allow overrides for individual projects.

5. React 18 Migration Update

  • Most upstream dependencies have been updated to React 18.

  • Enterprise packages were released, unblocking further migrations.

  • Work continues on migrating Learner Portal to React 18.

6. Plug-in Slot Naming ADR

  • New Standard: Reverse DNS format (frontend.moduleName.slotName).

  • Naming Guidance:

    • Use descriptive, consistent names.

    • No formal enforcement of module names yet (but reviewers should check for consistency).

  • Documentation Needs:

    • Maintain a central list of all existing plug-in slots.

    • Potentially automate extraction of slot IDs into a shared document/wiki.

    • Consider integration with usage insights tools for visibility.

7. Sidebar Layout Issue in Tutor Theme

  • Issue: Narrow content area in some themes using the sidebar navigation.

  • Root Cause: Some themes override the container-xl width, causing layout issues.

  • Conclusion:

    • This is a theme-level issue, not a framework bug.

    • Official guidance: Theme authors should not rely on specific CSS properties (future-proof by overriding design tokens instead).

8. Theming API Considerations

  • Discussion on whether there’s an official theming API.

  • For future-proofing, design tokens should be the primary mechanism for theme customization.

  • There’s no formal commitment to preserving CSS class values between releases.

Next Steps

  • Share the npm dependency pinning ADR in the Frontend Working Group channel for broader review.

  • Follow up on Renovate vs Dependabot standardization.

  • Create a shared Renovate configuration.

  • Explore ways to document/track plug-in slots centrally.

  • Continue React 18 migration work.

 Action items

@Adolfo Brandes Check with the maintenance team on historical reasons for using Dependabot
@Adolfo Brandes Create a page in the wiki that documents all plugin slots
@Adam Stankiewicz will create an ADR that documents the decision to not pin npm dependencies

 Decisions

  • Move towards not pinning dependencies, rely on semantic versioning, and leverage npm’s default behavior.

  • Create a central Renovate configuration that projects can inherit from, stored in a shared GitHub repo.

  • Default to a conservative policy for auto-merging Renovate PRs (patch-only) but allow overrides for individual projects.

  • Theme authors should not expect that specific CSS properties or HTML structure will remain from one release to the next.

Related content