RFC - Ripple design system component architecture

[dylankelly]

RFC - Ripple design system component architecture

Summary

Move to Vue 3 using composition API. Provide an NPM package which exports all Vue Ripple Vue components as web-components for compatibility with non Vue JS environments.

• Adopt Vue 3 composition API for Ripple 2.0 components
• Adopt TypeScript for writing components
• Adopt Script Setup syntax https://v3.vuejs.org/api/sfc-script-setup.html#basic-syntax

Motivation

To accomodate a new design architecture (see Business case ) the Ripple frontend component library needs a major refactor. We should take this opportunity to update the technical architecture of Ripple making sure we are instilling best practices now and into the future. This section outlines some of the background considerations.

Vue 3

The Vue JS landscape is going through a major change at the same time. Version 3 of Vue was released in Sept 2020 and is now considered stable. Vue 2 is now in LTS support receiving receiving bug fixes and security patches for 18 months and then security patches only for an additional 18 months https://github.com/vuejs/roadmap#release-channels-and-lts . Furthermore, the community of plugins and components around Vue will increasingly be moving to Vue 3, making it the idiomatic choice for new work.

Framework choice

There is also the question of whether or not Vue is the right framework choice still in 2021. Vue was chosen initially because the original developer was familiar with it and presumably because the PHP community has some affinity with it due to links with Laravel community.

Any framework choice has a certain amount of lock in to the framework way of doing things. When considering which framework to use there are a number of factors to consider.

We can broadly divide these into user-focused and developer-focused criteria:

User-focused criteria

• Functionality. Is the framework fit for purpose? Are there any unique features which would be beneficial?
• Performance. Do pages/components seem to respond faster? How much added overhead will there be for end users? Can loading be delayed?
• Browser & Device compatibility. Is the framework supported natively in browsers? How are legacy clients managed (graceful degradation/progressive enhancement)? Is there a noscript fallback? Is the framework mobile first?

Developer-focused criteria

• Developer experience. How easy is it to work with? Will developers be productive with it? How long does it take to set up? How opinionated is the codebase?
• Interoperability. Are we locked into using these UI components in one way, or can they be used with other frameworks/languages? Can the framework integrate with design systems?
• Open source. Are there community packages that implement functionality that we require? Are they well supported (ie. security patches)?
• Popularity. Are there enough developers who are experienced with the framework? What is the long term viability of the framework? Is it backed by an organisation that has stability?

Industry trends

The https://2020.stateofjs.com/en-US/ is an annual industry-sourced survey for measuring emerging trends of awareness, usage and satisfaction for Javascript technologies and frameworks. Below are two charts on Javascript frameworks, their usage and satisfaction (note that after 2016 the numbers don’t add up to 100% since any one developer may work with a number of frameworks):

1. Vue is the third most used framework, but will likely overtake Angular soon if it hasn’t already
2. Developers have always been more satisfied with Vue than Angular
3. React still remains the most used framework, with highest developer satisfaction
4. Svelte has the highest satisfaction at the moment

Another measure of popularity can be found by looking at the percentage of Stack Overflow questions over time (this roughly lines up with the usage chart from above):

In terms of usage, React, Vue and Angular are the only frameworks that have strong developer momentum behind their communities. Two frameworks without as much community support, Web Components and Svelte, will also be discussed below since they each have compelling functionality that may compensate for this.

Web Components

At their simplest, Web Components are a set of features supported in all modern browsers that enable developers to write their own custom code to extend what HTML can offer. Web Components are made up of three technologies, focused on the same concerns as other front-end frameworks:

1. Custom Elements: this is split into autonomous custom elements (custom elements with no browser native equivalent) and customized built-in elements (a way to implement variations of existing HTML elements).
2. Shadow DOM: an alternate (hidden) tree to construct elements on, used to encapsulate custom elements and their styling.
3. HTML Templates: collections of related markup, used in rendering custom elements from a data source.

The biggest advantage of Web Components lies in their overwhelming support: all browsers except IE support some form of the technologies listed above. The only modern browser without full support is Safari, but autonomous custom element creation is supported, and this is the mode of custom elements that we would use. The framework is well specified as part of the WHATWG Living HTML Standard. Since they exist in the same space, other front-end frameworks can typically co-exist with Web Components if they are not fully compatible (eg. React, Vue, Angular, Svelte). No extra build tools are required, but Google’s implementation, https://lit.dev/, gives an enhanced developer experience.

Svelte

Svelte is a fairly new framework that can be differentiated from the competition by the three key features listed on their homepage:

1. Write less code: uses plain HTML, CSS and Javascript with little boilerplate code.
2. No virtual DOM: custom code is added directly into running DOM.
3. Truly reactive: doesn’t need state management libraries to make nodes reactive.

In many ways this lines up well with Web Components, and there is an option to export these directly with Svelte build tools.

The lack of a virtual DOM should make this framework more efficient than React or Vue, but as mentioned earlier the community is not yet mature enough to support development without a lot of “pioneering” work.

Out of Scope

Our current back end technology is invested heavily in Drupal and PHP devops, so the emerging .NET/WebAssembly framework Blazor will not be considered at this time.

https://www.fast.design/docs/design-systems/creating-a-component-library/

Evaluation of Criteria

Untitled

Example Vue 3 UI framework projects

https://github.com/ionic-team/ionic-framework

Uses web components as core UI elements, with wrappers over top for React, Vue and Angular.

https://github.com/chakra-ui/chakra-ui-vue

Vue Core UI component library relies on upstream javascript styled components library @chakra-ui/styled-system

Proposal

• Adopt Vue 3 composition API for Ripple 2.0 components
• Adopt TypeScript for writing components
• Adopt Script Setup syntax https://v3.vuejs.org/api/sfc-script-setup.html#basic-syntax

Options API

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

Script Setup API

<template>
  <div @click="log">{{ msg }}</div>
</template>

<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

Benefits

• Improved developer experience
• Better Typescript support

Drawbacks

• Additional syntax for writing components (composition, script setup) adds complexity, however provides flexibility to solve complex problems and much better Typescript support

Adoption strategy

• Adopt Vue 3 as the component framework for Ripple 2.0
• Adopt composition API as the preferred Vue component format
• Provide flexible options for working with progressively with Ripple including webcomponents and style only exports

[dylankelly]

See https://github.com/dpc-sdp/ripple-framework/blob/develop/packages/ripple-ui-core/src/components/button/button.vue for example implementation