DEV Community: Nayden Gochev

30 Years of JavaScript: The Complete Evolution Guide

Nayden Gochev — Thu, 04 Dec 2025 14:01:35 +0000

30 Years of JavaScript: The Complete Evolution Guide

December 4, 2025 - A comprehensive guide for developers returning to JavaScript or learning its complete history.

The Beginning: JavaScript 1.0 - 1.5 (1995-2000)
The Dark Ages: Browser Wars & Stagnation (2000-2005)
The AJAX Revolution (2005-2009)
The Modern Era Begins: ES5 & Node.js (2009-2015)
The Renaissance: ES6/ES2015 (2015)
Annual Releases: ES2016-ES2025
TypeScript Evolution (2012-2025)
Server-Side JavaScript: Node.js & Beyond
Frameworks & Libraries: Rise and Fall
Testing Ecosystem Evolution
Build Tools & Module Systems
Package Management
Current Landscape (2025)

The Beginning: JavaScript 1.0 - 1.5 (1995-2000)

1995: The Birth

Brendan Eich created JavaScript in 10 days at Netscape in May 1995. Originally named "Mocha," then "LiveScript," finally "JavaScript."

JavaScript 1.0 (December 1995) - Netscape Navigator 2.0

Basic features:

// Variables (no let/const, only var)
var name = "John";
var age = 25;

// Functions
function greet(name) {
    return "Hello, " + name;
}

// Objects (prototype-based)
var person = {
    name: "John",
    age: 25,
    greet: function() {
        return "Hello, " + this.name;
    }
};

// Arrays
var numbers = [1, 2, 3, 4, 5];

// Loops
for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// Conditionals
if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

1996-1997: Standardization

ECMAScript 1 (June 1997) - First standardized version

Microsoft created JScript for Internet Explorer 3.0, leading to fragmentation.

1998-1999: ECMAScript 2 & 3

ECMAScript 3 (December 1999) - Major update

Added:

Regular expressions
Better string handling
try/catch exception handling
switch statements
do-while loops

// Regular expressions
var pattern = /hello/i;
var text = "Hello World";
console.log(pattern.test(text)); // true

// try/catch
try {
    throw new Error("Something went wrong");
} catch (e) {
    console.log(e.message);
} finally {
    console.log("Cleanup");
}

// switch
var day = "Monday";
switch (day) {
    case "Monday":
        console.log("Start of week");
        break;
    case "Friday":
        console.log("End of week");
        break;
    default:
        console.log("Midweek");
}

The Dark Ages: Browser Wars & Stagnation (2000-2005)

The Problem

ECMAScript 4 was abandoned due to disagreements
Browser incompatibilities were rampant
JavaScript was considered a "toy language"
No standard library management
Security issues (XSS attacks)

Browser Detection Hell

// Typical code from this era
if (document.all) {
    // Internet Explorer
    document.all.myElement.style.color = "red";
} else if (document.getElementById) {
    // Standards-compliant browsers
    document.getElementById("myElement").style.color = "red";
}

// Or worse
if (navigator.userAgent.indexOf("MSIE") > -1) {
    // IE-specific code
}

Early Libraries (Pre-jQuery)

Prototype.js (2005)

// Prototype.js extended native objects
$('myElement').hide();

// Array extensions
[1, 2, 3, 4, 5].each(function(n) {
    console.log(n);
});

The AJAX Revolution (2005-2009)

2005: AJAX Changes Everything

AJAX (Asynchronous JavaScript and XML) - Term coined by Jesse James Garrett

// XMLHttpRequest - The old way
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

2006: jQuery Revolution

jQuery 1.0 by John Resig - Changed everything

Before jQuery:

// Cross-browser event handling nightmare
var element = document.getElementById('myButton');
if (element.addEventListener) {
    element.addEventListener('click', handleClick, false);
} else if (element.attachEvent) {
    element.attachEvent('onclick', handleClick);
}

// DOM manipulation
var elements = document.getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red';
}

// AJAX
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('result').innerHTML = xhr.responseText;
    }
};
xhr.send();

With jQuery:

// Simple, elegant, cross-browser
$('#myButton').click(handleClick);

// DOM manipulation
$('p').css('color', 'red');

// AJAX
$.get('/api/users', function(data) {
    $('#result').html(data);
});

// Chaining
$('#myDiv')
    .addClass('active')
    .fadeIn()
    .css('color', 'blue')
    .html('Hello World');

// Powerful selectors
$('div.container > p:first-child').hide();

Why jQuery dominated:

Cross-browser compatibility
Simple, intuitive API
Powerful DOM manipulation
Easy AJAX
Plugin ecosystem
"Write less, do more"

2008-2009: Other Libraries

MooTools (2006)

// Object-oriented approach
var MyClass = new Class({
    initialize: function(name) {
        this.name = name;
    },
    greet: function() {
        alert('Hello ' + this.name);
    }
});

Dojo Toolkit (2004-2009)

// Enterprise-focused
dojo.require("dijit.form.Button");
dojo.ready(function() {
    new dijit.form.Button({
        label: "Click me!",
        onClick: function() { alert("Clicked!"); }
    }, "myButton");
});

The Modern Era Begins: ES5 & Node.js (2009-2015)

2009: ECMAScript 5 (ES5)

After 10 years of stagnation, ES5 brought crucial improvements.

Strict Mode:

// Without strict mode (sloppy mode)
function oldWay() {
    x = 10; // Creates global variable accidentally
    var arguments = 5; // Can override arguments
    delete Object.prototype; // Can delete built-ins
}

// With strict mode
"use strict";
function newWay() {
    x = 10; // ReferenceError: x is not defined
    var arguments = 5; // SyntaxError
    delete Object.prototype; // TypeError
}

Array Methods:

var numbers = [1, 2, 3, 4, 5];

// forEach - Before: for loop
numbers.forEach(function(num) {
    console.log(num);
});

// map - Transform arrays
var doubled = numbers.map(function(num) {
    return num * 2;
}); // [2, 4, 6, 8, 10]

// filter - Filter arrays
var evens = numbers.filter(function(num) {
    return num % 2 === 0;
}); // [2, 4]

// reduce - Aggregate
var sum = numbers.reduce(function(acc, num) {
    return acc + num;
}, 0); // 15

// some & every
var hasEven = numbers.some(function(num) {
    return num % 2 === 0;
}); // true

var allPositive = numbers.every(function(num) {
    return num > 0;
}); // true

Object Methods:

// Object.create - Proper prototypal inheritance
var parent = {
    greet: function() {
        return "Hello";
    }
};
var child = Object.create(parent);
child.greet(); // "Hello"

// Object.keys
var obj = { a: 1, b: 2, c: 3 };
Object.keys(obj); // ['a', 'b', 'c']

// Object.defineProperty - Property descriptors
var person = {};
Object.defineProperty(person, 'name', {
    value: 'John',
    writable: false,
    enumerable: true,
    configurable: false
});
person.name = 'Jane'; // Silently fails (throws in strict mode)

// Getters and setters
var account = {
    _balance: 0,
    get balance() {
        return this._balance;
    },
    set balance(value) {
        if (value < 0) throw new Error("Balance cannot be negative");
        this._balance = value;
    }
};
account.balance = 100;
console.log(account.balance); // 100

JSON Native Support:

// Before: eval() or libraries
var jsonString = '{"name":"John","age":30}';
var obj = eval('(' + jsonString + ')'); // Dangerous!

// ES5: Native JSON
var obj = JSON.parse('{"name":"John","age":30}');
var str = JSON.stringify({ name: "John", age: 30 });

Function.prototype.bind:

// Before: Manual context binding
var obj = {
    name: "John",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

var greet = obj.greet;
greet(); // "Hello, undefined" - lost context

// Workaround
var self = obj;
setTimeout(function() {
    self.greet();
}, 1000);

// ES5: bind
var boundGreet = obj.greet.bind(obj);
boundGreet(); // "Hello, John"
setTimeout(obj.greet.bind(obj), 1000);

2009: Node.js - JavaScript on the Server

Ryan Dahl created Node.js, bringing JavaScript to the server.

Before Node.js:

JavaScript only in browsers
Server-side: PHP, Ruby, Python, Java, .NET

With Node.js:

// Simple HTTP server
var http = require('http');

var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World\n');
});

server.listen(3000);
console.log('Server running at http://localhost:3000/');

Event-driven, non-blocking I/O:

// Blocking (traditional server-side)
var data = readFileSync('file.txt'); // Waits
processData(data);

// Non-blocking (Node.js)
readFile('file.txt', function(err, data) {
    if (err) throw err;
    processData(data);
});
// Continues immediately

CommonJS Modules:

// math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = {
    add: add,
    subtract: subtract
};

// app.js
var math = require('./math');
console.log(math.add(5, 3)); // 8

2010: npm - Node Package Manager

npm revolutionized package management.

# Install packages
npm install express

# package.json
{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Express.js (2010) - Web framework for Node.js

var express = require('express');
var app = express();

app.get('/', function(req, res) {
    res.send('Hello World!');
});

app.get('/users/:id', function(req, res) {
    res.json({ id: req.params.id, name: 'John' });
});

app.listen(3000);

2010-2012: The Framework Wars Begin

Backbone.js (2010) - First major MV* framework

// Model
var Todo = Backbone.Model.extend({
    defaults: {
        title: '',
        completed: false
    }
});

// Collection
var TodoList = Backbone.Collection.extend({
    model: Todo
});

// View
var TodoView = Backbone.View.extend({
    tagName: 'li',
    template: _.template('<%= title %>'),

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

// Usage
var todo = new Todo({ title: 'Learn Backbone' });
var view = new TodoView({ model: todo });
$('#todos').append(view.render().el);

Knockout.js (2010) - MVVM with observables

function AppViewModel() {
    this.firstName = ko.observable("John");
    this.lastName = ko.observable("Doe");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
}

ko.applyBindings(new AppViewModel());

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"></span>!</h2>

AngularJS 1.0 (2010, released 2012) - Google's framework

// Controller
angular.module('myApp', [])
    .controller('TodoController', function($scope) {
        $scope.todos = [];

        $scope.addTodo = function() {
            $scope.todos.push({
                text: $scope.todoText,
                done: false
            });
            $scope.todoText = '';
        };

        $scope.remaining = function() {
            return $scope.todos.filter(function(todo) {
                return !todo.done;
            }).length;
        };
    });

<div ng-app="myApp" ng-controller="TodoController">
    <input ng-model="todoText" placeholder="Add new todo">
    <button ng-click="addTodo()">Add</button>

    <ul>
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span ng-class="{done: todo.done}">{{todo.text}}</span>
        </li>
    </ul>

    <p>{{remaining()}} of {{todos.length}} remaining</p>
</div>

Ember.js (2011) - Convention over configuration

// Router
App.Router.map(function() {
    this.route('about');
    this.route('posts', function() {
        this.route('post', { path: '/:post_id' });
    });
});

// Route
App.PostsRoute = Ember.Route.extend({
    model: function() {
        return this.store.findAll('post');
    }
});

// Controller
App.PostsController = Ember.ArrayController.extend({
    sortProperties: ['date'],
    sortAscending: false
});

// Template (Handlebars)

{{#each post in controller}}
    <article>
        <h2>{{post.title}}</h2>
        <p>{{post.body}}</p>
    </article>
{{/each}}

2012: TypeScript Arrives

Microsoft releases TypeScript 0.8 - JavaScript with types

JavaScript:

function greet(name) {
    return "Hello, " + name.toUpperCase();
}

greet("John"); // "Hello, JOHN"
greet(42); // Runtime error: name.toUpperCase is not a function

TypeScript:

function greet(name: string): string {
    return "Hello, " + name.toUpperCase();
}

greet("John"); // "Hello, JOHN"
greet(42); // Compile-time error: Argument of type 'number' is not assignable to parameter of type 'string'

Interfaces:

interface User {
    id: number;
    name: string;
    email: string;
    age?: number; // Optional
}

function createUser(user: User): void {
    console.log(`Creating user: ${user.name}`);
}

createUser({ id: 1, name: "John", email: "john@example.com" }); // OK
createUser({ id: 1, name: "John" }); // Error: Property 'email' is missing

Classes (before ES6):

class Animal {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    public move(distance: number): void {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

class Dog extends Animal {
    bark(): void {
        console.log("Woof! Woof!");
    }
}

const dog = new Dog("Buddy");
dog.bark();
dog.move(10);

2013-2014: Build Tools & Module Bundlers

Grunt (2012) - Task runner

// Gruntfile.js
module.exports = function(grunt) {
    grunt.initConfig({
        uglify: {
            build: {
                src: 'src/*.js',
                dest: 'build/app.min.js'
            }
        },
        watch: {
            files: ['src/*.js'],
            tasks: ['uglify']
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['uglify']);
};

Gulp (2013) - Streaming build system

// gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('scripts', function() {
    return gulp.src('src/*.js')
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build'));
});

gulp.task('watch', function() {
    gulp.watch('src/*.js', ['scripts']);
});

gulp.task('default', ['scripts', 'watch']);

Browserify (2011) - Bring Node.js modules to browser

// Before: Multiple script tags
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="app.js"></script>

// With Browserify
// app.js
var $ = require('jquery');
var _ = require('lodash');

// Build
browserify app.js -o bundle.js

// HTML
<script src="bundle.js"></script>

Webpack (2012, popular 2014+) - Module bundler

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

The Renaissance: ES6/ES2015 (2015)

The biggest update to JavaScript ever. Changed the language fundamentally.

let and const

Before (var):

// Function scope, hoisting issues
function example() {
    console.log(x); // undefined (hoisted)
    var x = 10;

    if (true) {
        var x = 20; // Same variable!
        console.log(x); // 20
    }
    console.log(x); // 20
}

// Loop problem
for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 3, 3, 3 (all reference same i)
    }, 100);
}

After (let/const):

// Block scope, no hoisting
function example() {
    console.log(x); // ReferenceError: Cannot access 'x' before initialization
    let x = 10;

    if (true) {
        let x = 20; // Different variable!
        console.log(x); // 20
    }
    console.log(x); // 10
}

// Loop fixed
for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 0, 1, 2 (each has own i)
    }, 100);
}

// const - immutable binding
const PI = 3.14159;
PI = 3; // TypeError: Assignment to constant variable

const obj = { name: "John" };
obj.name = "Jane"; // OK - object is mutable
obj = {}; // TypeError: Assignment to constant variable

Arrow Functions

Before:

// Function expressions
var add = function(a, b) {
    return a + b;
};

// this binding issues
var obj = {
    name: "John",
    friends: ["Jane", "Bob"],
    printFriends: function() {
        var self = this; // Workaround
        this.friends.forEach(function(friend) {
            console.log(self.name + " knows " + friend);
        });
    }
};

After:

// Arrow functions
const add = (a, b) => a + b;

// Implicit return
const square = x => x * x;

// Multiple statements
const greet = name => {
    const message = `Hello, ${name}`;
    return message.toUpperCase();
};

// Lexical this
const obj = {
    name: "John",
    friends: ["Jane", "Bob"],
    printFriends() {
        this.friends.forEach(friend => {
            console.log(`${this.name} knows ${friend}`); // this works!
        });
    }
};

// Array methods become elegant
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

Template Literals

Before:

var name = "John";
var age = 30;
var message = "Hello, my name is " + name + " and I am " + age + " years old.";

// Multiline strings
var html = "<div>\n" +
           "  <h1>" + title + "</h1>\n" +
           "  <p>" + content + "</p>\n" +
           "</div>";

After:

const name = "John";
const age = 30;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

// Multiline strings
const html = `
    <div>
        <h1>${title}</h1>
        <p>${content}</p>
    </div>
`;

// Expressions
const price = 19.99;
const tax = 0.08;
const total = `Total: $${(price * (1 + tax)).toFixed(2)}`;

// Tagged templates
function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        return result + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
    }, '');
}

const name = "John";
const html = highlight`Hello, ${name}!`; // "Hello, <mark>John</mark>!"

Destructuring

Before:

var user = { name: "John", age: 30, email: "john@example.com" };
var name = user.name;
var age = user.age;

var numbers = [1, 2, 3, 4, 5];
var first = numbers[0];
var second = numbers[1];

function getUser() {
    return { name: "John", age: 30 };
}
var user = getUser();
var name = user.name;

After:

// Object destructuring
const user = { name: "John", age: 30, email: "john@example.com" };
const { name, age } = user;

// Renaming
const { name: userName, age: userAge } = user;

// Default values
const { name, age, country = "USA" } = user;

// Nested destructuring
const user = {
    name: "John",
    address: {
        city: "New York",
        country: "USA"
    }
};
const { address: { city, country } } = user;

// Array destructuring
const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers; // 1, 2
const [first, , third] = numbers; // 1, 3
const [first, ...rest] = numbers; // 1, [2, 3, 4, 5]

// Function parameters
function greet({ name, age }) {
    console.log(`Hello, ${name}. You are ${age} years old.`);
}
greet({ name: "John", age: 30 });

// Swapping variables
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

Default Parameters

Before:

function greet(name, greeting) {
    name = name || "Guest";
    greeting = greeting || "Hello";
    return greeting + ", " + name;
}

// Problem with falsy values
greet("", "Hi"); // "Hi, Guest" - empty string is falsy!

After:

function greet(name = "Guest", greeting = "Hello") {
    return `${greeting}, ${name}`;
}

greet(); // "Hello, Guest"
greet("John"); // "Hello, John"
greet("John", "Hi"); // "Hi, John"
greet("", "Hi"); // "Hi, " - empty string is preserved

// Default can be expressions
function createUser(name, id = Date.now()) {
    return { name, id };
}

// Can reference earlier parameters
function greet(name, greeting = `Hello, ${name}`) {
    return greeting;
}

Rest and Spread Operators

Before:

// Rest parameters
function sum() {
    var args = Array.prototype.slice.call(arguments);
    return args.reduce(function(acc, n) {
        return acc + n;
    }, 0);
}

// Combining arrays
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var combined = arr1.concat(arr2);

// Copying arrays
var original = [1, 2, 3];
var copy = original.slice();

After:

// Rest parameters
function sum(...numbers) {
    return numbers.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3, 4, 5); // 15

function greet(greeting, ...names) {
    return `${greeting}, ${names.join(" and ")}!`;
}
greet("Hello", "John", "Jane", "Bob"); // "Hello, John and Jane and Bob!"

// Spread operator - arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
const copy = [...original];

// Spread operator - objects (ES2018)
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combined = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// Overriding properties
const defaults = { theme: "light", lang: "en" };
const userPrefs = { theme: "dark" };
const settings = { ...defaults, ...userPrefs }; // { theme: "dark", lang: "en" }

// Function calls
const numbers = [1, 5, 3, 9, 2];
Math.max(...numbers); // 9

Classes

Before (Prototypes):

// Constructor function
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    return "Hello, I'm " + this.name;
};

Person.prototype.haveBirthday = function() {
    this.age++;
};

// Inheritance
function Employee(name, age, title) {
    Person.call(this, name, age);
    this.title = title;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.work = function() {
    return this.name + " is working as " + this.title;
};

var emp = new Employee("John", 30, "Developer");
emp.greet(); // "Hello, I'm John"
emp.work(); // "John is working as Developer"

After (Classes):

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return `Hello, I'm ${this.name}`;
    }

    haveBirthday() {
        this.age++;
    }

    // Static methods
    static species() {
        return "Homo sapiens";
    }
}

class Employee extends Person {
    constructor(name, age, title) {
        super(name, age); // Call parent constructor
        this.title = title;
    }

    work() {
        return `${this.name} is working as ${this.title}`;
    }

    // Override parent method
    greet() {
        return `${super.greet()}, I'm a ${this.title}`;
    }
}

const emp = new Employee("John", 30, "Developer");
emp.greet(); // "Hello, I'm John, I'm a Developer"
emp.work(); // "John is working as Developer"
Person.species(); // "Homo sapiens"

// Getters and setters
class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    get area() {
        return this.width * this.height;
    }

    set area(value) {
        this.width = Math.sqrt(value);
        this.height = Math.sqrt(value);
    }
}

const rect = new Rectangle(10, 5);
console.log(rect.area); // 50
rect.area = 100;
console.log(rect.width); // 10

Promises

Before (Callback Hell):

// Pyramid of doom
getUserData(userId, function(err, user) {
    if (err) {
        handleError(err);
    } else {
        getOrders(user.id, function(err, orders) {
            if (err) {
                handleError(err);
            } else {
                getOrderDetails(orders[0].id, function(err, details) {
                    if (err) {
                        handleError(err);
                    } else {
                        displayDetails(details);
                    }
                });
            }
        });
    }
});

After (Promises):

// Promise chain
getUserData(userId)
    .then(user => getOrders(user.id))
    .then(orders => getOrderDetails(orders[0].id))
    .then(details => displayDetails(details))
    .catch(err => handleError(err));

// Creating promises
function delay(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms);
    });
}

delay(1000).then(() => console.log("1 second passed"));

// Promise.all - parallel execution
Promise.all([
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
])
.then(([users, posts, comments]) => {
    console.log("All data loaded");
})
.catch(err => console.error("One failed:", err));

// Promise.race - first to complete
Promise.race([
    fetch('/api/fast'),
    fetch('/api/slow')
])
.then(result => console.log("First one won:", result));

// Error handling
fetch('/api/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTP error ' + response.status);
        }
        return response.json();
    })
    .then(data => processData(data))
    .catch(err => console.error('Failed:', err))
    .finally(() => console.log('Cleanup'));

Modules (ES6 Modules)

Before (CommonJS - Node.js):

// math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract };

// app.js
var math = require('./math');
console.log(math.add(5, 3));

Before (Browser - Script tags):

<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="utils.js"></script>
<script src="app.js"></script>
<!-- Global namespace pollution, order matters -->

After (ES6 Modules):

// math.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// or
export { add, subtract };

// Default export
export default function multiply(a, b) {
    return a * b;
}

// app.js
import multiply, { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(multiply(5, 3)); // 15

// Import everything
import * as math from './math.js';
console.log(math.add(5, 3));

// Rename imports
import { add as sum } from './math.js';

// Re-export
export { add, subtract } from './math.js';
export * from './math.js';

Other ES6 Features

Map and Set:

// Before: Objects as maps (problems with keys)
var map = {};
map['key1'] = 'value1';
map[{}] = 'value2'; // [object Object] as key - not what you want!

// ES6 Map
const map = new Map();
map.set('key1', 'value1');
map.set({}, 'value2'); // Objects as keys work!
map.set(function() {}, 'value3'); // Functions as keys!

map.get('key1'); // 'value1'
map.has('key1'); // true
map.delete('key1');
map.size; // 2

// Iteration
for (const [key, value] of map) {
    console.log(key, value);
}

// Set - unique values
const set = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(set); // Set { 1, 2, 3, 4, 5 }

set.add(6);
set.has(3); // true
set.delete(3);
set.size; // 5

// Array deduplication
const numbers = [1, 2, 3, 3, 4, 4, 5];
const unique = [...new Set(numbers)]; // [1, 2, 3, 4, 5]

Symbols:

// Unique identifiers
const sym1 = Symbol('description');
const sym2 = Symbol('description');
sym1 === sym2; // false - always unique

// Private-ish object properties
const _private = Symbol('private');
class MyClass {
    constructor() {
        this[_private] = 'secret';
        this.public = 'visible';
    }

    getPrivate() {
        return this[_private];
    }
}

const obj = new MyClass();
console.log(obj.public); // 'visible'
console.log(obj[_private]); // undefined (need the symbol reference)
Object.keys(obj); // ['public'] - symbol not enumerated

Iterators and Generators:

// Iterator
const iterable = {
    data: [1, 2, 3, 4, 5],
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                if (index < this.data.length) {
                    return { value: this.data[index++], done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (const value of iterable) {
    console.log(value); // 1, 2, 3, 4, 5
}

// Generator - easier way
function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = numberGenerator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { done: true }

// Infinite sequences
function* fibonacci() {
    let [a, b] = [0, 1];
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

const fib = fibonacci();
fib.next().value; // 0
fib.next().value; // 1
fib.next().value; // 1
fib.next().value; // 2
fib.next().value; // 3

// Practical use - lazy evaluation
function* range(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}

for (const num of range(1, 5)) {
    console.log(num); // 1, 2, 3, 4, 5
}

2013: React.js

Facebook releases React - Component-based UI library

Before React (jQuery):

// Imperative, manual DOM manipulation
var todos = [];

function addTodo(text) {
    todos.push({ id: Date.now(), text: text, done: false });
    renderTodos();
}

function toggleTodo(id) {
    var todo = todos.find(function(t) { return t.id === id; });
    todo.done = !todo.done;
    renderTodos();
}

function renderTodos() {
    var html = todos.map(function(todo) {
        return '<li>' +
               '<input type="checkbox" ' + (todo.done ? 'checked' : '') + ' data-id="' + todo.id + '">' +
               '<span>' + todo.text + '</span>' +
               '</li>';
    }).join('');
    $('#todos').html(html);
}

$(document).on('change', 'input[type=checkbox]', function() {
    toggleTodo($(this).data('id'));
});

With React:

// Declarative, component-based
class TodoApp extends React.Component {
    state = {
        todos: [],
        input: ''
    };

    addTodo = () => {
        this.setState({
            todos: [...this.state.todos, {
                id: Date.now(),
                text: this.state.input,
                done: false
            }],
            input: ''
        });
    };

    toggleTodo = (id) => {
        this.setState({
            todos: this.state.todos.map(todo =>
                todo.id === id ? { ...todo, done: !todo.done } : todo
            )
        });
    };

    render() {
        return (
            <div>
                <input
                    value={this.state.input}
                    onChange={e => this.setState({ input: e.target.value })}
                />
                <button onClick={this.addTodo}>Add</button>

                <ul>
                    {this.state.todos.map(todo => (
                        <li key={todo.id}>
                            <input
                                type="checkbox"
                                checked={todo.done}
                                onChange={() => this.toggleTodo(todo.id)}
                            />
                            <span>{todo.text}</span>
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

JSX - HTML in JavaScript:

// JSX (transpiled by Babel)
const element = <h1>Hello, {name}!</h1>;

// Compiles to
const element = React.createElement('h1', null, 'Hello, ', name, '!');

// Components
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// Usage
<Welcome name="John" />

2014: Vue.js

Evan You releases Vue.js - Progressive framework

// Vue instance
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        todos: [],
        newTodo: ''
    },
    methods: {
        addTodo() {
            this.todos.push({
                id: Date.now(),
                text: this.newTodo,
                done: false
            });
            this.newTodo = '';
        },
        toggleTodo(todo) {
            todo.done = !todo.done;
        }
    }
});

<div id="app">
    <input v-model="newTodo" @keyup.enter="addTodo">
    <button @click="addTodo">Add</button>

    <ul>
        <li v-for="todo in todos" :key="todo.id">
            <input type="checkbox" v-model="todo.done">
            <span :class="{ done: todo.done }">{{ todo.text }}</span>
        </li>
    </ul>
</div>

Annual Releases: ES2016-ES2025

ES2016 (ES7)

Array.prototype.includes:

// Before
const numbers = [1, 2, 3, 4, 5];
numbers.indexOf(3) !== -1; // true
numbers.indexOf(6) !== -1; // false

// Problem with NaN
[1, 2, NaN].indexOf(NaN); // -1 (doesn't work!)

// After
numbers.includes(3); // true
numbers.includes(6); // false
[1, 2, NaN].includes(NaN); // true (works!)

Exponentiation Operator:

// Before
Math.pow(2, 3); // 8

// After
2 ** 3; // 8
2 ** 3 ** 2; // 512 (right-associative: 2 ** (3 ** 2))

// With assignment
let num = 2;
num **= 3; // 8

ES2017 (ES8)

async/await - Game changer for asynchronous code

Before (Promises):

function fetchUserData(userId) {
    return fetch(`/api/users/${userId}`)
        .then(response => response.json())
        .then(user => {
            return fetch(`/api/orders/${user.id}`)
                .then(response => response.json())
                .then(orders => {
                    return fetch(`/api/details/${orders[0].id}`)
                        .then(response => response.json())
                        .then(details => {
                            return { user, orders, details };
                        });
                });
        })
        .catch(err => console.error(err));
}

After (async/await):

async function fetchUserData(userId) {
    try {
        const userResponse = await fetch(`/api/users/${userId}`);
        const user = await userResponse.json();

        const ordersResponse = await fetch(`/api/orders/${user.id}`);
        const orders = await ordersResponse.json();

        const detailsResponse = await fetch(`/api/details/${orders[0].id}`);
        const details = await detailsResponse.json();

        return { user, orders, details };
    } catch (err) {
        console.error(err);
    }
}

// Parallel execution
async function fetchAllData() {
    const [users, posts, comments] = await Promise.all([
        fetch('/api/users').then(r => r.json()),
        fetch('/api/posts').then(r => r.json()),
        fetch('/api/comments').then(r => r.json())
    ]);

    return { users, posts, comments };
}

// Error handling
async function getData() {
    try {
        const data = await fetch('/api/data');
        return await data.json();
    } catch (err) {
        console.error('Failed:', err);
        throw err;
    } finally {
        console.log('Cleanup');
    }
}

// Top-level await (ES2022)
const data = await fetch('/api/data').then(r => r.json());

Object.entries() and Object.values():

const obj = { a: 1, b: 2, c: 3 };

// Before
Object.keys(obj); // ['a', 'b', 'c']
Object.keys(obj).map(key => obj[key]); // [1, 2, 3]

// After
Object.values(obj); // [1, 2, 3]
Object.entries(obj); // [['a', 1], ['b', 2], ['c', 3]]

// Practical use
for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`);
}

// Convert to Map
const map = new Map(Object.entries(obj));

// Convert from Map
const obj = Object.fromEntries(map);

String padding:

'5'.padStart(3, '0'); // '005'
'5'.padEnd(3, '0'); // '500'

// Practical use
const numbers = [1, 10, 100];
numbers.forEach(n => {
    console.log(n.toString().padStart(3, '0'));
});
// 001
// 010
// 100

Object.getOwnPropertyDescriptors():

const obj = {
    get foo() { return 'bar'; }
};

// Shallow clone with getters/setters
const clone = Object.defineProperties(
    {},
    Object.getOwnPropertyDescriptors(obj)
);

ES2018 (ES9)

Rest/Spread for Objects:

// Rest
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(rest); // { c: 3, d: 4 }

// Spread
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

// Overriding
const defaults = { theme: 'light', lang: 'en' };
const userPrefs = { theme: 'dark' };
const settings = { ...defaults, ...userPrefs }; // { theme: 'dark', lang: 'en' }

// Shallow clone
const clone = { ...original };

// Remove property
const { password, ...userWithoutPassword } = user;

Async Iteration:

// Async iterator
const asyncIterable = {
    async *[Symbol.asyncIterator]() {
        yield await Promise.resolve(1);
        yield await Promise.resolve(2);
        yield await Promise.resolve(3);
    }
};

for await (const num of asyncIterable) {
    console.log(num); // 1, 2, 3
}

// Practical use - streaming data
async function* fetchPages(url) {
    let page = 1;
    while (true) {
        const response = await fetch(`${url}?page=${page}`);
        const data = await response.json();
        if (data.length === 0) break;
        yield data;
        page++;
    }
}

for await (const pageData of fetchPages('/api/items')) {
    console.log(pageData);
}

Promise.finally():

fetch('/api/data')
    .then(response => response.json())
    .then(data => processData(data))
    .catch(err => handleError(err))
    .finally(() => {
        hideLoadingSpinner(); // Always runs
    });

RegExp improvements:

// Named capture groups
const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = pattern.exec('2025-12-04');
console.log(match.groups.year); // '2025'
console.log(match.groups.month); // '12'
console.log(match.groups.day); // '04'

// Lookbehind assertions
/(?<=\$)\d+/.test('$100'); // true
/(?<!\$)\d+/.test('100'); // true

ES2019 (ES10)

Array.prototype.flat() and flatMap():

// Before - flatten nested arrays
const nested = [1, [2, 3], [4, [5, 6]]];
const flat = nested.reduce((acc, val) =>
    acc.concat(Array.isArray(val) ? val : [val]), []
); // [1, 2, 3, 4, [5, 6]]

// After
nested.flat(); // [1, 2, 3, 4, [5, 6]]
nested.flat(2); // [1, 2, 3, 4, 5, 6] - depth 2
nested.flat(Infinity); // Flatten all levels

// flatMap - map then flatten
const arr = [1, 2, 3];
arr.map(x => [x, x * 2]); // [[1, 2], [2, 4], [3, 6]]
arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

// Practical use
const sentences = ['Hello world', 'How are you'];
sentences.flatMap(s => s.split(' ')); // ['Hello', 'world', 'How', 'are', 'you']

Object.fromEntries():

// Convert array of entries to object
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries); // { a: 1, b: 2, c: 3 }

// Convert Map to object
const map = new Map([['a', 1], ['b', 2]]);
const obj = Object.fromEntries(map);

// Transform object
const obj = { a: 1, b: 2, c: 3 };
const doubled = Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [key, value * 2])
); // { a: 2, b: 4, c: 6 }

// Filter object
const filtered = Object.fromEntries(
    Object.entries(obj).filter(([key, value]) => value > 1)
); // { b: 2, c: 3 }

String.prototype.trimStart() and trimEnd():

'  hello  '.trimStart(); // 'hello  '
'  hello  '.trimEnd(); // '  hello'
'  hello  '.trim(); // 'hello'

Optional catch binding:

// Before
try {
    JSON.parse(data);
} catch (err) { // Had to specify err even if not used
    console.log('Invalid JSON');
}

// After
try {
    JSON.parse(data);
} catch {
    console.log('Invalid JSON');
}

ES2020 (ES11)

Optional Chaining (?.):

// Before
const city = user && user.address && user.address.city;

if (user && user.address && user.address.city) {
    console.log(user.address.city);
}

// After
const city = user?.address?.city;

if (user?.address?.city) {
    console.log(user.address.city);
}

// With arrays
const firstItem = arr?.[0];

// With functions
const result = obj.method?.();

// Practical examples
const userName = response?.data?.user?.name ?? 'Guest';
const onClick = props?.onClick?.();

Nullish Coalescing (??):

// Before - problem with falsy values
const value = input || 'default';
// Problem: 0, '', false are all replaced with 'default'

const count = 0;
const display = count || 'No items'; // 'No items' - wrong!

// After - only null/undefined
const value = input ?? 'default';

const count = 0;
const display = count ?? 'No items'; // 0 - correct!

const name = '';
const displayName = name ?? 'Anonymous'; // '' - empty string is kept

// Combined with optional chaining
const userName = user?.name ?? 'Guest';

BigInt - Arbitrary precision integers:

// Before - limited to Number.MAX_SAFE_INTEGER
const big = 9007199254740991; // MAX_SAFE_INTEGER
big + 1; // 9007199254740992
big + 2; // 9007199254740992 - wrong!

// After
const bigInt = 9007199254740991n;
bigInt + 1n; // 9007199254740992n
bigInt + 2n; // 9007199254740993n - correct!

// Or
const bigInt = BigInt('9007199254740991');

// Operations
10n + 20n; // 30n
10n * 20n; // 200n
10n / 3n; // 3n (truncates)

// Cannot mix with Number
10n + 5; // TypeError
10n + BigInt(5); // 15n

Promise.allSettled():

// Promise.all - fails if any fails
Promise.all([
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
])
.then(results => console.log('All succeeded'))
.catch(err => console.log('One failed')); // Stops on first failure

// Promise.allSettled - waits for all
Promise.allSettled([
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
])
.then(results => {
    results.forEach(result => {
        if (result.status === 'fulfilled') {
            console.log('Success:', result.value);
        } else {
            console.log('Failed:', result.reason);
        }
    });
});

// Result format
[
    { status: 'fulfilled', value: response1 },
    { status: 'rejected', reason: error },
    { status: 'fulfilled', value: response3 }
]

globalThis:

// Before - different in different environments
// Browser: window
// Node.js: global
// Web Workers: self

// After - works everywhere
globalThis.setTimeout(() => {}, 1000);

Dynamic import():

// Before - static imports only
import { heavy } from './heavy-module.js'; // Loaded immediately

// After - dynamic imports
button.addEventListener('click', async () => {
    const module = await import('./heavy-module.js');
    module.doSomething();
});

// Conditional loading
if (condition) {
    const module = await import('./module-a.js');
} else {
    const module = await import('./module-b.js');
}

// Practical use - code splitting
async function loadChart() {
    const { Chart } = await import('chart.js');
    return new Chart(ctx, config);
}

ES2021 (ES12)

String.prototype.replaceAll():

// Before
const str = 'hello world, hello universe';
str.replace(/hello/g, 'hi'); // 'hi world, hi universe'
str.split('hello').join('hi'); // Workaround

// After
str.replaceAll('hello', 'hi'); // 'hi world, hi universe'

Logical Assignment Operators:

// Before
if (!obj.prop) {
    obj.prop = 'default';
}

// After
obj.prop ||= 'default';

// Nullish coalescing assignment
obj.prop ??= 'default'; // Only if null/undefined

// AND assignment
obj.prop &&= newValue; // Only if truthy

// Practical examples
let count = 0;
count ||= 10; // count = 10
count ||= 20; // count = 10 (already truthy)

let value = null;
value ??= 'default'; // value = 'default'
value ??= 'other'; // value = 'default' (not null)

Numeric Separators:

// Before
const billion = 1000000000;
const bytes = 0b11111111;

// After - more readable
const billion = 1_000_000_000;
const bytes = 0b1111_1111;
const hex = 0xFF_FF_FF_FF;
const price = 1_234_567.89;

Promise.any():

// Returns first fulfilled promise
Promise.any([
    fetch('/api/server1'),
    fetch('/api/server2'),
    fetch('/api/server3')
])
.then(response => console.log('First success:', response))
.catch(err => console.log('All failed'));

// vs Promise.race (returns first settled, even if rejected)
Promise.race([...]) // First to complete (success or failure)
Promise.any([...])  // First to succeed

WeakRef and FinalizationRegistry:

// WeakRef - weak reference to object
const obj = { data: 'important' };
const weakRef = new WeakRef(obj);

// Later
const obj = weakRef.deref();
if (obj) {
    console.log(obj.data);
} else {
    console.log('Object was garbage collected');
}

// FinalizationRegistry - cleanup callback
const registry = new FinalizationRegistry((value) => {
    console.log(`Cleanup: ${value}`);
});

let obj = { data: 'test' };
registry.register(obj, 'my-object');
obj = null; // Eventually triggers cleanup callback

ES2022 (ES13)

Top-level await:

// Before - had to wrap in async function
(async () => {
    const data = await fetch('/api/data');
    console.log(data);
})();

// After - in modules
const data = await fetch('/api/data');
console.log(data);

// Practical use
const [users, posts] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json())
]);

export { users, posts };

Class Fields and Private Methods:

// Before
class Counter {
    constructor() {
        this.count = 0;
        this._private = 'secret'; // Convention, not enforced
    }
}

// After - public fields
class Counter {
    count = 0; // Public field
    #private = 'secret'; // Private field

    increment() {
        this.count++;
    }

    #privateMethod() { // Private method
        return this.#private;
    }

    getPrivate() {
        return this.#privateMethod();
    }
}

const counter = new Counter();
counter.count; // 0
counter.#private; // SyntaxError
counter.#privateMethod(); // SyntaxError

// Static fields and methods
class MathUtils {
    static PI = 3.14159;
    static #secret = 'private static';

    static double(n) {
        return n * 2;
    }

    static #privateStatic() {
        return this.#secret;
    }
}

MathUtils.PI; // 3.14159
MathUtils.double(5); // 10

// Static initialization blocks
class Database {
    static #connection;

    static {
        // Runs once when class is defined
        this.#connection = createConnection();
    }
}

Array.prototype.at():

const arr = [1, 2, 3, 4, 5];

// Before - negative indexing
arr[arr.length - 1]; // 5
arr[arr.length - 2]; // 4

// After
arr.at(-1); // 5
arr.at(-2); // 4
arr.at(0); // 1

// Works with strings too
'hello'.at(-1); // 'o'

Object.hasOwn():

const obj = { prop: 'value' };

// Before
obj.hasOwnProperty('prop'); // true
// Problem: can be overridden
obj.hasOwnProperty = () => false;
obj.hasOwnProperty('prop'); // false - wrong!

// After
Object.hasOwn(obj, 'prop'); // true - always works

Error.cause:

// Before
try {
    await fetch('/api/data');
} catch (err) {
    throw new Error('Failed to fetch data'); // Lost original error
}

// After
try {
    await fetch('/api/data');
} catch (err) {
    throw new Error('Failed to fetch data', { cause: err });
}

// Access original error
catch (err) {
    console.log(err.message); // 'Failed to fetch data'
    console.log(err.cause); // Original fetch error
}

RegExp Match Indices:

const pattern = /test(\d+)/d; // Note the 'd' flag
const match = pattern.exec('test123');

match.indices; // [[0, 7], [4, 7]]
// [0, 7] - full match position
// [4, 7] - first capture group position

ES2023 (ES14)

Array methods: findLast(), findLastIndex():

const arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

// Before - find from start
arr.find(x => x > 3); // 4 (first occurrence)
arr.findIndex(x => x > 3); // 3

// After - find from end
arr.findLast(x => x > 3); // 4 (last occurrence)
arr.findLastIndex(x => x > 3); // 5

// Practical use
const logs = [
    { level: 'info', msg: 'Started' },
    { level: 'error', msg: 'Failed' },
    { level: 'info', msg: 'Retry' },
    { level: 'error', msg: 'Failed again' }
];

const lastError = logs.findLast(log => log.level === 'error');
// { level: 'error', msg: 'Failed again' }

Array.prototype.toSorted(), toReversed(), toSpliced(), with():

const arr = [3, 1, 4, 1, 5];

// Before - mutating methods
arr.sort(); // Modifies arr
arr.reverse(); // Modifies arr
arr.splice(1, 2); // Modifies arr

// After - non-mutating methods
const sorted = arr.toSorted(); // Returns new array
const reversed = arr.toReversed(); // Returns new array
const spliced = arr.toSpliced(1, 2); // Returns new array
const modified = arr.with(2, 99); // Returns new array with arr[2] = 99

// Original array unchanged
console.log(arr); // [3, 1, 4, 1, 5]

// Practical use - immutable updates
const state = [1, 2, 3, 4, 5];
const newState = state.with(2, 99); // [1, 2, 99, 4, 5]

Hashbang Grammar:

#!/usr/bin/env node
// Now valid JavaScript syntax

console.log('Hello from script');

Symbols as WeakMap keys:

const weak = new WeakMap();
const sym = Symbol('key');

weak.set(sym, 'value'); // Now allowed

ES2024 (ES15)

Array Grouping:

const items = [
    { type: 'fruit', name: 'apple' },
    { type: 'vegetable', name: 'carrot' },
    { type: 'fruit', name: 'banana' },
    { type: 'vegetable', name: 'broccoli' }
];

// Before
const grouped = items.reduce((acc, item) => {
    if (!acc[item.type]) acc[item.type] = [];
    acc[item.type].push(item);
    return acc;
}, {});

// After
const grouped = Object.groupBy(items, item => item.type);
// {
//   fruit: [{ type: 'fruit', name: 'apple' }, { type: 'fruit', name: 'banana' }],
//   vegetable: [{ type: 'vegetable', name: 'carrot' }, { type: 'vegetable', name: 'broccoli' }]
// }

// Map.groupBy for Map result
const groupedMap = Map.groupBy(items, item => item.type);

Promise.withResolvers():

// Before
let resolve, reject;
const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
});

// After
const { promise, resolve, reject } = Promise.withResolvers();

// Practical use
class AsyncQueue {
    #queue = [];

    async dequeue() {
        if (this.#queue.length > 0) {
            return this.#queue.shift();
        }

        const { promise, resolve } = Promise.withResolvers();
        this.#resolvers.push(resolve);
        return promise;
    }
}

Atomics.waitAsync():

// Non-blocking wait on SharedArrayBuffer
const buffer = new SharedArrayBuffer(4);
const view = new Int32Array(buffer);

// Before - blocking
Atomics.wait(view, 0, 0); // Blocks thread

// After - non-blocking
const result = Atomics.waitAsync(view, 0, 0);
result.value.then(() => {
    console.log('Value changed');
});

ES2025 (Current)

Duplicate named capture groups in RegExp:

// Now allowed
const pattern = /(?<year>\d{4})-\d{2}|\d{2}-(?<year>\d{4})/;
const match1 = pattern.exec('2025-12');
const match2 = pattern.exec('12-2025');

match1.groups.year; // '2025'
match2.groups.year; // '2025'

Set methods:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

// Union
set1.union(set2); // Set {1, 2, 3, 4, 5}

// Intersection
set1.intersection(set2); // Set {3}

// Difference
set1.difference(set2); // Set {1, 2}

// Symmetric difference
set1.symmetricDifference(set2); // Set {1, 2, 4, 5}

// Subset/superset
set1.isSubsetOf(set2); // false
set1.isDisjointFrom(set2); // false

TypeScript Evolution (2012-2025)

Created: 2012 by Microsoft (Anders Hejlsberg - creator of C#)

Problem it solved:

🎯 JavaScript had no type safety (runtime errors everywhere)
🎯 Large codebases were unmaintainable (refactoring was dangerous)
🎯 No IDE autocomplete/IntelliSense (guessing API)
🎯 Bugs only found at runtime (no compile-time checks)
🎯 Documentation was comments (no enforced contracts)

The breakthrough:

✨ Static typing - Catch errors before running code
✨ IntelliSense - IDE knows what properties/methods exist
✨ Refactoring - Rename safely across entire codebase
✨ Compiles to JavaScript - Works everywhere JS works
✨ Gradual adoption - Can add types incrementally

// JavaScript - Runtime errors
function getUser(id) {
    return fetch(`/api/users/${id}`)
        .then(res => res.json());
}

const user = getUser(123);
console.log(user.name); // Error! user is a Promise, not an object
// Only discover this when running the code

// TypeScript - Compile-time errors
async function getUser(id: number): Promise<User> {
    const res = await fetch(`/api/users/${id}`);
    return res.json();
}

const user = getUser(123);
console.log(user.name); // Error! Type 'Promise<User>' has no property 'name'
// IDE shows error immediately, before running

const user = await getUser(123);
console.log(user.name); // ✅ Works! IDE autocompletes 'name'

TypeScript 1.0 (2014)

Basic Types:

// Primitive types
let name: string = "John";
let age: number = 30;
let isActive: boolean = true;
let nothing: null = null;
let notDefined: undefined = undefined;

// Arrays
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ["a", "b", "c"];

// Tuples
let tuple: [string, number] = ["John", 30];

// Enums
enum Color {
    Red,
    Green,
    Blue
}
let color: Color = Color.Red;

// Any - escape hatch
let anything: any = 4;
anything = "string";
anything = true;

// Functions
function add(a: number, b: number): number {
    return a + b;
}

const multiply = (a: number, b: number): number => a * b;

Interfaces:

interface User {
    id: number;
    name: string;
    email: string;
    age?: number; // Optional
    readonly created: Date; // Readonly
}

function createUser(user: User): void {
    console.log(user.name);
}

// Extending interfaces
interface Admin extends User {
    role: string;
    permissions: string[];
}

TypeScript 1.4 (2015) - Union Types

// Union types
let value: string | number;
value = "hello";
value = 42;

// Type guards
function process(value: string | number) {
    if (typeof value === "string") {
        return value.toUpperCase(); // TypeScript knows it's string
    } else {
        return value.toFixed(2); // TypeScript knows it's number
    }
}

// Literal types
let direction: "north" | "south" | "east" | "west";
direction = "north"; // OK
direction = "up"; // Error

TypeScript 1.6 (2015) - Intersection Types

// Intersection types
interface Loggable {
    log(): void;
}

interface Serializable {
    serialize(): string;
}

type LoggableSerializable = Loggable & Serializable;

class MyClass implements LoggableSerializable {
    log() { console.log("logging"); }
    serialize() { return "{}"; }
}

TypeScript 2.0 (2016) - Major Update

Non-nullable types:

// Before - everything could be null/undefined
let name: string = null; // OK

// After - strictNullChecks
let name: string = null; // Error
let name: string | null = null; // OK

function greet(name: string) {
    console.log(name.toUpperCase()); // Safe - name cannot be null
}

function greet(name: string | null) {
    if (name) {
        console.log(name.toUpperCase()); // Must check first
    }
}

Readonly properties:

interface Point {
    readonly x: number;
    readonly y: number;
}

let point: Point = { x: 10, y: 20 };
point.x = 5; // Error

// Readonly arrays
let arr: ReadonlyArray<number> = [1, 2, 3];
arr.push(4); // Error
arr[0] = 5; // Error

Tagged union types:

interface Square {
    kind: "square";
    size: number;
}

interface Rectangle {
    kind: "rectangle";
    width: number;
    height: number;
}

interface Circle {
    kind: "circle";
    radius: number;
}

type Shape = Square | Rectangle | Circle;

function area(shape: Shape): number {
    switch (shape.kind) {
        case "square":
            return shape.size ** 2; // TypeScript knows it's Square
        case "rectangle":
            return shape.width * shape.height; // Rectangle
        case "circle":
            return Math.PI * shape.radius ** 2; // Circle
    }
}

TypeScript 2.1 (2016) - Advanced Features

Mapped types:

// Make all properties optional
type Partial<T> = {
    [P in keyof T]?: T[P];
};

// Make all properties readonly
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

interface User {
    name: string;
    age: number;
}

type PartialUser = Partial<User>; // { name?: string; age?: number; }
type ReadonlyUser = Readonly<User>; // { readonly name: string; readonly age: number; }

keyof and lookup types:

interface Person {
    name: string;
    age: number;
}

type PersonKeys = keyof Person; // "name" | "age"

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const person = { name: "John", age: 30 };
const name = getProperty(person, "name"); // string
const age = getProperty(person, "age"); // number

TypeScript 2.8 (2018) - Conditional Types

// Conditional types
type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

// Practical use - extract return type
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUser() {
    return { name: "John", age: 30 };
}

type User = ReturnType<typeof getUser>; // { name: string; age: number; }

// Exclude/Extract
type Exclude<T, U> = T extends U ? never : T;
type Extract<T, U> = T extends U ? T : never;

type T1 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T2 = Extract<"a" | "b" | "c", "a" | "f">; // "a"

TypeScript 3.0 (2018) - Tuples and Rest

Tuple improvements:

// Rest elements in tuples
type Strings = [string, string];
type Numbers = [number, number];
type StrStrNumNumBool = [...Strings, ...Numbers, boolean];
// [string, string, number, number, boolean]

// Optional elements
type OptionalTuple = [string, number?];
let t1: OptionalTuple = ["hello"];
let t2: OptionalTuple = ["hello", 42];

TypeScript 3.7 (2019) - Optional Chaining

// Optional chaining (same as JavaScript)
const city = user?.address?.city;

// Nullish coalescing
const name = user?.name ?? "Guest";

// Assertion functions
function assert(condition: any, msg?: string): asserts condition {
    if (!condition) {
        throw new Error(msg);
    }
}

function processValue(value: string | null) {
    assert(value !== null, "Value must not be null");
    // TypeScript knows value is string here
    console.log(value.toUpperCase());
}

TypeScript 4.0 (2020) - Variadic Tuples

// Variadic tuple types
function concat<T extends unknown[], U extends unknown[]>(
    arr1: T,
    arr2: U
): [...T, ...U] {
    return [...arr1, ...arr2];
}

const result = concat([1, 2], ["a", "b"]);
// type: [number, number, string, string]

// Labeled tuple elements
type Range = [start: number, end: number];

function createRange(...[start, end]: Range) {
    // ...
}

TypeScript 4.1 (2020) - Template Literal Types

// Template literal types
type World = "world";
type Greeting = `hello ${World}`; // "hello world"

type Color = "red" | "blue";
type Quantity = "one" | "two";
type SeussFish = `${Quantity | Color} fish`;
// "one fish" | "two fish" | "red fish" | "blue fish"

// Practical use - API routes
type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type Route = "/users" | "/posts" | "/comments";
type APIRoute = `${HTTPMethod} ${Route}`;
// "GET /users" | "POST /users" | ... (12 combinations)

// Intrinsic string manipulation
type Uppercase<S extends string> = intrinsic;
type Lowercase<S extends string> = intrinsic;
type Capitalize<S extends string> = intrinsic;
type Uncapitalize<S extends string> = intrinsic;

type Loud = Uppercase<"hello">; // "HELLO"
type Quiet = Lowercase<"HELLO">; // "hello"

Recursive conditional types:

// Deep readonly
type DeepReadonly<T> = {
    readonly [P in keyof T]: T[P] extends object
        ? DeepReadonly<T[P]>
        : T[P];
};

interface Nested {
    a: {
        b: {
            c: number;
        };
    };
}

type ReadonlyNested = DeepReadonly<Nested>;
// All levels are readonly

TypeScript 4.5 (2021) - Awaited Type

// Awaited - unwrap Promise types
type A = Awaited<Promise<string>>; // string
type B = Awaited<Promise<Promise<number>>>; // number

// Practical use
async function fetchUser() {
    return { name: "John", age: 30 };
}

type User = Awaited<ReturnType<typeof fetchUser>>;
// { name: string; age: number; }

TypeScript 4.7 (2022) - Module Detection

ES Module support improvements:

// package.json
{
    "type": "module"
}

// Now .ts files are treated as ES modules by default

TypeScript 4.9 (2022) - satisfies Operator

// Before - lose type information
const config: Record<string, string | number> = {
    host: "localhost",
    port: 3000
};

config.host.toUpperCase(); // Error - might be number

// After - keep specific types
const config = {
    host: "localhost",
    port: 3000
} satisfies Record<string, string | number>;

config.host.toUpperCase(); // OK - TypeScript knows it's string
config.port.toFixed(2); // OK - TypeScript knows it's number

TypeScript 5.0 (2023) - Decorators

Standard decorators:

// Class decorator
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class MyClass {
    // ...
}

// Method decorator
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args: any[]) {
        console.log(`Calling ${propertyKey} with`, args);
        return original.apply(this, args);
    };
}

class Calculator {
    @log
    add(a: number, b: number) {
        return a + b;
    }
}

const type parameters:

// Infer literal types
function makeArray<const T>(arr: T[]): T[] {
    return arr;
}

const arr1 = makeArray([1, 2, 3]); // number[]
const arr2 = makeArray([1, 2, 3] as const); // readonly [1, 2, 3]

TypeScript 5.2 (2023) - using Declarations

// Explicit resource management
{
    using file = openFile("data.txt");
    // file is automatically closed at end of scope
}

// Async disposal
{
    await using connection = await connectToDatabase();
    // connection is automatically closed
}

TypeScript 5.4 (2024) - NoInfer

// Prevent type inference in specific places
function createStore<T>(
    initial: T,
    updater: (current: NoInfer<T>) => T
) {
    // ...
}

// Forces updater parameter to match initial type exactly

TypeScript 5.5 (2024) - Inferred Type Predicates

// Before - manual type predicate
function isString(value: unknown): value is string {
    return typeof value === "string";
}

// After - inferred
function isString(value: unknown) {
    return typeof value === "string";
}
// TypeScript infers the type predicate automatically

Server-Side JavaScript: Node.js & Beyond

Created: 2009 by Ryan Dahl

Problem it solved:

🎯 JavaScript was only for browsers (couldn't build servers)
🎯 Apache/PHP blocked on I/O (one thread per request = slow)
🎯 Couldn't use same language for frontend and backend
🎯 Needed non-blocking I/O for real-time apps (chat, streaming)
🎯 C10K problem (handling 10,000 concurrent connections)

The breakthrough:

✨ V8 engine - Fast JavaScript execution (from Chrome)
✨ Event loop - Non-blocking I/O (handle thousands of connections)
✨ Single language - JavaScript everywhere (frontend + backend)
✨ npm - Largest package ecosystem ever created
✨ Async by default - Perfect for I/O-heavy applications

// Before Node.js - PHP (blocking)
<?php
// Each request blocks a thread
$data = file_get_contents('file.txt'); // Blocks!
$result = mysql_query("SELECT * FROM users"); // Blocks!
echo $data;
?>
// Apache: 1 thread per request = max ~1000 concurrent users

// With Node.js - Non-blocking
const fs = require('fs');
const mysql = require('mysql');

// Handles thousands of concurrent requests
fs.readFile('file.txt', (err, data) => {
    // Doesn't block! Event loop continues
    console.log(data);
});

mysql.query("SELECT * FROM users", (err, results) => {
    // Doesn't block! Event loop continues
    console.log(results);
});
// Node.js: Event loop = handle 10,000+ concurrent users

Node.js Evolution

Node.js 0.x (2009-2015):

// Callback-based APIs
const fs = require('fs');

fs.readFile('file.txt', 'utf8', function(err, data) {
    if (err) throw err;
    console.log(data);
});

// Event emitters
const EventEmitter = require('events');

class MyEmitter extends EventEmitter {}
const emitter = new MyEmitter();

emitter.on('event', () => {
    console.log('Event fired');
});

emitter.emit('event');

Node.js 4.x (2015) - ES6 Support:

// Arrow functions, classes, etc.
const fs = require('fs');

class FileReader {
    read(path) {
        return new Promise((resolve, reject) => {
            fs.readFile(path, 'utf8', (err, data) => {
                if (err) reject(err);
                else resolve(data);
            });
        });
    }
}

Node.js 8.x (2017) - async/await:

const fs = require('fs').promises;

async function readFile(path) {
    try {
        const data = await fs.readFile(path, 'utf8');
        return data;
    } catch (err) {
        console.error(err);
    }
}

Node.js 12.x (2019) - ES Modules:

// package.json
{
    "type": "module"
}

// Now can use ES modules
import fs from 'fs/promises';

const data = await fs.readFile('file.txt', 'utf8');

Node.js 14.x (2020) - Top-level await:

// No need for async wrapper
import { readFile } from 'fs/promises';

const data = await readFile('config.json', 'utf8');
const config = JSON.parse(data);

export default config;

Node.js 16.x (2021) - Timers Promises:

import { setTimeout } from 'timers/promises';

await setTimeout(1000);
console.log('1 second passed');

// AbortController support
const controller = new AbortController();
setTimeout(1000, 'result', { signal: controller.signal });
controller.abort();

Node.js 18.x (2022) - Fetch API:

// Native fetch (no need for node-fetch)
const response = await fetch('https://api.example.com/data');
const data = await response.json();

// Test runner
import { test } from 'node:test';
import assert from 'node:assert';

test('addition', () => {
    assert.strictEqual(1 + 1, 2);
});

Node.js 20.x (2023) - Stable Features:

// Permission model
node --experimental-permission --allow-fs-read=/path script.js

// Single executable applications
node --experimental-sea-config sea-config.json

Alternative Runtimes

Deno (2020):

// Secure by default, TypeScript native
// No package.json, no node_modules

// Permissions required
deno run --allow-net --allow-read script.ts

// URL imports
import { serve } from "https://deno.land/std@0.140.0/http/server.ts";

serve((req) => new Response("Hello World"));

// Top-level await
const data = await fetch("https://api.example.com/data");
const json = await data.json();
console.log(json);

// Built-in tools
deno fmt // Format code
deno lint // Lint code
deno test // Run tests
deno bundle // Bundle code

Bun (2022):

// Fast all-in-one runtime
// Built-in bundler, transpiler, package manager

// Fast startup
console.log("Hello from Bun!");

// Native TypeScript
import type { User } from "./types";

// Built-in SQLite
import { Database } from "bun:sqlite";
const db = new Database("mydb.sqlite");

// Fast package manager
bun install // Much faster than npm

// Built-in test runner
import { expect, test } from "bun:test";

test("addition", () => {
    expect(1 + 1).toBe(2);
});

// Web APIs
const server = Bun.serve({
    port: 3000,
    fetch(req) {
        return new Response("Hello from Bun!");
    }
});

Frameworks & Libraries: Rise and Fall

The jQuery Era (2006-2015)

jQuery - Dominated web development

Peak usage: 2010-2015 (used on 70%+ of websites)

Problem it solved:

🎯 Browser incompatibility nightmare (IE6, IE7, IE8, Firefox, Chrome all different)
🎯 DOM manipulation was verbose and inconsistent
🎯 AJAX was different in every browser
🎯 Event handling was inconsistent
🎯 CSS selectors weren't supported in old browsers

// Before jQuery - Browser hell
// Different code for different browsers
if (document.getElementById) {
    var elem = document.getElementById('myDiv');
} else if (document.all) {
    var elem = document.all['myDiv'];
}

// AJAX - Different in IE vs others
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// Event handling - Different everywhere
if (elem.addEventListener) {
    elem.addEventListener('click', handler, false);
} else if (elem.attachEvent) {
    elem.attachEvent('onclick', handler);
}

// With jQuery - Works everywhere!
$('#myDiv').click(function() {
    $.ajax({
        url: '/api/data',
        success: function(data) {
            $('#result').html(data);
        }
    });
});

Why it succeeded:

Cross-browser compatibility (one API for all browsers)
Simple API ($() for everything)
Plugin ecosystem (10,000+ plugins)
"Write less, do more"

Why it declined:

Modern browsers standardized (querySelector, fetch, classList)
Native APIs improved (no more IE6-8)
Vanilla JS became easier
SPAs needed more structure (React, Vue, Angular)
Performance concerns (manipulating DOM directly)

jQuery plugins ecosystem:

// Thousands of plugins
$('#slider').slick(); // Carousel
$('#datepicker').datepicker(); // Date picker
$('#modal').modal(); // Modals
$('.tooltip').tooltip(); // Tooltips

// jQuery UI
$('#accordion').accordion();
$('#tabs').tabs();
$('#draggable').draggable();

What replaced it:

Native DOM APIs (querySelector, fetch)
Modern frameworks (React, Vue, Angular)
Utility libraries (Lodash)

When it became legacy: ~2017-2018

What replaced it:

Native DOM APIs (querySelector, fetch, classList)
Modern frameworks (React, Vue, Angular)
Utility libraries (Lodash for utilities only)

Pros of jQuery (why it dominated):

✅ Cross-browser compatibility (IE6-11)
✅ Simple, intuitive API
✅ Huge plugin ecosystem (10,000+ plugins)
✅ Easy to learn
✅ Chainable methods
✅ AJAX made simple
✅ Animation built-in

Cons of jQuery (why it died):

❌ Performance overhead (entire library loaded)
❌ DOM manipulation slow for complex UIs
❌ No component model
❌ No state management
❌ Imperative (not declarative)
❌ Large bundle size (30KB+ minified)
❌ Modern browsers don't need it
❌ Not suitable for SPAs

Migration path:

// jQuery → Vanilla JS
$('#id') → document.getElementById('id')
$('.class') → document.querySelectorAll('.class')
$.ajax() → fetch()
$(el).addClass() → el.classList.add()
$(el).on('click', fn) → el.addEventListener('click', fn)

// jQuery → React
$('#app').html(content) → ReactDOM.render(<App />, root)

Current status (2025):

Still used in legacy projects (~30% of websites)
WordPress still includes it (but optional)
Usage declining rapidly (-10% per year)
Not recommended for new projects
Maintenance mode only

The MV* Framework Wars (2010-2015)

Backbone.js (2010)

Status: Dead

When it became legacy: ~2015-2016

Peak usage: 2012-2014

What replaced it: React, Vue, Angular

Pros of Backbone:

✅ Lightweight (7KB)
✅ Flexible, unopinionated
✅ RESTful by default
✅ Simple event system
✅ Works with any template engine
✅ Good for small apps

Cons of Backbone:

❌ Too minimal (needed many plugins)
❌ Boilerplate-heavy
❌ Manual DOM updates
❌ No two-way binding
❌ No component model
❌ Required Underscore.js dependency
❌ Memory leaks common (zombie views)
❌ Routing limited

Migration path:

Backbone → React (most common)
Backbone → Vue (easier migration)
Some stayed on Backbone (legacy apps)

Legacy: Influenced modern frameworks (models, collections, events)

Knockout.js (2010)

Status: Legacy/Maintenance mode

When it became legacy: ~2016-2017

Peak usage: 2011-2014

What replaced it:

Vue.js (similar reactivity, better DX)
React
Angular

Pros of Knockout:

✅ MVVM pattern (clean separation)
✅ Automatic UI updates (observables)
✅ Declarative bindings
✅ No dependencies
✅ Works with any web framework
✅ Good documentation
✅ Two-way binding

Cons of Knockout:

❌ Observable syntax verbose (ko.observable())
❌ Must call observables as functions
❌ No component model (initially)
❌ No virtual DOM (slower updates)
❌ Limited ecosystem
❌ MVVM pattern fell out of favor
❌ Computed observables complex
❌ Memory management issues

Migration path:

Knockout → Vue (easiest, similar concepts)
Knockout → React (more common)
Some enterprise apps still use it

Current status: Still maintained but not recommended for new projects

AngularJS 1.x (2010-2012)

Status: Dead (officially ended support January 1, 2022)

When it became legacy: ~2016 (when Angular 2 released)

Peak usage: 2013-2016 (used by Google, YouTube, Netflix)

Problem it solved:

🎯 jQuery spaghetti code (mixing DOM manipulation with logic)
🎯 No structure for large applications
🎯 Manual DOM updates when data changed
🎯 No two-way data binding (had to sync manually)
🎯 Needed complete framework (routing, HTTP, forms, etc.)

The breakthrough:

✨ Two-way data binding - Change model, view updates automatically
✨ Dependency injection - Testable, modular code
✨ Directives - Extend HTML with custom elements
✨ Complete framework - Everything included

// Before AngularJS - jQuery spaghetti
var users = [];

$('#add-user').click(function() {
    var name = $('#user-name').val();
    users.push({ name: name });

    // Manually update DOM
    $('#user-list').append('<li>' + name + '</li>');
    $('#user-count').text(users.length);
    $('#user-name').val('');
});

// With AngularJS - Two-way binding
angular.module('app', [])
    .controller('MainCtrl', function($scope) {
        $scope.users = [];

        $scope.addUser = function() {
            $scope.users.push({ name: $scope.userName });
            $scope.userName = '';
            // View updates automatically!
        };
    });

<!-- AngularJS template - Declarative -->
<div ng-controller="MainCtrl">
    <input ng-model="userName">
    <button ng-click="addUser()">Add</button>
    <ul>
        <li ng-repeat="user in users">{{user.name}}</li>
    </ul>
    <p>Total: {{users.length}}</p>
</div>

// AngularJS 1.x - Full example
angular.module('app', [])
    .controller('MainCtrl', function($scope, $http) {
        $scope.users = [];

        $http.get('/api/users').then(function(response) {
            $scope.users = response.data;
        });

        $scope.addUser = function(user) {
            $scope.users.push(user);
        };
    });

What replaced it:

Angular 2+ (complete rewrite, difficult migration)
React (most common migration)
Vue (easier migration)

Pros of AngularJS:

✅ Two-way data binding (revolutionary at the time)
✅ Dependency injection
✅ Directives (reusable components)
✅ Complete framework (routing, HTTP, forms)
✅ Google backing
✅ Large community
✅ Good for enterprise apps
✅ Testable (built-in testing support)

Cons of AngularJS:

❌ Digest cycle performance issues (slow with >2000 watchers)
❌ Two-way binding caused unpredictable updates
❌ Steep learning curve (directives, $scope, digest)
❌ $scope confusion (inheritance issues)
❌ Dirty checking inefficient
❌ No component model (initially)
❌ Directive API complex
❌ Version 2 was complete rewrite (no upgrade path)
❌ Too much "magic"
❌ Large bundle size

Migration path:

AngularJS → Angular 2+ (very difficult, complete rewrite)
AngularJS → React (most common, easier)
AngularJS → Vue (easiest migration)
Many apps stayed on AngularJS until 2022

Why the migration was painful:

Zero compatibility between AngularJS and Angular 2+
Different language (TypeScript required)
Different concepts (no $scope, no digest)
Had to rewrite entire app

Current status:

Dead (no security updates after 2022)
Legacy apps being migrated
Not recommended even for maintenance

Ember.js (2011)

Status: Alive but niche (declining)

When it started declining: ~2015-2016

Peak usage: 2013-2016

What's replacing it:

React (most migrations)
Vue
Modern frameworks

Pros of Ember:

✅ Convention over configuration
✅ Complete framework (batteries included)
✅ Ember CLI (best CLI at the time)
✅ Strong opinions (consistency)
✅ Ember Data (powerful ORM)
✅ Backward compatibility (smooth upgrades)
✅ Great for large teams
✅ Stable releases
✅ Good documentation
✅ Addons ecosystem

Cons of Ember:

❌ Too opinionated (hard to deviate)
❌ Steep learning curve
❌ Large bundle size (200KB+)
❌ Slower than React/Vue
❌ Smaller ecosystem than React
❌ Less flexible
❌ Harder to hire developers
❌ "The Ember Way" or nothing
❌ Verbose syntax
❌ Slower innovation

Current usage (2025):

Some large legacy apps (LinkedIn, Apple Music, Discourse)
Convention over configuration still valued
Stable but shrinking community
Hard to justify for new projects
Good for teams that value stability over innovation

Migration path:

Ember → React (most common)
Ember → Vue
Many apps staying on Ember (stable, works well)

Current status:

Still maintained and updated
Octane edition (2019) modernized it
But market share declining
Not recommended for new projects unless specific needs

// Ember.js - still used
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TodoComponent extends Component {
    @tracked todos = [];

    @action
    addTodo(text) {
        this.todos = [...this.todos, { text, done: false }];
    }
}

The Modern Framework Era (2013-Present)

React (2013-Present)

Status: Dominant

Problem it solved:

🎯 jQuery/Backbone couldn't handle complex UIs (Facebook news feed)
🎯 DOM manipulation was slow and hard to reason about
🎯 Two-way data binding (Angular 1) caused performance issues
🎯 Hard to know what changed when state updated
🎯 Needed declarative UI (describe what, not how)

The breakthrough:

✨ Virtual DOM - Diff and update only what changed
✨ One-way data flow - Predictable state management
✨ Components - Reusable, composable UI pieces
✨ JSX - Write HTML in JavaScript (controversial but powerful)

// Before React - jQuery spaghetti
function updateUI(data) {
    $('#user-name').text(data.name);
    $('#user-email').text(data.email);
    if (data.premium) {
        $('#premium-badge').show();
    } else {
        $('#premium-badge').hide();
    }
    // Manually track what changed, update DOM
    // Gets messy fast!
}

// With React - Declarative
function UserProfile({ user }) {
    return (
        <div>
            <h1>{user.name}</h1>
            <p>{user.email}</p>
            {user.premium && <span className="badge">Premium</span>}
        </div>
    );
    // React figures out what changed and updates DOM
}

Evolution:

// 2013: Class components
class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    render() {
        return <h1>Count: {this.state.count}</h1>;
    }
}

// 2015: ES6 classes
class Welcome extends React.Component {
    state = { count: 0 };

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <h1>Count: {this.state.count}</h1>
                <button onClick={this.increment}>+</button>
            </div>
        );
    }
}

// 2019: Hooks (game changer)
function Welcome() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
}

// 2020: Custom hooks
function useCounter(initial = 0) {
    const [count, setCount] = useState(initial);

    const increment = () => setCount(c => c + 1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initial);

    return { count, increment, decrement, reset };
}

function Counter() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={increment}>+</button>
            <button onClick={decrement}>-</button>
            <button onClick={reset}>Reset</button>
        </div>
    );
}

// 2024: Server Components (Next.js 13+)
// app/page.tsx
async function Page() {
    const data = await fetch('https://api.example.com/data');
    const json = await data.json();

    return <div>{json.title}</div>;
}
// Runs on server, no JavaScript sent to client

React Ecosystem:

// State management evolution

// 2015: Redux
import { createStore } from 'redux';

const reducer = (state = { count: 0 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        default:
            return state;
    }
};

const store = createStore(reducer);

// 2018: Redux Toolkit (simplified)
import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
    name: 'counter',
    initialState: { count: 0 },
    reducers: {
        increment: state => { state.count += 1; }
    }
});

const store = configureStore({
    reducer: { counter: counterSlice.reducer }
});

// 2019: Context + Hooks (built-in)
const CountContext = React.createContext();

function CountProvider({ children }) {
    const [count, setCount] = useState(0);
    return (
        <CountContext.Provider value={{ count, setCount }}>
            {children}
        </CountContext.Provider>
    );
}

function useCount() {
    return useContext(CountContext);
}

// 2020: Zustand (simple)
import create from 'zustand';

const useStore = create(set => ({
    count: 0,
    increment: () => set(state => ({ count: state.count + 1 }))
}));

function Counter() {
    const { count, increment } = useStore();
    return <button onClick={increment}>{count}</button>;
}

// 2021: Jotai (atomic)
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
    const [count, setCount] = useAtom(countAtom);
    return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

// 2022: TanStack Query (server state)
import { useQuery } from '@tanstack/react-query';

function Users() {
    const { data, isLoading } = useQuery({
        queryKey: ['users'],
        queryFn: () => fetch('/api/users').then(r => r.json())
    });

    if (isLoading) return <div>Loading...</div>;
    return <div>{data.map(user => <div key={user.id}>{user.name}</div>)}</div>;
}

Vue.js (2014-Present)

Status: Very popular, especially in Asia

Problem it solved:

🎯 React's JSX was controversial (mixing HTML in JavaScript)
🎯 Angular 2 was too complex (TypeScript required, steep learning curve)
🎯 Needed something easier than Angular, more approachable than React
🎯 Wanted templates (like Angular) but simpler
🎯 Progressive framework (use as little or as much as needed)

The breakthrough:

✨ Approachable - Easiest learning curve of the big 3
✨ Templates - HTML-based (familiar to designers)
✨ Reactive - Like React but simpler
✨ Progressive - Can use just for one component or entire app
✨ Single File Components - HTML, CSS, JS in one file

// React - JSX (controversial)
function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// Angular - Complex
@Component({
    selector: 'app-counter',
    template: '<button (click)="increment()">{{count}}</button>'
})
export class CounterComponent {
    count = 0;
    increment() { this.count++; }
}

// Vue - Simple, familiar templates
<template>
    <button @click="count++">{{ count }}</button>
</template>

<script>
export default {
    data() {
        return { count: 0 };
    }
};
</script>

Evolution:

// 2014: Vue 1.x - Options API
new Vue({
    el: '#app',
    data: {
        count: 0
    },
    methods: {
        increment() {
            this.count++;
        }
    }
});

// 2016: Vue 2.x - Improved
Vue.component('counter', {
    data() {
        return { count: 0 };
    },
    template: `
        <div>
            <h1>{{ count }}</h1>
            <button @click="increment">+</button>
        </div>
    `,
    methods: {
        increment() {
            this.count++;
        }
    }
});

// 2020: Vue 3.x - Composition API
import { ref, computed } from 'vue';

export default {
    setup() {
        const count = ref(0);
        const doubled = computed(() => count.value * 2);

        const increment = () => {
            count.value++;
        };

        return { count, doubled, increment };
    }
};

// 2023: Vue 3.3 - Script setup (cleaner)
<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);

const increment = () => {
    count.value++;
};
</script>

<template>
    <div>
        <h1>{{ count }}</h1>
        <p>Doubled: {{ doubled }}</p>
        <button @click="increment">+</button>
    </div>
</template>

Vue Ecosystem:

Vuex (2015) → Pinia (2021) - State management
Vue Router - Official routing
Nuxt.js - Full-stack framework (like Next.js for React)

Angular 2+ (2016-Present)

Status: Popular in enterprise

Complete rewrite from AngularJS:

// Angular 2+ (2016)
import { Component } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <div>
            <h1>{{ count }}</h1>
            <button (click)="increment()">+</button>
        </div>
    `
})
export class CounterComponent {
    count = 0;

    increment() {
        this.count++;
    }
}

// Angular 14+ (2022) - Standalone components
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-counter',
    standalone: true,
    imports: [CommonModule],
    template: `
        <div>
            <h1>{{ count }}</h1>
            <button (click)="increment()">+</button>
        </div>
    `
})
export class CounterComponent {
    count = 0;

    increment() {
        this.count++;
    }
}

// Angular 16+ (2023) - Signals
import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-counter',
    standalone: true,
    template: `
        <div>
            <h1>{{ count() }}</h1>
            <button (click)="increment()">+</button>
        </div>
    `
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update(c => c + 1);
    }
}

Pros of Angular 2+:

✅ TypeScript from the start (type safety)
✅ Complete framework (routing, HTTP, forms, testing)
✅ Dependency injection (enterprise-grade)
✅ RxJS integration (powerful async)
✅ Angular CLI (excellent tooling)
✅ Opinionated (consistency in large teams)
✅ Google backing (long-term support)
✅ Great for enterprise
✅ Strong conventions
✅ Ahead-of-Time compilation
✅ Built-in form validation
✅ Internationalization built-in

Cons of Angular 2+:

❌ Steep learning curve (RxJS, TypeScript, DI)
❌ Verbose (lots of boilerplate)
❌ Large bundle size (100KB+ minimum)
❌ Slower than React/Vue
❌ Breaking changes between versions (initially)
❌ RxJS required (complex for beginners)
❌ Decorator-heavy (lots of magic)
❌ Zone.js overhead
❌ Less flexible than React
❌ Smaller ecosystem than React

Why Angular survived:

TypeScript from the start (ahead of its time)
Enterprise adoption (banks, insurance, government)
Complete framework (no decision fatigue)
Google backing (trust and stability)
Strong CLI and tooling
Good for large teams
Backward compatibility improved

When to use Angular (2025):

✅ Enterprise applications
✅ Large teams (need consistency)
✅ TypeScript-first projects
✅ Need complete framework
✅ Long-term projects (stability)

When NOT to use Angular:

❌ Small projects (too heavy)
❌ Need fast learning curve
❌ Performance critical (use React/Svelte)
❌ Small bundle size needed
❌ Startup/fast iteration

Current status (2025):

Alive and well (15% market share)
Angular 17+ with Signals (modern reactivity)
Standalone components (less boilerplate)
Still best for enterprise
Not growing but stable

New Generation Frameworks (2019-Present)

Svelte (2016, popular 2019+)

Status: Growing rapidly

Philosophy: Compile-time framework (no virtual DOM)

<!-- Before: React -->
import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
}

<!-- After: Svelte -->
<script>
    let count = 0;

    function increment() {
        count += 1; // Just mutate!
    }
</script>

<div>
    <h1>{count}</h1>
    <button on:click={increment}>+</button>
</div>

<!-- Reactive declarations -->
<script>
    let count = 0;
    $: doubled = count * 2; // Automatically updates
    $: if (count > 10) {
        alert('Count is high!');
    }
</script>

<!-- SvelteKit (2021) - Full-stack framework -->
<script>
    export let data; // From load function
</script>

<h1>{data.title}</h1>

Pros of Svelte:

✅ Less boilerplate (cleanest syntax)
✅ No virtual DOM (compiles to vanilla JS)
✅ Smallest bundle sizes (10-20KB typical)
✅ Easier to learn (feels like HTML/CSS/JS)
✅ Great developer experience
✅ Reactive by default ($: syntax)
✅ Built-in animations/transitions
✅ Scoped CSS by default
✅ Fast performance
✅ No runtime overhead
✅ True reactivity (not virtual DOM diffing)

Cons of Svelte:

❌ Smaller ecosystem than React
❌ Fewer jobs (but growing)
❌ Less mature (newer framework)
❌ Fewer third-party components
❌ Compiler adds build step
❌ Some edge cases with reactivity
❌ Smaller community
❌ Less Stack Overflow answers
❌ Corporate backing unclear (Rich Harris at Vercel)

When to use Svelte (2025):

✅ New projects (greenfield)
✅ Performance critical apps
✅ Small bundle size needed
✅ Developer experience priority
✅ Content-heavy sites
✅ Interactive visualizations

Current status (2025):

Growing rapidly (10% market share)
SvelteKit stable and mature
Svelte 5 with Runes (new reactivity)
Recommended for new projects
Great for indie developers

Solid.js (2021)

Status: Rising star (niche but growing)

Philosophy: Fine-grained reactivity (like Svelte but JSX)

Peak performance: Fastest framework in benchmarks

// Solid.js
import { createSignal, createEffect } from 'solid-js';

function Counter() {
    const [count, setCount] = createSignal(0);

    createEffect(() => {
        console.log('Count is:', count());
    });

    return (
        <div>
            <h1>{count()}</h1>
            <button onClick={() => setCount(count() + 1)}>+</button>
        </div>
    );
}

// No virtual DOM, but JSX
// Extremely fast
// React-like API but different mental model

Pros of Solid.js:

✅ Fastest framework (beats all in benchmarks)
✅ Fine-grained reactivity (no virtual DOM)
✅ JSX (familiar to React developers)
✅ Small bundle size (7KB)
✅ No re-renders (only updates what changed)
✅ React-like API (easier migration)
✅ TypeScript support
✅ Great performance
✅ Signals-based (modern reactivity)

Cons of Solid.js:

❌ Very small ecosystem
❌ Few jobs
❌ Different mental model (not React)
❌ Signals can be confusing
❌ Less mature
❌ Fewer components/libraries
❌ Small community
❌ JSX looks like React but behaves differently
❌ Learning curve (reactivity model)

When to use Solid.js (2025):

✅ Performance is critical
✅ Coming from React (familiar JSX)
✅ Want modern reactivity
✅ Small bundle size needed
✅ Experimental/side projects

Current status (2025):

Niche but growing
SolidStart (meta-framework) maturing
Used by some performance-critical apps
Not recommended for most production apps yet
Great for learning modern reactivity

Qwik (2023)

Status: Experimental but promising

Philosophy: Resumability (instant loading, no hydration)

Creator: Miško Hevery (creator of AngularJS)

import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
    const count = useSignal(0);

    return (
        <div>
            <h1>{count.value}</h1>
            <button onClick$={() => count.value++}>+</button>
        </div>
    );
});

// Loads only what's needed
// No hydration, just resumability
// Instant interactive

Pros of Qwik:

✅ Instant loading (resumability)
✅ No hydration (faster than SSR)
✅ Lazy loads everything automatically
✅ Best Time to Interactive (TTI)
✅ JSX (familiar)
✅ Signals-based reactivity
✅ Great for content-heavy sites
✅ Innovative approach

Cons of Qwik:

❌ Very new (experimental)
❌ Tiny ecosystem
❌ Almost no jobs
❌ Different mental model ($ syntax)
❌ Not proven at scale
❌ Small community
❌ Optimizer can be confusing
❌ Build complexity
❌ Not recommended for production yet

When to use Qwik (2025):

✅ Experimental projects
✅ Content-heavy sites (blogs, docs)
✅ Performance is critical
✅ Want to try cutting-edge tech
❌ NOT for production apps yet

Current status (2025):

Experimental
QwikCity (meta-framework) available
Interesting concept but unproven
Wait for more maturity

Meta-Frameworks (Full-Stack)

Next.js (React) - 2016-Present

Status: Industry standard for React

Evolution:

// 2016: Next.js 1.0 - Simple SSR
// pages/index.js
export default function Home() {
    return <h1>Hello Next.js</h1>;
}

// 2018: Next.js 7 - Static export
export async function getStaticProps() {
    const data = await fetch('https://api.example.com/data');
    return { props: { data } };
}

// 2020: Next.js 9.3 - SSG + ISR
export async function getStaticProps() {
    return {
        props: { data },
        revalidate: 60 // Regenerate every 60 seconds
    };
}

// 2022: Next.js 13 - App Router (Server Components)
// app/page.tsx
async function Page() {
    const data = await fetch('https://api.example.com/data');
    return <div>{data.title}</div>;
}

// app/layout.tsx
export default function RootLayout({ children }) {
    return (
        <html>
            <body>{children}</body>
        </html>
    );
}

// 2023: Next.js 13.4 - Stable App Router
// Server Actions
async function createUser(formData: FormData) {
    'use server';

    const name = formData.get('name');
    await db.users.create({ name });
}

// Client component
'use client';
export default function Form() {
    return (
        <form action={createUser}>
            <input name="name" />
            <button>Submit</button>
        </form>
    );
}

Nuxt.js (Vue) - 2016-Present

Status: Standard for Vue

// Nuxt 2 (2018)
export default {
    async asyncData({ $axios }) {
        const data = await $axios.$get('/api/data');
        return { data };
    }
};

// Nuxt 3 (2022) - Composition API
<script setup>
const { data } = await useFetch('/api/data');
</script>

<template>
    <div>{{ data }}</div>
</template>

Remix (React) - 2021

Status: Growing, acquired by Shopify

// Loader (server-side)
export async function loader({ params }) {
    const user = await getUser(params.id);
    return json({ user });
}

// Action (server-side)
export async function action({ request }) {
    const formData = await request.formData();
    await createUser(formData);
    return redirect('/users');
}

// Component
export default function User() {
    const { user } = useLoaderData();

    return (
        <div>
            <h1>{user.name}</h1>
            <Form method="post">
                <input name="name" />
                <button>Update</button>
            </Form>
        </div>
    );
}

Astro (2021)

Status: Popular for content sites

Philosophy: Ship zero JavaScript by default

---
// Server-side code
const posts = await fetch('https://api.example.com/posts').then(r => r.json());
---

<html>
    <body>
        <h1>Blog Posts</h1>
        {posts.map(post => (
            <article>
                <h2>{post.title}</h2>
                <p>{post.excerpt}</p>
            </article>
        ))}
    </body>
</html>

<!-- Can use any framework -->
---
import ReactCounter from './ReactCounter.jsx';
import VueCounter from './VueCounter.vue';
import SvelteCounter from './SvelteCounter.svelte';
---

<ReactCounter client:load />
<VueCounter client:visible />
<SvelteCounter client:idle />

Utility Libraries

Lodash (2012-Present)

Status: Still widely used

// Before Lodash
var users = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
];

var names = users.map(function(u) { return u.name; });
var sorted = users.sort(function(a, b) { return a.age - b.age; });

// With Lodash
import _ from 'lodash';

const names = _.map(users, 'name');
const sorted = _.sortBy(users, 'age');
const grouped = _.groupBy(users, 'age');
const debounced = _.debounce(handleInput, 300);

// Deep clone
const clone = _.cloneDeep(obj);

// Get nested property safely
const value = _.get(obj, 'a.b.c.d', 'default');

Why still used:

Comprehensive utilities
Battle-tested
Tree-shakeable (lodash-es)
Some functions still not in native JS

Alternatives:

Native JS (for many use cases)
Ramda (functional programming)
Just (smaller, modular)

Moment.js → Day.js / date-fns

Moment.js (2011-2020)

Status: Deprecated (maintenance mode)

// Moment.js
moment().format('YYYY-MM-DD');
moment().add(7, 'days');
moment().subtract(1, 'month');

Why it died:

Mutable API (confusing)
Large bundle size
Not tree-shakeable

Replaced by:

// Day.js (2018) - Moment.js compatible API
import dayjs from 'dayjs';

dayjs().format('YYYY-MM-DD');
dayjs().add(7, 'day');

// date-fns (2016) - Functional, tree-shakeable
import { format, addDays, subMonths } from 'date-fns';

format(new Date(), 'yyyy-MM-dd');
addDays(new Date(), 7);

// Native Temporal (Stage 3, coming soon)
Temporal.Now.plainDateISO().toString(); // '2025-12-04'
Temporal.Now.plainDateISO().add({ days: 7 });

Testing Ecosystem Evolution

Test Runners

QUnit (2008) - jQuery's test framework

Status: Dead for new projects

When it became legacy: ~2014-2015

What replaced it: Jasmine, Mocha, Jest

QUnit.test('addition', function(assert) {
    assert.equal(1 + 1, 2);
});

Pros of QUnit:

✅ Simple API
✅ No dependencies
✅ Browser-based testing
✅ Good for jQuery projects

Cons of QUnit:

❌ Limited features
❌ No mocking built-in
❌ Tied to jQuery ecosystem
❌ No async/await support (initially)
❌ Basic assertions only
❌ No code coverage

Current status: Only for legacy jQuery projects

Jasmine (2010)

Status: Legacy/Declining

When it became legacy: ~2016-2017

Peak usage: 2011-2015

What replaced it: Jest, Mocha

describe('Calculator', function() {
    it('should add numbers', function() {
        expect(add(1, 2)).toBe(3);
    });
});

Pros of Jasmine:

✅ BDD syntax (describe/it)
✅ No dependencies
✅ Built-in assertions
✅ Built-in spies/mocks
✅ Browser and Node.js support
✅ Good documentation

Cons of Jasmine:

❌ Slow test execution
❌ No snapshot testing
❌ No code coverage built-in
❌ No watch mode
❌ Configuration complex
❌ Async testing awkward
❌ No parallel execution
❌ Outdated compared to Jest

Migration path: Jasmine → Jest (easy, similar API)

Current status: Still used in Angular projects (default), but Jest preferred

Mocha (2011) + Chai

Status: Still used but declining

When it started declining: ~2017-2018

Peak usage: 2013-2017

What's replacing it: Jest, Vitest

const { expect } = require('chai');

describe('Calculator', () => {
    it('should add numbers', () => {
        expect(add(1, 2)).to.equal(3);
    });
});

Pros of Mocha:

✅ Flexible (bring your own assertion library)
✅ Good async support
✅ Extensible (many plugins)
✅ Works in browser and Node.js
✅ Mature and stable
✅ Good documentation

Cons of Mocha:

❌ Requires separate assertion library (Chai)
❌ Requires separate mocking library (Sinon)
❌ No snapshot testing
❌ No code coverage built-in
❌ Configuration needed
❌ Slower than Jest
❌ No watch mode built-in
❌ More setup required

Migration path: Mocha → Jest or Vitest

Current status (2025):

Still maintained
Used in some legacy projects
Not recommended for new projects
Jest/Vitest better alternatives

Jest (2014, Facebook)

Status: Dominant for React

Problem it solved:

🎯 Mocha/Jasmine required too much setup (test runner + assertion + mocking + coverage)
🎯 No snapshot testing (hard to test React components)
🎯 Slow test runs (no parallelization)
🎯 Mocking was painful (Sinon.js separate library)
🎯 No watch mode (had to rerun manually)

The breakthrough:

✨ Zero config - Works out of the box
✨ All-in-one - Test runner + assertions + mocking + coverage
✨ Snapshot testing - Perfect for React components
✨ Fast - Parallel execution, smart watch mode
✨ Great DX - Interactive, clear error messages

// Before Jest - Mocha + Chai + Sinon + Istanbul
// package.json
"devDependencies": {
    "mocha": "^10.0.0",
    "chai": "^4.3.0",
    "sinon": "^15.0.0",
    "istanbul": "^0.4.5"
}

// test.js
const { expect } = require('chai');
const sinon = require('sinon');

describe('Calculator', () => {
    it('should add', () => {
        expect(add(1, 2)).to.equal(3);
    });

    it('should mock', () => {
        const mock = sinon.stub();
        mock.returns(42);
        expect(mock()).to.equal(42);
    });
});

// Run tests
mocha test.js
// Run coverage
istanbul cover _mocha

// With Jest - Zero config, all-in-one
// package.json
"devDependencies": {
    "jest": "^29.0.0"
}

// test.js
describe('Calculator', () => {
    test('adds numbers', () => {
        expect(add(1, 2)).toBe(3);
    });

    test('mocks functions', () => {
        const mock = jest.fn().mockReturnValue(42);
        expect(mock()).toBe(42);
    });
});

// Run tests with coverage
jest --coverage

// Jest - batteries included
describe('Calculator', () => {
    test('adds numbers', () => {
        expect(add(1, 2)).toBe(3);
    });

    test('mocks functions', () => {
        const mock = jest.fn();
        mock('hello');
        expect(mock).toHaveBeenCalledWith('hello');
    });
});

// Snapshot testing
test('renders correctly', () => {
    const tree = renderer.create(<Component />).toJSON();
    expect(tree).toMatchSnapshot();
});

// Async testing
test('fetches data', async () => {
    const data = await fetchData();
    expect(data).toEqual({ name: 'John' });
});

Pros of Jest:

✅ Zero config (works out of the box)
✅ Fast (parallel execution)
✅ Built-in mocking (jest.fn(), jest.mock())
✅ Snapshot testing (unique feature)
✅ Great error messages
✅ Watch mode (interactive)
✅ Code coverage built-in
✅ Works with React (React Testing Library)
✅ Large community
✅ Facebook backing
✅ Great documentation
✅ Timer mocking (jest.useFakeTimers())

Cons of Jest:

❌ Slow startup (especially large projects)
❌ ESM support problematic (until recently)
❌ Heavy (large dependency)
❌ Can be slow on large codebases
❌ Snapshot tests can be overused
❌ Mocking can be confusing
❌ Global namespace pollution
❌ Configuration can get complex

When to use Jest (2025):

✅ React projects (standard)
✅ Need snapshot testing
✅ Want zero config
✅ Large community support needed

What's replacing Jest: Vitest (for Vite projects)

Current status (2025):

Still dominant (40% market share)
Standard for React
Being challenged by Vitest
Still recommended for most projects

Vitest (2021)

Status: Rising fast (replacing Jest in Vite projects)

Created by: Vite team (Anthony Fu)

Problem it solved:

🎯 Jest was slow with Vite (different module systems)
🎯 Jest's ESM support was problematic
🎯 Vite config and Jest config were separate (duplication)
🎯 Jest startup was slow (especially on large projects)
🎯 Wanted same speed as Vite dev server for tests

The breakthrough:

✨ Uses Vite - Same config, same transforms, same plugins
✨ Extremely fast - Instant startup, fast execution
✨ Jest-compatible API - Easy migration from Jest
✨ Native ESM - No transformation needed
✨ HMR for tests - Tests rerun instantly on change

// Jest with Vite - Slow, separate config
// vite.config.js
export default {
    plugins: [react()],
    // Vite config
};

// jest.config.js
export default {
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
    },
    // Duplicate config!
};

// Slow startup (5-10 seconds)
npm run test

// Vitest - Fast, shared config
// vite.config.js
export default {
    plugins: [react()],
    test: {
        // Test config in same file!
    }
};

// Instant startup (200ms)
npm run test

import { describe, test, expect } from 'vitest';

describe('Calculator', () => {
    test('adds numbers', () => {
        expect(add(1, 2)).toBe(3);
    });
});

Pros of Vitest:

✅ Extremely fast (uses Vite)
✅ Jest-compatible API (easy migration)
✅ Native ESM support
✅ Vite config reuse (no separate config)
✅ Fast HMR for tests
✅ TypeScript support out of the box
✅ Component testing built-in
✅ Watch mode (instant)
✅ Snapshot testing
✅ Code coverage (c8/istanbul)
✅ Multi-threading
✅ Better error messages than Jest

Cons of Vitest:

❌ Newer (less mature than Jest)
❌ Smaller community
❌ Requires Vite (or Vite config)
❌ Some Jest features missing
❌ Less Stack Overflow answers
❌ Fewer plugins

When to use Vitest (2025):

✅ Using Vite (obvious choice)
✅ New projects
✅ Want speed
✅ TypeScript projects
✅ Vue/Svelte/Solid projects

Migration from Jest:

Very easy (API compatible)
Change imports
Update config
Most tests work as-is

Current status (2025):

Rapidly growing (20% market share)
Standard for Vite projects
Recommended for new projects
Will likely overtake Jest

Bun Test (2023)

Status: New, very fast, experimental

import { test, expect } from 'bun:test';

test('addition', () => {
    expect(1 + 1).toBe(2);
});

Pros of Bun Test:

✅ Extremely fast (fastest test runner)
✅ Built into Bun (no install)
✅ Jest-compatible API
✅ TypeScript native
✅ Snapshot testing
✅ Watch mode
✅ Mocking built-in
✅ Zero config

Cons of Bun Test:

❌ Very new (immature)
❌ Requires Bun runtime
❌ Small ecosystem
❌ Missing some Jest features
❌ Not production-ready yet
❌ Limited documentation
❌ Bugs and edge cases

When to use Bun Test (2025):

✅ Already using Bun
✅ Experimental projects
✅ Want maximum speed
❌ NOT for production yet

Current status (2025):

Experimental
Very promising
Wait for more maturity
Good for side projects

End-to-End Testing

Selenium (2004)

Status: Legacy but still used (especially enterprise)

When it became legacy: ~2017-2018

Peak usage: 2008-2016

What's replacing it: Cypress, Playwright

const { Builder, By } = require('selenium-webdriver');

const driver = await new Builder().forBrowser('chrome').build();
await driver.get('http://localhost:3000');
await driver.findElement(By.id('username')).sendKeys('john');
await driver.findElement(By.id('submit')).click();

Pros of Selenium:

✅ Multi-browser support (all browsers)
✅ Multi-language (Java, Python, C#, JS)
✅ Mature and stable
✅ Large community
✅ Works with mobile (Appium)
✅ Grid support (parallel testing)
✅ Industry standard (for years)

Cons of Selenium:

❌ Slow and flaky
❌ Complex setup
❌ No automatic waiting (manual waits needed)
❌ Poor error messages
❌ Verbose API
❌ No time-travel debugging
❌ No automatic screenshots/videos
❌ WebDriver protocol overhead
❌ Hard to debug
❌ Outdated compared to modern tools

When to use Selenium (2025):

✅ Legacy projects already using it
✅ Need Java/Python/C# (not JavaScript)
✅ Enterprise with existing Selenium Grid
❌ NOT recommended for new JavaScript projects

Current status (2025):

Still maintained
Used in enterprise (legacy)
Being replaced by Playwright/Cypress
Not recommended for new projects

Protractor (2013, Angular)

Status: Dead (officially deprecated 2021, end of life 2022)

When it became legacy: 2020-2021

What replaced it:

Cypress (recommended by Angular team)
Playwright
WebdriverIO

Pros of Protractor:

✅ Built for Angular (automatic waiting)
✅ Angular-specific locators
✅ Good for Angular apps

Cons of Protractor:

❌ Only good for Angular
❌ Built on Selenium (slow)
❌ Flaky tests
❌ Complex configuration
❌ Deprecated (no future)

Migration path:

Protractor → Cypress (Angular team recommendation)
Protractor → Playwright

Current status: Dead, migrate immediately

Cypress (2017)

Status: Very popular

describe('Login', () => {
    it('should login successfully', () => {
        cy.visit('/login');
        cy.get('#username').type('john');
        cy.get('#password').type('secret');
        cy.get('#submit').click();
        cy.url().should('include', '/dashboard');
        cy.contains('Welcome, John');
    });
});

// Time travel debugging
// Automatic waiting
// Great DX
// Screenshots/videos

Pros of Cypress:

✅ Amazing developer experience
✅ Time-travel debugging (see every step)
✅ Automatic waiting (no manual waits)
✅ Real-time reloading
✅ Screenshots/videos automatic
✅ Great documentation
✅ Easy to learn
✅ Network stubbing built-in
✅ Great error messages
✅ Interactive test runner
✅ Large community
✅ Component testing

Cons of Cypress:

❌ Runs in browser (architecture limitation)
❌ No multi-tab support
❌ No native events (synthetic events)
❌ Slower than Playwright
❌ Chrome/Edge/Firefox only (no Safari)
❌ Can't test multiple domains easily
❌ Parallel execution requires paid plan
❌ Some limitations due to browser-based architecture

When to use Cypress (2025):

✅ Developer experience priority
✅ Need time-travel debugging
✅ Single-page applications
✅ Don't need Safari testing
✅ Want easy learning curve

Current status (2025):

Still very popular (30% market share)
Great for SPAs
Being challenged by Playwright
Still recommended for many projects

Playwright (2020, Microsoft)

Status: Growing rapidly

import { test, expect } from '@playwright/test';

test('login', async ({ page }) => {
    await page.goto('/login');
    await page.fill('#username', 'john');
    await page.fill('#password', 'secret');
    await page.click('#submit');
    await expect(page).toHaveURL(/dashboard/);
    await expect(page.locator('text=Welcome, John')).toBeVisible();
});

// Multi-browser (Chrome, Firefox, Safari, Edge)
// Parallel execution
// Auto-wait
// Network interception
// Mobile emulation

Pros of Playwright:

✅ Multi-browser (Chrome, Firefox, Safari, Edge)
✅ Faster than Cypress
✅ Parallel execution built-in
✅ Auto-wait (smart waiting)
✅ Network interception
✅ Mobile emulation
✅ Multiple tabs/contexts
✅ Native events (real browser events)
✅ Screenshots/videos/traces
✅ Great for CI/CD
✅ Microsoft backing
✅ Codegen (record tests)
✅ Component testing
✅ API testing built-in
✅ Better architecture than Cypress

Cons of Playwright:

❌ No time-travel debugging (like Cypress)
❌ Steeper learning curve
❌ Less interactive test runner
❌ Smaller community than Cypress
❌ Newer (less mature)
❌ Fewer resources/tutorials

When to use Playwright (2025):

✅ Need Safari testing
✅ Need multi-tab support
✅ Performance critical
✅ CI/CD focused
✅ Need parallel execution
✅ Enterprise projects
✅ New projects (recommended)

Why Playwright is winning:

Faster than Cypress (2-3x)
Better browser support (Safari!)
More powerful API
Better for CI/CD
Microsoft backing (long-term support)
Better architecture (no browser limitations)

Migration from Cypress:

API similar but different
Rewrite tests (no automatic migration)
Worth it for better features

Current status (2025):

Rapidly growing (40% market share)
Industry standard for new projects
Recommended over Cypress for most cases
Will likely become dominant

Puppeteer (2017, Google)

Status: Still used for automation

const puppeteer = require('puppeteer');

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

// Headless Chrome automation
// PDF generation
// Scraping
// Not primarily for testing

Pros of Puppeteer:

✅ Chrome DevTools Protocol (powerful)
✅ Great for automation (scraping, PDFs)
✅ Headless Chrome control
✅ Google backing
✅ Good documentation
✅ Fast

Cons of Puppeteer:

❌ Chrome/Chromium only
❌ Not designed for testing (use Playwright)
❌ No multi-browser
❌ Less testing features

When to use Puppeteer (2025):

✅ Web scraping
✅ PDF generation
✅ Screenshots
✅ Browser automation (non-testing)
❌ NOT for E2E testing (use Playwright)

Current status (2025):

Still maintained
Good for automation
Playwright better for testing
Use for scraping/PDFs, not testing

Build Tools & Module Systems

Module Bundlers Evolution

RequireJS (2010) - AMD

Status: Dead

// AMD (Asynchronous Module Definition)
define(['jquery', 'lodash'], function($, _) {
    return {
        doSomething: function() {
            // ...
        }
    };
});

Browserify (2011)

Status: Dead

When it became legacy: ~2015-2016

Peak usage: 2012-2015

What replaced it: Webpack, Rollup

Problem it solved:

🎯 Node.js had require() for modules, browsers didn't
🎯 Wanted to use npm packages in the browser
🎯 No standard module system for browsers (before ES6 modules)
🎯 Had to manually include <script> tags in order

// Before Browserify - Manual script tags in HTML
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="app.js"></script>
// Order matters! Dependencies must load first

// With Browserify - Use Node.js style require()
const $ = require('jquery');
const _ = require('lodash');

// Build
browserify app.js -o bundle.js
// Creates single bundle with all dependencies

Pros of Browserify:

✅ First to bring Node.js modules to browser
✅ Simple concept
✅ npm packages in browser
✅ Unix philosophy (do one thing)
✅ Streaming

Cons of Browserify:

❌ No code splitting
❌ No hot module replacement
❌ Slower than Webpack
❌ Limited features
❌ No tree shaking
❌ No asset handling (CSS, images)
❌ Webpack more powerful

Current status: Dead, use Webpack/Vite/Rollup

Webpack (2012-Present)

Status: Still dominant but challenged

Problem it solved:

🎯 Browserify only handled JavaScript, not CSS/images/fonts
🎯 No code splitting (one giant bundle = slow loading)
🎯 No Hot Module Replacement (had to refresh entire page)
🎯 Complex apps needed asset pipeline (CSS, images, fonts, etc.)
🎯 Needed build optimizations (minification, tree shaking)

Evolution:

// Webpack 1 (2014)
module.exports = {
    entry: './app.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader' }
        ]
    }
};

// Webpack 2 (2017) - Tree shaking
module.exports = {
    entry: './app.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader' }
        ]
    }
};

// Webpack 4 (2018) - Zero config
// No config needed for simple cases
module.exports = {
    mode: 'production', // or 'development'
    entry: './src/index.js'
};

// Webpack 5 (2020) - Module Federation
module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'app1',
            remotes: {
                app2: 'app2@http://localhost:3002/remoteEntry.js'
            }
        })
    ]
};

// Code splitting
import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
    // Use lodash
});

Pros of Webpack:

✅ Powerful plugin system (thousands of plugins)
✅ Code splitting (dynamic imports)
✅ Hot Module Replacement (HMR)
✅ Handles everything (CSS, images, fonts, etc.)
✅ Large ecosystem
✅ Tree shaking
✅ Production optimizations
✅ Module Federation (micro-frontends)
✅ Mature and battle-tested
✅ Works with any framework
✅ Great for complex projects

Cons of Webpack:

❌ Slow builds (especially large projects)
❌ Complex configuration (webpack.config.js hell)
❌ Steep learning curve
❌ Slow HMR (compared to Vite)
❌ Large config files
❌ Hard to debug
❌ Newer tools much faster

When to use Webpack (2025):

✅ Legacy projects already using it
✅ Need Module Federation
✅ Complex build requirements
✅ Enterprise projects (proven at scale)
❌ NOT recommended for new projects (use Vite)

What's replacing Webpack:

Vite (most new projects)
Turbopack (Next.js)
esbuild (some projects)

Current status (2025):

Still widely used (50% of projects)
Webpack 5 stable
Being replaced by Vite in new projects
Still good for complex needs
Not recommended for new projects unless specific needs

Rollup (2015)

Status: Popular for libraries

Problem it solved:

🎯 Webpack bundles were too large for libraries
🎯 Webpack's tree-shaking wasn't good enough
🎯 Libraries needed multiple output formats (ESM, CJS, UMD)
🎯 Webpack added too much runtime code (overhead)
🎯 ES6 modules needed a bundler that understood them natively

// rollup.config.js
export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'esm' // or 'cjs', 'umd', 'iife'
    },
    plugins: [
        resolve(),
        commonjs(),
        babel()
    ]
};

// Better tree-shaking than Webpack
// Smaller bundles
// ES modules native

Pros of Rollup:

✅ Better tree-shaking than Webpack
✅ Smaller bundles
✅ ES modules native
✅ Simpler config than Webpack
✅ Great for libraries
✅ Multiple output formats (ESM, CJS, UMD)
✅ Fast builds

Cons of Rollup:

❌ Not great for applications (use Vite)
❌ Less features than Webpack
❌ Smaller plugin ecosystem
❌ No HMR (use Vite for that)
❌ Code splitting less mature

When to use Rollup (2025):

✅ Building libraries (npm packages)
✅ Need multiple output formats
✅ Tree-shaking critical
❌ NOT for applications (use Vite)

Use case: Libraries (React, Vue, Svelte all use Rollup)

Current status (2025):

Standard for library builds
Used by Vite for production builds
Not for applications directly

Parcel (2017)

Status: Niche/Declining

When it started declining: ~2020-2021

What replaced it: Vite

Problem it solved:

🎯 Webpack configuration was too complex (webpack.config.js hell)
🎯 Beginners struggled with build tools
🎯 Wanted "just work" experience (zero config)
🎯 Setting up Webpack + Babel + loaders took hours
🎯 Needed faster builds (multi-core processing)

# Before Parcel - Webpack config nightmare
// webpack.config.js (100+ lines)
// .babelrc
// package.json with 20+ dev dependencies
// Hours of setup

# With Parcel - Zero config
parcel index.html

# That's it! Automatically handles:
# - JavaScript (Babel)
# - TypeScript
# - CSS/SCSS
# - Images
# - Hot reload

Pros of Parcel:

✅ Zero config (truly zero)
✅ Fast (multi-core)
✅ Handles everything automatically
✅ Great for beginners
✅ Built-in dev server
✅ HMR out of the box

Cons of Parcel:

❌ Less control than Webpack
❌ Smaller ecosystem
❌ Some edge cases buggy
❌ Slower than Vite
❌ Less mature
❌ Configuration limited when needed

Why it didn't win:

Webpack too entrenched (at the time)
Less control for complex projects
Vite came along (faster, better)

Current status (2025):

Parcel 2 released but not popular
Vite won the "fast bundler" race
Not recommended (use Vite instead)

Vite (2020)

Status: Rising rapidly

Problem it solved:

🎯 Webpack dev server was SLOW (30+ seconds to start on large projects)
🎯 Hot Module Replacement was slow (seconds to see changes)
🎯 Rebuilding entire bundle on every change was wasteful
🎯 Browsers now support ES modules natively - why bundle in dev?
🎯 Developer experience was painful on large projects

The breakthrough:

✨ Dev: Use native ES modules (no bundling!) = instant start
✨ Prod: Use Rollup (optimized bundles)
✨ Pre-bundle dependencies with esbuild (100x faster than Webpack)

// Before Vite - Webpack dev server
npm run dev
// Wait 30-60 seconds...
// Make change
// Wait 3-5 seconds for HMR...

// With Vite
npm run dev
// Server starts in 200ms!
// Make change
// See update in 50ms!

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()]
});

// Dev server
vite

// Build
vite build

Pros of Vite:

✅ Extremely fast dev server (instant start)
✅ Lightning-fast HMR (instant updates)
✅ Native ESM in development
✅ Rollup for production (optimized)
✅ Simple configuration
✅ Great developer experience
✅ Plugin ecosystem growing
✅ TypeScript support
✅ CSS/Asset handling
✅ Framework agnostic
✅ Pre-bundling (esbuild)

Cons of Vite:

❌ Newer (less mature than Webpack)
❌ Some edge cases with legacy code
❌ Smaller plugin ecosystem than Webpack
❌ Dev/prod differences (ESM vs bundled)
❌ Some libraries don't work well with ESM

Why Vite is winning:

10-100x faster dev server than Webpack
Instant HMR (no rebuild)
Better developer experience
Simple configuration
Modern approach (ESM-first)

How it works:

// Development: Native ESM (no bundling!)
import { createApp } from 'vue';
// Browser loads this directly via HTTP/2

// Production: Rollup bundling
// Optimized, tree-shaken, code-split

When to use Vite (2025):

✅ New projects (highly recommended)
✅ Any framework (React, Vue, Svelte, etc.)
✅ Want fast development
✅ Modern browsers target
✅ TypeScript projects

Adoption:

Vue 3 (official build tool)
Svelte (SvelteKit)
Solid.js (SolidStart)
Qwik
React (growing adoption)
Recommended by most frameworks

Current status (2025):

Rapidly growing (30% market share)
Standard for new projects
Recommended over Webpack
Will likely become dominant

esbuild (2020)

Status: Used as build tool in other tools (not standalone)

Creator: Evan Wallace (Figma)

// Extremely fast (written in Go)
require('esbuild').build({
    entryPoints: ['app.js'],
    bundle: true,
    outfile: 'out.js'
});

Pros of esbuild:

✅ Extremely fast (10-100x faster than Webpack)
✅ Written in Go (native performance)
✅ TypeScript/JSX built-in
✅ Tree shaking
✅ Minification
✅ Source maps
✅ Simple API

Cons of esbuild:

❌ Limited features (by design)
❌ No HMR
❌ No code splitting (initially)
❌ Not a complete build tool
❌ Limited plugin ecosystem
❌ Not meant for direct use

When to use esbuild (2025):

✅ As part of other tools (Vite uses it)
✅ Simple bundling needs
✅ Speed critical
❌ NOT for full applications (use Vite)

How it's used:

Vite uses esbuild for pre-bundling dependencies
Some projects use it directly for simple builds
Building blocks for other tools

Current status (2025):

Widely used indirectly (via Vite, etc.)
Not meant as standalone build tool
Proven technology

Turbopack (2022, Vercel)

Status: In development (beta)

Creator: Vercel (Tobias Koppers, creator of Webpack)

// Webpack successor (written in Rust)
// Used in Next.js 13+
// next dev --turbo

Pros of Turbopack:

✅ Extremely fast (written in Rust)
✅ Incremental computation (caches everything)
✅ Webpack successor (by same author)
✅ Designed for scale
✅ Vercel backing

Cons of Turbopack:

❌ Still experimental (not production-ready)
❌ Only for Next.js (currently)
❌ Not standalone yet
❌ Limited documentation
❌ Unproven at scale

When to use Turbopack (2025):

✅ Next.js 13+ (experimental)
❌ NOT for production yet
❌ NOT standalone

Current status (2025):

Beta in Next.js
Promising but not ready
Wait for stable release
Future looks bright

Bun (2023)

Status: All-in-one tool

# Bundler built-in
bun build ./index.tsx --outdir ./dist

# Extremely fast
# No configuration needed

Transpilers

Babel (2014-Present)

Status: Still essential

Problem it solved:

🎯 ES6 released but browsers didn't support it (2015)
🎯 Wanted to use new JavaScript features (arrow functions, classes, etc.)
🎯 Had to wait years for browser support
🎯 Different browsers supported different features
🎯 JSX needed transformation (React)

The breakthrough:

✨ Write modern JavaScript, run anywhere - Transpiles ES6+ to ES5
✨ Plugin system - Transform any syntax
✨ Polyfills - Add missing features (Promise, Array.from, etc.)
✨ JSX support - Transform React JSX to JavaScript
✨ Target specific browsers - Only transpile what's needed

// 2015 - Problem: Browsers don't support ES6
// Write this (ES6)
const add = (a, b) => a + b;
class Person {
    constructor(name) {
        this.name = name;
    }
}

// But browsers only understand this (ES5)
var add = function(a, b) {
    return a + b;
};
function Person(name) {
    this.name = name;
}

// Babel solves this - Write ES6, Babel converts to ES5
// You write modern code, users get compatible code

Evolution:

// 2015: Babel 6 - Modular
{
    "presets": ["es2015", "react"],
    "plugins": ["transform-class-properties"]
}

// 2018: Babel 7 - @babel/
{
    "presets": [
        ["@babel/preset-env", {
            "targets": "> 0.25%, not dead"
        }],
        "@babel/preset-react"
    ]
}

// What it does
// Input (ES6+)
const add = (a, b) => a + b;
class Person {
    name = "John";
}

// Output (ES5)
var add = function(a, b) {
    return a + b;
};
var Person = function Person() {
    this.name = "John";
};

Why still needed:

Browser compatibility
JSX transformation
TypeScript (alternative to tsc)
Experimental features

SWC (2020)

Status: Growing (Rust-based, faster)

// 20x faster than Babel
// Used by Next.js, Parcel, Deno

// .swcrc
{
    "jsc": {
        "parser": {
            "syntax": "typescript",
            "tsx": true
        },
        "transform": {
            "react": {
                "runtime": "automatic"
            }
        }
    }
}

Task Runners

Task Runners: Grunt (2012) → Gulp (2013) → npm scripts

Grunt (2012)

Status: Dead

When it became legacy: ~2015-2016

What replaced it: Gulp, then npm scripts

Problem it solved:

🎯 No standard way to automate build tasks (minify, concat, compile)
🎯 Had to manually run multiple commands
🎯 Build scripts were bash/shell scripts (not cross-platform)
🎯 Needed task automation in JavaScript

// Before Grunt - Manual commands
uglifyjs app.js -o app.min.js
sass styles.scss styles.css
imagemin images/* -o dist/images
// Run each command manually!

// With Grunt - Automated tasks
module.exports = function(grunt) {
    grunt.initConfig({
        uglify: {
            build: {
                src: 'app.js',
                dest: 'app.min.js'
            }
        },
        sass: {
            dist: {
                files: {
                    'styles.css': 'styles.scss'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-sass');

    grunt.registerTask('default', ['uglify', 'sass']);
};

// Run all tasks
grunt

Pros of Grunt:

✅ First popular task runner
✅ Large plugin ecosystem
✅ Configuration-based (declarative)
✅ Easy to understand

Cons of Grunt:

❌ Slow (file I/O heavy)
❌ Verbose configuration
❌ Temporary files everywhere
❌ Not streaming
❌ Complex for simple tasks

Current status: Dead, don't use

Gulp (2013)

Status: Legacy/Declining

When it became legacy: ~2017-2018

What replaced it: npm scripts, build tools (Webpack, Vite)

Problem it solved:

🎯 Grunt was too slow (wrote temp files to disk constantly)
🎯 Grunt configuration was verbose and hard to read
🎯 Wanted streaming (in-memory processing)
🎯 Needed code over configuration (more flexible)

// Grunt - Configuration-based (slow, verbose)
grunt.initConfig({
    uglify: {
        build: {
            src: 'app.js',
            dest: 'app.min.js'
        }
    }
});
// Writes temp files to disk

// Gulp - Code-based (fast, streaming)
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');

gulp.task('scripts', function() {
    return gulp.src('src/**/*.js')
        .pipe(uglify())           // In-memory streaming
        .pipe(gulp.dest('dist'));
});

gulp.task('styles', function() {
    return gulp.src('src/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist'));
});

gulp.task('default', gulp.parallel('scripts', 'styles'));

Pros of Gulp:

✅ Streaming (faster than Grunt)
✅ Code over configuration
✅ Simpler than Grunt
✅ Good plugin ecosystem
✅ Flexible

Cons of Gulp:

❌ Another abstraction layer
❌ npm scripts can do most things
❌ Build tools handle bundling better
❌ Maintenance overhead
❌ Less relevant with modern tools

Current status: Still used in some legacy projects, not recommended

npm scripts (2010-Present)

Status: Standard

What replaced: Grunt, Gulp

// package.json
{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "test": "vitest",
        "lint": "eslint src",
        "format": "prettier --write src",
        "preview": "vite preview"
    }
}

Pros of npm scripts:

✅ No extra dependencies
✅ Simple and direct
✅ Standard across projects
✅ Easy to understand
✅ No abstraction layer
✅ Works with any tool

Cons of npm scripts:

❌ Limited for complex tasks
❌ Cross-platform issues (Windows vs Unix)
❌ No streaming
❌ Can get messy for complex workflows

When to use (2025):

✅ Always (standard approach)
✅ Simple task running
✅ Calling build tools

Modern approach:

npm/pnpm/yarn scripts for task running
Build tools (Vite, Webpack) for bundling
No need for Grunt/Gulp

Package Management

npm (2010-Present)

Status: Default, still dominant

Problem it solved:

🎯 No standard way to share JavaScript libraries
🎯 Had to manually download and include libraries
🎯 No dependency management (had to track versions manually)
🎯 No way to publish/discover packages
🎯 Dependency hell (conflicting versions)

The breakthrough:

✨ Central registry - One place for all packages (npmjs.com)
✨ Automatic dependencies - Install package + all its dependencies
✨ Version management - Semantic versioning (^, ~, exact)
✨ Scripts - Run tasks (npm run build, npm test)
✨ Largest ecosystem - 2+ million packages

// Before npm - Manual download
// 1. Go to jQuery website
// 2. Download jquery.min.js
// 3. Copy to project
// 4. Add <script src="jquery.min.js"></script>
// 5. Repeat for every library
// 6. Track versions manually
// 7. Update manually

// With npm - Automatic
npm install jquery
// Downloads jquery + all dependencies
// Tracks versions in package.json
// Updates with npm update

# Evolution
npm install express # 2010

npm install --save express # 2012-2016

npm install express # 2017+ (--save default)

npm ci # 2018 (clean install for CI)

# package.json
{
    "dependencies": {
        "express": "^4.18.0"
    },
    "devDependencies": {
        "typescript": "^5.0.0"
    }
}

# package-lock.json (2016)
# Ensures consistent installs

Yarn (2016)

Status: Still popular

Problem it solved:

🎯 npm was slow (sequential installs)
🎯 npm was non-deterministic (different installs could differ)
🎯 No offline mode
🎯 Security concerns (no checksums)
🎯 Poor monorepo support

The breakthrough:

✨ Parallel installs - Much faster than npm
✨ Lockfile - Deterministic installs (yarn.lock)
✨ Offline cache - Install without internet
✨ Workspaces - Better monorepo support
✨ Security - Checksums for packages

# npm (2016) - Slow
npm install
# Takes 2-3 minutes, sequential

# Yarn (2016) - Fast
yarn install
# Takes 30 seconds, parallel!

# Yarn 1 (2016) - Faster than npm
yarn add express

# Yarn 2/3 (Berry) (2020) - Plug'n'Play
yarn set version berry

# .yarnrc.yml
nodeLinker: pnp # No node_modules!

# Workspaces
{
    "workspaces": ["packages/*"]
}

Why Yarn:

Faster (initially)
Workspaces (monorepos)
Offline mode
Deterministic

pnpm (2017)

Status: Growing rapidly

# Efficient disk usage (hard links)
pnpm install express

# Strict node_modules structure
# Prevents phantom dependencies

# Workspaces
{
    "pnpm": {
        "workspaces": ["packages/*"]
    }
}

Why pnpm is winning:

Saves disk space (shared dependencies)
Faster than npm
Strict (catches bugs)
Great for monorepos

Disk usage comparison:

npm: 1 GB for 3 projects
Yarn: 1 GB for 3 projects
pnpm: 350 MB for 3 projects

Bun (2023)

Status: Fastest

# Extremely fast
bun install

# Compatible with npm
# 10-20x faster

Current Landscape (2025)

Frontend Frameworks

Market Share (approximate):

React (40%) - Still dominant
- Huge ecosystem
- Job market leader
- Meta backing
- Next.js standard
Vue (20%) - Strong second
- Easier learning curve
- Great documentation
- Popular in Asia
- Nuxt.js mature
Angular (15%) - Enterprise
- TypeScript native
- Complete framework
- Enterprise adoption
- Google backing
Svelte (10%) - Rising
- Best DX
- Smallest bundles
- SvelteKit mature
- Growing fast
Others (15%)
- Solid.js (performance)
- Qwik (resumability)
- Preact (React alternative)
- Alpine.js (lightweight)

Meta-Frameworks (Recommended)

Don't use frameworks alone anymore!

React → Next.js or Remix
Vue → Nuxt.js
Svelte → SvelteKit
Solid → SolidStart
Angular → Analog (new)

Why meta-frameworks:

SSR/SSG out of the box
Routing
API routes
Optimizations
Better DX

State Management (2025)

React:

TanStack Query - Server state
Zustand - Client state (simple)
Jotai - Atomic state
Redux Toolkit - Complex apps
Context + Hooks - Simple apps

Vue:

Pinia - Official (replaced Vuex)

Angular:

NgRx - Redux-like
Signals - Built-in (Angular 16+)

Build Tools (2025)

Recommended:

Vite - Modern projects
Webpack - Legacy/complex needs
Turbopack - Next.js
Bun - All-in-one

For libraries:

Rollup or tsup

Testing (2025)

Unit/Integration:

Vitest - Modern (Vite projects)
Jest - Established (React)
Bun Test - Bun projects

E2E:

Playwright - Best overall
Cypress - Great DX

Package Managers (2025)

Recommended:

pnpm - Best for most
npm - Default, reliable
Yarn - Workspaces
Bun - Speed

TypeScript (2025)

Status: Industry standard

Adoption:

80%+ of new projects
Required for most jobs
All major frameworks support it
Better tooling

Recommendation: Use TypeScript for everything

Runtime (2025)

Server-side:

Node.js - Standard
Bun - Fast alternative
Deno - Secure alternative

Edge:

Cloudflare Workers
Vercel Edge
Deno Deploy

What to Learn in 2025

For Beginners

JavaScript fundamentals
- ES6+ features
- Async/await
- Modules
- Array methods
TypeScript basics
- Types, interfaces
- Generics
- Type inference
React + Next.js
- Hooks
- Server Components
- App Router
Modern tooling
- Vite
- pnpm
- Vitest

For Returning Developers

If you left in 2010 (jQuery era):

Learn:

ES6+ (let/const, arrow functions, classes, modules)
async/await
React or Vue
TypeScript
Next.js or Nuxt.js
Modern build tools (Vite)

If you left in 2015 (Early React):

Learn:

React Hooks (replaced classes)
TypeScript
Server Components (Next.js 13+)
Modern state management (TanStack Query, Zustand)
Vite

If you left in 2020:

Learn:

Server Components
Signals (Angular, Solid)
Bun/Deno
Astro (for content sites)
Playwright (testing)

Key Takeaways

What Died

jQuery - Native APIs good enough
AngularJS 1.x - Replaced by Angular 2+
Backbone.js - Too minimal
Grunt/Gulp - npm scripts enough
Moment.js - Too large, mutable
Bower - npm won
CoffeeScript - ES6+ made it obsolete

What Survived

React - Adapted (Hooks, Server Components)
Vue - Evolved (Composition API)
Angular - Complete rewrite
Node.js - Still standard
npm - Still default
Webpack - Still used (but challenged)
TypeScript - Now essential

What's New and Hot

Vite - Fast builds
pnpm - Efficient packages
Vitest - Fast testing
Playwright - Best E2E
Bun - Fast runtime
Server Components - New paradigm
Signals - Fine-grained reactivity
Astro - Content sites

The Biggest Changes

TypeScript everywhere (2012 → 2025)
Frameworks required (jQuery → React/Vue/Angular)
Build tools essential (None → Webpack → Vite)
Server-side rendering (SPA → SSR/SSG)
Component-based (jQuery → Components)
Type safety (Dynamic → Static typing)
Modern JavaScript (ES5 → ES2025)
Testing standard (Optional → Required)
Monorepos common (Single → Workspaces)
Edge computing (Server → Edge)

Conclusion

JavaScript has evolved from a simple scripting language to a comprehensive ecosystem powering everything from websites to servers to mobile apps to desktop applications.

The journey:

1995-2005: Birth and browser wars
2005-2009: AJAX and jQuery revolution
2009-2015: Node.js and modern frameworks
2015-2020: ES6+ and React dominance
2020-2025: TypeScript, Server Components, and performance

The future:

More server-side rendering
Better performance (Signals, Resumability)
Type safety everywhere
Edge computing
AI integration
WebAssembly integration

For developers returning to JavaScript: The ecosystem is more mature, more powerful, and more complex. But the fundamentals remain: build great user experiences, write maintainable code, and keep learning.

Welcome back to JavaScript! 🎉

Technology Status Summary Table

Frontend Frameworks

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
jQuery	Legacy	2017-2018	Native APIs, React, Vue	❌ Don't use for new projects
Backbone.js	Dead	2015-2016	React, Vue, Angular	❌ Migrate away
Knockout.js	Legacy	2016-2017	Vue, React	❌ Migrate away
AngularJS 1.x	Dead	2016 (EOL 2022)	Angular 2+, React, Vue	❌ Migrate immediately
Ember.js	Declining	2015-2016	React, Vue	⚠️ Only if already using
React	Dominant	-	-	✅ Highly recommended
Vue	Strong	-	-	✅ Highly recommended
Angular 2+	Stable	-	-	✅ Good for enterprise
Svelte	Growing	-	-	✅ Recommended for new projects
Solid.js	Niche	-	-	⚠️ Experimental/side projects
Qwik	Experimental	-	-	⚠️ Not production-ready

Testing Frameworks

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
QUnit	Dead	2014-2015	Jest, Mocha	❌ Don't use
Jasmine	Declining	2016-2017	Jest, Vitest	⚠️ Only for Angular legacy
Mocha	Declining	2017-2018	Jest, Vitest	⚠️ Legacy projects only
Jest	Dominant	-	Vitest (for Vite)	✅ Standard for React
Vitest	Growing	-	-	✅ Recommended for Vite projects
Bun Test	Experimental	-	-	⚠️ Not production-ready

E2E Testing

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Selenium	Legacy	2017-2018	Playwright, Cypress	⚠️ Only for legacy/multi-language
Protractor	Dead	2020 (EOL 2022)	Playwright, Cypress	❌ Migrate immediately
Cypress	Popular	-	Playwright (partially)	✅ Good for SPAs
Playwright	Growing	-	-	✅ Recommended for new projects
Puppeteer	Niche	-	-	✅ For automation, not testing

Build Tools

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Browserify	Dead	2015-2016	Webpack, Rollup	❌ Don't use
Webpack	Mature	-	Vite (for apps)	⚠️ Legacy projects, complex needs
Rollup	Stable	-	-	✅ For libraries only
Parcel	Declining	2020-2021	Vite	❌ Use Vite instead
Vite	Growing	-	-	✅ Highly recommended for apps
esbuild	Tool	-	-	✅ As part of other tools
Turbopack	Experimental	-	-	⚠️ Not production-ready

Task Runners

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Grunt	Dead	2015-2016	Gulp, npm scripts	❌ Don't use
Gulp	Legacy	2017-2018	npm scripts	⚠️ Legacy projects only
npm scripts	Standard	-	-	✅ Always use

Package Managers

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Bower	Dead	2015	npm	❌ Don't use
npm	Standard	-	-	✅ Default, reliable
Yarn	Stable	-	-	✅ Good for monorepos
pnpm	Growing	-	-	✅ Recommended for most
Bun	Experimental	-	-	⚠️ Experimental

Meta-Frameworks

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Next.js	Dominant	-	-	✅ Standard for React
Nuxt.js	Strong	-	-	✅ Standard for Vue
Remix	Growing	-	-	✅ Good alternative to Next.js
SvelteKit	Stable	-	-	✅ Standard for Svelte
Astro	Growing	-	-	✅ Great for content sites

State Management (React)

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Redux	Mature	-	Redux Toolkit	⚠️ Use Redux Toolkit instead
Redux Toolkit	Standard	-	-	✅ For complex state
MobX	Declining	-	Zustand, Jotai	⚠️ Legacy projects only
Context API	Built-in	-	-	✅ For simple state
Zustand	Growing	-	-	✅ Recommended for client state
Jotai	Growing	-	-	✅ Recommended for atomic state
TanStack Query	Standard	-	-	✅ Required for server state

Utility Libraries

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Lodash	Stable	-	Native JS (partial)	✅ Still useful
Underscore	Legacy	2015	Lodash	❌ Use Lodash
Moment.js	Deprecated	2020	date-fns, Day.js	❌ Migrate away
date-fns	Standard	-	-	✅ Recommended
Day.js	Standard	-	-	✅ Recommended (smaller)

Runtimes

Technology	Status	Legacy Since	Replaced By	Recommendation 2025
Node.js	Standard	-	-	✅ Industry standard
Deno	Niche	-	-	⚠️ Experimental/specific use cases
Bun	Experimental	-	-	⚠️ Promising but not production-ready

Quick Decision Guide (2025)

Starting a New Project?

Frontend Framework:

React → Use Next.js (most jobs, largest ecosystem)
Vue → Use Nuxt.js (easier learning curve, great DX)
Svelte → Use SvelteKit (best DX, smallest bundles)
Angular → Only if enterprise/large team

Build Tool:

Vite (recommended for 90% of projects)
Webpack (only if specific needs)

Testing:

Unit: Vitest (if using Vite) or Jest (if React)
E2E: Playwright (recommended) or Cypress (if prefer DX)

Package Manager:

pnpm (recommended for most)
npm (default, reliable)
yarn (if need workspaces)

State Management (React):

Server state: TanStack Query (required)
Client state: Zustand (simple) or Jotai (atomic)
Complex: Redux Toolkit

TypeScript:

✅ Always use TypeScript (industry standard)

Migration Priority Guide

Migrate Immediately (Dead/EOL)

AngularJS 1.x → Angular/React/Vue (EOL 2022)
Protractor → Playwright/Cypress (EOL 2022)
Moment.js → date-fns/Day.js (deprecated)
Bower → npm/pnpm (dead)
Grunt → npm scripts (dead)

Migrate Soon (Legacy)

jQuery → React/Vue + Native APIs
Backbone/Knockout → Modern framework
Mocha/Jasmine → Jest/Vitest
Selenium → Playwright (if JavaScript)
Gulp → npm scripts
Webpack → Vite (for new features)

Can Wait (Still Supported)

Redux → Redux Toolkit (same ecosystem)
Jest → Vitest (if moving to Vite)
Cypress → Playwright (both good)
npm → pnpm (both work fine)

Last updated: December 4, 2025 - 30 Years of JavaScript

Coil and Ktor in Kotlin Multiplatform Compose project

Nayden Gochev — Fri, 14 Jun 2024 09:22:50 +0000

Many people are trying but having a hard time adding Coil in a Multiplatform compose project that works on both JVM/Android/iOS and WASM.

Now we have to use Ktor since okHttp is android only for now.
We will be using:

Coil 3.0 https://coil-kt.github.io/coil/
Ktor 3.0 with wasm support

After spending half a day making it work I decide to share it for others.

I will be using the latest versions that support wasm as of 14.06.2024, for later readers and experimenting you might want to upgrade the versions.

1) Libraries and versions

In short first you need to add ktor. In your libs.versions.toml add

[versions]

ktor = "3.0.0-wasm2"

[libraries]
ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }
ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
ktor-client-java = { group = "io.ktor", name = "ktor-client-java", version.ref = "ktor" }
ktor-serialization-kotlinx-json = { group = "io.ktor", name = "ktor-serialization-kotlinx-json", version.ref = "ktor" }
ktor-client-serialization = { group = "io.ktor", name = "ktor-client-serialization", version.ref = "ktor" }
ktor-client-content-negotiation = { group = "io.ktor", name = "ktor-client-content-negotiation", version.ref = "ktor" }
ktor-client-json = { group = "io.ktor", name = "ktor-client-json", version.ref = "ktor" }
ktor-client-logging = { group = "io.ktor", name = "ktor-client-logging", version.ref = "ktor" }

now you can also create a bundle since this makes your build.gradle.kts far smaller so just add the bundle as well

[bundles]
ktor-common = ["ktor-client-core", "ktor-client-json", "ktor-client-logging", "ktor-client-serialization", "ktor-client-content-negotiation", "ktor-serialization-kotlinx-json"]

Now you can stop here if you only need to use ktor in your multiplatform compose projects, in such case scroll down to point 2 updating your build script, however if you want to use coil you need 4 extra dependancies

Add this version

[versions]
coilComposeCore = "3.0.0-alpha06"

and this 4 libraries

[libraries]

coil = { module = "io.coil-kt.coil3:coil", version.ref = "coilComposeCore" }
coil-compose-core = { module = "io.coil-kt.coil3:coil-compose-core", version.ref = "coilComposeCore" }
coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coilComposeCore" }
coil-network-ktor = { module = "io.coil-kt.coil3:coil-network-ktor", version.ref = "coilComposeCore" }

Now you are good to go to your build.gradle.kts file

updating your build script

Open your build.gradle.kts

add maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental") to your repositories so you can download the ktor wasm version

allprojects {
    repositories {
        google()
        mavenCentral()
maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental")
    }
}

then in commonMain.dependancies add

commonMain.dependencies {
....
            implementation(libs.bundles.ktor.common)
            implementation(libs.coil.compose.core)
            implementation(libs.coil.compose)
            implementation(libs.coil)
            implementation(libs.coil.network.ktor)

in Android dependancies add

        androidMain.dependencies {
....
  implementation(libs.ktor.client.okhttp)
        }

in iOS/Apple dependancies add

      iosMain.dependencies {
            implementation(libs.ktor.client.darwin)
        }

in JVM dependancies add

 jvmMain.dependencies {
            ....
            implementation(libs.ktor.client.java)
        }

Thats it more or less for dependancies.

NOTE you might need also kotlinx.serialization, if you have it ignroe this and scroll to 3 how to verify coil is working.
so in libs add

[versions]

kotlinx-serialization = "1.6.3"

[libraries]

kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinx-serialization" }

then in your gradle kts file

plugins {
....
    alias(libs.plugins.kotlinx.serialization)
}

and only in

commonMain.dependencies {
....
implementation(libs.kotlinx.serialization.json)

Thats it you are good to use Ktor in your multiplatform compose project or Ktor + Coil .

How to verify coil is working ?

Example how to use coil can be found over the internet but in short in your App.kt in commonMain add this function

fun getAsyncImageLoader(context: PlatformContext)=
    ImageLoader.Builder(context).crossfade(true).logger(DebugLogger()).build()

Then in your App function just add this

@Composable
internal fun App() = AppTheme() {

    setSingletonImageLoaderFactory { context ->
        getAsyncImageLoader(context)
    }
.... rest code

and then you can use Coil.. for example like this :

                            AsyncImage(
                                model = "https://1.bp.blogspot.com/-m4g5Q9WZuLw/YO7FxYJsnsI/AAAAAAAA6fs/nyDiNA_6EHMrPw3qRLJ7FcR1-MoC4rkZwCLcBGAsYHQ/s0/javabeer.jpg",
                                placeholder = painterResource(Res.drawable.ic_cyclone),
                                contentDescription = null,
                                contentScale = ContentScale.Crop,
                                modifier = Modifier.clip(CircleShape)
                            )

I hope this is helpful for someone ! And go enjoy coding with multiplatform compose, I hope I saved you the 4 hours I lost.

P.S. I use kotlin 2.0 and compose 1.6.11 and serialization 1.6.3

Creating UX with TEXT(markdown)

Nayden Gochev — Thu, 31 Mar 2022 18:33:16 +0000

Hello everyone, I would like to present an IDEA or a sideproject ;) I play with for a while now.

Who am I

I am a coder/programmer, not a UX person but very often I have to create some UX screens. Also, I know many of you are creating UX screens quite fast in tools like Figma and etc but it still takes time to create the wireframes, align everything to export it to share it and so on.

I am a HUGE fan of Markdown so I was thinking can we use Markdown to create a mockup ? or wireframes?
So at the end, I created something I call utext spelt as "you text" so you text and get UX.

The POC

Currently, I have only POC the grammar and language and parser are created using https://pegjs.org/ as parser/translator of the code.

You can play with the project see here https://utext.github.io/

if you click on the "?" and wait a bit you will see some examples.
But just to show if you want to display a login form for example it will look like this :


===Login===
username : ___
password: *___
===

Which generates this

if you want to customize the buttons you can for example


===Login===
username : ___
password: *___
===[login][dont login]===

Will give you this:

The idea is to VISUALLY explain what and how it should look and voala you have the wireframe. I even went a step further you can export this as HTML code even and even change the theme if you want to see how it looks with different UI.

All the elements supported are basically everything from HTML + some bootsrap elements. You can check them in the help at the ? in the website.

A Card example will be something like this

---Bootstrap Cards works too---
I am the content [random btn]

you can otuput a table too : 

|header1|header2|
|col1   |col2   |
|col1|col2|
---
*Note should start and end with at least 3 dashes*

Which will generate this :

Any feedback is welcome :) I just made it for fun :) and just want to hear how this looks to you :) any comments ?

A yes most markdown stuff like image or heading and etc just work, go play with it :) bugs are expected ! :)

P.S. Since it is a plain JavaScript (no server side) you can save only in gist in your github account or load a gist... or copy paste :)

Reddit In Comics Style

Nayden Gochev — Thu, 05 Nov 2020 12:22:12 +0000

Hello guys, as a follow up of my previous post almost an year ago https://dev.to/gochev/dev-to-in-web-comics-style-36ca which was to make this amazing webside https://dev.to in comics style (it is a bit outdated btw) I just tried with Reddit.

Again I am no CSS or frontend person I just love comics
And again the REDDIT css will be broken very soon because their selectors and CSS classes looks like this

.Y4MkVr6trrdypfZVUkpIA, ._2vkeRJojnV7cb9pMlPHy7d

So I guess they are server side randomly generated and they change from time to time.

Still I will enjoy it till I can.

I have used an extension Stylus for chrome to apply the additional CSS on top of the reddit.com default css.

The CSS I wrote can be found here
https://gist.github.com/gochev/eccfab4b9038ff460a3eb1f9ca49c5b3

After applying it your reddit will look like this on small view:

Or like this in general

The article read view looks like this :

I just hope reddit can make a new style since the old one is so so ugly. Even linkedin had an updated style since today.. cmon :) it's about time.

I hope someone can improve it and actually make it better.
Right now there are only 2 important bits. One is the general borders change :

    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 30% 2% 162% 3%/9% 96% 2% 99% !important;

And another one for more article or more "boxed" shaped boxes

    border: solid black;
    border-color: black;
    border-width: 3px 3px 5px 5px;

And of course about the titles font:

@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}

h3{
    font-family: Bangers !important;
    font-size:22px;
}

Well that's it folks I hope you enjoy it.

Learn Flutter & Dart in 2020 or stick with React ?

Nayden Gochev — Fri, 07 Feb 2020 15:52:49 +0000

Hello everyone,

First of all I have to share I am a Java developer I do NOT do frontend (usually) I do not write mobile apps as well, however I was very impressed by the Flutter presentations and the architecture of Flutter in fact first Dart is a lot like Java and second Flutter is a lot like Swing (The defacto standard Java GUI toolkit) works the same, however it works for different desktop operating systems and not mobile operating systems, since it is released in 1998.

So if anyone is not aware Flutter is a GUI toolkit lets say that gives you the possibility to write a cross mobile applications. It also have an alpha version for a Mac applications (and very, very basic version for Windows and Linux) and it has a Web version in beta.

So the promise is .. lets write once runs everywhere, yup we know where this goes.

However flutter renders everything with Skia, a 2D graphics rendering library that is used..well for Chrome. So it should be pretty fast. Also google claim that they support 60 fps for mobile apps which also sounded amazing. Btw I have to share if you run the debug version of your flutter app it is hell of a slow, you have to make a release build to see this 60 fps.

Anyway it will become better, it will become faster, if google doesn't cancel it. however how is it today ?

I am organizer of a Java conference in my country called jPrime (https://jprime.io) we already have a PWA for the agenda but I was like, lets validate flutter by writing an agenda native app.

So what I did:
Opened the documentation saw the widgets, saw some layout objects (there are TONS) and said lets write.

I watched also 3 video tutorials how to create interface and I have to say the Dart was a bit weird but hey... lets give it a try.

I created a new project.

The final app looked like this:

Keep in mind this are the sessions from last year, since the agenda for 2020 is not yet available but hey... I needed some DATA !

Yes you can click it around GestureSupport class was great.

So my first issue I have to share is Dart. Dart is a language from 2012, that no one actually knows. It is like JavaScript but not really, it is like Java but has functions, it has crazy things like "dynamic" and usually a JSON is converted to Map but what this dynamic is and how to convert it to String lets say was not an easy task and I basically used something like: `${thejson[field]}` yup I put it inside a raw string in order to make it a String (facepalm).

The good thing with dart is they have removed the "new" keyword, at some point .. so you can write things like this:

FlatButton(
  child: Row(
    children: <Widget>[
      Text("Wednesday"),
      Text("(27.05.2020)"),
    ],
  ),
  onPressed: () {},
  color: Colors.deepPurple,
  textColor: Colors.white,
  splashColor: Colors.purpleAccent,
),

which basically is the same as

FlatButton(
  child: new Row(
    children: <Widget>[
      new Text("Wednesday"),
      new Text("(27.05.2020)"),
    ],
  ),
  onPressed: () {},
  color: Colors.deepPurple,
  textColor: Colors.white,
  splashColor: Colors.purpleAccent,
),

You get it there is no requirement for "new" which is great, but it is still a bit.. long right ? This is just for a single button :

12 lines for a single button, so 24 for the two (yes I can create a Widget or a funciton/method). The things is that creating of widget is not easy as in React it is kinda same but you have to extend StatelessWidget and it is like a Class Component in React but with a lot more typing.. and if you need to have a State.. a lot more typing. So basically they are creating REACT with ugly Dart Syntax where the only plus is that there is no "new".

Btw this looks a lot like JavaFX Script, or as it was called in the beginning F3 ? Just check this out

Frame {
            title: "Hello World JavaFX"
            width: 200
            height: 50
            content: Label {
                text: "Hello World"
            }
            visible: true
     }

This is from 2007. It is a bit the same isn't it ?

But the things become a LOT more complex .. ones you need to create the agenda card component. You See in Flutter you dont have CSS, you dont have styles, you have decorators, with properties, a lot of properties, everywhere and a lot of wrapping of rows, columns, wraps, expanded(like a flex widget) and other craziness which might be good for someone that doesn't know CSS and don't want to learn it, but hey I also don't know it.. and this is painful. The only plus is there is constant for everything and the IDE helps but not that match, it helps only with wrapping/unwrapping.

So as an example this component:

Simple right ?
Check the dart/flutter code

Container(
            child: Padding(
              padding: const EdgeInsets.all(6.0),
              child: Card(
                elevation: 8.0,
                margin: new EdgeInsets.symmetric(horizontal: 6.0, vertical: 6.0),
                child: Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: _talksHallA[i].id != _talksHallB[i].id ? MainAxisAlignment.spaceBetween : MainAxisAlignment.center,
                      children: <Widget>[
                        if (_talksHallA[i].id != _talksHallB[i].id)
                          Favorite(session: _talksHallA[i], toggleFavorite: _toggleSessionFavorite,),
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
                            border: Border(
                              bottom:
                                  BorderSide(width: 1.0, color: Colors.grey),
                              top: BorderSide(width: 1.0, color: Colors.grey),
                              left: BorderSide(width: 1.0, color: Colors.grey),
                              right:
                                  BorderSide(width: 1.0, color: Colors.grey),
                            ),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(4.0),
                            child: Text(
                              _talksHallA[i].sessionTime,
                              style: TextStyle(
                                  fontWeight: FontWeight.w600),
                            ),
                          ),
                        ),
                        if (_talksHallA[i].id != _talksHallB[i].id)
                          Favorite(session: _talksHallB[i], toggleFavorite: _toggleSessionFavorite,),
                      ],
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment:
                          (_talksHallA[i].id != _talksHallB[i].id)
                              ? MainAxisAlignment.spaceBetween
                              : MainAxisAlignment.center,
                      children: <Widget>[
                        if (_talksHallA[i].id !=
                            _talksHallB[i].id) //two columns
                          Expanded(
                            child: GestureDetector(
                              onTap: () async {
                                showDialog(
                                    context: context,
                                    builder: (BuildContext context) {
                                      return _getTalkDetailsWidget(_talksHallA[i]);
                                    });
                              },
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    decoration: BoxDecoration(
                                        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
                                        border: Border(
                                          bottom:
                                          BorderSide(width: 1.0, color: Colors.blue),
                                          top: BorderSide(width: 1.0, color: Colors.blue),
                                          left: BorderSide(width: 1.0, color: Colors.blue),
                                          right:
                                          BorderSide(width: 1.0, color: Colors.blue),
                                        )
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.all(2.0),
                                      child: Text(
                                        "Hall A",
                                      ),
                                    ),
                                  ),
                                  _getTalksTitleWidget(_talksHallA[i]),
                                  if (_talksHallA[i].lectorName != null &&
                                      _talksHallA[i].lectorName.isNotEmpty)
                                    Text(
                                      _talksHallA[i].lectorName,
                                      style:
                                      TextStyle(fontWeight: FontWeight.w200),
                                    ),
                                  if (_talksHallA[i].coLectorName != null &&
                                      _talksHallA[i].coLectorName.isNotEmpty)
                                    Text(
                                      _talksHallA[i].coLectorName,
                                      style:
                                      TextStyle(fontWeight: FontWeight.w200),
                                    ),

                                ],
                              ),
                            ),
                            flex: 4,
                          ),
                        if (_talksHallA[i].id ==
                            _talksHallB[i].id) //just one title
                          Center(
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(_talksHallA[i].title,
                                style: TextStyle(
                                    fontWeight: FontWeight.bold),),
                            ),

                          ),
                        if (_talksHallA[i].id != _talksHallB[i].id)
                          Expanded(
                            child: GestureDetector(
                              onTap: () async {
                                showDialog(
                                    context: context,
                                    builder: (BuildContext context) {
                                      return _getTalkDetailsWidget(_talksHallB[i]);
                                    });
                              },
                              child: Column(
                                children: <Widget>[
                                  Container(
                                      decoration: BoxDecoration(
                                        borderRadius: new BorderRadius.all(new Radius.circular(5.0)),
                                        border: Border(
                                          bottom:
                                          BorderSide(width: 1.0, color: Colors.green),
                                          top: BorderSide(width: 1.0, color: Colors.green),
                                          left: BorderSide(width: 1.0, color: Colors.green),
                                          right:
                                          BorderSide(width: 1.0, color: Colors.green),
                                        )
                                      ),
                                    child: Padding(
                                      padding: const EdgeInsets.all(2.0),
                                      child: Text(
                                        "Hall B",
                                      ),
                                    ),
                                  ),

                                  _getTalksTitleWidget(_talksHallB[i]),
                                  if (_talksHallB[i].lectorName != null &&
                                      _talksHallB[i].lectorName.isNotEmpty)
                                    Text(
                                      _talksHallB[i].lectorName,
                                      style:
                                          TextStyle(fontWeight: FontWeight.w200),
                                    ),
                                  if (_talksHallB[i].coLectorName != null &&
                                      _talksHallB[i].coLectorName.isNotEmpty)
                                    Text(
                                      _talksHallB[i].coLectorName,
                                      style:
                                      TextStyle(fontWeight: FontWeight.w200),
                                    ),
                                ],
                              ),
                            ),
                            flex: 4,
                          ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          )

And this is in a loop, this is crazy, guys, this ... is ... ABSURD.
Also the amount of Parentheses and Brackets is absurd. I even had to install rainbow brackets or something plugin to find which is which it is crazy yes there are some IDE features like showing the closing element next to the ), I know I watched Google IO :D

So the whole app (first tab of the app) was made for about 8 hours.

Lastly I had and I have 0 experience with React Native so I said .. well lets see how this ones goes... I installed Expo... I generated a project.. I found an toolkit having Cards called UI Kitten I added it.

And for 2 hours I created something that looks like this:

The react code is a lot smaller, I used inline styles just to make it look BIGGER however.
The buttons for example the code is just

<View style={{flexDirection: "row", flex: 1, justifyContent:"space-evenly"}}>
            <Button size='small'> Wednesday (27.05.2020)</Button>
            <Button size='small'> Thursday (27.05.2020)</Button>
          </View>

A lot shorter.
The card itself is:

talksHallA.map((talk, i) => {
                return <Card style={{margin: 10}}>
                  <View style={{justifyContent: "space-between", paddingBottom: 10, flexDirection: "row"}}>
                    <Icon name="heart-outline" width={26} height={26} fill='#3366FF'/>
                    <Text style={{
                      borderColor: "grey",
                      borderStyle: "solid",
                      borderWidth: 1,
                      padding: 4,
                      borderRadius: 12
                    }}> {talk.sessionTime} </Text>
                    <Icon name="heart-outline" width={26} height={26} fill='#3366FF'/>
                  </View>
                  <View style={talk.id !== talksHallB[i].id ? twoColumns : oneColumns}>
                    <Text style={talk.id !== talksHallB[i].id ? {flexWrap: "wrap", flex: 0.5, flexDirection: "column"}: ''}>
                      {talk.title} {'\n'}
                      <Text style={{fontWeight: "200", textAlign: "center"}}>{talk.lecturerName}</Text>
                      { talk.coLecturerName ? <Text style={{fontWeight: "200", textAlign: "center"}}>{'\n'}{talk.coLecturerName}</Text> : "" }
                    </Text>
                    <Text style={talk.id !== talksHallB[i].id ? {flexWrap: "wrap", flex: 0.5}: ''}>
                      {talk.id !== talksHallB[i].id ? talksHallB[i].title: ''} {'\n'}
                      <Text style={{fontWeight: "200", textAlign: "center"}}>{talksHallB[i].lecturerName}</Text>
                      { talksHallB[i].coLecturerName ? <Text style={{fontWeight: "200", textAlign: "center"}}>{'\n'}{talksHallB[i].coLecturerName}</Text> : "" }
                    </Text>
                  </View>
                </Card>
              })}

oh yes and I had two variables for two of the styles for 1 column and 2 columns

 let twoColumns = {justifyContent: "space-between", flexDirection: "row"};
  let oneColumns = {justifyContent:"center", flexDirection:"row"};

As an end I will say: Flutter is fun, but.... but ... :) it is not the silver bullet at least now, it sounds promising but I will wait to see Google IO 2020, maybe they will have a proper web support (web without css sounds like an idea) or maybe they will kill it, after all this is google. In any case right now it is like the next JavaFX or Flash... :) and it is good for demo. But thats all.

Infinite trial ? a.k.a. WinRar style trail.

Nayden Gochev — Wed, 15 Jan 2020 13:13:08 +0000

After mentioning https://plugins.jetbrains.com/plugin/13607-merge-request-integration-ce--code-review-for-gitlab
to a college he noticed the nice "trial" text.

Even the rest of the text is a bit funny ;P

jPrime CFP is open

Nayden Gochev — Fri, 13 Dec 2019 11:09:24 +0000

Call for papers

for jPrime conference is now open !

Submit your talk here https://jprime.io/cfp

About jPrime

jPrime is a conference with talks on Java, various languages on the JVM, mobile, web and best practices. Its sixth edition will be held on 27th and 28th May 2020 in Sofia Tech Park.

It's run by the Bulgarian Java User Group (http://jug.bg) and backed by the biggest companies in the country.

jPrime features a combination of great international speakers along with the best presenters from Bulgaria and the Balkans. It is divided in two tracks and provides great opportunities for learning, hacking, networking and fun.

We do not cover the plain tickets but we do cover all the diners, the transportation from and to the airport, the hotel and well basically the whole stay here, we even do an networking event after the conference with some sightseeing in our country.

_Once again the cfp can be accessed here https://jprime.io/cfp _.

Keep in mind we always HAVE streaming, completely FREE and we always have all the recordings available (so it might help you to apply later to some other conferences like DEVOXX or JOKER) some time after the conference at our youtube channel

https://www.youtube.com/user/BulgarianJUG

And you can check some some conference photos in flickr: https://www.flickr.com/photos/132936671@N08/albums/with/72157669160528575

Conferences CFP tag in DEV.TO ?

Nayden Gochev — Fri, 13 Dec 2019 09:28:15 +0000

Hello everyone,

I love DEV.TO and I would ask you what do you think about having a tag for conferences CFP or conferences in general ? @ben any comments ?

I am organizer

together with 5 other Java developers to a Java conference in my country Bulgaria called jPrime - http://jprime.io and since Lanyrd is dead now our cfp is announced only on twitter but maybe here is also the right place? What do you think ?

About jPrime

In our case the conference is not free, but it is organized by the Bulgarian Java User Group and the income is 100% reinvested in next year and other events of the Bulgarian Java User Group in the country.
We do not cover the plain tickets but we do cover all the diners, the transportation from and to the airport, the hotel and well basically the whole stay here, we even do an networking event after the conference with some sightseeing in our country.

So yes I also announce the cfp https://jprime.io/cfp here and now and adding #cfp and #conferences as tags.

Lastly we always HAVE streaming, completely FREE and we always have all the recordings available some time after the conference at our youtube channel

https://www.youtube.com/user/BulgarianJUG

And you can check some conference photos in flickr: https://www.flickr.com/photos/132936671@N08/albums/with/72157669160528575

the 404 page of dev.to is fun

Nayden Gochev — Fri, 13 Dec 2019 09:06:39 +0000

The 404 page of http://dev.to is fun !

I haven't hit it prior to today but I believe it worth seeing.

Just open https://dev.to/this-doesnt-exist-bro

Mark Yaml

Nayden Gochev — Wed, 13 Nov 2019 07:33:31 +0000

I am not the author but it is fcking great.

So I had to sharing it.

Ultimate 'Beginning with Java' reading list.

Nayden Gochev — Mon, 11 Nov 2019 08:49:00 +0000

I am writing this post in a hope that it might help some future Java developers out there. You see there is a common misconception that Java is hard language to learn - NO, Java is the easiest Language to learn.

The problem comes at some point during learning the API, because you just have so many options and you got lost what to do, how to continue and you give up.

Options which I do not recommend (for Java)!

Academy

Usually in most academies the materials are old, the trainers are not very motivated and at the end you kinda feel unhappy. Also it costs a lot.

University

The problem with the university is that it has a set of random disciplines that teach you a lot, but you dont see the big picture and you get demotivated very fast or even lost. Also it costs even more.

Udemy

Kinda combination of the previous two - it is the cheapest and maybe the best option out of the 3, however it still cost something and you still have the same issues with not very motivated or good trainers, lost in the randomness of options and at the end you expect someone to teach you something, but in reality you have to teach it yourself by listening to him which is very different for what we have used to do in school.

when Academy, University or Udemy are good

The only reason is if you are lazy. You see in order to understand and start applying something you need to first learn it and then to use it to write something. Most people just read without the writing bit, or try to write before they have learned anything (which is better case then the first in my opinion) but in both cases this creates a huge, HUGE gaps that are usually caught on an interview and basically makes you to fail. Academies and udemy courses help in a way that they explain and repeatedly tells you the same things over and over again and this combined with homeworks and exercises helps. Also especially udemy courses by being very pragmatic and practical will show you a code that otherwise you have to write which helps the lazy people a lot.

Still my advice is first read this if for some reason you see you are lazy and don't write code and don't do exercises and need a push then buy some udemy course for 10 bucks, if this also doesn't help then look for an expensive academy which for me should be the last resort and not the first one.

Friends

The issue with friends helping you is that you will learn to depend on them, you see in programming the main, main skill you need to have is to not give up, to keep digging and find the answers by yourself. So friends are great for questions, not for training.

Options which are good

Read Online

Write Offline ;)

Exactly in this order - read something and type it, don't try to find hard tasks or examples, just write and experiment with what you are reading to understand why it works and why and mostly how it doesnt work. You see you need to train your memory and your fingers to write the code in this language, to maybe not remember everything but to not wonder about types, brackets, braces or semicolons and so on.

So advice is first read this if for some reason you see you are lazy and don't write code and don't do exercises and need a push then buy some udemy course for 10 bucks, if this also doesn't help then look for an expensive academy which for me should be the last resort and not the first one.

OK where should I start?

The best plays to start are the official Java tutorial (they are a bit outdated but still they are the BEST to start from, I started with them as well back in the 2005 and they have been updated since then but not as much as I would want to, but they are still the BEST)

https://docs.oracle.com/javase/tutorial/

Read the following topics only:

Getting Started — An introduction to Java technology and lessons on installing Java development software and using it to create a simple program.
Learning the Java Language — Lessons describing the essential concepts and features of the Java Programming Language.
Essential Java Classes — Lessons on exceptions, basic input/output, concurrency, regular expressions, and the platform environment. Collections — Lessons on using and extending the Java Collections Framework.
Date-Time APIs — How to use the java.time pages to write date and time code.
Deployment — How to package applications and applets using JAR files, and deploy them using Java Web Start and Java Plug-in. Custom Networking — An introduction to the Java platform's powerful networking features.
Generics — An enhancement to the type system that supports operations on objects of various types while providing compile-time type safety. Note that this lesson is for advanced users. The Java Language trail contains a Generics lesson that is suitable for beginners.
Internationalization — An introduction to designing software so that it can be easily adapted (localized) to various languages and regions.
JavaBeans — The Java platform's component technology.
JDBC Database Access — Introduces an API for connectivity between the Java applications and a wide range of databases and data sources.
Reflection — An API that represents ("reflects") the classes, interfaces, and objects in the current Java Virtual Machine.

Few notes:

Generics - when you read them and at some point you dont understand fully anymore, ignore them.. skip them you will return at some point. First time when I was reading them I stopped like at 50% I found a job even working and started to reread them and even then I stopped at like 80% and finally completed this part around 2 year later to fully understand and embrace all the bits and pieces, so no worries if you don't understand it all, they are just hard and messy and hard to learn without practice.
Internationalization - you don't have to focus on it so much if you are living in the US or UK, I believe that you will learn it when you have to.
Reflection - you don't have to remember it all, just to know it is there.

Ones finished OR when you start reading JDBC Database Access topic (if you are bored from Java at that point) I would read some SQL, it is a standard language for querying and storing and manipulating data in relational databases which are widely used and which you already have probably used in the JDBC Database access bit of the links above. So if you want to learn more just read the w3c tutorial

https://www.w3schools.com/sql/

Now at that point you are done with the CORE Java, you know what most University students know about Java, you know more about Java then any other core course that exists and here is where it gets tricky.

You see after this point you have to decide what to do and there are 3 options where I would recommend just 1 and this is the point where many people are lost and give up.

You see Java is a general purpose language and you can write everything, however you have to focus on something professionally, it is hard to focus on everything because its a sea of libraries and frameworks and communities, so the options are:

Option 1 - Mobile Developer

Mobile developer or to become an Android Developer, to write apps for Android and to basically be a Mobile Developer. Recently Google made Kotlin language first and they announced Flutter where the apps are written in Dart, so I would not advice to go this road. Still if you want to write apps for your mobile android phone start with https://developer.android.com/guide or https://www.tutorialspoint.com/android/

Option 2 - Enterprise Developer

I would say this is also risky, first of all Java EE 8 will be the last standard Enterprise Edition version of the Java EE, there will be Jakarta EE 9 which is a non standard, eclipse foundation lead endeavour to continue the development and innovation in the Java Enterprise Edition, however no one knows how used Jakarta EE will be, also even this days the Java EE is not that used so I would simply ignore this option If I were you, at least for now.

Option 3 - Desktop apps developer

The Java desktop apps are dead and I would not bother with them, you have several options SWT, Swing and JavaFX but none of them is used that much, there are no many jobs in the area and I would not recommend you to go there.

Option 4 - Web Developer

This is the ONLY option you have in reality. You see currently 90% of Java developers are writing Web applications in the enterprise space which uses Spring Frameworks and parts of the Java EE which parts are focused on the web side of things.

So start reading and writing:

First https://www.journaldev.com/1854/java-web-application-tutorial-for-beginners is a nice start for writing web apps.
Then https://docs.spring.io/spring/docs/4.3.16.RELEASE/spring-framework-reference/htmlsingle/ the spring reference guide is amazing but keep in mind you don't need all from it.

I would read everything from the beginning to the Aspect Oriented Programming (AOP) part.

Then I will jump to testing:

https://docs.spring.io/spring/docs/4.3.16.RELEASE/spring-framework-reference/htmlsingle/#testing

Ones finished with testing I would start with Data Access:

https://docs.spring.io/spring/docs/4.3.16.RELEASE/spring-framework-reference/htmlsingle/#spring-data-tier

Now you should be able to build a non web application the way it was written for years maybe till 2010ish or something. Spring MVC is part of spring focused on building a better web apps so you should continue with it:

https://docs.spring.io/spring/docs/4.3.16.RELEASE/spring-framework-reference/htmlsingle/#spring-web

For the view layer I would read only JSP:

https://docs.spring.io/spring/docs/4.3.16.RELEASE/spring-framework-reference/htmlsingle/#view-jsp why ? Because most companies even today still uses JSPs for their views and not thymeleaf or etc. So if you need a SERVER SIDE rendering this is the way to go, otherwise you will do a JavaScript client side rendering but this is not for Java Developers to work on, so the JSPs views are completely fine for a Junior developer.

And lastly I would also read about JSP Expression Language and JSTL

https://www.tutorialspoint.com/jsp/jsp_expression_language.htm which are heavilly used in a the JSPs.

That's all

That's all indeed you are READY, not kidding for about between 1 and 3 months you should be GOOD. Also carrier advice - you should have created several examples and projects with this technologies and highly recommend to push them all in github.com . This days no one is actually reading your CV, most people just check what you have written in github especially for Junior Developers. And yes you will need git in order to push and publish your projects for the world to see https://git-scm.com/book/en/v1/Getting-Started-Git-Basics

That's all folks. I hope this will be helpful for some of you and go out get a job, you have learned Java ! And on top of that - you don't have to go out.

DEV.TO in Web Comics Style ?

Nayden Gochev — Fri, 08 Nov 2019 15:04:32 +0000

Disclaimer : I am a big fan of comics !

First time when when I saw http://dev.to for some reason the style of it reminded me so so much of comics (that as I said I love) !

So at some point several days ago I switched to Minimal Light Theme for more clear look, but it was not my thing :(

You know there are themes right ? Anyway this theme is good but I don't know, something was missing and it was not cartoony and fun and comics enough maybe.

I am not a frontend guy, I have 0 knowledge in CSS even -1 and I am proud of it! I hate the DOM and I hate styling it with anything especially CSS, but I just had to see how it will look in a bit more... comicsish style?

So I used Stylus plugin for chrome to inject a bit of CSS into the page, basically just changed the border-styles and some alignments.


/* feeds view */


.sidebar-profile-snapshot {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-nav-header{
   text-align:right;
}

.widget {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 2% 162% 3%/9% 96% 2% 99% !important;
}

.widget header {
    text-align:right;
}

.single-article  {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 3px 5px 5px !important;
}

/* article view */

.article article{
    border: solid black;
    border-color: black;
    border-width: 3px 3px 5px 5px;
}

.inner-comment{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 3px 5px 5px !important;
}

.primary-sticky-nav-author{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.primary-sticky-nav-element{
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

And YES I put !important everywhere cuz... it's only for me! My precious!

Anyway I think the results are quite good and I will use it this way from now on, but what do you think, should someone KNOWING how to do it properly can and will create a theme ?

Full feeds page:

And a single article page:

Also I tried to change the fonts.. I would love to have the Bangers font for the h4 headings but didn't had any luck :D

@font-face {
  font-family: Bangers;
  src: url(https://fonts.googleapis.com/css?family=Bangers);
}

h4{
    font-family: Bangers !important;
}

Adding this for some idea doesn't work, the HTTP request is made properly the font is downloaded but...
at the end I would LOVE something like this for the right side :

It would be cool, but without CSS knowledge and for around 30mins this was my limit :D

Cya all, I will love to hear your thoughts - back to the backend and debugging Java.

Oh yes... I forgot I was experimenting here before applying CSS to DEV.TO

here we have the Bangers fonts and etc I was curious how to make the borders.

UPDATE.
Ah I am an idiot, it looks the value of @font-face src was incorrect it works in a link since it gets added in a style as stylesheet pf anyway, so

@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}

Works (the url above was incorect) !

so VERSION 2 !

Changed the sidebar titles
Changed the shape of buttons
Changed my name and username

I think this 2 screenshots show most of it:
I LOVE the new and improved header:

And the full look:

And what I added to the previous CSS:

/* feeds view */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bangers/v12/FeVQS0BTqb0h60ACH55Q2A.woff2) format('woff2');
}

.sidebar-profile-name{
    font-family: Bangers !important;
    font-size:12px;
}

.sidebar-profile-username {
    font-family: Bangers !important;
    font-size:20px;
}

.widget header h4{
    font-family: Bangers !important;
    font-size:25px;
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;
}

.widget .cta-button {
        border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.articles-list .nav-chronofiter-link {
        border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-profile-snapshot {
    border: solid black !important;
    border-color: black !important;
    border-width: 3px 4px 3px 5px !important;
    border-radius: 95% 4% 92% 5%/4% 95% 6% 95% !important;
}

.sidebar-nav-header:first-child{
   text-align:right;
        font-family: Bangers !important;
    font-size:25px;
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;

The full file (since the post is already too long) :

https://gist.github.com/gochev/1ee874a0bb6218ffcb652170ef3bb3a7

Anyone for up for how to make it a real theme thing ? :)

DEV Community: Nayden Gochev

30 Years of JavaScript: The Complete Evolution Guide

30 Years of JavaScript: The Complete Evolution Guide

Table of Contents

The Beginning: JavaScript 1.0 - 1.5 (1995-2000)

1995: The Birth

1996-1997: Standardization

1998-1999: ECMAScript 2 & 3

The Dark Ages: Browser Wars & Stagnation (2000-2005)

The Problem

Browser Detection Hell

Early Libraries (Pre-jQuery)

The AJAX Revolution (2005-2009)

2005: AJAX Changes Everything

2006: jQuery Revolution

2008-2009: Other Libraries

The Modern Era Begins: ES5 & Node.js (2009-2015)

2009: ECMAScript 5 (ES5)

2009: Node.js - JavaScript on the Server

2010: npm - Node Package Manager

2010-2012: The Framework Wars Begin

2012: TypeScript Arrives

2013-2014: Build Tools & Module Bundlers

The Renaissance: ES6/ES2015 (2015)

let and const

Arrow Functions

Template Literals

Destructuring

Default Parameters

Rest and Spread Operators

Classes

Promises

Modules (ES6 Modules)

Other ES6 Features

2013: React.js

2014: Vue.js

Annual Releases: ES2016-ES2025

ES2016 (ES7)

ES2017 (ES8)

ES2018 (ES9)

ES2019 (ES10)

ES2020 (ES11)

ES2021 (ES12)

ES2022 (ES13)

ES2023 (ES14)

ES2024 (ES15)

ES2025 (Current)

TypeScript Evolution (2012-2025)

TypeScript 1.0 (2014)

TypeScript 1.4 (2015) - Union Types

TypeScript 1.6 (2015) - Intersection Types

TypeScript 2.0 (2016) - Major Update

TypeScript 2.1 (2016) - Advanced Features

TypeScript 2.8 (2018) - Conditional Types

TypeScript 3.0 (2018) - Tuples and Rest

TypeScript 3.7 (2019) - Optional Chaining

TypeScript 4.0 (2020) - Variadic Tuples

TypeScript 4.1 (2020) - Template Literal Types

TypeScript 4.5 (2021) - Awaited Type

TypeScript 4.7 (2022) - Module Detection

TypeScript 4.9 (2022) - satisfies Operator

TypeScript 5.0 (2023) - Decorators

TypeScript 5.2 (2023) - using Declarations

TypeScript 5.4 (2024) - NoInfer

TypeScript 5.5 (2024) - Inferred Type Predicates

Server-Side JavaScript: Node.js & Beyond

Node.js Evolution

Alternative Runtimes

Frameworks & Libraries: Rise and Fall

The jQuery Era (2006-2015)

The MV* Framework Wars (2010-2015)

The Modern Framework Era (2013-Present)

New Generation Frameworks (2019-Present)

Meta-Frameworks (Full-Stack)

Utility Libraries

Testing Ecosystem Evolution

Test Runners

End-to-End Testing

Build Tools & Module Systems

Module Bundlers Evolution