Миско Хевери — технический директор Builder, онлайн-дизайнера визуальных сайтов. Он также является создателем Qwik, JavaScript-фреймворка нового поколения. До того, как он начал работать в Builder и Qwik, Хевери создал Angular, один из флагманских фреймворков JavaScript, и Karma, популярный инструмент для запуска тестов JavaScript.
Очевидно, что Хевери имеет долгую историю участия в мире JavaScript. У меня была возможность поговорить с ним о Qwik, Builder, проблемах с реактивностью, ускорении веб-приложений, помощи создателям контента и инженерам в сосуществовании и многом другом.
Мэтью Тайсон: Я рад поговорить с вами. Я открыл для себя Qwik, и это привело меня к Builder и вашей биографии. У вас действительно интересная история, включая создание Karma и Angular, поэтому мне не терпится услышать, что вы думаете о некоторых последних тенденциях в JavaScript.
Начнем с реактивности. Реактивность — одно из наиболее значительных достижений во внешнем коде, но это не идеальный мир.
Миско Хевери: Это сложно. Реактивность имеет множество замечательных свойств, но также и множество проблем. Основная проблема с реактивностью заключается в том, что для ее настройки и последующего отключения требуется много вычислительных ресурсов. Это негативно влияет на производительность и использование памяти. Следствием всего этого является то, что платформа должна загрузить все приложение, прежде чем сработает реактивность.
Qwik должен быть реактивным, потому что мы хотим быть ленивыми, но в то же время нам нужен такой подход к реактивности, который позволит фреймворку анализировать приложение, не загружая его. Qwik делает это, сохраняя информацию о реактивной подписке в DOM.
Мне бы хотелось узнать больше о том, как вы открыли для себя Qwik, чтобы больше людей могли сделать то же самое.
Тайсон: Я узнал о Qwik, посмотрев недавнюю презентацию Рича Харриса на Jamstack Conf. Он описывает, как несколько проектов пытаются устранить недостатки реактивных фреймворков.
Хевери: Спасибо, Рич!
Тайсон: Qwik — это переосмысление реактивности с первых принципов. Действительно интересно, как у вас есть возможность создавать приложения со встроенными границами отложенной загрузки. Как у вас возникла мотивация сделать это и вы пришли к такому подходу?
Хевери: Итак, идея возникла из моего выступления на ng-conf несколько лет назад. Там я в принципе описал, что такое сегодня Qwik. Я продолжал видеть, что другие фреймворки по сути перефразируют одни и те же старые проблемы, и ни один из фреймворков, похоже, не решает проблему «слона в комнате». Кажется, все они относятся к ленивой загрузке как к второстепенной мысли, и я хотел это изменить.
Я поставил перед собой цель создать полностью ленивую загружаемую систему и начал работать в обратном направлении, чтобы увидеть, какую структуру я мог бы построить, удовлетворяющую этим ограничениям. Большинство фреймворков заботятся о размере фреймворка, а не о размере приложения. Размер приложения — не «их проблема». Мне нужна была среда, которая конкретно решает проблему размера приложения. Любое реальное приложение на несколько порядков больше, чем фреймворк, поэтому именно на этом нам следует сосредоточиться.
Тайсон: Интересный!
Итак, вы являетесь техническим директором Builder и создателем Qwik. Builder — впечатляющий редактор WYSIWYG. Использует ли он Qwik под капотом?
Хевери: Мы собираемся опубликовать нашу новую домашнюю страницу, на которой будут представлены все новейшие возможности Qwik. Он будет загружать только HTML-код в верхней части страницы, интерактивную загрузку с отложенной загрузкой и запускать все сторонние скрипты в веб-воркере. Наша цель — получить 100/100 результатов в Google PageSpeed и показать, что сайты электронной коммерции могут работать быстро.
Наша домашняя страница создается на основе Qwik, и как только мы ее выпустим, мы сможем предложить те же возможности нашим клиентам. Поэтому мы будем предоставлять Qwik как проект с открытым исходным кодом и как сервис для создания невероятно быстрых сайтов электронной коммерции.
Тайсон: Builder позволяет выбирать различные фреймворки для вывода из визуального дизайнера (React, Vue и т. д.). Я полагаю, Qwik станет еще одним вариантом вывода в будущем?
Хевери: Да, у нас уже есть Qwik, работающий с Builder, и скоро он будет доступен всем нашим клиентам.
Тайсон: Является ли наличие нескольких экспортных объектов такой же сложной технической задачей, как кажется?
Хевери: Это решается митозом. Mitosis — это проект, который позволяет вам один раз написать компонент, а затем экспортировать его во все распространенные веб-фреймворки. Это дает вам возможность «написать один раз, запустить где угодно».
Тайсон: Qwik позволяет создавать приложения с границами ресурсов, состояний и обработчиков событий. Это означает, что приложение может обеспечить детальный контроль над тем, что загружается. Это справедливое описание?
Хевери: Да! Qwik нужно было решить несколько сложных технических задач, которые другие платформы просто игнорируют.
Во-первых, как разбить большие приложения на множество небольших, лениво загружаемых частей? Это сложнее, чем кажется, потому что на момент написания приложения вы не знаете, где находятся лучшие границы ленивой загрузки. Только после запуска приложения и наблюдения за его использованием в реальных условиях вы сможете определить, какие функции используются чаще всего.
Во-вторых, платформа не должна требовать загрузки и выполнения всех видимых компонентов на странице. Это то, чего требуют все существующие платформы: если вы видите компонент, вам необходимо загрузить и выполнить весь его код, прежде чем вы сможете сделать его интерактивным.
В-третьих, платформа должна сериализовать все прослушиватели событий в HTML. Без этого все шаблоны приложения придется скачивать с нетерпением.
В-четвертых, платформа должна сериализовать отношения данных между компонентами (реактивность). Без этого любая мутация состояния потребовала бы загрузки и выполнения всего приложения.
Тайсон: Это действительно полезная информация. Он показывает, где сейчас происходит большая часть событий в мире JavaScript.
Можете ли вы немного описать, что вы подразумеваете под «возобновляемым» Qwik?
Хевери: Возможно это демо может лучше это объяснить? Но основная идея заключается в том, что состояние приложения сериализуется в HTML, и поэтому платформа может продолжить выполнение с того места, где остановился сервер. Большим преимуществом этого является то, что клиенту не нужно повторять всю работу, которую только что выполнил сервер. Это делает запуск клиента мгновенным и значительно повышает удобство использования приложения. Поскольку Qwik загружает код для компонента только тогда, когда компонент необходимо изменить, код статического раздела сайта никогда не будет загружен.
Тайсон: Qwik находится в ранних версиях (хотя он способен продемонстрировать все основные идеи). В каких областях вы больше всего сосредоточены на продвижении, чтобы достичь уровня 1.0?
Хевери: Мы намеренно стараемся сделать первый выпуск минимальным. Ключевой особенностью является оптимизатор, который позволяет Qwik разбить ваше приложение на множество мелкозернистых фрагментов с отложенной загрузкой. Как вы можете себе представить, конструкция оптимизатора довольно сложна, но именно она обеспечивает всю магию Qwik. Поэтому в версии 1.0 мы просто хотим иметь возможность создать комплексное приложение и показать детализированную отложенную загрузку, как никогда раньше.
Тайсон: Какова связь между подходом Qwik к созданию приложений и сборщиком/сборщиком?
Хевери: Мы хотим иметь возможность создавать максимально быстрые сайты для наших клиентов, и Qwik — это способ добиться этого. Поскольку большинство наших клиентов работают в сфере электронной коммерции, скорость напрямую влияет на конверсию и, следовательно, на доход.
Тайсон: Есть ли что-нибудь еще, чего бы вы хотели затронуть?
Хевери: Ключевой частью стратегии Qwik является Partytown. Qwik может сделать ваше приложение быстрым, но оказывается, что сторонние скрипты могут полностью уничтожить всю производительность, над созданием которой Qwik так усердно работал.
По этой причине Qwik необходимо не только обеспечить быстрый запуск вашего приложения, но также необходимо разгрузить все сторонние скрипты веб-работникам для поддержания высокой производительности. Partytown делает именно это. Это позволяет вам получить свой пирог и съесть его, создав среду в веб-воркере, которая может выполнять сценарии, оставляя основной поток пользователю.
Тайсон: Ого, интересно, я не знал о Partytown. Фреймворк для запуска дорогостоящих скриптов в рабочем потоке… Похоже, он может оказать огромное влияние на все виды приложений. Это чем-то напоминает мне способность Astro увлажнять компонент, когда поток простаивает.
Ребята, вы используете Partytown в Builder?
Хевери: Да, Partytown — ключевой элемент стратегии. Без Partytown было бы невозможно продемонстрировать 100/100 показателей Google PageSpeed для наших сайтов.
Тайсон: Builder полезен для маркетологов, поскольку позволяет им создавать сайты без технических знаний, но вы также оказываете большую поддержку разработчикам. Не могли бы вы рассказать немного о том, что делает Builder привлекательным для программистов?
Хевери: На самом деле Builder полезен как создателям контента, так и разработчикам программного обеспечения. Создатели контента хотят постоянно что-то настраивать, а инженеры просто хотят создавать новые функции. У этих двух групп разные графики выпуска. Маркетинг хочет, чтобы все было запущено в полночь в Черную пятницу, а инженеры просто хотят выпустить что-то (не по пятницам, чтобы любые сюрпризы не испортили их выходные). Таким образом, этот инструмент действительно позволяет двум группам людей сосуществовать более взаимодополняющим образом.
Тайсон: Ха! Это несколько забавных и реальных наблюдений о разработке программного обеспечения.
Помимо улучшенных инструментов, таких как Builder, как вы пытаетесь сбалансировать требования бизнес-стороны и инженерной стороны с позиции технического директора?
Хевери: Хаха, не уверен, что умею балансировать! Но да, я стараюсь разбить свою неделю на три дня, посвященные бизнесу, и два дня, посвященные программированию. Вам необходимо иметь четкое разделение, иначе вас засосет в черную дыру и вы никогда не выберетесь оттуда.
Тайсон: Есть ли способ сделать экспорт из Builder и изменить код вручную, затем импортировать его в Builder и снова отредактировать в дизайнере?
Хевери: Да, у нас есть как импортеры, так и экспортеры. HTML — это лишь один из многих форматов, которые мы поддерживаем. Например, можно создать дизайн в Figma, а затем импортировать его в Builder. Точно так же мы можем взять HTML-сайт и отправить его в Figma, чтобы творческие люди могли его улучшить, поэтому доступно довольно много вариантов импорта/экспорта.
Тайсон: Справедливо!
Я заметил, что в Builder есть несколько вариантов интеграции данных для использования хранилищ данных и API. Можете ли вы рассказать людям немного о них?
Хевери: Люди думают о Builder как о редакторе пользовательского интерфейса с возможностью перетаскивания. Но на самом деле это намного больше. Ключевой момент в Builder — это когда разработчики и создатели контента понимают, что они могут перетаскивать на страницу свои собственные компоненты.
Компоненты имеют входные данные/реквизиты, поэтому Builder также понимает привязку данных. Откуда берутся данные? Что ж, перечисленные там интеграции показывают вам все места, откуда вы можете получить данные. Например, ваш каталог поступает из Shopify, но вы передаете его в свои пользовательские компоненты.
Тайсон: Можно ли сказать, что Builder движется к тому, чтобы стать полноценной веб-IDE? Я заметил, что вы представили встроенное редактирование кода в качестве бета-функции.
Хевери: Я не думаю, что это верно. IDE требуют много вещей, которых нет в Builder и которые им не нужны, поэтому я не думаю, что это правильная характеристика.
Я бы сказал, что Builder делает ровно столько, сколько нужно творческим людям, чтобы выполнять свою работу так, чтобы она хорошо вписывалась в жизненный цикл инженерной разработки. Для этого вам не нужна полноценная IDE.
Тайсон: Я с нетерпением жду возможности увидеть, как вы и команда Builder будете использовать редактор. И как программист, мне не терпится получить Qwik 1.0.
Еще раз спасибо за уделенное время, Миско.
