Код
#подборки

Must read. 5 свежих англоязычных статей о фронтенд-разработке

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

tesla / youtube

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

11 трендов во фронтенд-разработке

Зачем читать: узнать, куда движется фронтенд и что будет актуально в ближайшее время.

Где читать: на LambdaTest.

  • Прогрессивные веб-приложения (PWA) — это, по сути, приложения, которые работают в браузере. Их преимущество в том, что они занимают меньше памяти, чем классические приложения, при этом качеством жертвовать не приходится.
  • JAMstack — это стратегия, которая совмещает JavaScript, API и HTML/CSS. В последнее время её популярность сильно выросла и продолжает набирать обороты.
  • Микрофронтенды — это подход к разработке, когда большой проект разделяется на небольшие подпроекты, которые пилят разные команды. Это один из самых ярких трендов — подробнее о нём можно прочитать в следующей статье из нашей подборки.
  • ReactJS — библиотека для JavaScript, разработанная в Facebook* (точнее, уже Meta :)), по количеству скачиваний уже в несколько раз обогнала Angular. Популярность ReactJS растёт вместе с популярностью микрофронтендов: разработчики библиотеки тоже сделали фокус на дроблении больших проектов.
  • GraphQL — это набирающий популярность язык запросов и ещё одно дитя Facebook*. Его цель — сделать работу с данными эффективнее и проще, и его уже используют большие компании вроде Airbnb, Starbucks и Pinterest.

Микрофронтенды: что это такое и чем они важны для Angular?

Зачем читать: глубже разобраться в популярном подходе к фронтенд-разработке, его особенностях и будущем Angular.

Где читать: в блоге ITnext на Medium.

В списке трендов были упомянуты микрофронтенды — и о них стоит поговорить подробнее. Как мы уже писали, суть концепции в том, чтобы разделить проект на много маленьких микроприложений. Это своего рода микросервисы, только для фронтенд-разработки.

У микроприложений есть собственные домены, но они интегрированы в общую оболочку. В идеале они работают независимо друг от друга, а делают их разные команды. Общими же могут быть, например, данные, виджеты и интерфейс. Главная выгода такой независимости — надёжность. Даже если одно микроприложение упадёт, другие останутся в строю.

А при чём тут Angular? Angular — это платформа для разработки, которая будто специально создана для работы с микрофронтендами. Она рассчитана на приложения со структурой монорепозитория, которые состоят из отдельных проектов и библиотек. Кроме того, в неё встроено много удобных фич, которые придутся ко двору при работе с микроприложениями: модули, маршрутизация, ленивая загрузка. Это способствует росту популярности Angular, а значит, совсем скоро мы можем увидеть новые версии, которые будут ещё больше приспособлены к работе с микрофронтендами.

9 советов для производительности

Зачем читать: чтобы сделать свой проект быстрее.

Где читать: в блоге Bits and Pieces на Medium.

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

  • Сократите вызовы сервера. Тут всё просто — чем больше вызовов, тем дольше сайт грузится. Попробуйте сократить количество посторонних плагинов, следите за битыми ссылками и используйте CSS-спрайты.
  • Избавьтесь от излишеств. Если вы используете слишком много нестандартных шрифтов, это тоже может отразиться на скорости. Они, несомненно, добавляют дизайну характера, но иногда стоит задуматься, не приносят ли они больше вреда, чем пользы.
  • Сжимайте файлы — отличия будут разительны! С этим поможет популярный метод Gzip или менее распространённый, но более эффективный Brotli.
  • Используйте кэш на полную — тогда приложению не придётся так часто обращаться к серверу. Кроме кэша в браузере, не стоит забывать и о кэш-серверах, кэш-памяти и кэше диска.

Работа с функциями throttle и debounce

Зачем читать: узнать, чем различаются эти функции и как их использовать.

Где читать: в блоге ITnext на Medium.

Статья показывает на примерах, как работать с throttle и с debounce — функциями JavaScript. Но для начала — зачем они нужны и чем различаются?

Throttle позволяет ограничить периодичность, с которой функция выполняется. Это пригодится, если ваша функция завязана на положение ползунка. Чтобы ей не пришлось выполняться слишком часто во время быстрой прокрутки, её можно ограничить временем. Тогда она отсчитает заданное время — и только потом выполнится, используя последнее положение ползунка.

Debounce делает примерно то же самое, но она не просто отсчитывает время, а ещё и следит за тем, чтобы во время отсчёта не произошло ещё каких-то действий. То есть если продолжить скроллить, то таймер обновится.

О безопасности во фронтенд-разработке

Зачем читать: понять, какие слабости могут быть у вашего проекта и как их исправить.

Где читать: в блоге codequest на Medium.

Безопасность — ключевой аспект в разработке, и фронтенда это тоже касается. Если вы хотите сделать приложение безопаснее — в первую очередь надо определить угрозы и слабые места. Есть вещи, на которые стоит обратить внимание, — вот несколько советов.

  1. Не забывайте про особенности браузеров: некоторые функции работают в разных браузерах по-разному. Например, неплохо быть осторожными с iframes: у предков и наследников есть доступ друг к другу.
  2. Контроль входных пользовательских данных очень важен и поможет избежать неожиданностей. С этим помогут тулы joi и superstruct.
  3. Фронтенд не должен работать с конфиденциальными данными — за них отвечает бэкенд. Иначе они будут у всех на виду и злоумышленники могут этим воспользоваться.
  4. С помощью CPS (Content Security Policy) можно сделать список безопасных ресурсов, с которыми вашему приложению можно взаимодействовать, а Features Policy позволяет ограничить использование камеры и геолокации. Это поможет снизить вероятность утечки данных и других неприятностей.
* Решением суда запрещена «деятельность компании Meta Platforms Inc. по реализации продуктов — социальных сетей Facebook* и Instagram* на территории Российской Федерации по основаниям осуществления экстремистской деятельности».
Жизнь можно сделать лучше!
Освойте востребованную профессию, зарабатывайте больше и получайте от работы удовольствие.
Каталог возможностей
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована