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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Не забывайте про особенности браузеров: некоторые функции работают в разных браузерах по-разному. Например, неплохо быть осторожными с iframes: у предков и наследников есть доступ друг к другу.
2. Контроль входных пользовательских данных очень важен и поможет избежать неожиданностей. С этим помогут тулы joi и superstruct.
3. Фронтенд не должен работать с конфиденциальными данными — за них отвечает бэкенд. Иначе они будут у всех на виду и злоумышленники могут этим воспользоваться.
4. С помощью CPS (Content Security Policy) можно сделать список безопасных ресурсов, с которыми вашему приложению можно взаимодействовать, а Features Policy позволяет ограничить использование камеры и геолокации. Это поможет снизить вероятность утечки данных и других неприятностей.