vue-genome

Genome is an opinionated UI toolkit for Vue.js. It has a collection of components used to create interfaces and interactions for the web. Styling is completely at the user's discretion and not incorporated as part of this toolkit.

Setup

You have two options, with or without Docker.

Using Docker has some advantages:

• Reproducible setup
• You can complain to Aurélien if it does not work.

Docker has a big disadvantage: integration with your existing dev setup, dev tools, editor may be hard or can slow you down.

There is no wrong choice, it is all about choosing what's best for you and what helps you producing results.

With docker

docker-compose build
docker-compose run server yarn install
 
docker-compose up

Without docker

Mac

1. Install node and yarn

brew install node yarn

1. Download and Install Chrome Canary
2. yarn install
3. yarn run dev

Linux

You are 😃 awesome 😃, You can look at the Dockerfile for step by step instructions.

Prettier

We are using prettier—a tool similar to go format— to help us format and respect coding standards format for js files. Prettier runs automatically has a pre-commit hook.

Additionally you can setup your favorite code editor to help you with code formatting as you write code.

Troubleshooting Docker

• Wrong Binding

If you have an error like this:

server_1  | Module build failed: Error: Missing binding /usr/src/app/node_modules/node-sass/vendor/linux-x64-48/binding.node
server_1  | Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 6.x
server_1  |
server_1  | Found bindings for the following environments:
server_1  |   - OS X 64-bit with Node.js 6.x

It is probably because you installed node_modules outside of docker—just doing yarn. You can fix it with:

rm -rf ./node_modules
docker-compose run server yarn

Usage

import Vue from 'vue';
import Genome from 'vue-genome';
 
Vue.use(Genome);

Testing

We are using Karma + Mocha for unit tests.

While Jest is also a good test framework, We chose Karma + Mocha over Jest because:

• Running tests in the browser is important to US. It gives us the possibility to test in different browsers on the CI and as the potential to help QA quite a lock
• Debugging in a web browser gives the best overall experience to everyone and takes advantages of devtools improvements.

To run the tests you run the command: yarn run unit

You will see tests running in your terminal and you chrome window will open automatically for you. From this Chrome window you can click on the debug button to open a debugging session. You can now open the devtools and refresh. Tests will honor your breakpoints made with the debugger; statement.

On file changes, tests will re-run automatically.

You can pick a particular test to run instead of the full suite be using only. For example in your test files:

describe.only(...

or

it.only(...