How to implement a visual framework component
After today's (25-09-18) all day where we went through where the VF 2.0 is at I thought I'd take a stab at answering in long form how people can implement a component into their existing codebase. This is just a 'first stab' attempt at it. @boulton @khawkins
How to use a Visual Framework Component.
One of the universal aims of the visual framework is for it to be as ‘tech-stack agnostic’ as possible. There-in the design patterns within the component library are coded using HTML, Sass, and JavaScript.
Another aim is for it to be as useable across teams as much as possible. This means that you can go from copying and pasting the code from the component library to installing a group of components, or an individual component as using NPM.
Each way to include visual framework components into your site have their own benefits and potential problems.
<link>
to the CDN
Including a If you’re going to be using most of the components, you might want to link to a compiled version of the CSS from a CDN. We can also look at providing sub-sets of the CSS for things like ‘blog sites’, etc.
You would need to make sure the HTML is correct as per the patterns you are wanting to use. If HTML is updated in the component library you should be able to update your websites HTML.
Copying and Pasting
Copying and pasting the rendered HTML, compiled CSS, and concatenated JavaScript is the quickest way of including a design pattern into your site.
The compiled CSS is the ‘just enough’ you need for the component to be easily added and once pasted into your codebase you can adapt the contents of the HTML tags to what your CMS or whatever requires.
A problem with this approach is that you have easily updatable benefits of any future changes unless you proactively update your codebase with any new updates to the component.
If you accidentally, or purposefully, change the HTML to fit your needs it could break the design.
Using NPM
To get the benefits of any improvements or changes to a component using NPM to install the design pattern into your codebase is the way to go.
The visual framework component library is a monorepo, simply this means that each component is it’s own installable NPM module.
These modules can also be grouped into a larger NPM module so from one npm install
you can get all the relevant code into your codebase for a new marketing site, for example.
At the moment when you use NPM to install a component you get a folder in your node_modules with the following files:
- pattern.hbs
- pattern.html (to be done)
- pattern.scss
- pattern.css
- pattern.js
This means you can include the .scss or .css file (depending on what your existing tooling is) into your existing CSS. You can (to be confirmed) include the Handlebars file as needed, and also include the JavaScript file into your codebase using your tools.
The pro of using NPM to install the design patterns into your codebase are that you can easily get any patch, minor, or major changes, without much leg work.