Привет, Хабр!
Сегодня мы хотели предложить вам интересный текст о том, как развивается фронтенд в наше время, вернее, по мысли автора — после React. Вероятно, пост мог бы быть и объемнее, поэтому, если автор напишет продолжение — мы также постараемся не упустить и перевести.
Добро пожаловать под кат!
Едва появившись, React сразу изменил правила игры. Он ознаменовал новую эру в разработке клиентской части. Его однонаправленный поток данных, JSX и декларативный способ определения представлений просто сводили с ума. React быстро приобрел огромную популярность, и даже сегодня, 6 лет спустя, он остается одной из самых популярных библиотек для фронтенда.
Однако, экосистема фронтенда быстро развивается, в этой области разрабатывается масса интересных проектов. Я постоянно высматриваю следующую технологию, которая в очередной раз изменит правила игры. Мне нравится, когда в тузы выходит вчерашний аутсайдер, полностью подрывающий привычные нам подходы к работе – как это сделал React 6 лет назад.
Радость от нахождения новой технологии, помогающей тебе стать продуктивнее, чем когда-либо ранее – бесценна. Очень важно изучать, что еще кроме React существует вокруг, даже если вы считаете себя именно специалистом по React. Хороший разработчик сам подбирает инструменты, нужные для решения задачи. Он ��олжен знать много парадигм, языков и инструментов.
В последнее время я провел кое-какие исследования, поэкспериментировал и нашел несколько по-настоящему интересных библиотек и новых веб-стандартов, у которых, на мой взгляд, есть потенциал. Все, о чем я расскажу в этом посте, доступно для использования в продакшене уже сегодня. Эти технологии нельзя назвать «передним краем», но пока они не получили широкого распространения.
Начнем с совершенно новых фреймворков, прививающих новые способы мышления, а не перелицовывающие чего-то уже существующего. Таков Svelte. Это новая парадигма в клиентской экосистеме.
Итак, почему же уникален Svelte? В основном – по двум причинам. Во-первых, в нем создаются безумно маленькие пакеты, поскольку в них не включается среда времени выполнения. Пропагандисты Svelte называют это «нулевая среда исполнения». Среда исполнения React весит около 100 кб, и этот объем добавляется сверх пакета каждого приложения React.
Второе важное достоинство Svelte – его синтаксис. Он настолько минимален, как будто синтаксиса там нет вообще. Мы к этому еще вернемся.
Svelte многое заимствует у React и Vue. Если вы имеете опыт работы с React, то уже много знаете, и времени на освоение Svelte вам почти не понадобится.
Давайте рассмотрим немного кода, чтобы составить впечатление о Svelte.
Для определения нового компонента создается новый файл, и имя этого файла будет именем компонента. В этом файле будет опциональный раздел script, опциональный раздел styles и, что немаловажно, сам шаблон HTML. Svelte не использует JSX, зато применяет собственный язык шаблонов.
Немного напоминает Vue, но проще.
Синтаксис… а тут нет особенного синтаксиса, это просто чистый JavaScript. Хотите задать состояние? Просто увеличьте переменную
Нет
Важнейшая составляющая веб-фреймворка – его документация. React прославился своей замечательной документацией, многие учат его только по докам. У Svelte документация также действительно хорошая, насколько я смог убедиться. Мне, как новичку Svelte, больше всего нравятся примеры в документации по этому фреймворку:
Во многих случаях я примерно знаю, что мне нужно. Например, изменить состояние компонента, добавить обработчики событий, получить некоторое глобальное состояние (как в Redux). Дальше мне нужно быстро посмотреть, как это делается. Раздел с примерами – образчик такого рода. Мне не приходится гуглить статьи в каких-нибудь блогах или смотреть листинги на Github. Просто просмотреть нужный раздел. Красота!
Есть даже кое-что похожее на Gatsby и Next.js. Вещь называется Sapper, кодить на ней начинаешь очень быстро. Позволяет создавать одностраничные приложения со статическими сгенерированными HTML-страницами, чем и н��поминает Gatsby/Next.js.
В Svelte также есть альтернатива Redux, именуемая хранилищами (stores). Они невероятно минималистичные. Хранилище создается так:
Затем хранилище можно обновить вот так.
Стереотипного кода нет вообще, и вся эта фича целиком встроена в Svelte – никаких дополнительных зависимостей. Теперь вспомните, сколько мороки с добавлением Redux в проект React.
Команда React относится к Svelte не с таким воодушевлением, как я. Они считают, что повышение производительности, связанное с отказом от среды времени исполнения, является пренебрежимым. Только в очень специфических случаях, например, при работе со встроенными виджетами и т.д. такая игра стоит свеч. Кроме того, у нас же есть Gatsby и Next, поэтому, по мысли сообщества React, небольшое повышение скорости значит еще меньше (извините, не помню, где это читал. Если найдете – дайте мне знать пожалуйста, в Твиттере я @karljakoblind). В данном случае я утверждаю, что любое улучшение по скорости имеет значение, и отмахиваться от экономии в 100 kb на каждом пакете лишь по той причине, что «это пригодится только с виджетами» — плохая аргументация. Чтобы сделать веб отличным и доступным, мы всяко должны выполнить все виды оптимизации производительности, какие только сможем. Если вы когда-нибудь занимались доводкой приложения, добиваясь повышения его производительности, то знаете, как много значат даже самые ме��кие улучшения. Именно сумма всех мелких усовершенствований складывается в супербыструю загрузку, происходящую как по волшебству.
В следующий раз, когда буду приступать к проекту, который хорошо вышел бы на React, я всерьез подумаю, а не применить ли вместо него Svelte. Изучая Svelte, я удивился, насколько продуктивен этот фреймоврк, даже если не читать документацию. Все, что я сделал – проработал примеры и немного поупражнялся с Sapper – и все равно мне показалось, что работа идет продуктивнее, чем с React. Думаю, такая высокая продуктивность как-то связана с минималистическим синтаксисом. Также очень ценно, что, без какой-либо дополнительной работы мы получаем столь компактные пакеты. Приложения, которые быстро загружаются, очень нравятся как нашим пользователям, так и Google!
Есть ли у Svelte какие-нибудь недостатки? Честно говоря, мне приходит на ум всего один. Дело в том, что Svelte пока нов и не очень широко используется. Поэтому сообщество у него ограниченное, и, что, пожалуй, даже важнее – не так много (пока?) компаний, нуждающихся в специалистах по Svelte. Если вы разработчик-джуниор и ищете работу, то, думаю, вам разумнее сначала выучить React. Однако, если вы разработчик-сеньор (либо джуниор, и у вас много времени), решительно рекомендую присмотреться к Svelte.
Подробнее
svelte.dev — официальный сайт
Video: Rich Harris — Rethinking reactivitity
Может быть, веб-компоненты – следующая великая технология? Я думаю, потенциал у нее определенно есть. Итак, что же представляют из себя веб-компоненты?
Веб-компоненты – это набор стандартов w3c для создания новых собственных HTML-тегов. С помощью этих стандартов можно создавать что угодно от виджетов до больших приложений.
А в большинстве крупных браузеров поддерживается этот новый стандарт:
В Internet Explorer такие возможности поддерживаются при помощи полифиллов.
Создавая веб-компонент, вы тем самым создаете новый нативный элемент DOM. Ситуация не как в React, где создается «виртуальный элемент DOM», впоследствии внедряемый в DOM.
Самый приятный аспект Svelte заключался в том, что он убирает среду времени выполнения, и то же самое касается веб-компонентов. При создании нативного элемента DOM вы не нуждаетесь в среде времени выполнения, для запуска приложения достаточно обычного браузера.
Поскольку это всего лишь элементы DOM, использовать их может любая веб-страница. Можно создавать виджеты или целые приложения, которые затем будут внедряться в уже существующие приложения. Не важно, на чем именно вы программируете – на Angular, React, Vue или чем-то совершенно ином. Речь идет о самых обычных элементах DOM, таких как тег <div>.
Таким образом открываются совершенно новые возможности и новые подходы к архитектуре больших предложений для клиентской части. Один из примеров такого рода – микрофронтенды.
Можно напрямую писать веб-компоненты, но, на самом деле, с точки зрения разработки это не очень хорошая практика. Лучше воспользоваться фреймворком, выполняющим компиляцию до уровня веб-компонентов. Два популярных фреймворка такого рода — Stencil.js и Polymer (от Google).
При использовании веб-компонентов их пакеты получаются очень компактными, так как нет среды времени выполнения. Посмотрите на следующие бенчмарки:
Заметили в этом списке Svelte, о котором шла речь выше? Svelte может компилироваться до уровня компонентов, и пакет, генерируемый им, получается совсем маленьким.
Однако, еще интереснее взглянуть, насколько мельче все пакеты веб-компонентных фреймворков по сравнению с пакетами «классических» фреймворков, например, React и Angular.
Хотя, React также может компилироваться до веб-компонентов, он их не поддерживает, по данным custom-elements-everywhere.com.
Однако, полная поддержка может воспоследовать; возможно, команда React просто собирается пойти на этот шаг, только как следует все продумав перед запуском. Одна из причин такой уклончивости — в веб-компонентах используется императивный стиль, а не декларативный, как в React. Может быть, когда-нибудь в React появится полная поддержка веб-компонентов, а может и нет. Пока же, если собираетесь создавать веб-компоненты, пользуйтесь вместо React другой библиотекой.
Мне представляется, что наибольшую пользу веб-компоненты приносят, когда вы применяете их в микрофронтендовой архитектуре. Если вы работаете в крупной организации, где действует сразу много команд, использующих разные клиентские библиотеки, то совместная работа над кодом в разных командах может оказаться нетривиальной задачей. В данном случае подход к работе иной, нежели с React. Специализация React заключается в оркестровке целого приложения, а не в создании виджетов. Как видите, React и веб-компоненты могут мирно сосуществовать друг с другом.
У веб-компонентов примерно такие же ��едостатки, как и у Svelte. Если вы верстаете резюме, собираясь устраиваться на работу, то веб-компоненты не назовешь приоритетным делом. Как минимум, не приоритетнее React. Мой опыт подсказывает, что компании пока не столь взыскательные (пока?).
В разработке фронтенда творится масса всего крутого и интересного. React – всего один из фреймворков, и просто необходимо ориентироваться в том, что происходит за его пределами.
Если вы – senior-разработчик и специализируетесь на фронтенде, то, конечно, подбираете для работы наилучшие инструменты. Зачастую это React, но, возможно, для вашего следующего проекта лучше подойдут веб-компоненты.
Сегодня мы хотели предложить вам интересный текст о том, как развивается фронтенд в наше время, вернее, по мысли автора — после React. Вероятно, пост мог бы быть и объемнее, поэтому, если автор напишет продолжение — мы также постараемся не упустить и перевести.
Добро пожаловать под кат!
Едва появившись, React сразу изменил правила игры. Он ознаменовал новую эру в разработке клиентской части. Его однонаправленный поток данных, JSX и декларативный способ определения представлений просто сводили с ума. React быстро приобрел огромную популярность, и даже сегодня, 6 лет спустя, он остается одной из самых популярных библиотек для фронтенда.
Однако, экосистема фронтенда быстро развивается, в этой области разрабатывается масса интересных проектов. Я постоянно высматриваю следующую технологию, которая в очередной раз изменит правила игры. Мне нравится, когда в тузы выходит вчерашний аутсайдер, полностью подрывающий привычные нам подходы к работе – как это сделал React 6 лет назад.
Радость от нахождения новой технологии, помогающей тебе стать продуктивнее, чем когда-либо ранее – бесценна. Очень важно изучать, что еще кроме React существует вокруг, даже если вы считаете себя именно специалистом по React. Хороший разработчик сам подбирает инструменты, нужные для решения задачи. Он ��олжен знать много парадигм, языков и инструментов.
В последнее время я провел кое-какие исследования, поэкспериментировал и нашел несколько по-настоящему интересных библиотек и новых веб-стандартов, у которых, на мой взгляд, есть потенциал. Все, о чем я расскажу в этом посте, доступно для использования в продакшене уже сегодня. Эти технологии нельзя назвать «передним краем», но пока они не получили широкого распространения.
Svelte
Начнем с совершенно новых фреймворков, прививающих новые способы мышления, а не перелицовывающие чего-то уже существующего. Таков Svelte. Это новая парадигма в клиентской экосистеме.
Итак, почему же уникален Svelte? В основном – по двум причинам. Во-первых, в нем создаются безумно маленькие пакеты, поскольку в них не включается среда времени выполнения. Пропагандисты Svelte называют это «нулевая среда исполнения». Среда исполнения React весит около 100 кб, и этот объем добавляется сверх пакета каждого приложения React.
Второе важное достоинство Svelte – его синтаксис. Он настолько минимален, как будто синтаксиса там нет вообще. Мы к этому еще вернемся.
Svelte многое заимствует у React и Vue. Если вы имеете опыт работы с React, то уже много знаете, и времени на освоение Svelte вам почти не понадобится.
Давайте рассмотрим немного кода, чтобы составить впечатление о Svelte.
Для определения нового компонента создается новый файл, и имя этого файла будет именем компонента. В этом файле будет опциональный раздел script, опциональный раздел styles и, что немаловажно, сам шаблон HTML. Svelte не использует JSX, зато применяет собственный язык шаблонов.
<script>
export let counter; // вот так определяются произвольные свойства
</script>
<style>
p {
color: purple;
}
</style>
<p>The counter is {counter}</p>Немного напоминает Vue, но проще.
Синтаксис… а тут нет особенного синтаксиса, это просто чистый JavaScript. Хотите задать состояние? Просто увеличьте переменную
counter.<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>Нет
this.setState. Нет хуков useState. Просто JavaScript. На таких небольших примерах сложно оценить весь минимализм синтаксиса. Я так программировал несколько часов, и получилось суперпродуктивно, так как для решения задачи приходилось писать настолько меньше кода. Мне казалось, словно я бегу, а кто-то меня еще подталкивает в спину. Словно я мухлюю. Такой минималистический синтаксис – решение, принятое создателями Svelte совершенно осознанно. Они сами объясняют в посте Write less code, почему. Вот отличная цитата из этой статьи: … с увеличением базы кода время на разработку проекта и количество багов возрастают квадратично, а не линейно. — Write less code
Важнейшая составляющая веб-фреймворка – его документация. React прославился своей замечательной документацией, многие учат его только по докам. У Svelte документация также действительно хорошая, насколько я смог убедиться. Мне, как новичку Svelte, больше всего нравятся примеры в документации по этому фреймворку:
Во многих случаях я примерно знаю, что мне нужно. Например, изменить состояние компонента, добавить обработчики событий, получить некоторое глобальное состояние (как в Redux). Дальше мне нужно быстро посмотреть, как это делается. Раздел с примерами – образчик такого рода. Мне не приходится гуглить статьи в каких-нибудь блогах или смотреть листинги на Github. Просто просмотреть нужный раздел. Красота!
Есть даже кое-что похожее на Gatsby и Next.js. Вещь называется Sapper, кодить на ней начинаешь очень быстро. Позволяет создавать одностраничные приложения со статическими сгенерированными HTML-страницами, чем и н��поминает Gatsby/Next.js.
В Svelte также есть альтернатива Redux, именуемая хранилищами (stores). Они невероятно минималистичные. Хранилище создается так:
import { writable } from 'svelte/store';
export const count = writable(0);Затем хранилище можно обновить вот так.
count.set(0);Стереотипного кода нет вообще, и вся эта фича целиком встроена в Svelte – никаких дополнительных зависимостей. Теперь вспомните, сколько мороки с добавлением Redux в проект React.
Как команда React относится к Svelte?
Команда React относится к Svelte не с таким воодушевлением, как я. Они считают, что повышение производительности, связанное с отказом от среды времени исполнения, является пренебрежимым. Только в очень специфических случаях, например, при работе со встроенными виджетами и т.д. такая игра стоит свеч. Кроме того, у нас же есть Gatsby и Next, поэтому, по мысли сообщества React, небольшое повышение скорости значит еще меньше (извините, не помню, где это читал. Если найдете – дайте мне знать пожалуйста, в Твиттере я @karljakoblind). В данном случае я утверждаю, что любое улучшение по скорости имеет значение, и отмахиваться от экономии в 100 kb на каждом пакете лишь по той причине, что «это пригодится только с виджетами» — плохая аргументация. Чтобы сделать веб отличным и доступным, мы всяко должны выполнить все виды оптимизации производительности, какие только сможем. Если вы когда-нибудь занимались доводкой приложения, добиваясь повышения его производительности, то знаете, как много значат даже самые ме��кие улучшения. Именно сумма всех мелких усовершенствований складывается в супербыструю загрузку, происходящую как по волшебству.
Итак, стоит ли мне попробовать Svelte?
В следующий раз, когда буду приступать к проекту, который хорошо вышел бы на React, я всерьез подумаю, а не применить ли вместо него Svelte. Изучая Svelte, я удивился, насколько продуктивен этот фреймоврк, даже если не читать документацию. Все, что я сделал – проработал примеры и немного поупражнялся с Sapper – и все равно мне показалось, что работа идет продуктивнее, чем с React. Думаю, такая высокая продуктивность как-то связана с минималистическим синтаксисом. Также очень ценно, что, без какой-либо дополнительной работы мы получаем столь компактные пакеты. Приложения, которые быстро загружаются, очень нравятся как нашим пользователям, так и Google!
Есть ли у Svelte какие-нибудь недостатки? Честно говоря, мне приходит на ум всего один. Дело в том, что Svelte пока нов и не очень широко используется. Поэтому сообщество у него ограниченное, и, что, пожалуй, даже важнее – не так много (пока?) компаний, нуждающихся в специалистах по Svelte. Если вы разработчик-джуниор и ищете работу, то, думаю, вам разумнее сначала выучить React. Однако, если вы разработчик-сеньор (либо джуниор, и у вас много времени), решительно рекомендую присмотреться к Svelte.
Подробнее
svelte.dev — официальный сайт
Video: Rich Harris — Rethinking reactivitity
Веб-компоненты
Может быть, веб-компоненты – следующая великая технология? Я думаю, потенциал у нее определенно есть. Итак, что же представляют из себя веб-компоненты?
Веб-компоненты – это набор стандартов w3c для создания новых собственных HTML-тегов. С помощью этих стандартов можно создавать что угодно от виджетов до больших приложений.
А в большинстве крупных браузеров поддерживается этот новый стандарт:
В Internet Explorer такие возможности поддерживаются при помощи полифиллов.
Создавая веб-компонент, вы тем самым создаете новый нативный элемент DOM. Ситуация не как в React, где создается «виртуальный элемент DOM», впоследствии внедряемый в DOM.
<my-component hello="world"></my-component>Самый приятный аспект Svelte заключался в том, что он убирает среду времени выполнения, и то же самое касается веб-компонентов. При создании нативного элемента DOM вы не нуждаетесь в среде времени выполнения, для запуска приложения достаточно обычного браузера.
Поскольку это всего лишь элементы DOM, использовать их может любая веб-страница. Можно создавать виджеты или целые приложения, которые затем будут внедряться в уже существующие приложения. Не важно, на чем именно вы программируете – на Angular, React, Vue или чем-то совершенно ином. Речь идет о самых обычных элементах DOM, таких как тег <div>.
<body>
<my-app name="Hello world"></my-app>
<script src="/my-app.js" type="module"></script>
</body>Таким образом открываются совершенно новые возможности и новые подходы к архитектуре больших предложений для клиентской части. Один из примеров такого рода – микрофронтенды.
Можно напрямую писать веб-компоненты, но, на самом деле, с точки зрения разработки это не очень хорошая практика. Лучше воспользоваться фреймворком, выполняющим компиляцию до уровня веб-компонентов. Два популярных фреймворка такого рода — Stencil.js и Polymer (от Google).
При использовании веб-компонентов их пакеты получаются очень компактными, так как нет среды времени выполнения. Посмотрите на следующие бенчмарки:
Заметили в этом списке Svelte, о котором шла речь выше? Svelte может компилироваться до уровня компонентов, и пакет, генерируемый им, получается совсем маленьким.
Однако, еще интереснее взглянуть, насколько мельче все пакеты веб-компонентных фреймворков по сравнению с пакетами «классических» фреймворков, например, React и Angular.
Как относятся к веб-компонентам в React?
Хотя, React также может компилироваться до веб-компонентов, он их не поддерживает, по данным custom-elements-everywhere.com.
Однако, полная поддержка может воспоследовать; возможно, команда React просто собирается пойти на этот шаг, только как следует все продумав перед запуском. Одна из причин такой уклончивости — в веб-компонентах используется императивный стиль, а не декларативный, как в React. Может быть, когда-нибудь в React появится полная поддержка веб-компонентов, а может и нет. Пока же, если собираетесь создавать веб-компоненты, пользуйтесь вместо React другой библиотекой.
Следует ли мне пользоваться веб-компонентами?
Мне представляется, что наибольшую пользу веб-компоненты приносят, когда вы применяете их в микрофронтендовой архитектуре. Если вы работаете в крупной организации, где действует сразу много команд, использующих разные клиентские библиотеки, то совместная работа над кодом в разных командах может оказаться нетривиальной задачей. В данном случае подход к работе иной, нежели с React. Специализация React заключается в оркестровке целого приложения, а не в создании виджетов. Как видите, React и веб-компоненты могут мирно сосуществовать друг с другом.
У веб-компонентов примерно такие же ��едостатки, как и у Svelte. Если вы верстаете резюме, собираясь устраиваться на работу, то веб-компоненты не назовешь приоритетным делом. Как минимум, не приоритетнее React. Мой опыт подсказывает, что компании пока не столь взыскательные (пока?).
Заключительные мысли
В разработке фронтенда творится масса всего крутого и интересного. React – всего один из фреймворков, и просто необходимо ориентироваться в том, что происходит за его пределами.
Если вы – senior-разработчик и специализируетесь на фронтенде, то, конечно, подбираете для работы наилучшие инструменты. Зачастую это React, но, возможно, для вашего следующего проекта лучше подойдут веб-компоненты.
