Разрабатываете на React или просто интересуетесь данной технологией? Тогда добро пожаловать в мой новый проект — Тотальный React.

Введение

Я работаю с React уже 5 лет, однако, когда дело касается структуры приложения или его внешнего вида (дизайна), сложно назвать какие-то универсальные подходы.

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

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

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

Предлагаемые подходы не являются истинной в последней инстанции. Это всего лишь мое мнение. Существует много разных способов решения одной и той же задачи.

TL;DR

Context и Redux — это одно и тоже?

Нет. Это разные инструменты, делающие разные вещи и используемые в разных целях.

Является ли контекст инструментом «управления состоянием»?

Нет. Контекст — это форма внедрения зависимостей (dependency injection). Это транспортный механизм, который ничем не управляет. Любое «управление состоянием» осуществляется вручную, как правило, с помощью хуков useState()/useReducer().

Являются ли Context и useReducer() заменой Redux?

Нет. Они в чем-то похожи и частично пересекаются, но сильно отличаются в плане возможностей.

Когда следует использовать контекст?

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

Когда следует использовать Context и useReducer()?

Когда вам требуется управление состоянием умеренно сложного компонента в определенной части приложения.

Когда следует использовать Redux?

Redux наиболее полезен в следующих случаях:

• Большое количество компонентов с состояниями, в которых используются одни и те же данные
• Состояние приложение часто обновляется
• Сложная логика обновления состояния
• Приложение имеет среднюю или большую кодовую базу и над ним работает много людей
• Вы хотите знать когда, почему и как обновляется состояние приложения и иметь возможность визуализировать эти изменения
• Вам требуются более мощные возможности по управлению побочными эффектами, стабильностью (постоянством) и сериализацией данных

Доброго времени суток, друзья!

Сегодня я хочу поговорить с вами о трех предложениях, относящихся к JavaScript-классам, которые находятся на 3 стадии рассмотрения:

• определение полей классов
• приватные методы и геттеры/сеттеры классов
• статические возможности классов: статические публичные поля, статические приватные поля и статические приватные методы
  

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

Вспомним, что такое классы в JavaScript.

Доброго времени суток, друзья!

Представляю вашему вниманию адаптированный перевод нового варианта предложения (сентябрь 2020 г.), касающегося использования декораторов в JavaScript, с небольшими пояснениями относительно характера происходящего.

Впервые данное предложение прозвучало около 5 лет назад и с тех пор претерпело несколько значительных изменений. В настоящее время оно (по-прежнему) находится на второй стадии рассмотрения.

Если вы раньше не слышали о декораторах или хотите освежить свои знания, рекомендую ознакомиться со следующими статьями:

• Декораторы в JavaScript
• Минимальное руководство по декораторам ECMAScript
• Декораторы JavaScript с нуля

Итак, что такое декоратор? Декоратор (decorator) — это функция, вызываемая на элементе класса (поле или методе) или на самом классе в процессе его определения, оборачивающая или заменяющая элемент (или класс) новым значением (возвращаемым декоратором).

Декорированное поле класса обрабатывается как обертка из геттера/сеттера, позволяющая извлекать/присваивать (изменять) значение этому полю.

Декораторы также могут аннотировать элемент класса метаданными (metadata). Метаданные — это коллекция простых свойств объекта, добавленных декораторами. Они доступны как набор вложенных объектов в свойстве [Symbol.metadata].

Доброго времени суток, друзья!

В данном туториале я покажу вам, как создать фуллстек-тудушку.

Наше приложение будет иметь стандартный функционал:

• добавление новой задачи в список
• обновление индикатора выполнения задачи
• обновление текста задачи
• удаление задачи из списка
• фильтрация задач: все, активные, завершенные
• сохранение задач на стороне клиента и в базе данных

Выглядеть наше приложение будет так:


Для более широкого охвата аудитории клиентская часть приложения будет реализована на чистом JavaScript, серверная — на Node.js. В качестве абстракции для ноды будет использован Express.js, в качестве базы данных — сначала локальное хранилище (Local Storage), затем индексированная база данных (IndexedDB) и, наконец, облачная MongoDB.

При разработке клиентской части будут использованы лучшие практики, предлагаемые такими фреймворками, как React и Vue: разделение кода на автономные переиспользуемые компоненты, повторный рендеринг только тех частей приложения, которые подверглись изменениям и т.д. При этом, необходимый функционал будет реализован настолько просто, насколько это возможно. Мы также воздержимся от смешивания HTML, CSS и JavaScript.

Доброго времени суток, друзья!

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

Всем, кто искал, с чего начать разработку веб-приложения, хорошо известен HTML5 Boilerplate (официальный сайт, репозиторий). Как утверждают разработчики, он является «The web’s most popular front-end template». С most popular не поспоришь, а вот с современностью (соответствием современным реалиям веб-разработки) можно. И в этом нет ничего удивительного: проект создан около 6 лет назад. За последние 6 лет многое изменилось. При этом, насколько я могу судить, принципиальных изменений в проект не вносилось (для объявления переменных используется var, предусмотрена возможность добавления плагинов jQuery и т.д.), кроме, разве что, site.webmanifest, который бесполезен без сервис-воркера (и лучше использовать .json).

Я предлагаю своего рода альтернативу — современный стартовый HTML-шаблон (официальный сайт, репозиторий).

Доброго времени суток, друзья!

В этом небольшом туториале мы вместе с вами выполним три простых задания:

• С помощью Geolocation API и Leaflet.js определим текущее местоположение пользователя и отобразим его на карте
• Реализуем анимированный переход между городами
• Реализуем переключение между адресами с предварительным получением названия объекта и его координат

Код проекта находится здесь.

Поиграть с кодом можно здесь:

Доброго времени суток, друзья!

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

Исходный код на GitHub.

Поиграть к кодом можно на CodeSandbox.

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

• Мы реализуем один из самых простых вариантов клиентской маршрутизации и рендеринга, парочку более сложных и универсальных (если угодно, масштабируемых) способов можно найти здесь
• Обойтись совсем без сервера не получится. Мы будет манипулировать историей текущей сессии браузера: при ручной перезагрузке страницы браузер отдает предпочтение серверу, т.е. пытается получить несуществующую страницу, что приводит к печальным последствиям в виде невозможности установить соединение (мои попытки обмануть браузер с помощью сервис-воркера, т.е. проксировать отправляемые им запросы, не увенчались успехом). Единственной задачей нашего примитивного сервера будет ответ в виде index.html на любой запрос. Это позволит браузеру перейти к выполнению клиенского скрипта
• Везде, где это возможно и уместно, мы будет использовать динамический импорт. Он позволяет загружать только запрашиваемые ресурсы (раньше это можно было реализовать только посредством разделения кода на части (chunks) с помощью сборщиков модулей типа Webpack), что хорошо сказывается на производительности. Использование динамического импорта сделает почти весь наш код асинхронным, что, в целом, тоже неплохо, поскольку позволяет избежать блокировки потока выполнения программы

Итак, поехали.

Доброго времени суток, друзья!

Символ (Symbol) — это примитивный тип данных, представленный в ECMAScript2015 (ES6), позволяющий создавать уникальные идентификаторы: const uniqueKey = Symbol('SymbolName').

Вы можете использовать символы в качестве ключей для свойств объектов. Символы, которые JavaScript обрабатывает особым образом, называются хорошо известными символами (Well-known Symbols). Эти символы используются встроенными алгоритмами JavaScript. Например, Symbol.iterator используется для перебора элементов массивов, строк. Его также можно использовать для определения собственных функций-итераторов.

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

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

В данной статье речь пойдет о хорошо известных символах с примерами их использования.

Доброго времени суток, друзья!

Данная статья посвящена возможностям JavaScript, которые будут представлены в новой версии спецификации (ECMAScript 2021, ES12).

Речь пойдет о следующем:

• String.prototype.replaceAll()
• Promise.any()
• WeakRefs
• Операторы логического присваивания
• Разделители чисел

Доброго времени суток, друзья!

Представляю вашему вниманию полное визуальное руководство-шпаргалку по всем свойствам CSS-модулей Flexbox и Grid.

Основные источники: A Complete Guide to Flexbox, A Complete Guide to Grid.

В конце статьи вас ждет небольшой туториал по созданию тренажера по Flexbox.

Без дальнейших предисловий.

Доброго времени суток, друзья!

Позвольте представить вам мой новый проект — современный стартовый HTML-шаблон.

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

• Все meta и link-теги (общие, Microsoft, Facebook, Twitter, IOS, Android, структурированные данные — Schema.org и JSON-LD, а также парочка тегов, связанных с безопасностью)
• Пример использования HTML5-тегов
• Пример использования CSS3-свойств
• Пример использования CSS-модулей
• Пример использования JavaScript-модулей
• Файл «manifest.json»
• Сервис-воркер общего назначения (сначала кэш, затем сеть)
• Файл «robots.txt»
• Файл «sitemap.xml»
• Файл «browserconfig.xml»
• Файл ".gitignore"
• Пример Express.js-сервера, устанавливающего заголовки, связанные с безопасностью и сжатием, и возвращающего файлы по запросу
• Пример креативной страницы ошибки 404 (страница не найдена, креатив не мой)
• и многое другое

Официальный сайт: moderntemplate.site.

Код проекта находится здесь.

Доброго времени суток, друзья!

ES6-модули, использующие синтаксис «import/export», являются довольно мощным инструментом и достойным конкурентом компонентам популярных фреймворков.

Позвольте мне продемонстрировать это на примере рисования различных фигур на холсте.

Источник вдохновения — этот раздел руководства по JavaScript от MDN.

Вот какой функционал будет реализован в нашем небольшом приложении:

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

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

Доброго времени суток, друзья!

В данной статье я покажу, как можно анимировать нативный элемент «details» с помощью Web Animations API.

Доброго времени суток, друзья!

Данная заметка не имеет особой практической ценности. С другой стороны, в ней исследуется некоторые «пограничные» возможности JavaScript, которые могут показаться вам интересными.

Руководство по стилю JavaScript от Google советует отдавать предпочтение циклу for-of там, где это возможно.

Руководство по стилю JavaScript от Airbnb не рекомендует использовать итераторы. Вместо циклов for-in и for-of следует использовать функции высшего порядка, такие как map(), every(), filter(), find(), findIndex(), reduce(), some() для итерации по массивам и Object.keys(), Object.values(), Object.entries() для итерации по массивам из объектов. Об этом позже.

Наблюдатель (observer) — это объект, который следит за состоянием определенного элемента и регистрирует происходящие в нем изменения. Элемент, который находится под наблюдением (чуть не написал «за которым организована слежка»), называется целевым. Наблюдатель может следить за состоянием как одного, так и нескольких элементов, а в некоторых случаях также и за потомками целевого элемента.

В JavaScript существует три основных вида наблюдателей:

1. ResizeObserver
2. IntersectionObserver
3. MutationObserver

В данной статье я предлагаю сосредоточиться на практической реализации каждого наблюдателя.

Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

• команда «webpack-dev-server» теперь выглядит как «webpack-serve»
• отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
• полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака

Что такое вебпак?

По большей части, сайты больше не пишутся на чистом HTML с небольшим количеством JavaScript — часто они создаются только с помощью JavaScript. Поэтому возникает необходимость в сборке, минификации и транспиляции кода. Вот где вебпак приходит на помощь.

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

Вебпак также умеет делать много других вещей, но данная статья посвящена основам его настройки и использования.

Новая возможность, которая может изменить наш подход к написанию кода

JavaScript — очень гибкий и мощный язык, который определяет развитие современного веба. Одна из основных причин главенства JavaScript в сфере веб-разработки заключается в его стремительном развитии и постоянном совершенствовании.

Одним из предложений по улучшению JavaScript является предложение под названием «top-level await» (await верхнего уровня, «глобальный» await). Цель данного предложения состоит в превращении ES модулей в некое подобие асинхронных функций. Это позволит модулям получать готовые к использованию ресурсы и блокировать модули, импортирующие их. Модули, которые импортируют ожидаемые ресурсы, смогут запускать выполнение кода только после получения ресурсов и их предварительной подготовки к использованию.

Указанное предложение в настоящее время находится на 3 стадии рассмотрения, поэтому данную возможность пока нельзя использовать в продакшне. Однако можно быть уверенным в том, что в ближайшем будущем она непременно будет реализована.

Не переживайте из-за этого. Продолжайте читать. Я покажу, как можно использовать названную фичу уже сейчас.

Доброго времени суток, друзья!

Представляю вашему вниманию первую десятку пользовательских хуков.

Оглавление

• useMemoCompare
• useAsync
• useRequireAuth
• useRouter
• useAuth
• useEventListener
• useWhyDidYouUpdate
• useDarkMode
• useMedia
• useLocalStorage

Доброго времени суток, друзья!

Представляю вашему вниманию подборку из десяти популярных npm-пакетов с примерами их использования и альтернативными решениями.

Предполагается, что вы хорошо знакомы с JavaScript и, в частности, с Node.js.

В данном части представлены следующие пакеты:

• chalk
• progress
• minimist
• fs-extra
• uuid
• moment
• axios
• async
• dotenv
• validator