​​Figma. Технологическое закулисье Инновация фигмы еще и в том, что Интернет не задумывался как универсальная вычислительная платформа. Он начинался как технология, в первую очередь для документов, и имел кучу вещей для разработки приложений, прикрученных сверху. Этот материал обычно принимал форму конкретных API-интерфейсов для единичных случаев. Обычно указывают примерно следующее в качестве иллюстрации: - СSS имеет множество причудливых алгоритмов макета текста, но у него нет возможности настроить алгоритмы или прочитать результат того, что сделал браузер. - Все браузеры предоставляют высокопроизводительный композитор графического процессора, но в Интернете нет возможности подключиться к алгоритму рендеринга и изменить способ работы композитинга, чтобы добавить такие вещи, как оптимизация производительности или пользовательские режимы наложения. - Браузеры встраивают высокооптимизированные декодеры изображений, которые асинхронно декодируют изображения вне потока пользовательского интерфейса с использованием новейших аппаратных функций, но нет API для передачи параметров декодерам. - Такие технологии, как WebGL и asm.js, позволяют разработчикам обходить браузер и напрямую общаться с оборудованием. Именно это достижение, наконец, сделало практичными высокопроизводительные графические веб-приложения - типа Figma для коллаборации. Figma написана на C ++ и скомпилирована в JavaScript с помощью кросс-компилятора emscripten. Все объекты C ++ - это просто зарезервированные диапазоны в заранее выделенном типизированном массиве, поэтому сборщик мусора JavaScript никогда не задействуется. Рендеринг Существующие средства рендеринга не очень подходили для фигмы, если верить дневникам разработчиков. - HTML и SVG содержат много багажа и часто работают намного медленнее, чем API 2D-холста. Обычно они оптимизированы для прокрутки, а не для масштабирования, как нужно в графическом редакторе - Нет никаких гарантий относительно ускорения графического процессора, и многие вещи по-прежнему обрабатываются центральным процессором, который в некоторых случаях может быть довольно медленным. - Поддержка режимов маскирования, размытия и наложения в HTML и SVG сильно различается в зависимости от браузера. - API-интерфейс 2D-холста - это API-интерфейс немедленного режима, а не API-интерфейс сохраненного режима, поэтому всю геометрию необходимо повторно загружать на видеокарту каждый кадр. Это излишне расточительно и может стать узким местом. - Макет текста несовместим между браузерами и даже несовместим между одним и тем же браузером на разных платформах. В итоге для рендеринга реализовали все с нуля, используя WebGL. Внутренний рендерер фигмы - это высокооптимизированный движок на основе тайлов с поддержкой маскирования, размытия, размытых градиентов, режимов наложения, непрозрачности вложенных слоев и многого другого.