Привет. Я фронтенд-разработчик. По мнению тех, кто, по мнению некоторых, перекладывает джейсончики туда-сюда, я крашу кнопочки. Но сам я себя идентифицирую иначе: я тоже перекладываю джейсончики, и у меня всё точно так же, как у них. Даже архитектура. У меня тоже есть контроллеры, сервисы и хранилища, и я также обрабатываю запросы пользователей. Даже больше, я делаю HATEOAS, «тру» RESTful, если хотите. Давайте расскажу, как я к этому пришел.

Когда-то давно я только верстал. Накидывал разметку, добавлял классы, идентификаторы и стилизовал ЦСС-ом. И было хорошо. Потом от меня потребовали динамичности — пришлось добавить JavaScript. И было очень хорошо.

Технологии развивались, и мне хотелось пробовать новое. Я попробовал AJAX. Это было так волнительно... Я сказал бэкендерам: основную разметку жду от вас, а опции для выпадающего списка, например, отдавайте джейсоном по запросу. Они были не в восторге. «Одному HTML подавай, другому CSV, третьему ещё что-то — безобразие!» Но мы нашли компромис. Бэкэндеры сказали: «Вот вам, мол, джейсон, дальше сами как-нибудь». И назвали это REST API.

Сначала было очень круто! Мы, верстальщики, организовались. Мы стали фронтендерами! Конечно же, мы сразу побежали решать ещё нерешённые сто раз решённые задачи. Мы писали библиотеки и фреймворки — четыре миллиона штук! Да у нас даже есть библиотека с функцией для умножения чисел — lodash.multiply. Мы придумывали свои паттерны и архитектуры, например FSD. Короче, мы стали очень крутые.

Но то уже были «мы», а не я. Мне было сложно. Шутка ли, изучать по одному новому фреймворку в неделю? А ведь еще переписывать всё надо, стек-то устарел... В общем, в какой-то момент я перестал поспевать за модой и справляться со сложностью. Переходишь из одного проекта (на React) в другой (на Vue), а там всё иначе. Берешь нового разработчика в команду с опытом в React, например, а ему нужно время, чтобы вникнуть, потому что в его старой команде был другой «стейт-менеджер». Вавилон, никто друг друга не понимает.

Синхронизация атрибутов элемента с DOM-свойствами

Очевидно, что нашему компоненту потребуются атрибуты, через которые пользователь сможет контролировать его поведение. Наш компонент должен вести себя как стандартный элемент ввода типа «input», поэтому обязательно должен поддерживать такие атрибуты как disabled и required – и это самый минимум. Поэтому важно разобраться (ну или вспомнить) что такое «content vs IDL attributes», и как с этим работать.

Документация по веб-компонентам мало говорит об атрибутах, разве что рекомендует использовать attributeChangedCallback() для наблюдения за ними, но этого недостаточно. Хотя это полезное API, нам оно не подходит, потому что оно уведомляет нас о уже совершенном действии (изменении атрибута), а нам нужно контролировать этот процесс, то есть – синхронизировать атрибуты и свойства с нормализацией значений.

Так как наш компонент наследует базовый класс HTMLElement, а в нем уже реализовано большое количество разных методов, то мы можем переопределить некоторые из них чтобы получить нужный нам результат. Для начала определим наши свойства в виде пар get/set и значения в приватном поле:

Да, я его действительно ненавижу. Мне кажется, что команда React'а презирает разработчиков, и я презираю их в ответ. Все их решения направлены на то, чтобы сделать разработку сложнее, медленнее и непредсказуемее. На сегодняшний день они даже умудрились сломать работу JavaScript. Уму непостижимо, почему им это сходит с рук.

С ростом сложности фронтенда разработчики начали уделять больше внимания архитектуре. Кто-то предпочитает «чистую», кто-то — её производные, например, FSD. В той или иной степени этот вопрос волнует многих. В данной статье я предлагаю присмотреться повнимательнее к аспекту, который часто остаётся в тени при обсуждении архитектуры, — к маршрутизации.

Давайте вспомним как мы строим роутинг в наших приложениях. В примере ниже – react-router-dom, но в других фреймворках/библиотеках все примерно также:

В реактивных системах существуют специальные функции, такие как watchEffect во Vue или autorun в MobX, которые умеют автоматически отслеживать зависимости и перезапускать «эффект» при их изменении. Принцип их работы следующий:

Несколько месяцев назад я написал статью — «Observable — удобный state‑manager», что было скорее заметкой, и за что мне здорово досталось в комментариях! Уважаемым комментаторам — спасибо, я постарался учесть все замечания.

Сегодня представляю вам kr‑observable 2.0 — библиотеку для реактивного программирования на JavaScript. И удобный state-manager тоже.

DOM предоставляет API для валидации пользовательского ввода. Вообще говоря, мы им пользуемся часто, например:

Я вас понимаю. Да – еще один. Но давайте посмотрим, вдруг правда?

Давайте определимся с тем, что такое удобно. Конечно, у нас разные представления об удобстве, поэтому я опишу свои с примерами из api react: