Frontend Evolution #3: Flash — золота ера плагінів (2000–2008)

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Flash був не тим, за що його тримали

Скажіть «Flash» — і більшість згадає анімовані банери, «Skip Intro» та ігри на Miniclip. Це правда, але це поверхня. Під нею ховалася технологія, яка на десятиліття випередила відкритий веб: JIT-компілятор, коли JavaScript ще був чистим інтерпретатором. Сувора типізація, коли TypeScript навіть не існував як ідея. Компонентний lifecycle, коли React був на десять років у майбутньому. Бінарний протокол передачі даних, коли веб задихався від XML.

Flash не просто заповнював прогалини в можливостях браузерів — він показав, яким має бути рантайм для інтерактивних застосунків. І коли Flash врешті помер, виявилося, що веб-платформа витратила наступне десятиліття на те, щоб перевинайти його ідеї — під іншими назвами, іншими абревіатурами, але з тією самою архітектурою.

Щоб зрозуміти, чому Flash став тим, чим став, треба спочатку заглянути під капот.

Машина

Історія Flash починається з маленької компанії FutureWave Software, яка в 1996 році випустила FutureSplash Animator — інструмент для векторної анімації в браузері. Microsoft використала його для MSN.com, Disney — для промо-сайту. Macromedia побачила потенціал, купила FutureWave і перейменувала продукт на Flash 1.0.

Те, що сталося далі, мало б зайняти десятиліття, але вмістилося в шість років. Від Flash 1.0 (базова анімація, 1996) через Flash 4 (примітивні скрипти: gotoAndPlay(), if/else, 1999) і Flash 5 (повноцінна ECMAScript-мова, 2000) до Flash Player 9 (нова віртуальна машина з JIT-компіляцією, 2006). Швидкість цієї еволюції — від «анімованих GIF-ок» до «enterprise-рантайму» за шість років — це швидко за будь-якими мірками.

Але цікавіша ж не хронологія, а архітектура.

SWF: коли бінарний формат перемагає

Коли браузер відкриває HTML-сторінку, він парсить текстовий документ, будує DOM, обчислює стилі, виконує layout. Flash Player замість цього завантажував SWF — компактний бінарний контейнер із чіткою структурою. Definition tags визначали ресурси (шейпи, шрифти, звуки), кожен із унікальним ID у внутрішньому словнику. Control tags керували відображенням: PlaceObject розміщував об’єкт на сцені, RemoveObject прибирав, ShowFrame розділяв кадри.

Координати задавалися в TWIPs — 20 одиниць на піксель — що давало субпіксельну точність при мінімальному розмірі файлу. Векторна графіка описувалася квадратичними кривими Безьє. Результат: типовий Flash-банер 468×60 важив 8–15 КБ проти 40–80 КБ у GIF-анімації, і це з інтерактивністю. На dial-up 56 Kbps це різниця між двома і десятьма секундами завантаження.

Display List: дерево, з якого виріс React

Flash Player використовував retained-mode рендеринг з ієрархічним Display List — деревом відображуваних об’єктів. Розробник не малював пікселі вручну, а маніпулював об’єктами в дереві:

// ActionScript 3.0 — робота з Display List
var container:Sprite = new Sprite();
var child:MovieClip = new MovieClip();

container.addChild(child);     // додаємо в дерево відображення
child.x = 200;
child.y = 100;
container.removeChild(child);  // видаляємо з дерева

Це дерево об’єктів, де зміни в батьківському елементі каскадно поширюються на дочірні. Де об’єкти мають lifecycle-події: ADDED_TO_STAGE — коли елемент з’являється на сцені, REMOVED_FROM_STAGE — коли зникає. Де розробник слухає ці події, ініціалізує ресурси в одному обробнику і звільняє в іншому. Запам’ятайте цю архітектуру — ми повернемося до неї, коли будемо говорити про React.

Дві віртуальні машини в одному плеєрі

Мало хто пам’ятає, але Flash Player 9 містив два окремих рантайми, що працювали паралельно. Обидва — AVM, ActionScript Virtual Machine — рушій усередині плеєра, який читає байт-код із SWF-файлу і виконує його. Навіщо два? Adobe не могла викинути стару VM, бо мільйони існуючих SWF залежали від її поведінки. Тож зробили другу — з нуля.

AVM1 виконувала ActionScript 1 і 2. Це була стекова машина зі слабкою типізацією. ActionScript 2, попри класи, інтерфейси та наслідування в синтаксисі, був лише синтаксичним цукром — компілятор перетворював class MyClass extends Base у ланцюжки прототипів, ідентичні AS1. Один і той самий байт-код, одна VM. Аналогія з TypeScript, який компілюється в ES5, тут дуже точна.

// AS2 — виглядає як класи...
class User {
    var name:String;
    function User(name:String) {
        this.name = name;
    }
}
// ...але компілюється в той самий байт-код, що й:
// function User(name) { this.name = name; }
// User.prototype.greet = function() { ... }

AVM2 — зовсім інша машина, побудована на основі специфікації ECMAScript 4. ABC-байт-код (ActionScript Byte Code) проходив чотири фази: завантаження → лінкування → верифікація → виконання. На останній фазі вмикалася JIT-компіляція — перетворення байт-коду в нативні інструкції процесора.

// AS3 (AVM2) — справжні класи з sealed traits
package com.app.models {
    public class User implements ISerializable {
        private var _name:String;
        private var _age:uint;    // uint — JS і досі не має

        public function User(name:String, age:uint) {
            _name = name;
            _age = age;
        }

        public function get name():String { return _name; }

        public function serialize():Object {
            return { name: _name, age: _age };
        }
    }
}

Що це давало на практиці? AS3 був у 10 разів швидшим за AS2 на тій самій задачі. А порівняно з інтерпретованим JavaScript того часу — розрив сягав від 10 до 1000 разів. І це не маркетингові цифри: бенчмарк James Ward (Census RIA Benchmark, 2007) показав, що Flash/AMF сортував 20 000 рядків за 0.47 секунди, тоді як Ajax/JSON — за 3.8, а Ajax/XML — за 7.1 секунди.

Щоб зрозуміти масштаб: до появи V8 у Chrome (2008) жоден JavaScript-движок у жодному браузері не мав JIT-компіляції. SpiderMonkey у Firefox 3.0 — просто інтерпретатор. TraceMonkey з JIT з’явився тільки у Firefox 3.5 (2009). Flash Player мав JIT з 2006 року — на три роки раніше.

Elastic Racetrack: гарантія виконання

Flash Player розподіляв час кожного кадру за моделлю, яку розробники називали «Elastic Racetrack». Спочатку — диспетчеризація подій плеєра (Timer, Mouse, ENTER_FRAME). Потім — виконання користувацького коду. Далі — рендеринг Display List. Гарантія: жоден кадр не пропускається. Якщо код виконується довше відведеного слоту — знижується framerate, але вся логіка виконується. У ігрових рушіях кадри можуть пропускатися заради плавності. Flash обрав протилежну філософію: краще повільніше, але без втрати стану.

Чому Flash переміг DHTML: не один аргумент, а п’ять

Flash Player працював як ізольований рантайм усередині будь-якого браузера. Код виглядав і поводився ідентично в IE, Firefox, Opera, Safari. У світі DHTML, де document.all та document.layers були двома окремими реальностями (про це — у попередній статті), це вирішувало головний біль.

Але кросбраузерність — лише один з аргументів. Flash мав Action Message Format (AMF) — компактний бінарний протокол серіалізації, що передавав типізовані об’єкти ActionScript напряму. Для контексту: XMLHttpRequest в IE 5/6 був навіть не нативним API — це був ActiveX-об’єкт (new ActiveXObject("Microsoft.XMLHTTP")), що не підтримував бінарні дані: responseText інтерпретував усе як UTF-8 текст, і байти ≥ 128 перетворювалися на сміття. AMF давав 10-кратне зменшення розміру даних порівняно з XML.

Flash надавав категорії функціональності, яких відкритий веб просто не мав: відео-стрімінг через RTMP (YouTube використовував Flash для відео до 2015 року), доступ до камери та мікрофона (getUserMedia() у браузерах з’явився лише у 2012), постійні сокети (WebSockets стали стандартом у 2011), локальне сховище структурованих даних (Local Shared Objects, коли веб обмежувався cookies) і навіть роботу з буфером обміну — GitHub використовував Flash для кнопки «Copy to clipboard» до 2015 року.

А ще ActionScript 3 як мова випередив JavaScript на десятиліття. Статична типізація з перевіркою на етапі компіляції. Повноцінні класи, інтерфейси, пакети та неймспейси. Типи uint та int — у JS є лише Number з плаваючою точкою. Adobe навіть спробувала протягнути ці фічі в стандарт ECMAScript (пропозиція ES4), але виробники браузерів відхилили їх через зворотну сумісність. Роки потому ті самі ідеї з’явилися в сучасному JavaScript і TypeScript.

Культура

У жовтні 2001 року Microsoft включила Flash Player 5 у стандартну поставку Windows XP. Service Pack 2 оновив його до Flash Player 6. Windows XP стала найпопулярнішою ОС в історії — понад 400 мільйонів інсталяцій. Кожен новий ПК вже мав Flash. Результат: з 75% у 1999 до 99% у 2008 році. 99.1% в США та Канаді, 99.3% в Японії. Жодна веб-технологія — ні до, ні після — не досягала такого проникнення.

99% — це не просто цифра. Це означало, що розробник міг закласти Flash як вимогу і знати, що практично кожен користувач побачить результат. Це давало свободу. І з неї виросла ціла субкультура.

Коли веб був мистецтвом

Flash породив естетику, яку веб більше не повторив. Це був час, коли сайт міг бути художнім висловлюванням, а не просто носієм контенту.

2Advanced Studios, засновані Еріком Джорданом у 1999 році, стали символом ери. Їхні сайти — кіберпанк-інтерфейси з частинками, що реагували на мишку, з металевими текстурами та неоновим підсвічуванням. Кожна нова версія (Expedition, Prophecy, V5 Ascension) ставала подією в спільноті веб-дизайну. Примітно, що 2Advanced.com ніколи не мав кнопки «Skip Intro» — бо відвідувачі хотіли дивитися.

Hi-ReS! із Лондона створили промо-сайти для «Requiem for a Dream» (Webby Award, 2001) та «Donnie Darko» (Webby Award плюс Prix Ars Electronica). Сайт «Donnie Darko» розгортався протягом 28 днів — як і сюжет фільму — і був виставлений у галереї Barbican Centre.

Японець Yugo Nakamura (MONO*crafts), самоук і колишній ландшафтний архітектор, створював інтерактивні середовища на межі мистецтва. Його сайт «змусив цілу індустрію зупинитися і перевести подих». Він цитував японську приказку: «Замість того, щоб прикрашати своє творіння, покращуй середовище, що його оточує».

Навколо цієї культури виросла ціла екосистема. FWA (Favourite Website Awards) щоденно відзначав найкращі Flash-сайти. Перемога на FWA визначала кар’єру дизайнера. Спільноти Ultrashock і Flashkit обмінювалися вихідними .fla-файлами. Коли Flash-сайт вигравав нагороду, нічний трафік міг покласти сервер.

А кнопка «Skip Intro» стала мемом епохи, бо компанії наполягали на кінематографічних заставках із кастомними курсорами, анімованими завантаженнями та ефектними переходами. Експерт з юзабіліті якось назвав «Skip Intro» найбільш натисканою кнопкою в інтернеті.

Ігрова революція

Flash створив першу справжню екосистему для інді-ігор у вебі. Newgrounds, заснований Томом Фулпом, першим дав будь-кому можливість завантажити свій SWF і отримати аудиторію. Miniclip досяг 75 мільйонів унікальних відвідувачів на місяць і був результатом № 1 у Google за запитом «games» — 800 ігор від 200 розробників, прибутковий без зовнішнього фінансування. Kongregate додав Web 2.0 підхід: рейтинги, досягнення, revenue sharing до 50% з розробниками. У 2010 його придбав GameStop.

Поширювалися ігри просто: SWF-файли вбудовувалися на будь-який сайт через <embed>, забезпечуючи вірусне поширення ігор. А Homestar Runner — мультиплікаційний всесвіт з емейлами Strong Bad і Trogdor the Burninator — став, мабуть, найвідомішим «Flash-сайтом» в культурному сенсі.

Тим часом в Україні

У 2002 році dial-up 56 Kbps в Україні коштував близько $100 на місяць. Download Manager був обов’язковим інструментом — перервана закачка означала починати спочатку. Справжній перелом стався у 2007 році, коли широкосмуговий доступ досяг 20% проникнення. До 2010 — 10.7 мільйонів користувачів.

Парадокс: саме Flash з його компактними SWF-файлами та векторною графікою ідеально підходив для цих обмежених умов. Легкі Flash-ігри, анімовані банери, інтерактивні заставки завантажувалися швидше за альтернативи.

Для української IT-індустрії Flash став помітним напрямком аутсорсингу. Західні агентства замовляли Flash-банери, інтерактивні мікросайти та промо-ігри. Робочий процес був типовим: лондонське чи нью-йоркське креативне агентство надсилало бриф і сторіборд, а українські розробники будували результат на ActionScript — часто зі складними анімаціями та інтерактивними елементами, що вимагали справжнього програмування, а не просто анімації. Вартісна перевага була суттєвою, а якість — конкурентною завдяки сильній математичній та технічній освіті.

Flash став трампліном для ігрової індустрії. Absolutist (2000) працював на глобальний ринок казуальних ігор. Plarium (2009, R&D-центр у Харкові) почав з ігор для ВКонтакті — перша гра «Poker Shark» була створена за три з половиною тижні. IT-експорт України виріс з $100 млн у 2000 до $1 млрд у 2010 році, і Flash-розробка становила помітну частку цього зростання.

На DOU.ua (який тоді вже існував) у вакансіях вимагали «Flash Developer, strong knowledge of ActionScript 2.0 and OOP». Flash-розробка стояла поруч з .NET та Java серед найбільш затребуваних напрямків на українському IT-ринку.

Падіння

Flash помирав довго, але ж причини смерті були закладені з першого дня.

Чорна скринька

SWF — бінарний формат без семантичної структури. Пошукові системи не могли проіндексувати Flash-контент. Google у 2008 році спробував — і результати виявилися жахливими. Динамічно завантажений контент, текст у графіці, навігація через ActionScript — все залишалося невидимим для краулерів. Flash-сайт тримав одну URL-адресу для всіх станів — неможливо поділитися посиланням на конкретну сторінку чи розділ. Увесь контент, завантажений динамічно (а саме так працювали більшість професійних Flash-сайтів), існував для Google як порожня сторінка.

Для бізнесу — вирок. Сайт за $50 000 з чудовим дизайном просто не існував для Google.

Технологія, що виключала людей

Flash підтримував MSAA (Microsoft Active Accessibility), але лише на Windows і тільки в Internet Explorer. Будь-яка зміна анімації змушувала скрінрідер повертатися на початок і перечитувати весь контент заново. Порядок читання не відповідав візуальному розташуванню — алфавітна клавіатура на екрані могла читатися скрінрідером у довільному, нелогічному порядку. Обробники подій, прив’язані до кліку миші, були повністю недоступні для навігації клавіатурою.

W3C задокументувала 11 конкретних проблем доступності Flash. Федеральні агентства США ризикували юридичними наслідками за використання Flash через невідповідність Section 508. Flash-контент був фактично закритим для людей з обмеженнями зору.

1100 CVE

Flash Player накопичив понад 1100 записів у базі CVE (Common Vulnerabilities and Exposures — глобальний реєстр відомих вразливостей). Більше 800 з них — з можливістю виконання довільного коду. Zero-day експлойти використовувалися APT-групами для цільових атак. У 2015 році Flash становив 62% всіх браузерних експлойтів. Ручні оновлення означали, що мільйони користувачів місяцями працювали з відомими вразливостями. Flash став токсичним для будь-якого корпоративного середовища, де безпека була пріоритетом.

Лист, що підписав вирок

29 квітня 2010 року Стів Джобс опублікував «Thoughts on Flash» — відкритий лист, де виклав шість аргументів проти Flash на iOS. Пропрієтарність — Flash контролюється однією компанією. Безпека — Symantec визнав Flash технологією з найгіршою безпекою у 2009 році. Батарея — відео через Flash давало 5 годин роботи, через H.264 — 10. Touch — Flash розроблений для ери миші, rollover-ефекти не працюють на тачскрінах.

Лист не вбив Flash миттєво, але запустив ланцюгову реакцію. Без iOS Flash втратив мобільний ринок. А мобільний трафік невпинно зростав. У 2011 Adobe припинила розвиток мобільного Flash Player. У 2015 YouTube повністю перейшов на HTML5. 31 грудня 2020 року підтримка Flash Player завершилася офіційно. А 12 січня 2021 року — «time bomb»: Flash Player почав блокувати запуск будь-якого SWF-контенту.

Спільнота не дала Flash-контенту зникнути повністю. Ruffle — емулятор Flash Player на Rust/WebAssembly — запускає SWF-файли прямо в браузері. FlashPoint зберіг понад 170 000 Flash-ігор та анімацій. Internet Archive інтегрував Ruffle для своєї Flash-колекції.

Спадок: Flash у коді, який ми пишемо сьогодні

Flash помер, а його архітектурні ідеї — ні. Вони живуть у кожному сучасному фреймворку, і це можна простежити конкретно — від ActionScript 3 до React і Vue.

Display List → Virtual DOM

Display List у Flash був ієрархічним деревом DisplayObject-ів, де Stage — корінь, а кожен візуальний елемент — вузол. Розробник керував цим деревом імперативно: addChild(), removeChild(), addChildAt(). React Virtual DOM — це те саме дерево, але з декларативним підходом: замість ручного додавання й видалення вузлів ви описуєте бажаний стан, а фреймворк сам обчислює різницю.

// Flash AS3: імперативне керування деревом
var panel:Sprite = new Sprite();
var button:MovieClip = new MovieClip();
panel.addChild(button);              // mount
panel.setChildIndex(button, 0);      // z-ordering
panel.removeChild(button);           // unmount

// React: декларативне керування тим самим деревом
function Panel() {
    const [showButton, setShowButton] = useState(true);
    return (
        <div>
            {showButton && <Button />}
        </div>
    );
}

Ментальна модель — дерево візуальних об’єктів, де батьківсько-дочірні зв’язки визначають рендеринг. Ця модель перейшла з Display List у Virtual DOM майже без змін. Змінився лише спосіб взаємодії: від «скажи, що зробити» до «опиши, що має бути».

Component Lifecycle: ADDEDTOSTAGE → useEffect

DisplayObject в AS3 мав lifecycle-події, прив’язані до Display List. ADDED_TO_STAGE спрацьовував, коли об’єкт потрапляв на видиму сцену. REMOVED_FROM_STAGE — коли зникав. Типовий патерн: у конструкторі підписатися на ADDED_TO_STAGE, в обробнику ініціалізувати ресурси, підписатися на REMOVED_FROM_STAGE і там прибрати за собою — видалити слухачів подій, звільнити пам’ять.

// Flash AS3: lifecycle через події Display List
public class GamePanel extends Sprite {
    public function GamePanel() {
        addEventListener(Event.ADDED_TO_STAGE, onAdded);
    }

    private function onAdded(e:Event):void {
        // ініціалізація ресурсів — "componentDidMount"
        stage.addEventListener(KeyboardEvent.KEY_DOWN, onKey);
        addEventListener(Event.REMOVED_FROM_STAGE, onRemoved);
    }

    private function onRemoved(e:Event):void {
        // очищення — "componentWillUnmount"
        stage.removeEventListener(KeyboardEvent.KEY_DOWN, onKey);
    }
}

// React: той самий патерн, інший синтаксис
function GamePanel() {
    useEffect(() => {
        // "ADDED_TO_STAGE" — ініціалізація при mount
        const onKey = (e) => { /* ... */ };
        window.addEventListener('keydown', onKey);

        return () => {
            // "REMOVED_FROM_STAGE" — очищення при unmount
            window.removeEventListener('keydown', onKey);
        };
    }, []);

    return <div>...</div>;
}

Це не поверхнева подібність. Це той самий контракт: «елемент з’явився на сцені — ініціалізуйся, зник — прибери за собою». React componentDidMount() і componentWillUnmount() — це буквально ADDED_TO_STAGE і REMOVED_FROM_STAGE під іншими назвами. А useEffect із cleanup-функцією — це той самий патерн, згорнутий у один виклик.

Flex framework (2004) пішов ще далі. Його компонентний lifecycle — createChildren() → commitProperties() → measure() → updateDisplayList() — передбачив React на десятиліття. Invalidation model у Flex працювала так: коли змінювалися дані, компонент позначався як «брудний», а оновлення відбувалося в наступному render-циклі, batch-ом. Саме так працює React: setState не оновлює DOM негайно — він планує оновлення, яке відбудеться при наступному рендерингу.

Event Model: capture → target → bubble

ActionScript 3 реалізував повну подієву модель DOM Level 3 — capture phase → target phase → bubbling phase — ще до того, як браузери нормально її підтримали. Події подорожували від Stage вниз через батьківські контейнери до цільового вузла (capture), досягали цілі (target), потім піднімалися назад (bubble).

AS3 використовував addEventListener() з тим самим API, що є в DOM сьогодні: addEventListener(type, listener, useCapture). event.target vs event.currentTarget, event.stopPropagation(), делегування подій через батьківський контейнер — усе це AS3-розробники використовували щодня.

React SyntheticEvent робить по суті те саме, але додає шар абстракції. React перехоплює нативні DOM-події на рівні кореня, а потім симулює власний capture/bubble roundtrip через дерево віртуальних компонентів. Це дозволяє нормалізувати кросбраузерні відмінності — ту саму проблему, яку Flash розв’язав наявністю єдиної VM.

Ширший контекст: від Flash до сучасної архітектури

Еволюція від Flash-ери до сучасних фреймворків йшла чіткою траєкторією. Спочатку Flash/Flex — моноліт із display list, компонентною моделлю, lifecycle-методами, data binding. Потім jQuery/Backbone/Angular 1 — ручна маніпуляція DOM, перші спроби структури. І нарешті React, Vue, Svelte — компонентно-центричний підхід, який повторив головну ідею Flash/Flex: прив’язати бізнес-логіку до lifecycle компонента в ієрархічному дереві.

Хоча React не цитує ActionScript як пряме натхнення (його корені — в XHP та функціональному програмуванні), структурні паралелі безпомилкові: кероване дерево візуальних об’єктів із lifecycle-хуками, уніфікована подієва система з bubbling/capture, декларативний підхід до оновлення UI. Усе це AS3-розробники мали в руках з 2006 року.

А AMF — бінарний протокол Flash — знайшов спадкоємців у Protocol Buffers, MessagePack і gRPC. Ідея «типізовані об’єкти в компактному бінарному форматі замість текстового JSON» пережила Flash і стала стандартом у сучасних мікросервісних архітектурах.

Замість висновку

Flash зробив для вебу те, що iPhone зробив для мобільних: показав, яким може бути досвід, коли технологія не обмежує уяву. Без Flash не було б YouTube, веб-ігор, Rich Internet Applications — всього, що зробило веб чимось більшим за колекцію документів.

99% проникнення не врятувало від відкритих стандартів. 1100 CVE зробили Flash токсичним. Відмова Apple поставила хрест на мобільному майбутньому. Але найкращі ідеї переживають свої реалізації. Display List живе у Virtual DOM. Event model AS3 — у React SyntheticEvent. Flex lifecycle — у хуках React і Vue. AMF — у Protocol Buffers. ActionScript 3 — у TypeScript.

Коли ви пишете useEffect з cleanup-функцією, ви працюєте з патерном, який Flash-розробники використовували у 2006 році. Просто тепер він називається інакше.

Навіть у свої найкращі роки Flash не був єдиним на полі бою. Поки Flash домінував у мультимедіа, відкритий веб не стояв на місці. jQuery, Prototype, MooTools — ціла хвиля бібліотек намагалася вирішити проблеми DHTML-ери без плагінів. Про це — у наступній статті циклу.

Корисні ресурси:

• Ruffle — Flash Player емулятор — запускайте Flash-контент у сучасному браузері
• FlashPoint Archive — 170 000+ збережених Flash-ігор
• AVM2 Overview (PDF) — специфікація віртуальної машини AS3
• «Thoughts on Flash» — Steve Jobs — відкритий лист Джобса

Працювали з Flash/ActionScript? Які проекти робили? Можливо, мігрували Flash-додатки на JavaScript — як пройшов перехід? Поділіться досвідом у коментарях 👇

Більше про фронтенд, бекенд, архітектуру та свідоме програмування — у моєму Telegram-каналі.