Fullstack React with TypeScript

Максим Иванов, Артём Самофалов и я при поддержке издательства Newline выпустили книгу Fullstack React with TypeScript. Я в ней написал главы 3 и 5.

Глава 3. Паттерны

В 3‑й главе (“React Patterns”) на примере виртуальной музыкальной клавиатуры рассказал о таких паттернах как Render‑Props и Higher Order Component.

Скриншот приложения с виртуальной музыкальной клавиатурой

Перед тем, как начать вместе с читателями писать React‑компоненты, я объяснил основы музыкальной теории и показал, как мы будем представлять ноты и их соотношения в TypeScript. Я описал особенности работы с типами и интерфейсами, а также рассказал, как можно отделить бизнес‑логику от UI‑слоя приложения.

Для того, чтобы показать в чём преимущества и недостатки каждого из паттернов, я выбрал одну и ту же задачу — адаптировать стороннее API для работы с собственным кодом — и решил её разными способами.

Объяснение сложных концептов, как например Higher Order Component, я начинал с простейших случаев — на примерах простых функций и по шагам расписывая потоки данных.

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

Глава 5. SSG и SSR с Next.js

В 5‑й главе (“Static Site Generation and Server Side Rendering Using Next.js”) на примере новостного сайта я рассказал, как использовать Next.js для генерации статических сайтов и серверного рендеринга.

Скриншот «новостного сайта» из 5-й главы

Я рассказал о пользе SSR и SSG и показал, как настроить статическую генерацию сайтов на Next с вкраплениями SSR. Объяснил, как использовать next‑redux‑wrapper для управления состоянием до и во время гидрации. Провёл читателей по шагам от инициализации нового проекта до сборки и деплоя проекта.

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

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

Что ещё

Кроме этих двух тем мы также затронули тестирование проектов на React с TypeScript, описали работу с данными и рассказали о стейт‑менеджменте. Показали, как настроить сложную сборку проекта на Webpack с нуля под свои нужды.

Для кого

Книга — для тех, кто немного знаком с React, и почти не знаком с TypeScript. Мы рассказываем и объясняем основы типизации и интеграции TS в проекты.

Мы подразумеваем, что читатели знают основы JavaScript, поверхностно знакомы с CSS и знакомы с концепцией жизненного цикла компонентов в React.

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

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

Послесловие

Давно уже хотел сесть и написать музыкальную клавиатуру, но как‑то руки не доходили. А тут отличный повод подвернулся :–)

А ещё в детстве я мечтал стать писателем. Даже пробовал несколько раз начинать что‑то писать. Не думал, правда, что стану техническим писателем, но это тоже хорошо :–D

Компоненты — это организмы

Я достаточно долго пытался сформулировать для себя, что такое «Компонент».

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

Недавно, кажется, придумал хорошую аналогию, которая звучит так: компоненты — это организмы. Работает она на разных уровнях. Сейчас расскажу, как именно.

Компонент, как изолированная сущность

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

Это важно, потому что проектировать что‑либо без чётко‑выделенных сущностей — больно и неэффективно.

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

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

ДНК компонентов

Организм развивается под действием ДНК и внешней среды. Компоненты — так же.

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

Давайте на примерах.

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

Кнопка должна уметь показывать, что на неё можно нажать, и по нажатию что‑то произойдёт.

Если компонент не умеет делать то, что «должен», он не нужен — то есть он не выживает.

Внутренние правила также определяют, чем компонент не должен заниматься. Текстовое поле не должно выполнять работу Кнопки, потому что:

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

Если присмотреться повнимательнее, то видно, что одно из таких «внутренних правил» — это принцип единственной ответственности. Этот принцип (SRP) — часть ДНК компонента, которая составляет часть исходных данных, которые определяют жизненный путь компонента.

Компонент во внешней среде

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

Снова на примерах. Форма поиска — это совокупность компонентов — сообщество:

У каждого организма в этой совокупности есть собственная роль — специализация:

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

Внешняя среда может и будет меняться. Если среда меняется так, что наличия просто Текстового поля внутри Формы поиска недостаточно, поле может приспособиться и превратиться в Автокомплит, поле с Тегами, что‑то ещё, что позволит ему делать свою работу — выживать — лучше.

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

Если же на сайте не осталось форм в принципе, то Текстовое поле как компонент перестаёт быть нужным и вымирает. Это называется эволюция.

Эволюция компонентов

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

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

Например, если на сайте слишком много разных способов искать товар, простая Форма поиска с Текстовым полем может не подойти. Тогда появляются поля с Тегами, Автокомплиты, Поля с предзаполнением и прочее.

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

Если коротко — компоненты стремятся делать как можно меньше работы, но как можно лучше.

Эволюция среды

Внешняя среда тоже развивается. Сообщества растут или отмирают, условия развития компонентов и сообществ становятся жёстче или ослабевают. Всё это отражается на развитии компонентов.

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

Кнопка — отличный пример. Когда на сайте нет никаких форм кнопка мимикрирует под ссылки — она выглядит как кнопка, нажимается как кнопка, по нажатию что‑то происходит — но это не кнопка.

И это я ещё даже не говорю о компонентах‑паразитах; это, пожалуй, на какой‑нибудь другой раз.

Дизайн‑системы Экосистемы

Компоненты собираются в сообщества; сообщества — в группы; группы сообществ — в экосистемы. Экосистема — набор внешних и внутренних правил, по которым живёт проект.

Например, SRP — часть экосистемы, потому что диктует, как компоненты определяют свою специализацию. Наличие функции поиска на сайте — тоже часть экосистемы, потому что определяет, будет ли существовать, например, Форма поиска. Любое отношение между компонентами (симбиоз, паразитарные отношения) — всё это части экосистемы.

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

Капец ты двинутый

Как ни странно, всё это помогает проектировать системы с учётом таких старых друзей, как например SOLID.

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

Ну и в конце концов это просто весело — это же как играть в Цивилизацию, только на работе и по правилам, которые изначально даже неизвестны.

Ссылки

Как мы делали Фронтенд — это не больно!

«Фронтенд — это не больно!» — длинная статья, цель которой помочь разработчикам научиться справляться с рутиной и получать удовольствие от работы. В этой заметке я расскажу, как появилась идея и почему этот проект для меня был важен.

Предпосылки

Когда‑то описанные в нём проблемы были у меня. Мне тоже казалось, что найти с дизайнерами общий язык очень трудно, объяснять что‑то менеджерам бесполезно, и проще переписать фронтенд, чем говорить с бекендом. Но со временем я стал умнее и понял, что дело не в команде, а в моём отношении к ситуации и проблемам.

Изменил отношение — нашлись решения проблем. Перестал воспринимать критику на личный счёт — увидел полезные замечания. Начал прокачивать переговоры — понял, как обсуждать проблемы фронтенда на языке, понятном другим людям. Ну и всё такое.

Этого казалось мало, потому что теперь я очутился на другой стороне: видел других фронтендеров с теми же проблемами. У меня был опыт того, как начать работать без напряга. Я хотел им поделиться, но не знал как.

Идея

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

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

Казалось, что материала слишком много, было трудно сформулировать идеи. Непонятно было даже, с чего начинать доклад. Решили сделать вместо него почтовую рассылку. Её можно править на ходу по отзывам, и прямо в письмах спрашивать, о чём рассказывать дальше. Я начал работать над рассылкой, сделал первую половину первого письма.

После этого решил ещё раз подумать, в чём цель идеи — достучаться до большего количества разработчиков. Рассылки, лекции, доклады — это слишком сложно. На рассылку надо подписываться, на лекцию или доклад идти. А вот у статей охват потенциально больше, потому что их проще читать и распространять. А чем больше охват, тем большему количеству людей они могут помочь.

Тогда я написал Андрею и предложил вместе сделать серию статей. Андрей же предложил сделать нечто вроде пособия. Получилось — вот это.

Запуск, результаты и планы

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

А недавно мы запустили шутливый аддон с вредными советами для разработчиков. Это пародия на детские книжки Остера только про разработку. Советы там действительно вредные, не следуйте им, пожалуйста :–)

Ссылки №14

Сегодня советую посмотреть:

Избранные произведения Леонардо да Винчи

Это книга с выдержками из записей Леонардо да Винчи и описанием его жизни.

Если забыть про затянутое вступление, то читать интересно. Иногда попадаются предложения длиной с половину страницы, но редко.

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

Читать не надоедает, потому что в книге много тем. Вот небольшая часть, о технике и математике:

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

Никакое человеческое исследование не может претендовать на название истинной науки, если оно не пользуется математическими доказательствами… Нет никакой достоверности там, где не находит приложения одна из математических наук, или там, где применяются науки, не связанные с математическими

Покой — не частный случай движения. Наоборот, вещи движутся только тогда, когда «потревожены» в своем спокойствии. Вечного движения быть не может

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

Наименьшая физическая точка больше всех математических точек, и следует это из того, что физическая точка есть величина непрерывная, а все непрерывное делимо до бесконечности, а точка математическая неделима, потому что не есть величина

Об опыте. Леонардо считает, что опыт — главное, на что стоит опираться при доказательствах. В своих книгах он часто ссылается на явления природы, которые доказывают его точку зрения:

Чистый опыт — вот истинный учитель

И хотя природа начинается с причин и кончает опытом, нам надобно идти путем обратным, то есть начинать с опыта и с ним изыскивать причину

Нет действия в природе без причины; постигни причину, и тебе не нужен опыт

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

О цитировании и авторитетах:

Кто спорит, ссылаясь на авторитет, тот применяет не свой ум, а скорее память

Те, кто изучает только авторов, а не произведения природы, те в искусстве внуки, а не сыны природы… О величайшая глупость тех, которые порицают учащихся у природы и пренебрегают авторами, учениками этой природы!

О природе, человеческом теле и круговороте веществ:

Ты видел здесь, с каким тщанием природа расположила нервы, артерии и вены в пальцах по бокам, а не посредине, дабы при работе как‑нибудь не укололись и не порезались они

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

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

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

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

О силе и движении:

Если сила движет тело в известное время на известное расстояние, не обязательно, чтобы такая сила двигала двойную тяжесть в течение двойного времени на двойное расстояние; потому что, может быть, такая сила не способна будет двигать движимое

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

Всякое природное действие совершается кратчайшим образом, и вот почему свободное падение тяжести совершается к центру мира, так как это — наиболее короткое расстояние между движущимся [телом] и самым низким местом вселенной

Свободно падающая тяжесть приобретает с каждой единицей движения единицу веса

Часто Леонардо почти формулирует физические законы:

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

О наблюдениях за птицами и полётах:

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

О коршуне читаем, что, когда он видит своих птенцов в гнезде слишком жирными, клюет он им их бока и держит без пищи

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

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

О музыке, скульптуре, живописи и перспективе:

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

После того как мы пришли к заключению, что поэзия в высшей степени понятна для слепых, а живопись — в той же мере для глухих, мы скажем: живопись настолько более ценна, чем поэзия, насколько живопись служит лучшему и более благородному чувству, чем поэзия; доказано, что это благородство трижды превосходит благородство трех остальных чувств, так как было предпочтено скорее потерять слух, обоняние и осязание, чем чувство зрения

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

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

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

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

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

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

Самый большой грех живописца — это делать лица похожими друг на друга; повторение поз — большой порок

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

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

Есть бумажная и электронная версии. Я читал электронную, у Лебедева она свёрстана отлично, можно брать :–)

Более старые Всё списком