creativecommons / vocabulary

A cohesive system of design for Creative Commons
https://vocabulary-docs.netlify.app
Creative Commons Zero v1.0 Universal
2 stars 0 forks source link

Vocabulary Roadmap (work in progress) #16

Open possumbilities opened 3 months ago

possumbilities commented 3 months ago

Notice: As there is still much to migrate/change, this Roadmap is considered a work in progress and is still subject to change.


This Roadmap is built from an older draft, created within a different context of needs and requirements

Summary

Vocabulary has become sprawling, out of date, difficult to maintain, mismatched in documentation, and overly complex. It needs to be reconsidered from multiple angles, and given clarity not just in structure, but also approach.

Goals

  1. To reasonably reduce the number of repositories in order to remove unnecessary complexity, and increase maintainability of Vocabulary itself.
  2. To solidify a stable enough "foundation" for work to continue with Vocabulary.
  3. To update and create consistency among projects where some variation of Vocabulary is a dependency.

Outcomes (proposed)

Code

Project Structure / Mechanics as a Design System

- Vocabulary 
    - Design Library (Figma), the first order ref point for all design concepts in Vocabulary
        - Tokens
        - Typography
        - Contexts (behavioral, structural)
        - Components (General non-fw specific components)
    - Fonts (Typefaces), which provides typefaces for use in the system
    - Icons (SVGs), which provides a spritekit for use in the system

    - Native Code implementation, the __source of truth__ for all designs in Vocabulary
        - HTML markup for Contexts and Components, which provides base markup for all components/pages
        - CSS library and assets, which provides base CSS styles for all components.
        - JS library and helpers, which provides a helpful base for all components.

- Vue Vocabulary (Vue.js library), 
    - which provides Vue components __derived from__ Vocabulary

Why?

Most of the issues with Vocabulary sit within two categories:

  1. Original scope misaligned with current scope
  2. The Consequences of time

The intended original scale and scope of Vocabulary has shifted dramatically since its original creation, creating conflicting objectives and philosophies.

In many current situations code implementations don't necessarily need a node package to implement Vocabulary, they just need a link to a relevant vocabulary.css file hosted on a CDN, and a reference spec for how markup should be output and what adjacent behaviors it should follow.

More complex setups just need a straight-forward Vue Components library that has Vocabulary itself as a dependency.

From a repository standpoint, Vocabulary started as separate repositories, then became a monorepo, and then back to separate repositories in some instances--and the original monorepo in others.

This project seeks to move the core of Vocabulary back to a singular repository, and keep the Vocabulary Vue Components implementation as its own repository. There is insufficient documentation for why Vocabulary was split in precisely the ways it was originally, but some of its difficulty in being maintained either as separate repositories or as a monorepo is in how the project is structured overall. The newly proposed structure seeks to address these issues.

The Current Challenges section does a good job of elaborating further.

History

Note: The creativecommons/cc-assets repository and package are included here for completeness, but they were never fully integrated into the Vocabulary project.

Vocabulary Multi-Repo 2019-2020

Repositories and JavaScript Packages

Repository JavaScript Package
creativecommons/cc-assets @creativecommons/cc-assets
creativecommons/fonts @creativecommons/fonts
creativecommons/vocabulary @creativecommons/vocabulary
creativecommons/vue-vocabulary @creativecommons/vue-vocabulary

Vocabulary Monorepo 2020-2022

[RFC] Move vocabulary packages to a monorepo · Issue creativecommons/vocabulary#612

Dedicated repositories archived

Old Repository New Repository
creativecommons/fonts ➡️ cc-archive/fonts
creativecommons/vue-vocabulary ➡️ cc-archive/vue-vocabulary

Repositories and JavaScript Packages

creativecommons Repo Directory JavaScript Package
cc-assets @creativecommons/cc-assets
vocabulary ./packages/fonts
./packages/vocabulary
./packages/vue-vocabulary
@creativecommons/fonts
@creativecommons/vocabulary
@creativecommons/vue-vocabulary

Vocabulary Incomplete Re-Split 2022

Split Vocabulary packages into separate projects · Issue creativecommons/vocabulary#1049

Repository directories migrated to new repositories

Vocabulary Directory New Repository
./packages/fonts ➡️ creativecommons/vocabulary-fonts
./packages/vocabulary ➡️ creativecommons/vocabulary-styles
./packages/vue-vocabulary ➡️ creativecommons/vocabulary-components

Repositories and JavaScript Packages

Due to the incomplete re-split, all of the packages remain in use:

creativecommons Repo Directory JavaScript Package
cc-assets @creativecommons/cc-assets
vocabulary ./packages/fonts
./packages/vocabulary
./packages/vue-vocabulary
@creativecommons/fonts
@creativecommons/vocabulary
@creativecommons/vue-vocabulary
vocabulary-components @creativecommons/vocabulary-components
vocabulary-fonts @creativecommons/vocabulary-fonts
vocabulary-styles @creativecommons/vocabulary-styles

Current challenges

Code Rot / Sprawl / Complexity / Performance

Change in Objective / Scope

Node (NPM) as a CDN Pipeline to unpkg

Originally, Vocabulary was built as a robust design system to be used from an application-centric focus. This meant that there were certain challenges when implementing it within setups such as WordPress, since the main core focus was from compatibility with the Node System, and more specifically with Vue.js.

Since then, the focus of Vocabulary use-cases are much more WordPress / Static site centric, with app uses as the secondary priority.

In this way, currently, NPM's major function, and by proxy these repositories existing as Node packages, is to publish them easily to a CDN (unpkg), not to necessarily be consumed as as dependency in Node projects. Individual files (primarily the font and css files) are then often used as <link> includes in relevant codebases.

This isn't entirely untenable, but there are likely alternative CDN solutions for this use-case that don't primarily rely on the NPM ecosystem or on unpkg.

Source of truth and conflicting design system mechanics

From the Storybook documentation:

The overall Vocabulary project consists of:

  • Design Library (Figma), the source of truth for all designs in Vocabulary
  • Fonts (Typefaces), which provides typefaces and the main icon font for use in the system
  • Vocabulary (CSS library and assets), which provides base CSS styles for all components.
  • Vue Vocabulary (Vue.js library), which provides Vue components derived from Vocabulary

A design system that's primarily used within code, needs its source of truth to be actual code, and more specifically the meaning and presentation, and often behavior of various design elements. A program like Figma can somewhat provide the presentation part of the source of truth, but as it is more visually focused it is unreliable for the actual code (CSS) implementation of that presentation, and even less so for the meaning, which is mostly derived from the HTML markup. As for behavior, the results can largely be mixed from relying on Figma. This means resting the source of truth on Figma results in the presentation being incomplete, the behavior being inconsistent, and the meaning having to be derived elsewhere.

As a result, coming from an app-centric focus, the Vue.js Components and Vocabulary Styles ended up being closer to the actual original "source of truth" for meaning + some behavior + presentation, and this meant that Vue and by proxy Node conventions set the tone and direction of how and where Vocabulary could/should be used. This likely made solid sense considering the original focus and the original use of Vue.js in a larger application-centric approach.

This doesn't make as much stable sense in the present, where WordPress themes largely need a CSS file of appropriate styles, and a directed documented implementation guide for how the markup should be output. The most direct implementation being as Gutenberg blocks on the b/e and as PHP code for the f/e rendering

There is also the possibility of the WordPress theme utilizing Vue.js Components into the mix, which paired with the backend editor (Gutenberg) being in React.js may introduce unnecessary complexity.

The Vue.js components have a use, but they should be an implementation of a source of truth not the original source of truth. The current configuration leans too heavily on the latter.

Change in scale

At greater scale (multiple apps, higher number of engineers + teams) high reliability on a f/e framework (Vue.js, React.js, etc.) as the majority source of truth for components can be worth any complexities or missing pillars that come along because they help to not just enforce a Component, but to enforce that component's markup in a more direct, but also abstract pathway.

When the scale is not quite as large, these tradeoffs can come at a much higher cost. Additionally, if in the future there is a need to pivot away from utilizing a specific framework as the source of truth, then the migration path can be challenging since there is no framework agnostic source of truth to go back to as reference.

In general, if the project isn't going to have the kind of scale of a larger SAAS/PAAS company, it can make more sense for a Design System to first exist as a singular source of truth of components in as native of a format as possible (HTML, CSS, helper JS). There is some documentation of this within storybook, but it is inconsistent, some of the markup relying only on Vue markup.

Then, you can have various implementations in frameworks as they become relevant (Vue.js, React.js, etc.). This provides a stable source of truth that will remain relevant regardless of needed implementation. Changes to core Vocabulary can then cascade down to the individualistic implementations with their own specific nuances.

There are many sound reasons to pick one approach over another, or to pursue additional routes. However, much has changed since the original creation of Vocabulary, most importantly its use requirements, which include its scale. This has resulted in a high degree of complexity and code rot, which stands in the way of stable maintainability and accurate documentation.

Incomplete Documentation

Objectives (work in progress)

Setup

Phase 1

Involves the creativecommons/vocabulary repository once again becoming the central hub of work, after several repositories have been combined, their functionality and associated NPM packages will be updated to reflect those changes, followed by changes with any projects which utilize those repositories as a dependency in some way.

1.1 Setup - creativecommons/vocabulary

1.2 Return a stable set of src files to work from - creativecommons/vocabulary

1.3 Make a versioning decision - creativecommons/vocabulary

1.4 Node cleanup - creativecommons/vocabulary

1.5 Prepare and move forward with pre-release - creativecommons/vocabulary

[milestone] - stable MVP foundation reconstructed with as much git history intact across relevant repositories.

1.6 Publish 2.0.0-alpha pre-release - creativecommons/vocabulary

1.7 Ensure repo follows current Repo Guidelines - creativecommons/vocabulary

1.8 Make determination on remaining repos

1.9 +

[After several weeks of archaeology the original roadmap proposed for Phase 1 needs further consideration and updates on the best route forward.]

Phase 2 CDN Reconsideration

Vocabulary should not rely on being primarily a node package published to and served via npm/unpkg. This can remain secondarily, especially for node ecosystem specific projects, but for any other use cases that just need a <link> reference to utilize vocabulary there are better approaches, namely a simplistic CDN deployment pipeline that is not unpkg.

Phase 3 - Refactor Vocabulary to be proper source of truth

Much of the work thus far has mostly been to get the repositories reduced, clarify the code, and make the CDN setup more robust. However, Vocabulary itself still needs the bulk of its code to be refactored. There is a strong likelihood that bulma needs to be removed/replaced, and that storybook needs a reconsideration.

Future Considerations

Unknowns (WIP)