React

Деструктуризация – это способ извлечь значения из массивов или свойства из объектов и присвоить их отдельным переменным. Алиасинг (переименование) позволяет дать новые имена этим переменным в процессе деструктуризации:

Зачем это нужно:

• Улучшает читаемость кода.

• Помогает избежать конфликтов имен – если у вас уже есть переменная city, можно использовать hometown.

• Пригодится при работе с API, если он возвращает данные с неподходящими для вашего кода именами.

Каррирование

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

Та же функция, но с использованием каррирования:

Зачем это нужно:

• Обеспечивает переиспользуемость функций.

• Повышает читаемость и модульность кода.

• Позволяет создавать новые функции на лету, используя уже существующие, например:

debounce() и throttle()

Дебаунсинг и троттлинг – техники оптимизации, которые помогают контролировать частоту вызова функций. Они особенно полезны при работе с событиями, которые могут происходить очень часто, например, прокрутка страницы или ввод текста.

debounce() работает так:

• Функция вызывается только после того, как прошло определенное время с момента последнего вызова.

• Если функция вызывается снова до истечения этого времени, таймер сбрасывается.

В этом примере функция поиска будет вызвана только через 300 миллисекунд после того, как пользователь перестанет вводить текст. Это позволяет избежать лишних запросов к серверу при каждом нажатии клавиши:

throttle() работает так:

• Функция вызывается не чаще, чем раз в заданный интервал времени.

• Если попытка вызвать функцию происходит до истечения интервала, вызов игнорируется.

В этом примере функция handleScroll будет вызываться не чаще, чем раз в 300 миллисекунд, независимо от того, сколько раз пользователь прокрутил страницу за это время:

Мемоизация

Мемоизация – техника оптимизации, связанная с кэшированием промежуточных результатов сложных вычислений. Вместо того чтобы каждый раз заново решать сложную задачу, мы записываем ответ и в следующий раз просто смотрим в наш кэш:

• Когда функция вызывается с определенными аргументами, мы сначала проверяем, вычисляли ли мы уже результат для этих аргументов.

• Если да, мы возвращаем сохраненный результат.

• Если нет, мы выполняем вычисление, сохраняем результат и возвращаем его.

Пример мемоизации при вычислении ряда Фибоначчи:

• Без мемоизации вычисление fibonacci(40) заняло бы очень много времени, потому что функция вызывала бы себя рекурсивно миллионы раз, повторяя одни и те же вычисления.

• С мемоизацией каждое число Фибоначчи вычисляется только один раз. При повторном запросе того же числа результат берется из кэша, что значительно ускоряет работу.

Когда использовать мемоизацию:

• Для функций с очень сложными вычислениями.

• Когда функция часто вызывается с одними и теми же аргументами.

• Когда функция  возвращает один и тот же результат для одних и тех же входных данных.

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

Proxy

Proxy позволяет нам обернуть объект и контролировать взаимодействие с ним. Мы можем перехватывать и изменять основные операции – чтение свойств, их запись, вызов функций и т. д. Proxy особенно полезен, когда нужно добавить дополнительное поведение к объектам, не изменяя их напрямую: это может быть полезно для отладки, для реализации реактивных систем (как в Vue.js), для создания умных объектов и многого другого:

Для чего еще можно использовать Proxy:

• Валидация – проверка данных перед их установкой в объект.

• Логирование – отслеживание использования и изменений свойств объекта.

• Создание вычисляемых на лету свойств.

• Безопасность – можно контролировать доступ к свойствам объекта.

Генераторы

Генераторы – особый тип функций в JavaScript:

• Могут приостанавливать свое выполнение и возобновлять его позже.

• Сохраняют свое состояние между вызовами.

• Используют ключевое слово yield для возврата значений.

Пример итерации по свойствам объекта:

Преимущества генераторов:

• Ленивые вычисления – вычисляют значения, когда они действительно нужны.

• Создание бесконечных последовательностей, не занимающих бесконечный объем памяти.

• Упрощение асинхронного кода – можно сделать асинхронный код более похожим на синхронный.

• Создание кастомных итераторов для сложных структур данных.

Эффективное использование консоли

Помимо console.log(), консоль предоставляет несколько более наглядных методов вывода информации.

• Ошибки и предупреждения:

• Вывод табличных данных:

• Группировка логов:

• Измерение времени выполнения:

• Условное логирование:

• Трассировка стека:

Структурированное клонирование

Структурированное клонирование – метод создания полной (глубокой) копии объекта, включающей все вложенные объекты и структуры данных. Функция structuredClone позволяет выполнять такое клонирование просто и эффективно – в  отличие от JSON.parse(JSON.stringify()), structuredClone корректно обрабатывает Date, Map, Set и другие специальные типы JavaScript:

Структурированное клонирование стоит использовать, если:

• Нужно создать полную, независимую копию сложного объекта.

• Данные не должны изменяться (иммутабельность).

• Необходимо избежать побочных эффектов при изменении данных.

Самовызывающиеся функции

Самовызывающиеся функции (IIFE) выполняются автоматически сразу после их создания. Они создают временную область видимости, в которой можно безопасно определять переменные и функции, не беспокоясь о том, что они будут конфликтовать с другими частями кода и загрязнять глобальную область видимости. Эта техника особенно полезна в старых средах JavaScript, где блочная область видимости (let и const) недоступна, или в сценариях, где требуется немедленное выполнение для инициализации:

Теговые шаблоны

Теговые шаблоны позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. Здесь, например, функция sanitize заменяет опасные символы на их безопасные HTML-сущности, предотвращая выполнение нежелательного кода:

Как можно использовать теговые шаблоны:

• Автоматически обрабатывать пользовательский ввод, предотвращая XSS-атаки.

• Форматировать числа, даты и т. д.

• Безопасно формировать SQL-запросы, экранируя ввод.

• Создавать теги для автоматического перевода строк с одного языка на другой.

📐 Единицы измерения высоты и ширины экрана в современном CSS

На протяжении многих лет разработчики использовали vh и vw, чтобы задавать размеры элементов в процентах от высоты и ширины экрана. Например, чтобы заполнить весь экран элементом, его размеры можно задать как 100vh на 100vw. Однако эти единицы могут работать ненадежно в некоторых случаях, например, при изменении видимой области экрана на мобильных устройствах из-за скрытия адресной строки браузера при прокрутке. Сейчас CSS предлагает новые единицы измерения, которые учитывают динамические изменения интерфейса браузера.

Large Viewport Units (lvh, lvw)

Эти единицы задаются относительно максимального размера видимой области, когда интерфейс браузера минимизирован (например, скрыты панели). По сути, они ведут себя аналогично классическим vh и vw, но с учетом возможных изменений интерфейса. Этот элемент будет занимать весь экран независимо от состояния интерфейса браузера:

.full-page-element {
height: 100lvh;
width: 100lvw;
z-index: -1
background: #f51;
}

Small Viewport Units (svh, svw)

Эти единицы рассчитываются относительно минимального размера видимой области, когда интерфейс браузера максимально расширен (например, когда панели видимы). Пример – статичный заголовок, занимающий 10% от минимальной видимой области:

.header {
height: 10svh;
background-color: #642;
}

Dynamic Viewport Units (dvh, dvw)

Эти единицы измеряются с учетом динамических изменений видимой области при взаимодействии пользователя с интерфейсом (например, при прокрутке страницы или появлении виртуальной клавиатуры). Есть нюансы: использование этих единиц иногда приводит к неожиданным изменениям размеров контента и ухудшению производительности. Пример – элемент, который адаптируется к изменениям высоты видимой области:

.adjustable-element {
height: calc(100dvh - 10svh);
}

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:

• Современные JavaScript-фреймворки и библиотеки

• HTML5 и CSS3: новые возможности и трюки

• Оптимизация производительности веб-приложений

• Тестирование и отладка кода

• Лучшие практики UX/UI

• Новые веб-стандарты и браузерные технологии

• Тренды в веб-дизайне и интерфейсах

• Прогрессивные веб-приложения (PWA)

✍️ 50 лучших ресурсов с бесплатными HTML/CSS/JS-шаблонами

• HTMLrev – крупнейшая бесплатная библиотека шаблонов, созданных с использованием всех существующих технологий, включая HTML/CSS/JS, Bootstrap, Tailwind, Bulma, Angular, React, Vue, Next.js, Nuxt, Svelte, Astro, Laravel, Django, Gatsby, Hugo, Jekyll и BCMS.

• HTML5 UP – бесплатная коллекция HTML-шаблонов с уникальным дизайном и высоким качеством кода.

• StyleShout предлагает широкий выбор шаблонов для различных целей, включая SaaS, мобильные приложения, блоги, лендинги, портфолио и агентства.

• One Page Lovе включает шаблоны на Bootstrap, Next.js, Tailwind, Carrd и Framer.

• Cruip предлагает шаблоны на Tailwind, React, Vue, Next.js и Laravel.

• Templatemo – огромная коллекция бесплатных Bootstrap-шаблонов.

• ThemeSelection – библиотека бесплатных и платных шаблонов на Vue, Next.js, Nuxt и Laravel. Специализируется на административных панелях и UI-китах.

• Creative Tim – шаблоны на Bootstrap, Tailwind, Angular, React, Vue, Next.js, Nuxt, Svelte, Laravel, Django и Astro.

• Themesberg предлагает широкий выбор шаблонов для административных панелей, лендингов, дизайн-систем и UI-китов.

• TemplateDeck – небольшая библиотека креативных Bootstrap-шаблонов высокого качества.

• Flout UI – коллекция компонентов Tailwind и готовых шаблонов Next.js.

• Michael Andreuzza – бесплатная подборка шаблонов Astro, созданная опытным и креативным разработчиком.

• Just Good UI – собрание бесплатных и платных шаблонов Astro.

• Startup Landing – подборка бесплатных шаблонов Next.js и Gatsby.

• Web3Templates – красивые шаблоны Tailwind, Astro и Next.js, оптимизированные для конверсий.

• Landify – красивые и современные шаблоны Gatsby.

• Nextjs Templates – широкий выбор шаблонов для разных целей, включая SaaS, стартапы, бизнес, программное обеспечение и блоги.

• LayoutFlow – отличные шаблоны для агентств, портфолио и сайтов услуг.

• Template Foundation – шаблоны, ориентированные на портфолио и личные сайты.

• Templated – продуманные шаблоны на HTML/CSS и Bootstrap.

• Freebiesbug – высококачественные шаблоны, оптимизированные для маркетинга.

• Start Bootstrap – широкий выбор профессиональных шаблонов для стартапов, агентств, портфолио, личных сайтов и блогов.

• MonsterOne – современные шаблоны с несколькими страницами.

• TemplatesJungle – шаблоны для бизнеса, агентств, сервисов, портфолио, электронной коммерции и других целей.

• 3rd Wave Media – коллекция высококачественных шаблонов, ориентированных на ИТ-сферу.

• Tooplate – большая коллекция стильных и современных Bootstrap-шаблонов.

• Pixel Rocket – качественные Bootstrap- и Tailwind-шаблоны.

• HTML Codex – широкий выбор шаблонов для бизнеса, курсов, продуктов, агентств, сервисов, портфолио, резюме и других целей.

• W3Layouts отличается широким выбором шаблонов для бизнеса.

• Bootstrapious – шаблоны с хорошим дизайном и продвинутыми компонентами.

• Untree – стильные шаблоны со сложными элементами.

• Tailwind Toolbox – красивые шаблоны с продуманной структурой.

• Pixelcave – современные шаблоны для сайтов и административных интерфейсов.

• Themefisher – коллекция шаблонов для бизнеса, SaaS, блогов и других целей.

• Tailspark – Tailwind-шаблоны для SaaS-сайтов и лендингов.

• Red Pixel Themes – шаблоны с  хорошим дизайном и многими полезными компонентами.

• Ari Budin – уникальные шаблоны для портфолио, агентств, журналов и дизайн-систем.

• Treact – бесплатная библиотека React-шаблонов.

• DesignToCodes – шаблоны для стартапов, агентств, портфолио и административных панелей.

• UI Lib – библиотека Bootstrap-, Tailwind-, Angular-, React- и Vue-шаблонов.

• AdminMart – профессиональные шаблоны со множеством секций и компонентов.

• WrapPixel – специализируется на административных панелях и UI-китах, предлагает широкий выбор шаблонов с разным дизайном и структурой.

• Tabler – бесплатная библиотека Bootstrap-шаблонов, специализируется на административных панелях.

• KeenThemes – современные шаблоны для админ-панелей со множеством компонентов.

• EaseTemplate – подборка современных Bootstrap-шаблонов.

• BootstrapDash – шаблоны с несколькими страницами и продвинутыми компонентами.

• CodedThemes – профессиональные Bootstrap-, Angular-, React- и Vue-шаблоны с красивым дизайном.

• Salvia Kit предлагает коллекцию Angular-, React-, Vue-, Nuxt- и Svelte-шаблонов. Отличается широким выбором шаблонов для административных панелей.

• JustBoil – Tailwind-, React-, Vue-, Next.js-, Nuxt- и Laravel-шаблоны для сайтов и админ-панелей.

• Iqonic Design – библиотека React- и Vue-шаблонов, предлагает несколько бесплатных пакетов для создания современных интерфейсов.

Автор рассылки: Наталья Кайда

Ну и немного скринов интерфейса, чисто для ознакомления

Цель: получить стабильно работающее в пределах хотя бы тех же 300 человек пикового онлайна приложение, которое можно будет поддерживать и модерировать своими силами

🤔 Как анализировать?

Для анализа использовал утилиту source-map-explorer.

При запуске, утилита генирирует древовидную карту, с помощью которой можно увидеть, какие именно файлы попадают в бандл.

К сожалению, почему именно это что-то попало в бандл утилита не говорит.

👉 В чём была проблема?

Иногда мы ленимся и в файле компонента кладём какую-нибудь утилитную функцию, enum или константу, а потом где-то в другом месте импортируем их.

Так вот, когда мы их импортируем, то в бандл “засасывает” не только импортируемую функцию, но и весь компонент, из-за чего размер бандла и увеличивается.

P.S. А какими инструментами пользуетесь вы?

https://t.me/cherkashindev/220

SSR является одной из ключевых особенностей Next.js, но он также добавляет сложности. Обеспечение корректного рендеринга компонентов на сервере и клиенте может быть сложной задачей, особенно при работе с сторонними библиотеками, которые не поддерживают SSR.

Решение:

• Условный рендеринг: Используйте условный рендеринг, чтобы убедиться, что компоненты, зависящие от клиентских функций (например, объекта window), выполняются только на стороне клиента.

• Библиотеки, совместимые с SSR: Выбирайте библиотеки, которые явно поддерживают SSR или имеют серверобезопасные альтернативы.

3. Маршрутизация и динамические маршруты

Next.js предлагает систему маршрутизации на основе файлов, которая одновременно мощна и ограниченна. Обработка динамических маршрутов и вложенной маршрутизации может стать затруднительной, особенно при работе с большим количеством маршрутов.

Решение:

• Динамический импорт: Используйте динамический импорт для разделения кода и обработки сложных сценариев маршрутизации.

• Организация маршрутов: Логически организуйте свои маршруты и рассматривайте возможность использования вложенных папок для управления сложностью.

4. Управление состоянием

Управление состоянием в приложении Next.js может быть сложным, особенно когда нужно делиться состоянием между серверными страницами и клиентскими компонентами. Библиотеки, такие как Redux или Context API, могут помочь, но они добавляют еще один уровень сложности.

Решение:

• Библиотеки управления состоянием: Используйте хорошо документированные библиотеки управления состоянием, которые хорошо интегрируются с Next.js.

• Синхронизация сервера и клиента: Убедитесь, что изменения состояния на сервере и клиенте синхронизированы, возможно, с использованием промежуточного ПО для обработки извлечения данных и обновлений состояния.

5. Стратегии извлечения данных

Next.js предоставляет несколько методов для извлечения данных, таких как getStaticProps, getServerSideProps и маршруты API. Выбор правильной стратегии для нужд вашего приложения может быть запутанным и может потребовать значительного рефакторинга при изменении требований.

Решение:

• Понимание сценариев использования: Четко понимаете, когда использовать каждый метод извлечения данных в зависимости от требований вашего приложения.

• Инкрементальная статическая регенерация (ISR): Используйте ISR для страниц, которым требуется актуальная информация, но которые не нужно перерендеривать при каждом запросе.

6. Оптимизация производительности

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

Решение:

• Анализ производительности: Используйте инструменты, такие как Lighthouse и Webpack Bundle Analyzer, для выявления узких мест производительности.

• Разделение кода: Реализуйте разделение кода и ленивую загрузку для уменьшения времени начальной загрузки.

• Стратегии кэширования: Используйте эффективные стратегии кэширования как на сервере, так и на клиенте для улучшения производительности.

7. Развертывание и хостинг

Развертывание приложения на Next.js требует внимательного подхода к выбору среды хостинга. Хотя Vercel, создатели Next.js, предлагают простые варианты развертывания, использование других платформ может потребовать дополнительной конфигурации.

Решение:

• Vercel: Рассмотрите использование Vercel для самого простого опыта развертывания с автоматическими оптимизациями.

• Пользовательские развертывания: Для пользовательских настроек убедитесь, что ваша серверная среда правильно настроена для обработки SSR и маршрутов API.

Заключение

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

Не стесняйтесь делиться своим опытом или дополнительными советами по преодолению трудностей разработки на Next.js!

Angular: Танк от Google

Angular - это как швейцарские часы: сложный механизм, но работает как часы (простите за каламбур).

Плюсы:

• Мощный, как трактор "Беларусь"

• Сложноват для новичков (но если освоите - цены вам не будет)

• Документация подробная, как инструкция к стиральной машине

• Инструментов больше, чем в гараже у Кулибина

• Популярен в корпорациях (как костюмы и галстуки)

В итоге, что выбрать?

• React - если хотите быть как крутые стартаперы из Кремниевой долины

• Vue.js - если хотите быстро создать что-то красивое и не сломать мозг

• Angular - если вы любите сложные механизмы и работаете в большой компании

А вы, друзья, какой фреймворк предпочитаете? Делитесь в комментариях! И да пребудет с вами сила JavaScript!

P.S. Не забудьте поставить плюсик, если статья была полезной. Ваша поддержка вдохновляет меня на новые посты!