С какими Frontend технологиями работал?

Мой опыт работы с фронтендом в основном связан с интеграцией C++ компонентов в веб-среду и созданием инструментов для разработчиков, а не с классической фронтенд-разработкой.

Основная область — WebAssembly (Wasm): Я использовал Emscripten для компиляции существующих C++ библиотек (например, математических ядер или обработчиков сигналов) в Wasm-модули, которые затем выполнялись в браузере. Это позволяло повторно использовать проверенный высокопроизводительный C++ код на стороне клиента.

Пример: Экспорт C++ класса в JavaScript через Wasm

image_processor.cpp (C++ сторона):

#include <emscripten/bind.h>
#include <vector>

class ImageProcessor {
public:
    ImageProcessor(int width, int height) : m_width(width), m_height(height) {}

    std::vector<uint8_t> applyGrayscale(const std::vector<uint8_t>& rgbaData) {
        std::vector<uint8_t> result;
        result.reserve(rgbaData.size() / 4 * 3); // RGB вместо RGBA
        for (size_t i = 0; i < rgbaData.size(); i += 4) {
            uint8_t r = rgbaData[i];
            uint8_t g = rgbaData[i + 1];
            uint8_t b = rgbaData[i + 2];
            // Простая формула для оттенков серого
            uint8_t gray = static_cast<uint8_t>(0.299 * r + 0.587 * g + 0.114 * b);
            result.push_back(gray);
            result.push_back(gray);
            result.push_back(gray);
        }
        return result;
    }

private:
    int m_width, m_height;
};

// Привязки для Emscripten
EMSCRIPTEN_BINDINGS(image_processor) {
    emscripten::class_<ImageProcessor>("ImageProcessor")
        .constructor<int, int>()
        .function("applyGrayscale", &ImageProcessor::applyGrayscale);
}

Сборка с Emscripten:

emcc image_processor.cpp 
     -o image_processor.js 
     -s MODULARIZE=1 
     -s EXPORT_ES6=1 
     -s WASM=1 
     -s ALLOW_MEMORY_GROWTH=1

Использование в JavaScript:

import initModule from './image_processor.js';

async function processImage(imageData) {
    const Module = await initModule();
    const processor = new Module.ImageProcessor(imageData.width, imageData.height);

    // imageData.data - это Uint8Array (RGBA)
    const inputVector = new Module.Vector();
    for (let val of imageData.data) inputVector.push_back(val);

    const resultVector = processor.applyGrayscale(inputVector);
    const grayscaleArray = new Uint8Array(resultVector.size());
    for (let i = 0; i < resultVector.size(); ++i) grayscaleArray[i] = resultVector.get(i);

    // Освобождение памяти C++
    inputVector.delete();
    resultVector.delete();
    processor.delete();

    return grayscaleArray;
}

Сопутствующие технологии: Для создания простых UI оболочек для таких Wasm-модулей или внутренних инструментов я использовал базовый HTML/CSS/JavaScript, иногда с минимальными фреймворками вроде Vue.js для реактивности. Также работал с Node.js для создания бэкенд-сервисов, которые используют те же C++ модули через addons или child processes.