# Introduction
Valisette is composed of 3 parts :
- A build system based on Webpack 4 and Babel 7 to use modern Javascript now.
- A Javascript application core written in ES6 that enables your build & your service worker and serves as a performance-oriented platform to load javascript, css & web assets.
- A Vue.js application written in ES6 with vuex, vue-router and vuei18n configured out of the box for asynchronous components and code splitting.
# Why did we create it ?
It was created to answer 16 Pixels's need to :
- Have a modular boilerplate
- Make maintainable build system across many code bases.
- Automate most its web performance related work.
- Have new developers & contractors to start coding faster & learn web performance.
- Empower developers to maintain and extend their own build system by having on open webpack config and a strong tool set.
- Open its ideas and knowledge to the outside and make a great open source tool.
- Demistify front-end build systems through a simpler approach.
# How it works
The boilerplate default configuration is designed to build you an SPA with zero config that hits 100 on all of Google Lighthouse performance indicators. As you carry on it is designed to teach by doing all the aspects of web performance on the client side. Ultimately it expects that you will need it for other purposes and becomes a modular tool that can match a different set of expectations out of the box. It is managed from a single configuration file. You can tweak the bundler and compiler yourself as you level up and get a grasp of how systems work. It is meant to be a progressive learning / building tool.
# Features
Valisette features :
- Babel 7 transpilation
- Webpack 4 bundler
- Plain ES6 App boilerplate
- Vue.js App boilerplate with Vuex, Vue-router, Vue i18.
- SPA Generator
- PWA Generator
- Service Worker Generator
- Assets compressor
- Eslint configuration
- Vue.js template compilation
- SCSS compilation
- CSS Prefixing
- Development HTTP proxy server
# How to use this documentation
We recommend you to first run an installation. Then read the documentation while you can search though files for what you're reading about.
Don't forget to use the search, the whole configuration is searchable.
# Todo
Valisette is still a work in progress. There are a few things that it currently does not support but are planned:
- CLI for Installation over existing project
- CLI for project upgrade (mainly for package.json and webpack files)
- Advanced code splitting by making every chunk a bundle
Contributions are welcome!
# Why not ... ?
# Vue-cli
Vue-cli is the official Vue.js Tool chain. It is designed to build SPA's the Vue way and it integrates really well with the vue ecosystem. It uses webpack-chain to manage it's configuration and it is done so to avoid to hustle of having to understand webpack all the way. It has a GUI to support new developers. It supports older version of the internet better and have the maximum maintainability. Overall it's a great tool to learn Vue.js or make large dedicated Vue apps.
# Create-react-app
Create-react-app is the official go-to boilerplate for the react ecosystem. It is dedicated to react and probably the most advanced and feature heavy boilerplate on the market. It's dedicated to learning react and make react applications. It's update cycle is very fast make it easy to stay on the bleeding edge of new JS features. Overall even though it changes all the time it's the most advanced tool in the JS ecosystem.
# Plain javascript
Remember that plain JS is always the fastest if used the right way. Checkout VanillaJS for a reminder. Feel free to let us know if you make great stuff !