Skip to content

Instantly share code, notes, and snippets.

@yyx990803
Last active April 24, 2018 10:21
Show Gist options
  • Save yyx990803/2ccdcf8ea737e145932d to your computer and use it in GitHub Desktop.
Save yyx990803/2ccdcf8ea737e145932d to your computer and use it in GitHub Desktop.

The Vue Stack

Opinionated stack for building large-scale, production grade applications

Application

  • View layer: Vue.js
    • Intuitive, smooth learning curve
    • Performant reactive system that is optimized by default
    • Built-in animation/transition system
  • Routing: vue-router
    • Component-based routing
    • fine-grained navigation control
    • HTML5 history support with hash fallback
  • State management: vuex
    • Reactive and highly efficient (again, optimized by default)
    • Terse, say no to crazy boilerplate
    • Testable
    • Hot reload-able
    • Time travel debugging via vue-devtools

Development experience

  • Module bundling via Webpack
    • Everything is a module => one single dependency graph => better maintainability
  • ES2015 via Babel
  • Single File Component via vue-loader
    • Colocating component concerns while embracing the HTML, CSS and JS you know and love.
    • hot reload out of the box
    • supports mixing pre-processors in the same component, be it LESS, SASS or PostCSS
  • Lint-on-save via ESLint
  • Compilation and lint errors displayed in browser overlay, preserving application state via webpack-hot-middleware
  • vue-devtools Chrome extension
    • Component tree with route & state inspection
    • Vuex mutation log, state inspection + time travel

Testing

  • Unit testing with Karma + Jasmine + karma-webpack
    • Easily switch to Mocha/Chai/Sinon if preferred
    • supports ES2015 + full webpack loaders
    • easy mocking
    • optional coverage report via isparta-loader + karma-coverage
  • E2E testing with Nightwatch
    • Handles Selenium & chromedriver dependencies so that you don't have to mess with them. It works out of the box.

Production build

  • HTML/templates minified with html-minifier
  • Component CSS extracted into a single file and minified with cssnano
  • JavaScript minified with UglifyJS
  • long-term asset caching (auto inject hashed asset urls into index.html)
  • base64 inlining for fonts/images <10k
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment