background

The evolution of front-end engineering is not independent, but closely related to and growing up with other front-end fields. The background of front-end development will be introduced from several dimensions.

Front-end career evolution

Evolution of ES

Development mode

Front-end engineering

Stone Age (JSP/PHP/ single-file mode)

The need for the front-end is weak, the page is relatively simple, there are not too many auxiliary tools in the development process, even a moment to manually preview the file, refresh the code, the front-end code “decoration” in the PHP code.

(The time is too long, here is a picture for you to experience)

Bronze Age (packaging tools for non-JS technology stacks)

Maven is introduced

Hosting in-house Maven JAR/AAR packages to support client or other Java program distribution. Maven is a build automation tool used primarily for Java projects. Maven can also be used to build and manage projects written in C#, Ruby, Scala, and other languages. The Maven project is hosted by the Apache Software Foundation, which was previously part of the Jakarta project.

YUI Compressor

YUI Compressor is a front-end compression tool provided by Yahoo. In addition to Compressor, Yahoo also provided a number of front-end related tools and component libraries.

Yui. Making. IO/yuicompress…

A small example of Maven packaging JS

<plugins> <plugin> <! [root@groupid] [root@groupid] [root@groupid] [root@groupid] [root@groupid] [root@groupid] <artifactId>yuicompressor-maven </artifactId> <version>1.5.1</version> <executions> <execution> < Goals > <goal>compress</goal> </goals> </execution> </executions> <configuration> <! Utf-8 </encoding> <! -- do not display possible js errors --> <jswarn>false</jswarn> <! --> <force>false</force> <! Insert new line after specified column number --> <linebreakpos>-1</linebreakpos> <! <preProcessAggregates>true</preProcessAggregates> <! --> <nosuffix>true</nosuffix> <! SRC /main/static</sourceDirectory> <! <outputDirectory>target/classes</outputDirectory> <force>true</force> - compressed js and CSS files - > < includes > < include > / *. * * js < / include > < include > / *. * * CSS < / include > < / includes > <! - the following directories and files will not be compressed - > < excludes > < exclude > / * * *. Min. Js < / exclude > < exclude > / * * *. Min. CSS < / exclude > < / excludes > </configuration> </plugin> </plugins>Copy the code

conclusion

As part of the back-end project, the front-end code is centrally managed by maven tools and published to the corresponding back-end project

During the packaging process, js and CSS can only perform simple packaging and compression, but cannot perform further management.

Silver Age (JS technology stack packaging tool)

Write task scripts by writing bash or nodeJS to implement imperative hot update (HMR) and automatic packaging, representing: Grunt, Gulp;

Grunt is introduced

Please refer to www.gruntjs.net/getting-sta…

A small example of Grunt packaging

module.exports = function (grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON( package.json ), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today( yyyy-mm-dd ) %> */\n', }, build: { src: build/index.js , dest: build/<%= pkg.name %>.min.js , }, }, concat: { build/index.js : [ src/foo.js , src/bar.js ], }, }); // Load the plug-in containing the Uglify task. grunt.loadNpmTasks( grunt-contrib-uglify ); // Load the plug-in containing the concat task. grunt.loadNpmTasks( grunt-contrib-concat ); // List of tasks to be executed by default. grunt.registerTask( default , [ concat , uglify ]); };Copy the code

conclusion

JS technology stack packaging tools, front-end can implement their own packaging tools based on Node, function points and non-JS technology stack similar.

The Golden Age (Bundle)

Based on the concept of Bundle and the ability of Babel, JS files are packaged in the way of modules, HMR and various processors are realized, and front-end engineering is transformed from simple compression and merger into more abundant golden time, which is represented by Webpack and Rollup.

A small example of Webpack

var webpack = require('webpack'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin')var CleanWebpackPlugin = require('clean-webpack-plugin')var ExtractTextPlugin = require('extract-text-webpack-plugin')var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')const VENOR = [ faker , lodash , react , react-dom , react-input-range , react-redux , redux , redux-form , redux-thunk , react-router ]module.exports = { entry: { bundle: './ SRC /index.js', vendor: VENOR}, // If you want to modify the webpack-dev-server configuration, in this object modify devServer: {port: 8081}, output: {path: path.join(__dirname, 'dist'), filename: '[name].[chunkhash].js' }, module: { rules: [{ test: /.js$/, use: 'babel-loader' }, { test: /.(png|jpe?g|gif|svg)(?.*)?$/, use: [{ loader: 'url-loader', options: { limit: 10000, name: 'images/[name].[hash:7].[ext]' } }] }, { test: /.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{// postcss: loader: 'css-loader'}]})},]}, [ new webpack.optimize.CommonsChunkPlugin({ name: ['vendor', 'manifest'], minChunks: Infinity }), new CleanWebpackPlugin(['dist/*.js'], { verbose: true, dry: false }), new HtmlWebpackPlugin({ template: 'index.html'}), // generate the global variable new webpack.defineplugin ({process.env.node_env: JSON. Stringify (process.env.node_env)}), // New ExtractTextPlugin(CSS /[name]. New OptimizeCSSPlugin({cssProcessorOptions: {safe: True}}), / / compression JS code new webpack. Optimize the UglifyJsPlugin ({compress: {warnings: false}})]}.Copy the code

conclusion

As described in the banner chart on webpack’s official website, the front-end construction of this node breaks away from simple file splicing and compression, and truly touches the connection between JS, providing a more scientific engineering scheme.

Post-golden (Bundleless)

On the basis of Bundle, combined with the features of browser parsing native ESM modules, Bundleless development preview and hot update (HMR) can be realized. It can be directly released without package or packaged with integrated tools such as Webpack, which represents esbuild and Snowpack.

Snowpack is introduced

From www.snowpack.dev/ :

Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Snowpack leverages JavaScript’s native module system (known as ESM) to avoid unnecessary work and stay fast no matter how big your project grows.

A small example of snowpack

/** @type {import( snowpack ).SnowpackUserConfig } */ export default { mount: { public: { url: '/', static: true }, src: { url: '/dist' }, }, plugins: [ '@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv', [ '@snowpack/plugin-typescript', { /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */ ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}), }, ], ], routes: [ /* Enable an SPA Fallback in development: */ // { match : routes , src : .* , dest : /index.html }, ], optimize: { /* Example: Bundle your final build: */ // bundle : true, }, packageOptions: {/ *... */ }, devOptions: { /* ... */ }, buildOptions: { /* ... * /}};Copy the code

conclusion

It is similar to Webpack in concept and solves many of webpack’s pain points, but the concept is not as breakthrough as Grunt -> Webpack, so it is defined as post-golden age.

In the future

The future of front-end engineering has many directions, from modern.js (modernjs.dev/), which aims to provide a new engineering system, to efficiency, which wants to achieve a more automatic and intelligent pipeline direction, but combined with other languages such as Java: Blog.csdn.net/nalw2012/ar… The evolution of engineering may also depend on the evolution of the whole ecology for more revolutionary progress.

❤️ Thank you

That is all the content of this sharing. I hope it will help you

Don’t forget to share, like and bookmark your favorite things.

Welcome to the public account ELab team harvest dachang good article ~

We are from the front end department of Bytedance, responsible for the front end development of all bytedance education products.

We focus on product quality improvement, development efficiency, creativity and cutting-edge technology and other aspects of precipitation and dissemination of professional knowledge and cases, to contribute experience value to the industry. Including but not limited to performance monitoring, component library, multi-terminal technology, Serverless, visual construction, audio and video, artificial intelligence, product design and marketing, etc.

Bytedance correction/social recruitment internal promotion code: TTMW2E7

Post links: job.toutiao.com/s/N5NBFEq