Front-end Engineering Process, Technology Selection, and Project Configuration

1 Front-end Engineering Process

The author follows the four pillars of front‑end engineering—modularization, componentization, standardization, and automation—summarizing personal practice and insights.

1.1 Modularization

JavaScript modularization now relies on ES6 modules, replacing CommonJS and AMD; typical bundlers include webpack + babel for single‑file bundles and systemjs for asynchronous loading.

CSS modularization is achieved through Vue scoped styles, a BEM‑like naming convention, and a pre‑processor (Sass).

1.2 Componentization

Components are built on top of modules using Vue single‑file components, allowing template, style, and logic to be packaged together for reuse.

1.3 Standardization

Coding standards use ESLint with Google’s JavaScript style guide, Stylelint for CSS, and EditorConfig for editor settings (e.g., 2‑space indentation). API contracts follow RESTful design with Swagger documentation. Version control guidelines emphasize fixed package versions in package.json, lowercase filenames, and a near‑by directory structure. Naming conventions favor camelCase for variables and PascalCase for classes. Collaboration tools include Trello/GitLab TODOs, GitLab repositories, GitLab Wiki, Sketch for design, and InDesign for documentation.

1.4 Automation

Environment control uses Docker and Kubernetes. Build tools are webpack or Rollup, with SVG sprites, hot‑module replacement, ES6/7 transpilation, Sass compilation, JS/CSS minification, image base64 inlining, content‑hash filenames for cache busting, on‑demand loading, and UMD bundles. Continuous integration is implemented via GitLab hooks, Jenkins or GitLab CI, and project badges (Travis/CircleCI, Codacy, npm stats, MIT license, optional Codecov and Saucelabs).

2 Front-end Technology Selection

Based on the workflow, the stack includes Vue (core library), Koa (Node middleware), Sass (CSS pre‑processor), Sentry (logging), Jasmine (testing), webpack/rollup (build), Chrome/IDE/Vue DevTools (debugging), PM2 (process management), npm/yarn (package management), and JSON‑RPC/Swagger/GraphQL for front‑back communication.

3 Front-end Project Configuration

3.1 CSS

Reset uses normalize.css. Layout prefers Flexbox for one‑dimensional and CSS Grid for two‑dimensional designs, falling back to Bootstrap 3 for compatibility. Animation libraries include Hover, Animate.css, and Velocity. Sass duplicate‑import issues are mitigated by extracting files, using a global Webpack loader, deduplication plugins, or cssnano.

3.2 Webpack

3.2.1 noParse

Skipping parsing of known libraries speeds up builds:

module: { noParse: { 'vue': './node_modules/vue/vue.min.js' } }

Usage example: import vue from 'vue' 3.2.2 alias

Define path aliases to shorten imports:

resolve: { alias: { 'ui': path.resolve(__dirname, 'app/components/ui'), 'fonts': path.resolve(__dirname, 'app/assets/fonts') } }

Importing a component then becomes: import modal from 'ui/modal.vue' For CSS, prepend ~ to the alias: @font-face { url('~fonts/iconfont.woff') format('woff') } 3.2.3 uglifyJs

Remove console statements during minification:

new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, pure_funcs: ['console.log', 'console.info'] } })

3.2.4 Tree Shaking

Enable ES6 module analysis to drop unused code. Example modules:

// utils.js
export function foo() { return 'foo'; }
export function bar() { return 'bar'; }
// app.js
import { foo } from './utils'

Without tree shaking both foo and bar are bundled; with it only foo remains, reducing bundle size.

Build script example:

"scripts": { "build": "webpack --optimize-minimize", "seebuild": "webpack" }

3.3 Babel

A .babelrc file enables async import transformation, tree shaking, and ES6/7 syntax support.

3.4 Performance

Preload images via new Image() and serve assets through a CDN.

3.5 Common Front-end Libraries

Section pending further details.

4 Conclusion

A backend demo project is linked at https://github.com/lluvio/vue-element . The original article is sourced from https://lluvio.github.io/blog/front-end-architecture.html.