JavaScript – Ngôn Ngữ Lập Trình Thống Trị Web Development 2025

Bạn có biết rằng JavaScript hiện đang được sử dụng bởi hơn 98% các website trên toàn thế giới? Từ một ngôn ngữ đơn giản chỉ dùng để tạo hiệu ứng cho trang web, JavaScript đã phát triển thành một công cụ mạnh mẽ có thể xây dựng mọi thứ từ ứng dụng web phức tạp đến ứng dụng mobile, thậm chí cả trí tuệ nhân tạo. Trong bối cảnh công nghệ 4.0 đang bùng nổ, việc nắm vững JavaScript không chỉ là lợi thế mà còn là yêu cầu bắt buộc cho bất kỳ ai muốn theo đuổi sự nghiệp trong lĩnh vực công nghệ. Bài viết này sẽ cung cấp cho bạn cái nhìn toàn diện về JavaScript, từ những kiến thức cơ bản đến các xu hướng mới nhất năm 2025, giúp bạn định hướng học tập và phát triển sự nghiệp một cách hiệu quả nhất.

JavaScript là gì? Tìm hiểu ngôn ngữ lập trình phổ biến nhất thế giới

JavaScript là một ngôn ngữ lập trình thông dịch (interpreted), được thiết kế chủ yếu để tạo ra các trang web tương tác và động. Được phát triển bởi Brendan Eich tại Netscape vào năm 1995, JavaScript ban đầu có tên là “LiveScript” nhưng sau đó được đổi tên để tận dụng sự phổ biến của Java (mặc dù hai ngôn ngữ này hoàn toàn khác nhau).

Đặc điểm nổi bật của JavaScript:

• Ngôn ngữ thông dịch: Không cần biên dịch trước khi chạy
• Hướng đối tượng: Hỗ trợ lập trình hướng đối tượng với prototype
• Động và linh hoạt: Có thể thay đổi kiểu dữ liệu trong runtime
• Event-driven: Phản ứng với các sự kiện từ người dùng
• Cross-platform: Chạy trên nhiều nền tảng khác nhau

JavaScript vs Java – Sự khác biệt quan trọng:

Tiêu chí	JavaScript	Java
Kiểu ngôn ngữ	Thông dịch	Biên dịch
Kiểu dữ liệu	Dynamic typing	Static typing
Môi trường chạy	Browser, Node.js	JVM
Cú pháp	Linh hoạt	Nghiêm ngặt
Mục đích chính	Web development	Enterprise applications

Lịch sử phát triển và các phiên bản JavaScript quan trọng

Timeline phát triển JavaScript:

1995 – Sự ra đời:

• Brendan Eich tạo ra JavaScript chỉ trong 10 ngày
• Ban đầu tên là “Mocha”, sau đó là “LiveScript”
• Đổi tên thành “JavaScript” để tận dụng popularity của Java

1997 – ECMAScript 1:

• Tiêu chuẩn hóa đầu tiên bởi ECMA International
• Đặt nền móng cho sự phát triển nhất quán

2009 – ECMAScript 5 (ES5):

• Thêm strict mode
• JSON support native
• Array methods mới (forEach, map, filter)
• Object property descriptors

2015 – ECMAScript 6 (ES6/ES2015) – Bước ngoặt lớn:

• Arrow functions
• Classes
• Template literals
• Destructuring
• Promises
• Modules (import/export)
• Let và const keywords

2016-2025 – Phát triển liên tục:

• ES2016: Array.includes(), exponentiation operator
• ES2017: Async/await, Object.entries()
• ES2018: Rest/spread properties, async iteration
• ES2019: Array.flat(), Object.fromEntries()
• ES2020: Optional chaining, nullish coalescing
• ES2021: Logical assignment operators
• ES2022: Top-level await, private fields
• ES2023: Array.findLast(), hashbang grammar
• ES2024: Temporal API (đang phát triển)
• ES2025: Pattern matching (đề xuất)

Tác động của từng phiên bản:

// ES5 - Cách viết cũ
function createUser(name, age) {
    return {
        name: name,
        age: age,
        greet: function() {
            return "Hello, I'm " + this.name;
        }
    };
}

// ES6+ - Cách viết hiện đại
const createUser = (name, age) => ({
    name,
    age,
    greet() {
        return `Hello, I'm ${this.name}`;
    }
});

// ES2020 - Optional chaining
const user = {
    profile: {
        social: {
            twitter: '@username'
        }
    }
};

// Cách cũ - dễ lỗi
const twitter = user.profile && user.profile.social && user.profile.social.twitter;

// Cách mới - an toàn
const twitter = user.profile?.social?.twitter;

Các loại JavaScript và môi trường chạy

1. Client-side JavaScript (Frontend)

Chạy trên trình duyệt web:

• Manipulate DOM (Document Object Model)
• Handle user events (click, scroll, input)
• AJAX requests
• Local storage management
• Form validation

// DOM manipulation
document.getElementById('myButton').addEventListener('click', function() {
    document.querySelector('.content').innerHTML = '<h2>Content updated!</h2>';
});

// Fetch API for AJAX
fetch('/api/users')
    .then(response => response.json())
    .then(data => {
        console.log('Users:', data);
        displayUsers(data);
    })
    .catch(error => console.error('Error:', error));

Xem thêm: Lập trình Frontend

2. Server-side JavaScript (Backend)

Node.js – JavaScript trên server:

• Web servers và APIs
• Database operations
• File system access
• Real-time applications
• Microservices

// Express.js server
const express = require('express');
const app = express();

app.get('/api/users', async (req, res) => {
    try {
        const users = await User.find();
        res.json(users);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Xem thêm: Lập trình Backend

3. Mobile JavaScript

React Native, Ionic, Cordova:

• Cross-platform mobile apps
• Native performance
• Code reuse giữa platforms

// React Native component
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const MobileButton = ({ onPress, title }) => (
    <TouchableOpacity onPress={onPress}>
        <View style={styles.button}>
            <Text style={styles.text}>{title}</Text>
        </View>
    </TouchableOpacity>
);

4. Desktop JavaScript

Electron, Tauri:

• Desktop applications
• Cross-platform compatibility
• Web technologies cho desktop

5. IoT và Embedded JavaScript

Johnny-Five, Espruino:

• Arduino programming
• Raspberry Pi projects
• IoT device control

Ưu điểm và nhược điểm của JavaScript

✅ Ưu điểm nổi bật:

1. Dễ học và tiếp cận:

• Cú pháp đơn giản, gần với ngôn ngữ tự nhiên
• Không cần setup phức tạp
• Có thể chạy ngay trên browser
• Community lớn và tài liệu phong phú

2. Versatility (Tính linh hoạt):

• Frontend, backend, mobile, desktop
• Một ngôn ngữ cho mọi platform
• Rich ecosystem với npm

3. Performance cao:

• V8 engine optimization
• Just-in-time compilation
• Async/await cho non-blocking operations

4. Real-time capabilities:

• WebSocket support
• Event-driven architecture
• Perfect cho real-time apps

5. Huge ecosystem:

• Hơn 2 triệu packages trên npm
• Frameworks mạnh mẽ (React, Vue, Angular)
• Tools và libraries phong phú

❌ Nhược điểm cần lưu ý:

1. Browser compatibility issues:

• Khác biệt giữa các browser
• Cần transpilation cho features mới
• Polyfills cho browser cũ

2. Security vulnerabilities:

• XSS (Cross-site scripting)
• CSRF attacks
• Code injection risks

3. Dynamic typing challenges:

• Runtime errors khó debug
• Type-related bugs
• Cần tools như TypeScript

4. Performance limitations:

• Single-threaded nature
• Memory leaks nếu không careful
• CPU-intensive tasks limitations

5. Rapid ecosystem changes:

• Framework fatigue
• Dependency hell
• Constant learning curve

Ứng dụng thực tế của JavaScript trong các lĩnh vực

1. Web Development

Frontend Frameworks:

// React - Component-based UI
function UserProfile({ user }) {
    const [isEditing, setIsEditing] = useState(false);

    return (
        <div className="user-profile">
            <h2>{user.name}</h2>
            {isEditing ? (
                <EditForm user={user} onSave={() => setIsEditing(false)} />
            ) : (
                <DisplayInfo user={user} onEdit={() => setIsEditing(true)} />
            )}
        </div>
    );
}

// Vue.js - Template-based
<template>
    <div class="user-profile">
        <h2>{{ user.name }}</h2>
        <edit-form v-if="isEditing" :user="user" @save="isEditing = false" />
        <display-info v-else :user="user" @edit="isEditing = true" />
    </div>
</template>

Backend APIs:

// RESTful API with Express
app.post('/api/orders', async (req, res) => {
    try {
        const order = new Order(req.body);
        await order.save();

        // Send email notification
        await emailService.sendOrderConfirmation(order);

        // Update inventory
        await inventoryService.updateStock(order.items);

        res.status(201).json(order);
    } catch (error) {
        res.status(400).json({ error: error.message });
    }
});

2. E-commerce Solutions

Shopping Cart Logic:

class ShoppingCart {
    constructor() {
        this.items = [];
        this.discounts = [];
    }

    addItem(product, quantity = 1) {
        const existingItem = this.items.find(item => item.id === product.id);

        if (existingItem) {
            existingItem.quantity += quantity;
        } else {
            this.items.push({ ...product, quantity });
        }

        this.calculateTotal();
        this.saveToLocalStorage();
    }

    calculateTotal() {
        const subtotal = this.items.reduce((total, item) => {
            return total + (item.price * item.quantity);
        }, 0);

        const discountAmount = this.applyDiscounts(subtotal);
        this.total = subtotal - discountAmount;

        return this.total;
    }

    applyDiscounts(subtotal) {
        return this.discounts.reduce((discount, coupon) => {
            if (coupon.type === 'percentage') {
                return discount + (subtotal * coupon.value / 100);
            }
            return discount + coupon.value;
        }, 0);
    }
}

3. Real-time Applications

Chat Application:

// Socket.io server
const io = require('socket.io')(server);

io.on('connection', (socket) => {
    console.log('User connected:', socket.id);

    socket.on('join-room', (roomId) => {
        socket.join(roomId);
        socket.to(roomId).emit('user-joined', socket.id);
    });

    socket.on('send-message', (data) => {
        socket.to(data.roomId).emit('receive-message', {
            message: data.message,
            sender: socket.id,
            timestamp: new Date()
        });
    });

    socket.on('disconnect', () => {
        console.log('User disconnected:', socket.id);
    });
});

// Client-side
const socket = io();

socket.emit('join-room', 'room-123');

document.getElementById('sendBtn').addEventListener('click', () => {
    const message = document.getElementById('messageInput').value;
    socket.emit('send-message', {
        roomId: 'room-123',
        message: message
    });
});

socket.on('receive-message', (data) => {
    displayMessage(data.message, data.sender, data.timestamp);
});

4. Data Visualization

Chart.js Implementation:

// Dynamic chart with real-time data
class SalesChart {
    constructor(canvasId) {
        this.ctx = document.getElementById(canvasId).getContext('2d');
        this.chart = new Chart(this.ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Sales Revenue',
                    data: [],
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    tension: 0.1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return '$' + value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });

        this.startRealTimeUpdates();
    }

    startRealTimeUpdates() {
        setInterval(async () => {
            const data = await this.fetchSalesData();
            this.updateChart(data);
        }, 30000); // Update every 30 seconds
    }

    async fetchSalesData() {
        const response = await fetch('/api/sales/realtime');
        return await response.json();
    }

    updateChart(newData) {
        this.chart.data.labels.push(newData.timestamp);
        this.chart.data.datasets[0].data.push(newData.revenue);

        // Keep only last 20 data points
        if (this.chart.data.labels.length > 20) {
            this.chart.data.labels.shift();
            this.chart.data.datasets[0].data.shift();
        }

        this.chart.update();
    }
}

5. Machine Learning và AI

TensorFlow.js Example:

// Image classification with TensorFlow.js
async function classifyImage() {
    // Load pre-trained model
    const model = await tf.loadLayersModel('/models/image-classifier/model.json');

    // Get image from canvas or file input
    const imageElement = document.getElementById('uploaded-image');
    const tensor = tf.browser.fromPixels(imageElement)
        .resizeNearestNeighbor([224, 224])
        .toFloat()
        .div(tf.scalar(255.0))
        .expandDims();

    // Make prediction
    const predictions = await model.predict(tensor).data();

    // Process results
    const labels = ['cat', 'dog', 'bird', 'fish'];
    const results = labels.map((label, index) => ({
        label,
        confidence: predictions[index] * 100
    })).sort((a, b) => b.confidence - a.confidence);

    displayResults(results);

    // Clean up tensors
    tensor.dispose();
}

// Natural Language Processing
function analyzeSentiment(text) {
    const positiveWords = ['good', 'great', 'excellent', 'amazing', 'wonderful'];
    const negativeWords = ['bad', 'terrible', 'awful', 'horrible', 'disappointing'];

    const words = text.toLowerCase().split(/\W+/);

    let positiveScore = 0;
    let negativeScore = 0;

    words.forEach(word => {
        if (positiveWords.includes(word)) positiveScore++;
        if (negativeWords.includes(word)) negativeScore++;
    });

    const sentiment = positiveScore > negativeScore ? 'positive' : 
                     negativeScore > positiveScore ? 'negative' : 'neutral';

    return {
        sentiment,
        confidence: Math.abs(positiveScore - negativeScore) / words.length,
        details: { positiveScore, negativeScore, totalWords: words.length }
    };
}

6. IoT và Hardware Control

Arduino với Johnny-Five:

const { Board, Led, Sensor, Servo } = require('johnny-five');
const board = new Board();

board.on('ready', function() {
    // LED control
    const led = new Led(13);
    led.blink(500);

    // Temperature sensor
    const temperature = new Sensor({
        pin: 'A0',
        freq: 1000
    });

    temperature.on('data', function() {
        const celsius = (this.value * 0.48828125);
        console.log(`Temperature: ${celsius.toFixed(2)}°C`);

        // Control fan based on temperature
        if (celsius > 25) {
            fan.start();
        } else {
            fan.stop();
        }
    });

    // Servo motor for automated blinds
    const blindsServo = new Servo({
        pin: 9,
        range: [0, 180]
    });

    // API endpoint to control blinds
    app.post('/api/blinds/:position', (req, res) => {
        const position = parseInt(req.params.position);
        blindsServo.to(position);
        res.json({ status: 'success', position });
    });
});

7. Game Development

HTML5 Canvas Game:

class Game {
    constructor(canvasId) {
        this.canvas = document.getElementById(canvasId);
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = 800;
        this.canvas.height = 600;

        this.player = new Player(100, 300);
        this.enemies = [];
        this.bullets = [];
        this.score = 0;
        this.gameRunning = true;

        this.bindEvents();
        this.gameLoop();
    }

    bindEvents() {
        document.addEventListener('keydown', (e) => {
            switch(e.code) {
                case 'ArrowUp':
                    this.player.moveUp();
                    break;
                case 'ArrowDown':
                    this.player.moveDown();
                    break;
                case 'Space':
                    this.bullets.push(new Bullet(this.player.x + 50, this.player.y + 25));
                    break;
            }
        });
    }

    gameLoop() {
        if (!this.gameRunning) return;

        this.update();
        this.render();

        requestAnimationFrame(() => this.gameLoop());
    }

    update() {
        // Update player
        this.player.update();

        // Update bullets
        this.bullets = this.bullets.filter(bullet => {
            bullet.update();
            return bullet.x < this.canvas.width;
        });

        // Spawn enemies
        if (Math.random() < 0.02) {
            this.enemies.push(new Enemy(this.canvas.width, Math.random() * this.canvas.height));
        }

        // Update enemies
        this.enemies = this.enemies.filter(enemy => {
            enemy.update();
            return enemy.x > -50;
        });

        // Collision detection
        this.checkCollisions();
    }

    checkCollisions() {
        // Bullet-enemy collisions
        this.bullets.forEach((bullet, bulletIndex) => {
            this.enemies.forEach((enemy, enemyIndex) => {
                if (this.isColliding(bullet, enemy)) {
                    this.bullets.splice(bulletIndex, 1);
                    this.enemies.splice(enemyIndex, 1);
                    this.score += 10;
                }
            });
        });

        // Player-enemy collisions
        this.enemies.forEach(enemy => {
            if (this.isColliding(this.player, enemy)) {
                this.gameOver();
            }
        });
    }

    render() {
        // Clear canvas
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // Render game objects
        this.player.render(this.ctx);
        this.bullets.forEach(bullet => bullet.render(this.ctx));
        this.enemies.forEach(enemy => enemy.render(this.ctx));

        // Render UI
        this.ctx.fillStyle = 'white';
        this.ctx.font = '24px Arial';
        this.ctx.fillText(`Score: ${this.score}`, 20, 40);
    }
}

Xu hướng phát triển JavaScript năm 2025

1. WebAssembly Integration

Tích hợp sâu hơn với WebAssembly:

// Loading WebAssembly module
async function loadWasmModule() {
    const wasmModule = await WebAssembly.instantiateStreaming(
        fetch('/modules/image-processing.wasm')
    );

    return wasmModule.instance.exports;
}

// Using WASM for performance-critical operations
const wasmFunctions = await loadWasmModule();

function processLargeImage(imageData) {
    // Use WebAssembly for heavy computation
    const processedData = wasmFunctions.processImage(
        imageData.data,
        imageData.width,
        imageData.height
    );

    return new ImageData(processedData, imageData.width, imageData.height);
}

2. Edge Computing và Serverless

Cloudflare Workers, Vercel Edge Functions:

// Cloudflare Worker
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
    const url = new URL(request.url);

    // A/B testing at the edge
    const variant = Math.random() < 0.5 ? 'A' : 'B';

    // Modify response based on geolocation
    const country = request.cf.country;
    const currency = getCurrencyByCountry(country);

    const response = await fetch(request);
    const html = await response.text();

    // Inject personalized content
    const personalizedHtml = html
        .replace('{{VARIANT}}', variant)
        .replace('{{CURRENCY}}', currency);

    return new Response(personalizedHtml, {
        headers: { 'Content-Type': 'text/html' }
    });
}

3. AI/ML Integration

On-device AI với TensorFlow.js:

// Real-time object detection
class ObjectDetector {
    constructor() {
        this.model = null;
        this.video = document.getElementById('webcam');
        this.canvas = document.getElementById('overlay');
        this.ctx = this.canvas.getContext('2d');
    }

    async initialize() {
        // Load COCO-SSD model
        this.model = await cocoSsd.load();

        // Setup webcam
        const stream = await navigator.mediaDevices.getUserMedia({
            video: { width: 640, height: 480 }
        });
        this.video.srcObject = stream;

        this.video.addEventListener('loadeddata', () => {
            this.detectObjects();
        });
    }

    async detectObjects() {
        if (this.model) {
            const predictions = await this.model.detect(this.video);

            this.drawPredictions(predictions);

            // Continue detection
            requestAnimationFrame(() => this.detectObjects());
        }
    }

    drawPredictions(predictions) {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        predictions.forEach(prediction => {
            const [x, y, width, height] = prediction.bbox;
            const confidence = (prediction.score * 100).toFixed(1);

            // Draw bounding box
            this.ctx.strokeStyle = '#00ff00';
            this.ctx.lineWidth = 2;
            this.ctx.strokeRect(x, y, width, height);

            // Draw label
            this.ctx.fillStyle = '#00ff00';
            this.ctx.font = '16px Arial';
            this.ctx.fillText(
                `${prediction.class} (${confidence}%)`,
                x, y - 10
            );
        });
    }
}

4. Progressive Web Apps (PWA) 2.0

Advanced PWA features:

// Service Worker with advanced caching
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open('v2').then(cache => {
            return cache.addAll([
                '/',
                '/app.js',
                '/app.css',
                '/offline.html'
            ]);
        })
    );
});

// Background sync
self.addEventListener('sync', event => {
    if (event.tag === 'background-sync') {
        event.waitUntil(doBackgroundSync());
    }
});

async function doBackgroundSync() {
    const requests = await getStoredRequests();

    for (const request of requests) {
        try {
            await fetch(request.url, request.options);
            await removeStoredRequest(request.id);
        } catch (error) {
            console.log('Sync failed, will retry later');
        }
    }
}

// Web Push notifications
self.addEventListener('push', event => {
    const data = event.data.json();

    const options = {
        body: data.message,
        icon: '/icon-192x192.png',
        badge: '/badge-72x72.png',
        actions: [
            {
                action: 'open',
                title: 'Open App'
            },
            {
                action: 'close',
                title: 'Close'
            }
        ]
    };

    event.waitUntil(
        self.registration.showNotification(data.title, options)
    );
});

5. Micro-frontends Architecture

Module Federation với Webpack 5:

// Host application
const ModuleFederationPlugin = require('@module-federation/webpack');

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
            name: 'host',
            remotes: {
                userModule: 'userModule@http://localhost:3001/remoteEntry.js',
                productModule: 'productModule@http://localhost:3002/remoteEntry.js'
            }
        })
    ]
};

// Dynamic import of micro-frontend
async function loadUserModule() {
    const userModule = await import('userModule/UserProfile');
    return userModule.default;
}

// React component using micro-frontend
function App() {
    const [UserProfile, setUserProfile] = useState(null);

    useEffect(() => {
        loadUserModule().then(component => {
            setUserProfile(() => component);
        });
    }, []);

    return (
        <div>
            <h1>Main Application</h1>
            {UserProfile && <UserProfile userId="123" />}
        </div>
    );
}

6. WebRTC và Real-time Communication

Ứng dụng WebRTC nâng cao:

class VideoCallManager {
    constructor() {
        this.localStream = null;
        this.peerConnection = null;
        this.socket = io();
        this.setupSocketEvents();
    }

    async startCall(roomId) {
        // Lấy media từ người dùng
        this.localStream = await navigator.mediaDevices.getUserMedia({
            video: { width: 1280, height: 720 },
            audio: { echoCancellation: true, noiseSuppression: true }
        });

        // Thiết lập kết nối peer
        this.peerConnection = new RTCPeerConnection({
            iceServers: [
                { urls: 'stun:stun.l.google.com:19302' },
                {
                    urls: 'turn:turnserver.com:3478',
                    username: 'user',
                    credential: 'pass'
                }
            ]
        });

        // Thêm stream local
        this.localStream.getTracks().forEach(track => {
            this.peerConnection.addTrack(track, this.localStream);
        });

        // Xử lý remote stream
        this.peerConnection.ontrack = (event) => {
            const remoteVideo = document.getElementById('remoteVideo');
            remoteVideo.srcObject = event.streams[0];
        };

        // Xử lý ICE candidates
        this.peerConnection.onicecandidate = (event) => {
            if (event.candidate) {
                this.socket.emit('ice-candidate', {
                    roomId,
                    candidate: event.candidate
                });
            }
        };

        // Tham gia phòng
        this.socket.emit('join-room', roomId);

        // Hiển thị video local
        const localVideo = document.getElementById('localVideo');
        localVideo.srcObject = this.localStream;
    }

    setupSocketEvents() {
        this.socket.on('user-joined', async (data) => {
            // Tạo offer cho người dùng mới
            const offer = await this.peerConnection.createOffer();
            await this.peerConnection.setLocalDescription(offer);

            this.socket.emit('offer', {
                roomId: data.roomId,
                offer: offer
            });
        });

        this.socket.on('offer', async (data) => {
            await this.peerConnection.setRemoteDescription(data.offer);
            const answer = await this.peerConnection.createAnswer();
            await this.peerConnection.setLocalDescription(answer);

            this.socket.emit('answer', {
                roomId: data.roomId,
                answer: answer
            });
        });

        this.socket.on('answer', async (data) => {
            await this.peerConnection.setRemoteDescription(data.answer);
        });

        this.socket.on('ice-candidate', async (data) => {
            await this.peerConnection.addIceCandidate(data.candidate);
        });
    }

    // Tính năng chia sẻ màn hình
    async shareScreen() {
        try {
            const screenStream = await navigator.mediaDevices.getDisplayMedia({
                video: true,
                audio: true
            });

            // Thay thế video track
            const videoTrack = screenStream.getVideoTracks()[0];
            const sender = this.peerConnection.getSenders().find(s => 
                s.track && s.track.kind === 'video'
            );

            if (sender) {
                await sender.replaceTrack(videoTrack);
            }

            // Xử lý khi kết thúc chia sẻ màn hình
            videoTrack.onended = () => {
                this.stopScreenShare();
            };

        } catch (error) {
            console.error('Lỗi chia sẻ màn hình:', error);
        }
    }
}

7. Web3 và Blockchain Integration

Phát triển DApp Ethereum:

// Tích hợp Web3 cho ứng dụng DeFi
class DeFiWallet {
    constructor() {
        this.web3 = null;
        this.account = null;
        this.contract = null;
    }

    async connect() {
        if (typeof window.ethereum !== 'undefined') {
            try {
                // Yêu cầu truy cập tài khoản
                await window.ethereum.request({ method: 'eth_requestAccounts' });

                this.web3 = new Web3(window.ethereum);
                const accounts = await this.web3.eth.getAccounts();
                this.account = accounts[0];

                // Load smart contract
                const contractABI = await fetch('/contracts/DeFiContract.json');
                const contractData = await contractABI.json();

                this.contract = new this.web3.eth.Contract(
                    contractData.abi,
                    contractData.address
                );

                this.setupEventListeners();

                return this.account;
            } catch (error) {
                console.error('Không thể kết nối ví:', error);
                throw error;
            }
        } else {
            throw new Error('MetaMask chưa được cài đặt');
        }
    }

    async stakeTokens(amount) {
        const amountWei = this.web3.utils.toWei(amount.toString(), 'ether');

        try {
            const gasEstimate = await this.contract.methods
                .stake(amountWei)
                .estimateGas({ from: this.account });

            const transaction = await this.contract.methods
                .stake(amountWei)
                .send({
                    from: this.account,
                    gas: gasEstimate,
                    gasPrice: await this.web3.eth.getGasPrice()
                });

            return transaction;
        } catch (error) {
            console.error('Staking thất bại:', error);
            throw error;
        }
    }

    async getStakingRewards() {
        try {
            const rewards = await this.contract.methods
                .getRewards(this.account)
                .call();

            return this.web3.utils.fromWei(rewards, 'ether');
        } catch (error) {
            console.error('Không thể lấy phần thưởng:', error);
            throw error;
        }
    }

    setupEventListeners() {
        // Lắng nghe sự kiện staking
        this.contract.events.TokensStaked({
            filter: { user: this.account }
        }, (error, event) => {
            if (error) {
                console.error('Lỗi sự kiện:', error);
                return;
            }

            const { user, amount, timestamp } = event.returnValues;
            this.displayNotification(`Đã stake ${this.web3.utils.fromWei(amount, 'ether')} tokens`);
        });

        // Lắng nghe sự kiện nhận thưởng
        this.contract.events.RewardsClaimed({
            filter: { user: this.account }
        }, (error, event) => {
            if (error) {
                console.error('Lỗi sự kiện:', error);
                return;
            }

            const { user, reward } = event.returnValues;
            this.displayNotification(`Đã nhận ${this.web3.utils.fromWei(reward, 'ether')} tokens thưởng`);
        });
    }
}

// Chợ NFT
class NFTMarketplace {
    constructor(web3, contractAddress, contractABI) {
        this.web3 = web3;
        this.contract = new web3.eth.Contract(contractABI, contractAddress);
    }

    async mintNFT(tokenURI, price, account) {
        const priceWei = this.web3.utils.toWei(price.toString(), 'ether');

        try {
            const transaction = await this.contract.methods
                .mintNFT(tokenURI, priceWei)
                .send({ from: account });

            return transaction;
        } catch (error) {
            console.error('Mint thất bại:', error);
            throw error;
        }
    }

    async buyNFT(tokenId, price, account) {
        const priceWei = this.web3.utils.toWei(price.toString(), 'ether');

        try {
            const transaction = await this.contract.methods
                .buyNFT(tokenId)
                .send({ 
                    from: account, 
                    value: priceWei 
                });

            return transaction;
        } catch (error) {
            console.error('Mua hàng thất bại:', error);
            throw error;
        }
    }

    async getNFTsByOwner(owner) {
        try {
            const tokenIds = await this.contract.methods
                .getTokensByOwner(owner)
                .call();

            const nfts = await Promise.all(
                tokenIds.map(async (tokenId) => {
                    const tokenURI = await this.contract.methods
                        .tokenURI(tokenId)
                        .call();

                    const metadata = await fetch(tokenURI);
                    const nftData = await metadata.json();

                    return {
                        tokenId,
                        ...nftData
                    };
                })
            );

            return nfts;
        } catch (error) {
            console.error('Không thể lấy NFTs:', error);
            throw error;
        }
    }
}

Framework và thư viện JavaScript phổ biến năm 2025

1. Frontend Frameworks

React 18+ với Concurrent Features:

// React 18 - Concurrent rendering
import { Suspense, lazy, startTransition } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
    const [query, setQuery] = useState('');
    const [results, setResults] = useState([]);

    const handleSearch = (value) => {
        // Cập nhật không khẩn cấp
        setQuery(value);

        // Cập nhật khẩn cấp với startTransition
        startTransition(() => {
            searchAPI(value).then(setResults);
        });
    };

    return (
        <div>
            <SearchInput onChange={handleSearch} />

            <Suspense fallback={<SearchSkeleton />}>
                <SearchResults results={results} />
            </Suspense>

            <Suspense fallback={<ComponentSkeleton />}>
                <HeavyComponent />
            </Suspense>
        </div>
    );
}

// Custom hook với useDeferredValue
function useSearchResults(query) {
    const [results, setResults] = useState([]);
    const deferredQuery = useDeferredValue(query);

    useEffect(() => {
        if (deferredQuery) {
            searchAPI(deferredQuery).then(setResults);
        }
    }, [deferredQuery]);

    return results;
}

Vue 3 Composition API:

// Vue 3 - Composition nâng cao
import { ref, computed, watch, onMounted } from 'vue';

export default {
    setup() {
        const todos = ref([]);
        const filter = ref('all');
        const newTodo = ref('');

        // Computed properties
        const filteredTodos = computed(() => {
            switch (filter.value) {
                case 'active':
                    return todos.value.filter(todo => !todo.completed);
                case 'completed':
                    return todos.value.filter(todo => todo.completed);
                default:
                    return todos.value;
            }
        });

        const remainingCount = computed(() => {
            return todos.value.filter(todo => !todo.completed).length;
        });

        // Phương thức
        const addTodo = () => {
            if (newTodo.value.trim()) {
                todos.value.push({
                    id: Date.now(),
                    text: newTodo.value,
                    completed: false
                });
                newTodo.value = '';
            }
        };

        const removeTodo = (id) => {
            const index = todos.value.findIndex(todo => todo.id === id);
            if (index > -1) {
                todos.value.splice(index, 1);
            }
        };

        const toggleTodo = (id) => {
            const todo = todos.value.find(todo => todo.id === id);
            if (todo) {
                todo.completed = !todo.completed;
            }
        };

        // Watchers
        watch(todos, (newTodos) => {
            localStorage.setItem('todos', JSON.stringify(newTodos));
        }, { deep: true });

        // Lifecycle
        onMounted(() => {
            const savedTodos = localStorage.getItem('todos');
            if (savedTodos) {
                todos.value = JSON.parse(savedTodos);
            }
        });

        return {
            todos,
            filter,
            newTodo,
            filteredTodos,
            remainingCount,
            addTodo,
            removeTodo,
            toggleTodo
        };
    }
};

2. Backend Frameworks

Node.js với Express.js hiện đại:

// Express.js với middleware nâng cao
const express = require('express');
const helmet = require('helmet');
const compression = require('compression');
const rateLimit = require('express-rate-limit');
const cors = require('cors');

const app = express();

// Security middleware
app.use(helmet({
    contentSecurityPolicy: {
        directives: {
            defaultSrc: ["'self'"],
            styleSrc: ["'self'", "'unsafe-inline'"],
            scriptSrc: ["'self'"],
            imgSrc: ["'self'", "data:", "https:"]
        }
    }
}));

// Rate limiting
const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 phút
    max: 100, // giới hạn mỗi IP 100 requests mỗi windowMs
    message: 'Quá nhiều requests từ IP này, vui lòng thử lại sau.',
    standardHeaders: true,
    legacyHeaders: false
});

app.use('/api/', limiter);

// CORS configuration
app.use(cors({
    origin: process.env.NODE_ENV === 'production' 
        ? ['https://yourdomain.com']
        : ['http://localhost:3000'],
    credentials: true
}));

// Compression
app.use(compression());

// Body parsing
app.use(express.json({ limit: '10mb' }));
app.use(express.urlencoded({ extended: true }));

// Logging middleware
app.use((req, res, next) => {
    console.log(`${new Date().toISOString()} - ${req.method} ${req.path}`);
    next();
});

// API routes
app.get('/api/users', async (req, res) => {
    try {
        const { page = 1, limit = 10, search } = req.query;

        let query = {};
        if (search) {
            query = {
                $or: [
                    { name: { $regex: search, $options: 'i' } },
                    { email: { $regex: search, $options: 'i' } }
                ]
            };
        }

        const users = await User.find(query)
            .limit(limit * 1)
            .skip((page - 1) * limit)
            .select('-password')
            .sort({ createdAt: -1 });

        const total = await User.countDocuments(query);

        res.json({
            users,
            totalPages: Math.ceil(total / limit),
            currentPage: page,
            total
        });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// WebSocket integration
const http = require('http');
const socketIo = require('socket.io');

const server = http.createServer(app);
const io = socketIo(server, {
    cors: {
        origin: process.env.NODE_ENV === 'production' 
            ? ['https://yourdomain.com']
            : ['http://localhost:3000'],
        methods: ['GET', 'POST']
    }
});

// Socket.io events
io.on('connection', (socket) => {
    console.log('Người dùng kết nối:', socket.id);

    socket.on('join-room', (roomId) => {
        socket.join(roomId);
        socket.to(roomId).emit('user-joined', {
            userId: socket.id,
            message: 'Người dùng mới đã tham gia phòng'
        });
    });

    socket.on('send-message', (data) => {
        io.to(data.roomId).emit('receive-message', {
            userId: socket.id,
            message: data.message,
            timestamp: new Date()
        });
    });

    socket.on('disconnect', () => {
        console.log('Người dùng ngắt kết nối:', socket.id);
    });
});

server.listen(process.env.PORT || 3000, () => {
    console.log(`Server đang chạy trên port ${process.env.PORT || 3000}`);
});

3. Testing Frameworks

Jest và Testing Library:

// __tests__/UserProfile.test.js
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import UserProfile from '../components/UserProfile';

// Mock server
const server = setupServer(
    rest.get('/api/users/:id', (req, res, ctx) => {
        return res(ctx.json({
            id: '1',
            name: 'Nguyễn Văn A',
            email: 'nguyenvana@example.com',
            avatar: '/avatars/user1.jpg'
        }));
    }),

    rest.put('/api/users/:id', (req, res, ctx) => {
        return res(ctx.json({
            id: '1',
            ...req.body
        }));
    })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

describe('UserProfile Component', () => {
    test('hiển thị thông tin người dùng', async () => {
        render(<UserProfile userId="1" />);

        // Kiểm tra loading state
        expect(screen.getByText('Đang tải...')).toBeInTheDocument();

        // Đợi data load
        await waitFor(() => {
            expect(screen.getByText('Nguyễn Văn A')).toBeInTheDocument();
        });

        expect(screen.getByText('nguyenvana@example.com')).toBeInTheDocument();
    });

    test('cho phép chỉnh sửa thông tin', async () => {
        const user = userEvent.setup();
        render(<UserProfile userId="1" />);

        // Đợi component load
        await waitFor(() => {
            expect(screen.getByText('Nguyễn Văn A')).toBeInTheDocument();
        });

        // Click nút chỉnh sửa
        const editButton = screen.getByRole('button', { name: /chỉnh sửa/i });
        await user.click(editButton);

        // Chỉnh sửa tên
        const nameInput = screen.getByLabelText(/tên/i);
        await user.clear(nameInput);
        await user.type(nameInput, 'Nguyễn Văn B');

        // Lưu thay đổi
        const saveButton = screen.getByRole('button', { name: /lưu/i });
        await user.click(saveButton);

        // Kiểm tra API được gọi
        await waitFor(() => {
            expect(screen.getByText('Nguyễn Văn B')).toBeInTheDocument();
        });
    });

    test('xử lý lỗi khi load dữ liệu', async () => {
        server.use(
            rest.get('/api/users/:id', (req, res, ctx) => {
                return res(ctx.status(500), ctx.json({
                    error: 'Lỗi server'
                }));
            })
        );

        render(<UserProfile userId="1" />);

        await waitFor(() => {
            expect(screen.getByText(/có lỗi xảy ra/i)).toBeInTheDocument();
        });
    });
});

// Integration test
describe('User Management Integration', () => {
    test('luồng tạo và chỉnh sửa người dùng', async () => {
        const user = userEvent.setup();

        render(<UserManagement />);

        // Tạo người dùng mới
        const createButton = screen.getByRole('button', { name: /tạo người dùng/i });
        await user.click(createButton);

        // Điền form
        await user.type(screen.getByLabelText(/tên/i), 'Trần Thị C');
        await user.type(screen.getByLabelText(/email/i), 'tranthic@example.com');

        // Submit form
        const submitButton = screen.getByRole('button', { name: /tạo/i });
        await user.click(submitButton);

        // Kiểm tra người dùng được tạo
        await waitFor(() => {
            expect(screen.getByText('Trần Thị C')).toBeInTheDocument();
        });

        // Chỉnh sửa người dùng vừa tạo
        const editButton = screen.getByRole('button', { name: /chỉnh sửa trần thị c/i });
        await user.click(editButton);

        const nameInput = screen.getByDisplayValue('Trần Thị C');
        await user.clear(nameInput);
        await user.type(nameInput, 'Trần Thị D');

        const saveButton = screen.getByRole('button', { name: /lưu/i });
        await user.click(saveButton);

        // Kiểm tra thay đổi được lưu
        await waitFor(() => {
            expect(screen.getByText('Trần Thị D')).toBeInTheDocument();
        });
    });
});

Playwright E2E Testing:
// Điền thông tin giao hàng await page.fill(‘[data-testid=”shipping-address”]’, ‘123 Đường ABC, Quận 1, TP.HCM’); await page.fill(‘[data-testid=”phone-number”]’, ‘0901234567’); await page.selectOption(‘[data-testid=”shipping-method”]’, ‘express’); // Chọn phương thức thanh toán await page.check(‘[data-testid=”payment-method-card”]’); await page.fill(‘[data-testid=”card-number”]’, ‘4111111111111111’); await page.fill(‘[data-testid=”card-expiry”]’, ’12/25′); await page.fill(‘[data-testid=”card-cvc”]’, ‘123’); await page.fill(‘[data-testid=”card-name”]’, ‘Nguyen Van A’); // Xác nhận đơn hàng await page.click(‘[data-testid=”place-order-button”]’); // Kiểm tra trang xác nhận await expect(page).toHaveURL(/\/order-confirmation\/\d+/); await expect(page.locator(‘[data-testid=”order-success-message”]’)).toContainText(‘Đặt hàng thành công’); // Kiểm tra chi tiết đơn hàng const orderNumber = await page.locator(‘[data-testid=”order-number”]’).textContent(); expect(orderNumber).toMatch(/ORD-\d+/); // Kiểm tra email xác nhận được gửi await expect(page.locator(‘[data-testid=”email-confirmation”]’)).toContainText(‘Email xác nhận đã được gửi’); }); test(‘xử lý lỗi khi thanh toán thất bại’, async ({ page }) => { // Mock API để trả về lỗi thanh toán await page.route(‘/api/payments’, route => { route.fulfill({ status: 400, contentType: ‘application/json’, body: JSON.stringify({ error: ‘Thẻ tín dụng không hợp lệ’ }) }); }); await page.goto(‘/checkout’); // Điền thông tin và submit await page.fill(‘[data-testid=”card-number”]’, ‘4000000000000002’); // Thẻ test lỗi await page.fill(‘[data-testid=”card-expiry”]’, ’12/25′); await page.fill(‘[data-testid=”card-cvc”]’, ‘123’); await page.click(‘[data-testid=”place-order-button”]’); // Kiểm tra thông báo lỗi await expect(page.locator(‘[data-testid=”payment-error”]’)).toContainText(‘Thẻ tín dụng không hợp lệ’); // Kiểm tra vẫn ở trang checkout await expect(page).toHaveURL(‘/checkout’); }); }); test.describe(‘Admin Dashboard’, () => { test(‘admin có thể quản lý sản phẩm’, async ({ page }) => { // Đăng nhập với tài khoản admin await page.goto(‘/admin/login’); await page.fill(‘[data-testid=”email-input”]’, ‘admin@example.com’); await page.fill(‘[data-testid=”password-input”]’, ‘admin123’); await page.click(‘[data-testid=”login-button”]’); // Vào trang quản lý sản phẩm await page.click(‘[data-testid=”products-menu”]’); await expect(page).toHaveURL(‘/admin/products’); // Tạo sản phẩm mới await page.click(‘[data-testid=”create-product-button”]’); await page.fill(‘[data-testid=”product-name”]’, ‘iPhone 15 Pro Max’); await page.fill(‘[data-testid=”product-price”]’, ‘29990000’); await page.fill(‘[data-testid=”product-description”]’, ‘iPhone mới nhất với chip A17 Pro’); await page.selectOption(‘[data-testid=”product-category”]’, ‘smartphones’); // Upload hình ảnh sản phẩm await page.setInputFiles(‘[data-testid=”product-images”]’, [ ‘tests/fixtures/iphone1.jpg’, ‘tests/fixtures/iphone2.jpg’ ]); await page.click(‘[data-testid=”save-product-button”]’); // Kiểm tra sản phẩm được tạo thành công await expect(page.locator(‘[data-testid=”success-notification”]’)).toContainText(‘Tạo sản phẩm thành công’); // Tìm kiếm sản phẩm vừa tạo await page.fill(‘[data-testid=”search-products”]’, ‘iPhone 15 Pro Max’); await page.press(‘[data-testid=”search-products”]’, ‘Enter’); await expect(page.locator(‘[data-testid=”product-row”]’)).toHaveCount(1); await expect(page.locator(‘[data-testid=”product-name”]’)).toContainText(‘iPhone 15 Pro Max’); // Chỉnh sửa sản phẩm await page.click(‘[data-testid=”edit-product-button”]’); await page.fill(‘[data-testid=”product-price”]’, ‘27990000’); await page.click(‘[data-testid=”save-product-button”]’); // Kiểm tra giá được cập nhật await expect(page.locator(‘[data-testid=”product-price”]’)).toContainText(‘27.990.000’); }); });

4. Build Tools và Module Bundlers

Vite – Build Tool thế hệ mới:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
    plugins: [
        react({
            // Fast Refresh cho React
            fastRefresh: true,
            // Babel plugins
            babel: {
                plugins: [
                    ['@babel/plugin-proposal-decorators', { legacy: true }]
                ]
            }
        })
    ],

    // Alias cho import paths
    resolve: {
        alias: {
            '@': resolve(__dirname, 'src'),
            '@components': resolve(__dirname, 'src/components'),
            '@utils': resolve(__dirname, 'src/utils'),
            '@assets': resolve(__dirname, 'src/assets')
        }
    },

    // Development server
    server: {
        port: 3000,
        hot: true,
        proxy: {
            '/api': {
                target: 'http://localhost:8000',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },

    // Build optimization
    build: {
        target: 'esnext',
        minify: 'terser',
        terserOptions: {
            compress: {
                drop_console: true,
                drop_debugger: true
            }
        },
        rollupOptions: {
            output: {
                manualChunks: {
                    // Vendor chunk
                    vendor: ['react', 'react-dom'],
                    // UI library chunk
                    ui: ['@mui/material', '@mui/icons-material'],
                    // Utilities chunk
                    utils: ['lodash', 'date-fns', 'axios']
                }
            }
        },
        // Code splitting
        chunkSizeWarningLimit: 1000
    },

    // Environment variables
    define: {
        __API_URL__: JSON.stringify(process.env.VITE_API_URL),
        __VERSION__: JSON.stringify(process.env.npm_package_version)
    },

    // CSS preprocessing
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/styles/variables.scss";`
            }
        },
        modules: {
            localsConvention: 'camelCase'
        }
    }
});

// Plugin tùy chỉnh
function customPlugin() {
    return {
        name: 'custom-plugin',
        configResolved(config) {
            console.log('Vite config resolved:', config.command);
        },
        buildStart() {
            console.log('Build started...');
        },
        generateBundle(options, bundle) {
            // Tạo file manifest
            const manifest = {};
            for (const [fileName, chunk] of Object.entries(bundle)) {
                if (chunk.type === 'chunk') {
                    manifest[chunk.name || fileName] = fileName;
                }
            }

            this.emitFile({
                type: 'asset',
                fileName: 'manifest.json',
                source: JSON.stringify(manifest, null, 2)
            });
        }
    };
}

Webpack 5 với Module Federation:

// webpack.config.js
const ModuleFederationPlugin = require('@module-federation/webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',

    devServer: {
        port: 3001,
        hot: true,
        historyApiFallback: true,
        static: {
            directory: path.join(__dirname, 'public')
        }
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-react',
                            ['@babel/preset-env', { targets: 'defaults' }]
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties',
                            '@babel/plugin-syntax-dynamic-import'
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[name]__[local]--[hash:base64:5]'
                            }
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[hash][ext]'
                }
            }
        ]
    },

    plugins: [
        new ModuleFederationPlugin({
            name: 'host',
            filename: 'remoteEntry.js',
            remotes: {
                userModule: 'userModule@http://localhost:3002/remoteEntry.js',
                productModule: 'productModule@http://localhost:3003/remoteEntry.js'
            },
            exposes: {
                './Header': './src/components/Header',
                './Footer': './src/components/Footer'
            },
            shared: {
                react: {
                    singleton: true,
                    requiredVersion: '^18.0.0'
                },
                'react-dom': {
                    singleton: true,
                    requiredVersion: '^18.0.0'
                }
            }
        }),

        new HtmlWebpackPlugin({
            template: './public/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true
            }
        })
    ],

    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    priority: 10,
                    reuseExistingChunk: true
                },
                common: {
                    name: 'common',
                    minChunks: 2,
                    priority: 5,
                    reuseExistingChunk: true
                }
            }
        }
    }
};

// Micro-frontend component
// src/components/RemoteComponent.js
import React, { Suspense, lazy } from 'react';

const UserProfile = lazy(() => import('userModule/UserProfile'));
const ProductList = lazy(() => import('productModule/ProductList'));

function RemoteComponent({ type, ...props }) {
    const renderComponent = () => {
        switch (type) {
            case 'user-profile':
                return <UserProfile {...props} />;
            case 'product-list':
                return <ProductList {...props} />;
            default:
                return <div>Component không tồn tại</div>;
        }
    };

    return (
        <Suspense fallback={<div>Đang tải component...</div>}>
            {renderComponent()}
        </Suspense>
    );
}

export default RemoteComponent;

Cách học JavaScript hiệu quả năm 2025

1. Lộ trình học tập có hệ thống

Giai đoạn 1: Nền tảng cơ bản (2-3 tháng)

// Tuần 1-2: Cú pháp cơ bản
// Variables và Data Types
let name = "Nguyễn Văn A";
const age = 25;
var isStudent = true;

// Arrays và Objects
const hobbies = ['đọc sách', 'nghe nhạc', 'lập trình'];
const person = {
    name: "Trần Thị B",
    age: 22,
    address: {
        city: "Hà Nội",
        district: "Cầu Giấy"
    }
};

// Tuần 3-4: Functions và Control Flow
function calculateBMI(weight, height) {
    const bmi = weight / (height * height);

    if (bmi < 18.5) {
        return "Thiếu cân";
    } else if (bmi < 25) {
        return "Bình thường";
    } else {
        return "Thừa cân";
    }
}

// Arrow functions
const greetUser = (name) => `Xin chào ${name}!`;

// Tuần 5-6: Arrays và Objects methods
const students = [
    { name: "An", score: 85 },
    { name: "Bình", score: 92 },
    { name: "Chi", score: 78 }
];

// Filter students with high scores
const excellentStudents = students.filter(student => student.score >= 90);

// Calculate average score
const averageScore = students.reduce((sum, student) => sum + student.score, 0) / students.length;

// Transform data
const studentNames = students.map(student => student.name);

// Tuần 7-8: DOM Manipulation
document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('myButton');
    const output = document.querySelector('.output');

    button.addEventListener('click', function() {
        const userInput = document.getElementById('userInput').value;
        output.innerHTML = `<p>Bạn đã nhập: ${userInput}</p>`;
    });
});

// Tuần 9-10: Events và Forms
function handleFormSubmit(event) {
    event.preventDefault();

    const formData = new FormData(event.target);
    const userData = {
        name: formData.get('name'),
        email: formData.get('email'),
        message: formData.get('message')
    };

    // Validate data
    if (!userData.name || !userData.email) {
        alert('Vui lòng điền đầy đủ thông tin');
        return;
    }

    // Send data
    sendUserData(userData);
}

// Tuần 11-12: Async JavaScript
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);

        if (!response.ok) {
            throw new Error('Không thể tải dữ liệu người dùng');
        }

        const userData = await response.json();
        displayUserInfo(userData);
    } catch (error) {
        console.error('Lỗi:', error);
        showErrorMessage('Có lỗi xảy ra khi tải dữ liệu');
    }
}

Giai đoạn 2: JavaScript nâng cao (3-4 tháng)

// ES6+ Features
class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
        this.createdAt = new Date();
    }

    // Private method (ES2022)
    #validateEmail(email) {
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }

    // Getter
    get displayName() {
        return this.name.toUpperCase();
    }

    // Static method
    static fromJSON(json) {
        const data = JSON.parse(json);
        return new User(data.name, data.email);
    }

    // Async method
    async save() {
        if (!this.#validateEmail(this.email)) {
            throw new Error('Email không hợp lệ');
        }

        const response = await fetch('/api/users', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: this.name,
                email: this.email
            })
        });

        return await response.json();
    }
}

// Destructuring và Spread
const userInfo = {
    name: 'Lê Văn C',
    age: 28,
    skills: ['JavaScript', 'React', 'Node.js'],
    address: {
        city: 'TP.HCM',
        district: 'Quận 1'
    }
};

// Destructuring
const { name, age, skills, address: { city } } = userInfo;
const [primarySkill, ...otherSkills] = skills;

// Spread operator
const updatedUser = {
    ...userInfo,
    age: 29,
    skills: [...skills, 'TypeScript']
};

// Modules
// utils.js
export const formatCurrency = (amount) => {
    return new Intl.NumberFormat('vi-VN', {
        style: 'currency',
        currency: 'VND'
    }).format(amount);
};

export const formatDate = (date) => {
    return new Intl.DateTimeFormat('vi-VN').format(date);
};

// main.js
import { formatCurrency, formatDate } from './utils.js';

const price = 1500000;
const today = new Date();

console.log(formatCurrency(price)); // 1.500.000 ₫
console.log(formatDate(today)); // 02/08/2025

Giai đoạn 3: Framework và Libraries (4-6 tháng)

// React Hooks
import React, { useState, useEffect, useCallback, useMemo } from 'react';

function ProductList() {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [searchTerm, setSearchTerm] = useState('');
    const [sortBy, setSortBy] = useState('name');

    // Fetch data
    useEffect(() => {
        async function fetchProducts() {
            try {
                const response = await fetch('/api/products');
                const data = await response.json();
                setProducts(data);
            } catch (error) {
                console.error('Lỗi tải sản phẩm:', error);
            } finally {
                setLoading(false);
            }
        }

        fetchProducts();
    }, []);

    // Memoized filtered and sorted products
    const filteredProducts = useMemo(() => {
        return products
            .filter(product => 
                product.name.toLowerCase().includes(searchTerm.toLowerCase())
            )
            .sort((a, b) => {
                if (sortBy === 'name') {
                    return a.name.localeCompare(b.name);
                }
                return a.price - b.price;
            });
    }, [products, searchTerm, sortBy]);

    // Callback for search
    const handleSearch = useCallback((term) => {
        setSearchTerm(term);
    }, []);

    if (loading) return <div>Đang tải...</div>;

    return (
        <div>
            <SearchInput onSearch={handleSearch} />
            <SortSelect value={sortBy} onChange={setSortBy} />
            <div className="product-grid">
                {filteredProducts.map(product => (
                    <ProductCard key={product.id} product={product} />
                ))}
            </div>
        </div>
    );
}

// Custom Hook
function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.error('Lỗi đọc localStorage:', error);
            return initialValue;
        }
    });

    const setValue = useCallback((value) => {
        try {
            setStoredValue(value);
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.error('Lỗi ghi localStorage:', error);
        }
    }, [key]);

    return [storedValue, setValue];
}

2. Dự án thực hành từ cơ bản đến nâng cao

Dự án 1: Todo App với Local Storage

class TodoApp {
    constructor() {
        this.todos = this.loadTodos();
        this.currentFilter = 'all';
        this.init();
    }

    init() {
        this.bindEvents();
        this.render();
    }

    bindEvents() {
        const form = document.getElementById('todo-form');
        const filterButtons = document.querySelectorAll('.filter-btn');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const input = document.getElementById('todo-input');
            this.addTodo(input.value.trim());
            input.value = '';
        });

        filterButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                this.currentFilter = e.target.dataset.filter;
                this.updateFilterButtons();
                this.render();
            });
        });

        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('delete-btn')) {
                const id = parseInt(e.target.dataset.id);
                this.deleteTodo(id);
            }

            if (e.target.classList.contains('toggle-btn')) {
                const id = parseInt(e.target.dataset.id);
                this.toggleTodo(id);
            }
        });
    }

    addTodo(text) {
        if (!text) return;

        const todo = {
            id: Date.now(),
            text,
            completed: false,
            createdAt: new Date()
        };

        this.todos.push(todo);
        this.saveTodos();
        this.render();
    }

    deleteTodo(id) {
        this.todos = this.todos.filter(todo => todo.id !== id);
        this.saveTodos();
        this.render();
    }

    toggleTodo(id) {
        const todo = this.todos.find(todo => todo.id === id);
        if (todo) {
            todo.completed = !todo.completed;
            this.saveTodos();
            this.render();
        }
    }

    getFilteredTodos() {
        switch (this.currentFilter) {
            case 'active':
                return this.todos.filter(todo => !todo.completed);
            case 'completed':
                return this.todos.filter(todo => todo.completed);
            default:
                return this.todos;
        }
    }

    render() {
        const todoList = document.getElementById('todo-list');
        const filteredTodos = this.getFilteredTodos();

        todoList.innerHTML = filteredTodos.map(todo => `
            <div class="todo-item ${todo.completed ? 'completed' : ''}">
                <button class="toggle-btn" data-id="${todo.id}">
                    ${todo.completed ? '✓' : '○'}
                </button>
                <span class="todo-text">${todo.text}</span>
                <button class="delete-btn" data-id="${todo.id}">×</button>
            </div>
        `).join('');

        this.updateStats();
    }

    updateStats() {
        const total = this.todos.length;
        const completed = this.todos.filter(todo => todo.completed).length;
        const active = total - completed;

        document.getElementById('total-count').textContent = total;
        document.getElementById('active-count').textContent = active;
        document.getElementById('completed-count').textContent = completed;
    }

    updateFilterButtons() {
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.filter === this.currentFilter);
        });
    }

    saveTodos() {
        localStorage.setItem('todos', JSON.stringify(this.todos));
    }

    loadTodos() {
        try {
            const saved = localStorage.getItem('todos');
            return saved ? JSON.parse(saved) : [];
        } catch (error) {
            console.error('Lỗi tải todos:', error);
            return [];
        }
    }
}

// Khởi tạo ứng dụng
document.addEventListener('DOMContentLoaded', () => {
    new TodoApp();
});

Dự án 2: Weather App với API
<div class=”weather-header”> <h2>${data.name}, ${data.sys.country}</h2> <button class=”favorite-btn ${isFavorite ? ‘active’ : ”}” data-city=”${data.name}”> ${isFavorite ? ‘★’ : ‘☆’} </button> </div> <div class=”weather-main”> <div class=”temperature”> <span class=”temp-value”>${Math.round(data.main.temp)}°C</span> <div class=”weather-icon”> <img src=”https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png” alt=”${data.weather[0].description}”> </div> </div> <div class=”weather-description”> <p>${data.weather[0].description}</p> <p>Cảm giác như ${Math.round(data.main.feels_like)}°C</p> </div> </div> <div class=”weather-details”> <div class=”detail-item”> <span class=”label”>Độ ẩm</span> <span class=”value”>${data.main.humidity}%</span> </div> <div class=”detail-item”> <span class=”label”>Tốc độ gió</span> <span class=”value”>${data.wind.speed} m/s</span> </div> <div class=”detail-item”> <span class=”label”>Áp suất</span> <span class=”value”>${data.main.pressure} hPa</span> </div> <div class=”detail-item”> <span class=”label”>Tầm nhìn</span> <span class=”value”>${(data.visibility / 1000).toFixed(1)} km</span> </div> </div> <div class=”sunrise-sunset”> <div class=”sun-time”> <span class=”label”>Bình minh</span> <span class=”value”>${this.formatTime(data.sys.sunrise)}</span> </div> <div class=”sun-time”> <span class=”label”>Hoàng hôn</span> <span class=”value”>${this.formatTime(data.sys.sunset)}</span> </div> </div> </div> `; this.hideLoading(); } displayForecast(forecastData) { const forecastContainer = document.getElementById(‘forecast-container’); // Lấy dự báo cho 5 ngày tới (mỗi 24h) const dailyForecast = forecastData.filter((item, index) => index % 8 === 0).slice(0, 5); forecastContainer.innerHTML = ` <h3>Dự báo 5 ngày tới</h3> <div class=”forecast-list”> ${dailyForecast.map(item => ` <div class=”forecast-item”> <div class=”forecast-date”> ${this.formatDate(item.dt)} </div> <div class=”forecast-icon”> <img src=”https://openweathermap.org/img/wn/${item.weather[0].icon}.png” alt=”${item.weather[0].description}”> </div> <div class=”forecast-temps”> <span class=”temp-max”>${Math.round(item.main.temp_max)}°</span> <span class=”temp-min”>${Math.round(item.main.temp_min)}°</span> </div> <div class=”forecast-desc”> ${item.weather[0].description} </div> </div> `).join(”)} </div> `; } toggleFavorite(city) { const index = this.favorites.indexOf(city); if (index > -1) { this.favorites.splice(index, 1); } else { this.favorites.push(city); } this.saveFavorites(); this.renderFavorites(); // Cập nhật nút favorite trong weather card const favoriteBtn = document.querySelector(‘.favorite-btn’); if (favoriteBtn) { const isFavorite = this.favorites.includes(city); favoriteBtn.classList.toggle(‘active’, isFavorite); favoriteBtn.textContent = isFavorite ? ‘★’ : ‘☆’; } } renderFavorites() { const favoritesContainer = document.getElementById(‘favorites-container’); if (this.favorites.length === 0) { favoritesContainer.innerHTML = ‘<p>Chưa có thành phố yêu thích</p>’; return; } favoritesContainer.innerHTML = ` <h3>Thành phố yêu thích</h3> <div class=”favorites-list”> ${this.favorites.map(city => ` <button class=”favorite-city”>${city}</button> `).join(”)} </div> `; } formatTime(timestamp) { return new Date(timestamp * 1000).toLocaleTimeString(‘vi-VN’, { hour: ‘2-digit’, minute: ‘2-digit’ }); } formatDate(timestamp) { return new Date(timestamp * 1000).toLocaleDateString(‘vi-VN’, { weekday: ‘short’, month: ‘short’, day: ‘numeric’ }); } showLoading() { document.getElementById(‘loading’).style.display = ‘block’; document.getElementById(‘error’).style.display = ‘none’; } hideLoading() { document.getElementById(‘loading’).style.display = ‘none’; } showError(message) { document.getElementById(‘loading’).style.display = ‘none’; const errorElement = document.getElementById(‘error’); errorElement.textContent = message; errorElement.style.display = ‘block’; // Ẩn lỗi sau 5 giây setTimeout(() => { errorElement.style.display = ‘none’; }, 5000); } saveFavorites() { localStorage.setItem(‘weather-favorites’, JSON.stringify(this.favorites)); } loadFavorites() { try { const saved = localStorage.getItem(‘weather-favorites’); return saved ? JSON.parse(saved) : []; } catch (error) { console.error(‘Lỗi tải favorites:’, error); return []; } } } // Khởi tạo ứng dụng document.addEventListener(‘DOMContentLoaded’, () => { new WeatherApp(); });

Dự án 3: E-commerce Cart với React

// components/ProductCard.jsx
import React, { useState } from 'react';
import { useCart } from '../contexts/CartContext';

function ProductCard({ product }) {
    const [quantity, setQuantity] = useState(1);
    const { addToCart, isInCart, getCartItemQuantity } = useCart();
    const [isAdding, setIsAdding] = useState(false);

    const handleAddToCart = async () => {
        setIsAdding(true);

        try {
            await addToCart({
                ...product,
                quantity: parseInt(quantity)
            });

            // Hiển thị thông báo thành công
            showNotification('Đã thêm vào giỏ hàng!', 'success');
        } catch (error) {
            showNotification('Có lỗi xảy ra!', 'error');
        } finally {
            setIsAdding(false);
        }
    };

    const formatPrice = (price) => {
        return new Intl.NumberFormat('vi-VN', {
            style: 'currency',
            currency: 'VND'
        }).format(price);
    };

    const cartQuantity = getCartItemQuantity(product.id);

    return (
        <div className="product-card">
            <div className="product-image">
                <img 
                    src={product.image} 
                    alt={product.name}
                    loading="lazy"
                />
                {product.discount && (
                    <div className="discount-badge">
                        -{product.discount}%
                    </div>
                )}
            </div>

            <div className="product-info">
                <h3 className="product-name">{product.name}</h3>
                <p className="product-description">{product.description}</p>

                <div className="product-rating">
                    <div className="stars">
                        {[...Array(5)].map((_, i) => (
                            <span 
                                key={i} 
                                className={`star ${i < product.rating ? 'filled' : ''}`}
                            >
                                ★
                            </span>
                        ))}
                    </div>
                    <span className="rating-count">({product.reviewCount})</span>
                </div>

                <div className="product-price">
                    {product.originalPrice && (
                        <span className="original-price">
                            {formatPrice(product.originalPrice)}
                        </span>
                    )}
                    <span className="current-price">
                        {formatPrice(product.price)}
                    </span>
                </div>

                <div className="product-actions">
                    <div className="quantity-selector">
                        <label htmlFor={`quantity-${product.id}`}>Số lượng:</label>
                        <select 
                            id={`quantity-${product.id}`}
                            value={quantity}
                            onChange={(e) => setQuantity(e.target.value)}
                        >
                            {[...Array(10)].map((_, i) => (
                                <option key={i + 1} value={i + 1}>
                                    {i + 1}
                                </option>
                            ))}
                        </select>
                    </div>

                    <button 
                        className={`add-to-cart-btn ${isInCart(product.id) ? 'in-cart' : ''}`}
                        onClick={handleAddToCart}
                        disabled={isAdding || product.stock === 0}
                    >
                        {isAdding ? (
                            <span className="loading-spinner">⏳</span>
                        ) : isInCart(product.id) ? (
                            `Trong giỏ (${cartQuantity})`
                        ) : product.stock === 0 ? (
                            'Hết hàng'
                        ) : (
                            'Thêm vào giỏ'
                        )}
                    </button>
                </div>

                {product.stock < 10 && product.stock > 0 && (
                    <div className="low-stock-warning">
                        Chỉ còn {product.stock} sản phẩm!
                    </div>
                )}
            </div>
        </div>
    );
}

// contexts/CartContext.jsx
import React, { createContext, useContext, useReducer, useEffect } from 'react';

const CartContext = createContext();

const cartReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_TO_CART': {
            const existingItem = state.items.find(item => item.id === action.payload.id);

            if (existingItem) {
                return {
                    ...state,
                    items: state.items.map(item =>
                        item.id === action.payload.id
                            ? { ...item, quantity: item.quantity + action.payload.quantity }
                            : item
                    )
                };
            }

            return {
                ...state,
                items: [...state.items, action.payload]
            };
        }

        case 'REMOVE_FROM_CART':
            return {
                ...state,
                items: state.items.filter(item => item.id !== action.payload)
            };

        case 'UPDATE_QUANTITY':
            return {
                ...state,
                items: state.items.map(item =>
                    item.id === action.payload.id
                        ? { ...item, quantity: action.payload.quantity }
                        : item
                ).filter(item => item.quantity > 0)
            };

        case 'CLEAR_CART':
            return {
                ...state,
                items: []
            };

        case 'LOAD_CART':
            return {
                ...state,
                items: action.payload
            };

        default:
            return state;
    }
};

export function CartProvider({ children }) {
    const [state, dispatch] = useReducer(cartReducer, {
        items: []
    });

    // Load cart từ localStorage khi khởi tạo
    useEffect(() => {
        const savedCart = localStorage.getItem('shopping-cart');
        if (savedCart) {
            try {
                const cartData = JSON.parse(savedCart);
                dispatch({ type: 'LOAD_CART', payload: cartData });
            } catch (error) {
                console.error('Lỗi tải giỏ hàng:', error);
            }
        }
    }, []);

    // Lưu cart vào localStorage khi có thay đổi
    useEffect(() => {
        localStorage.setItem('shopping-cart', JSON.stringify(state.items));
    }, [state.items]);

    const addToCart = (product) => {
        dispatch({ type: 'ADD_TO_CART', payload: product });
    };

    const removeFromCart = (productId) => {
        dispatch({ type: 'REMOVE_FROM_CART', payload: productId });
    };

    const updateQuantity = (productId, quantity) => {
        dispatch({ 
            type: 'UPDATE_QUANTITY', 
            payload: { id: productId, quantity } 
        });
    };

    const clearCart = () => {
        dispatch({ type: 'CLEAR_CART' });
    };

    const isInCart = (productId) => {
        return state.items.some(item => item.id === productId);
    };

    const getCartItemQuantity = (productId) => {
        const item = state.items.find(item => item.id === productId);
        return item ? item.quantity : 0;
    };

    const getTotalItems = () => {
        return state.items.reduce((total, item) => total + item.quantity, 0);
    };

    const getTotalPrice = () => {
        return state.items.reduce((total, item) => total + (item.price * item.quantity), 0);
    };

    const getShippingCost = () => {
        const total = getTotalPrice();
        return total >= 500000 ? 0 : 30000; // Miễn phí ship từ 500k
    };

    const getFinalTotal = () => {
        return getTotalPrice() + getShippingCost();
    };

    const value = {
        items: state.items,
        addToCart,
        removeFromCart,
        updateQuantity,
        clearCart,
        isInCart,
        getCartItemQuantity,
        getTotalItems,
        getTotalPrice,
        getShippingCost,
        getFinalTotal
    };

    return (
        <CartContext.Provider value={value}>
            {children}
        </CartContext.Provider>
    );
}

export const useCart = () => {
    const context = useContext(CartContext);
    if (!context) {
        throw new Error('useCart phải được sử dụng trong CartProvider');
    }
    return context;
};

// components/ShoppingCart.jsx
import React, { useState } from 'react';
import { useCart } from '../contexts/CartContext';

function ShoppingCart() {
    const { 
        items, 
        removeFromCart, 
        updateQuantity, 
        clearCart,
        getTotalItems,
        getTotalPrice,
        getShippingCost,
        getFinalTotal
    } = useCart();

    const [isCheckingOut, setIsCheckingOut] = useState(false);

    const handleCheckout = async () => {
        setIsCheckingOut(true);

        try {
            // Gọi API checkout
            const response = await fetch('/api/checkout', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    items: items,
                    total: getFinalTotal()
                })
            });

            if (response.ok) {
                const { orderId, paymentUrl } = await response.json();

                // Chuyển hướng đến trang thanh toán
                window.location.href = paymentUrl;
            } else {
                throw new Error('Không thể tạo đơn hàng');
            }
        } catch (error) {
            console.error('Lỗi checkout:', error);
            alert('Có lỗi xảy ra khi tạo đơn hàng');
        } finally {
            setIsCheckingOut(false);
        }
    };

    const formatPrice = (price) => {
        return new Intl.NumberFormat('vi-VN', {
            style: 'currency',
            currency: 'VND'
        }).format(price);
    };

    if (items.length === 0) {
        return (
            <div className="empty-cart">
                <h2>Giỏ hàng trống</h2>
                <p>Hãy thêm một số sản phẩm vào giỏ hàng của bạn!</p>
                <a href="/products" className="continue-shopping-btn">
                    Tiếp tục mua sắm
                </a>
            </div>
        );
    }

    return (
        <div className="shopping-cart">
            <div className="cart-header">
                <h2>Giỏ hàng ({getTotalItems()} sản phẩm)</h2>
                <button 
                    className="clear-cart-btn"
                    onClick={clearCart}
                    disabled={isCheckingOut}
                >
                    Xóa tất cả
                </button>
            </div>

            <div className="cart-items">
                {items.map(item => (
                    <div key={item.id} className="cart-item">
                        <div className="item-image">
                            <img src={item.image} alt={item.name} />
                        </div>

                        <div className="item-details">
                            <h3>{item.name}</h3>
                            <p className="item-price">{formatPrice(item.price)}</p>
                        </div>

                        <div className="item-quantity">
                            <button 
                                onClick={() => updateQuantity(item.id, item.quantity - 1)}
                                disabled={item.quantity <= 1}
                            >
                                -
                            </button>
                            <span>{item.quantity}</span>
                            <button 
                                onClick={() => updateQuantity(item.id, item.quantity + 1)}
                            >
                                +
                            </button>
                        </div>

                        <div className="item-total">
                            {formatPrice(item.price * item.quantity)}
                        </div>

                        <button 
                            className="remove-item-btn"
                            onClick={() => removeFromCart(item.id)}
                        >
                            ×
                        </button>
                    </div>
                ))}
            </div>

            <div className="cart-summary">
                <div className="summary-row">
                    <span>Tạm tính:</span>
                    <span>{formatPrice(getTotalPrice())}</span>
                </div>

                <div className="summary-row">
                    <span>Phí vận chuyển:</span>
                    <span>
                        {getShippingCost() === 0 ? 'Miễn phí' : formatPrice(getShippingCost())}
                    </span>
                </div>

                <div className="summary-row total">
                    <span>Tổng cộng:</span>
                    <span>{formatPrice(getFinalTotal())}</span>
                </div>

                <button 
                    className="checkout-btn"
                    onClick={handleCheckout}
                    disabled={isCheckingOut}
                >
                    {isCheckingOut ? 'Đang xử lý...' : 'Thanh toán'}
                </button>
            </div>
        </div>
    );
}

export default ShoppingCart;

3. Tài nguyên học tập và thực hành

Websites học JavaScript:

• MDN Web Docs: Tài liệu chính thức và đầy đủ nhất
• JavaScript.info: Tutorial từ cơ bản đến nâng cao
• FreeCodeCamp: Khóa học miễn phí với dự án thực hành
• Codecademy: Khóa học tương tác
• Udemy, Coursera: Khóa học có phí chất lượng cao

Công cụ thực hành:

// CodePen - Thực hành frontend
// JSFiddle - Test code nhanh
// Repl.it - Môi trường dev online
// CodeSandbox - Dự án React/Vue

// Thiết lập môi trường local
// 1. Cài đặt Node.js
// 2. Cài đặt VS Code với extensions:
//    - ES7+ React/Redux/React-Native snippets
//    - Prettier
//    - ESLint
//    - Live Server
//    - Bracket Pair Colorizer

// 3. Tạo dự án mới
mkdir my-js-project
cd my-js-project
npm init -y

// Cài đặt dependencies
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save-dev html-webpack-plugin css-loader style-loader

// package.json scripts
{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "jest",
    "lint": "eslint src/"
  }
}

Lộ trình thực hành hàng ngày:

// Tuần 1-2: Cú pháp cơ bản
// Mỗi ngày: 1-2 giờ học lý thuyết + 1 giờ thực hành

// Tuần 3-4: DOM và Events
// Tạo các mini project:
// - Calculator
// - Color picker
// - Image slider
// - Form validation

// Tuần 5-8: Async JavaScript và APIs
// Projects:
// - Weather app
// - News reader
// - Movie search
// - Chat application

// Tuần 9-12: Framework (React/Vue)
// Projects:
// - Todo app với CRUD
// - E-commerce cart
// - Blog platform
// - Dashboard admin

// Tuần 13-16: Full-stack development
// Projects:
// - Social media app
// - Task management system
// - Real-time collaboration tool
// - Portfolio website với CMS

Tips học tập hiệu quả:

1. Thực hành mỗi ngày: Ít nhất 1-2 giờ coding
2. Xây dựng dự án thực tế: Không chỉ làm bài tập
3. Đọc code của người khác: GitHub, CodePen
4. Tham gia cộng đồng: Stack Overflow, Discord, Reddit
5. Học từ lỗi: Debug và hiểu tại sao lỗi xảy ra
6. Refactor code: Cải thiện code cũ với kiến thức mới
7. Học testing: Viết test cho code của bạn
8. Performance optimization: Học cách tối ưu hóa code

Đây là hướng dẫn toàn diện về JavaScript năm 2025. Hãy bắt đầu từ những kiến thức cơ bản và dần dần nâng cao, luôn kết hợp lý thuyết với thực hành qua các dự án cụ thể!