Если вы создаете веб-сайты, у вас, вероятно, есть любимый фреймворк JavaScript, который вы используете.

И это не должно быть неожиданностью. Как только вы изучите конкретный фреймворк (или библиотеку, в случае React), вы узнаете все его плюсы и минусы. Вы научитесь делать дела эффективно. Вы подбираете советы и рекомендации по устранению проблем.

Конечно, так было и с фронтенд-инженером Джеком Пенхейлом.

Теперь, когда дело доходит до фреймворков, он может быть немного мастером на все руки, но у Джека также есть фаворит — React. Большая часть того, что он создает, — это React. Однако на этот раз мы попросили его немного выйти из своей зоны комфорта и использовать Svelte для создания Аркады.

Но сначала, что делает React таким замечательным?

React считается одним из самых популярных JavaScript-фреймворков (или библиотек) в мире. Он существует с 2011 года, первоначально был создан Facebook и используется другими крупными компаниями, такими как Netflix, Ubereats и AirBnB. Это наиболее часто используемый фреймворк, а это значит, что у него невероятно обширное сообщество ресурсов.

Согласно опросу Stackoverflow 2021 года, React был четвертым по популярности фреймворком JavaScript. Еще в прошлом году его полюбили 69,28% пользователей.

Интересно, однако, что на сцене появился новичок в SvelteJS.

Svelte был выпущен в 2016 году Ричем Харрисом и был принят большой группой крупных компаний, таких как Apple, Square, Spotify и другими. И, согласно тому же опросу, проведенному Stackoverflow, Svelte теперь является самой популярной структурой №1. Фактически, 71,47% разработчиков любят его использовать.

Что делает Svelte и React похожими, так это удивительно интерактивные, великолепные сайты, которые они могут создавать. Но следует отметить, что средний размер приложения при использовании Svelte составляет всего 1,6 КБ, тогда как наименьший размер приложения React, который можно сделать, составляет 42,2 КБ, то есть с ReactDOM.

Что это значит простыми словами?

Svelte — это то, что мы считаем «легким», и он помогает сайтам, использующим его, работать невероятно быстро. Там, где производительность сайта React высока, сайты Svelte — еще один шаг в категорию «отличных».

Одна из причин, по которой он использовал Svelte, заключалась в его высокой производительности, как упоминалось выше. Он хотел легкий вариант, который мог бы легко запускать игры в браузере.

Джек разработал дисплей в виде карусели, а также целевую страницу для всех игр.

Целью Fathym Arcade было просто и четко проиллюстрировать, как мы используем микроинтерфейсы. Страница была построена в Svelte, но каждая из этих игр была создана на разных языках JavaScript. Все они с открытым исходным кодом, и, поскольку мы даем вам ссылку на их репозитории, вы можете сразу же добавить одну из этих игр в свой новый проект веб-сайта, если хотите.

Конечно, это часть великолепия микро-интерфейсов: разработчики могут использовать любые фреймворки, библиотеки или генераторы статических сайтов, которые они хотят, для создания веб-сайтов.

«С микроинтерфейсами Fathym, независимо от того, на какой странице вашего сайта вы можете выбрать нужную структуру», — объяснил Пенхейл. «Если вы хотите создать целевую страницу, как я здесь, в Svelte, вы можете это сделать. Затем вы можете писать документы с помощью Docusaurus и запускать интернет-магазин с помощью React. Свобода делать все это — это хорошо, особенно когда вы работаете в команде, где у отдельных разработчиков есть предпочтения в отношении разных фреймворков».

«Svelte сам по себе прост в использовании и понятен разработчику, это в основном просто HTML, CSS и JavaScript», — сказал Пенхейл. «Он также выполняет намного больше работы во время компиляции по сравнению с другими крупными фреймворками, такими как Angular и React. Нельзя сказать, что он лучше любого из них, но он легкий и быстрый, что всегда является плюсом».

Многие в сообществе разработчиков были в восторге от неглубокой кривой обучения Svelte, а также от легкости дизайна. Это важная причина, по которой так много тех, кто слышал о фреймворке, хотят попробовать его использовать, как показано на следующем рисунке.

Конечно, поскольку для него это был новый фреймворк, при использовании Svelte возникали некоторые трудности.

«Одна из проблем, с которыми я столкнулся, — это когда разбить мой проект на более мелкие компоненты», — сказал он. «Было просто держать все на одной странице, пока мой основной файл не стал 500 строк. Подойдя к этому снова, у меня будет представление, основанное на компонентах».

Но там, где были проблемы, сильное и обширное сообщество Svelte помогло ему вернуться на правильный путь.

«С Svelte меня удивило то, насколько активно вокруг него работает сообщество разработчиков», — объяснил Пенхейл. «Меня беспокоило отсутствие библиотеки компонентов MUI, она уже была в пользовательском интерфейсе Svelte Material. На любые вопросы, которые у меня возникали, можно было легко ответить в документации или на Stackoverflow».

Итак, если вы новичок или опытный разработчик, архитектура микроинтерфейса Fathym может помочь вам во многих отношениях.

Прежде всего, это может быть ваше первое знакомство с микро-фронтендом. Как только вы попробуете их, вы просто влюбитесь в простоту возможности одновременного использования нескольких фреймворков и генераторов статических сайтов.

Даже если вы не впервые используете микрофронтенды, вы можете получить возможность впервые использовать фреймворк, например, Svelte. В аркаде Fathym представлены пять различных стилей JavaScript, и мы рекомендуем пользователям сразу же начать использовать эти игры с открытым исходным кодом на своем сайте.

Присоединяйтесь к Fathym сегодня бесплатно и перейдите на платную подписку, когда придет время.

Первоначально опубликовано на https://www.fathym.com.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.