Design Systems Team/Vue and Codex for non-Developers

What is Vue?
Vue (pronounced "view") is a popular, modern JavaScript framework for building user interfaces.

What is Codex?
Codex is a design system for Wikimedia that is aligned with the Wikimedia Design Style Guide.

Codex is a layer - actually, several layers - on top of Vue that provides:


 * 1) Out-of-the-box, interactive components that you can use on your page (e.g., button, dialog, menu). Some components are also available in a CSS-only version for use in no-JavaScript contexts.
 * 2) Standardized colors, shadows, spacing values, backgrounds, borders, and paddings, called design tokens. These are the smallest building blocks of the design system: they define, document and enable the application of systemic design decisions at scale.
 * 3) Icons which can be used to convey actions or other information visually.

What is the difference between Vue and Codex?
You can build features in Vue without using Codex; however, the Design Systems team encourages teams to use Codex and recommends against teams building their own components when Codex versions are available. We ask that you use Codex components where possible, and build your own components as “one-offs” where Codex doesn't have what you need yet. Those components could then be upstreamed (moved into Codex) in the future.

What is Pinia?
Pinia is a JavaScript library that works with Vue to help keep track of the "state" of an app. For example, if you're building a search page, you might use Pinia to keep track of things like the current search input, how many results are being displayed, and what filters are being applied. Pinia makes all of this data available across an entire app, so it's easy to get or update that data from any component. It makes developing complex features much easier and faster, and makes code easier to maintain and update in the long run.

What are long-term benefits of adopting Vue/Codex?
While adopting Vue or Codex might mean more time spent on learning and experimenting during design and development, and longer project timelines, the long-term benefits are:


 * Less feature redundancy
 * Consistent user experience across all Wikimedia projects
 * Accessible and multilingual by default
 * Standardized browser and device support
 * Faster onboarding
 * Faster software upgrades
 * Systems thinking: teams make an impact outside of immediate focus area

Is my project is a good fit for Vue/Codex (whether starting from scratch, or migrating from another library)?
As an initial guide to making this decision, review the project with your team's engineers against the following criteria: