From JSP to Snowpack: Tracing the Evolution of Front‑End Engineering

Background

The evolution of front‑end engineering is not isolated; it grows together with other front‑end domains. The following sections introduce the development background from several perspectives.

Frontend Career Evolution

ES Evolution

Development Modes

Frontend Engineering

Stone Age (JSP/PHP/Single‑File Mode)

Front‑end demands were weak, pages were simple, and developers manually refreshed files without tooling; front‑end code was embedded in PHP or similar back‑end files.

(The era is so old that a picture is provided for illustration.)

Bronze Age (Non‑JS Stack Packaging Tools)

Maven Introduction

Maven is a build automation tool primarily for Java projects, also usable for C#, Ruby, Scala, and other languages, hosted by the Apache Software Foundation.

YUI Compressor

YUI Compressor was a front‑end compression tool provided by Yahoo, along with many other utilities and component libraries.

https://yui.github.io/yuicompressor/

A Maven example for compressing JS

<plugins>
    <plugin>
        <!-- YUI Compressor Maven compression plugin -->
        <groupId>net.alchim31.maven</groupId>
        <artifactId>yuicompressor-maven-plugin</artifactId>
        <version>1.5.1</version>
        <executions>
            <execution>
                <goals>
                    <goal>compress</goal>
                </goals>
            </execution>
        </executions>
        <configuration>
            <encoding>UTF-8</encoding>
            <jswarn>false</jswarn>
            <force>false</force>
            <linebreakpos>-1</linebreakpos>
            <preProcessAggregates>true</preProcessAggregates>
            <nosuffix>true</nosuffix>
            <sourceDirectory>src/main/static</sourceDirectory>
            <outputDirectory>target/classes</outputDirectory>
            <force>true</force>
            <includes>
                <include>**/*.js</include>
                <include>**/*.css</include>
            </includes>
            <excludes>
                <exclude>**/*.min.js</exclude>
                <exclude>**/*.min.css</exclude>
            </excludes>
        </configuration>
    </plugin>
</plugins>

Summary

Front‑end code becomes part of the back‑end project and is managed by Maven‑like tools, but only simple compression is possible during packaging.

Silver Age (JS Stack Packaging Tools)

Command‑line task scripts written in Bash or Node.js enable hot module replacement (HMR) and automatic bundling, represented by Grunt and Gulp.

Grunt Introduction

Reference: https://www.gruntjs.net/getting-started

A Grunt example

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 ) %> */
',
            },
            build: {
                src:  build/index.js ,
                dest:  build/<%= pkg.name %>.min.js ,
            },
        },
        concat: {
             build/index.js : [ src/foo.js ,  src/bar.js ],
        },
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks( grunt-contrib-uglify );

    // Load the plugin that provides the "concat" task.
    grunt.loadNpmTasks( grunt-contrib-concat );

    // Default task list.
    grunt.registerTask( default , [ concat ,  uglify ] );
};

Summary

JS‑based bundlers allow front‑end developers to implement their own build tools with functionality similar to non‑JS tools.

Golden Age (Bundle)

Using the bundle concept and Babel, JavaScript files are treated as modules, enabling HMR and various loaders, moving engineering beyond simple concatenation and compression. Representative tools include Webpack and Rollup.

A Webpack example

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
  },
  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: [{
                loader: 'css-loader'
            }]
        })
    }]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor', 'manifest'],
      minChunks: Infinity
    }),
    new CleanWebpackPlugin(['dist/*.js'], {
      verbose: true,
      dry: false
    }),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new webpack.DefinePlugin({
       process.env.NODE_ENV : JSON.stringify( process.env.NODE_ENV )
    }),
    new ExtractTextPlugin( 'css/[name].[contenthash].css' ),
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

Summary

Webpack demonstrates that front‑end builds have progressed from simple file concatenation to a more scientific engineering approach that understands module relationships.

Post‑Golden Age (Bundleless)

Building on bundles, modern browsers support native ES modules (ESM), allowing bundle‑less development with hot updates. Tools such as esbuild and Snowpack provide this capability.

Snowpack Introduction

Snowpack is a lightning‑fast front‑end build tool that leverages native ESM to avoid unnecessary work, offering an alternative to heavier bundlers like Webpack or Parcel.

A Snowpack example

/** @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',
      {
        ...(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: {},
};

Summary

Snowpack shares many ideas with Webpack but addresses its pain points, representing the post‑golden era.

Future

Future directions include Modern.js, which aims to provide a brand‑new engineering system, and efforts to create more automated and intelligent pipelines, possibly integrating with other language ecosystems such as Java.