Smashing Podcast Episode 40 с Майком Кавальером: что такое пользовательский интерфейс Chakra для React?

Этот эпизод был любезно поддержан нашими дорогими друзьями из Wix, которые, как известно, дают вам свободу создавать, проектировать, управлять и развивать свое веб-присутствие именно так, как вы хотите. Спасибо!

В этом эпизоде ​​мы говорим о пользовательском интерфейсе Chakra. Что это такое и как это может помочь в ваших проектах React? Дрю Маклеллан разговаривает с экспертом Майком Кавальером, чтобы выяснить это.

Показать примечания

• Пользовательский интерфейс чакры
• Майк в Твиттере
• личный сайт Майка
• Книга "Вырезать в Jamstack"

Еженедельное обновление

• Проектирование с помощью кода: современный подход к дизайну
  автор Николай Добруцкий
• Автоматизация тестирования программы чтения с экрана в macOS с помощью Auto VO
  автор Кэмерон Кандифф
• Возникновение дизайн-мышления как стратегии решения проблем
  автор Джош Сингер
• Как провести UX-аудит для крупной платформы EdTech
  автор Марк Ланкмилье
• Создание блога с несколькими авторами с помощью Next.js
  автор Дом Хаберсак

Стенограмма

Дрю Маклеллан: старший инженер-программист агентства Echobind. Он пишет код уже два десятилетия и все это время использует JavaScript. Ему нравится Jamstack, и его новая книга Cut Into The Jamstack учит читателя, как создавать программное обеспечение как сервисное приложение с нуля. Мы знаем, что он хорошо разбирается в Jamstack, но знаете ли вы, что однажды он заблудился в проходе с арахисовым маслом? Мои потрясающие друзья, пожалуйста, поприветствуйте Майка Кавальера. Привет Майк. Как твои дела?

Майк Кавальер: Сегодня я просто великолепен.

Дрю: Приятно слышать. Я хотел поговорить с вами сегодня о проекте, о котором я почему-то не слышал, пока не наткнулся на него в вашей книге Jamstack. Я не уверен, как я его пропустил, потому что он кажется зрелым, хорошо задокументированным и настоящим… Просто отличный проект. Я надеюсь, что сегодня мы сможем поговорить об этом, и я смогу наверстать упущенное, чтобы узнать то, что я должен был знать все это время. Я говорю о пользовательском интерфейсе Chakra, конечно. Скажите, что такое Chakra UI? В каком пространстве он находится и какую проблему решает для нас?

Майк: Chakra UI — это UI-фреймворк для React или UI-инструментария, как они его формулируют. В любом стеке приложений в настоящее время вы не хотите изобретать пользовательский интерфейс с нуля. Вы хотите взять некоторый набор инструментов. Так было некоторое время.

Майк: Chakra UI — отличный подход к инструментарию пользовательского интерфейса React. У него есть ряд преимуществ, но одно из них заключается в том, что оно… Во-первых, оно надежное. Это означает, что в нем есть все элементы пользовательского интерфейса, которые вы только можете себе представить. У него есть переключатели. У него есть обертки вокруг сеток. У него есть все типы элементов формы.

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

Майк: Я нередко собираю что-то вместе с Chakra UI и получаю очень хорошую оценку Lighthouse. На самом деле, я только сегодня проверял веб-сайт Cut Into The Jamstack, и оценка доступности очень высока. Он также очень тематичен. Вы можете настроить конфигурацию темы с самого начала. У него просто длинный список преимуществ.

Майк: Это позволяет очень быстро развиваться, что изначально и привлекло меня. Echobind, мы используем его внутренне. Но что касается меня, у меня нет чувства дизайна. Немного, но я ни в коем случае не дизайнер. Я могу брать компоненты из Chakra и немного изменять их, чтобы сделать их согласованными, и все выглядело хорошо прямо из коробки. Вы способны быстро развиваться. Опыт разработчиков большой. Это просто потрясающе на многих уровнях.

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

Майк: Есть еще один для использования раскрытия, который предназначен для переключения таких вещей, как модули. Что вам всегда нужно во включенном, выключенном состоянии. Но Hook еще больше упрощает это, так что вы можете сосредоточиться на вещах, которые фреймворк не может вывести автоматически. Я обрежу это там, потому что это было много.

Дрю: Это действительно хорошо. Просто чтобы я правильно понял, во-первых, это Шакра, а не Чакра? Шакра?

Майк: Я бы не был экспертом в этом. Я говорю Шакра только из-за йоги. Но нам придется попросить основателей перепроверить.

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

Майк: Да.

Дрю: Это специально для проектов React.

Майк: Да. Есть проект Chakra Vue. Я не очень люблю Vue, но знаю, что он существует. Там могут быть и другие фреймы, но я очень, очень сосредоточен на React, поэтому я использовал React по умолчанию для Chakra.

Дрю: Да. Я был знаком с React в прошлом. Я использовал React, когда работал в Netlify. Теперь я все делаю в Vue. Это была одна из первых вещей, на которые я посмотрел. О, есть Vue? Это выглядит хорошо. Есть ли его версия для Vue? Я нашел его версию Vue, и, похоже, она сильно отстала. Я думаю, что это версия 0.9 или что-то вроде того, а не 1.6 или какая-то другая текущая версия React. Я не уверен, насколько это актуально.

Дрю: У нас довольно устаревшие фреймворки. Такие вещи, как Foundation UI, Bootstrap, Bulma. Они существуют уже давно и, похоже, представляют собой фреймворк предыдущего поколения. Тогда у нас есть несколько более современных подходов. Думаю, многие слушатели знакомы с Tailwind и проектом пользовательского интерфейса Tailwind. Какое место в этом ландшафте занимает интерфейс Chakra? Это ближе к тому, что мог бы сделать Tailwind… Подход, который мог бы использовать Tailwind. Это правильно?

Майк: Думаю, да. По общему признанию, я собирался побольше покопаться в Tailwind только потому, что он сейчас так популярен. Но я не могу разумно говорить о тонкостях самого Tailwind и о том, как… Мне кажется, что Chakra и Tailwind — это альтернативные подходы. Вы хватаетесь за одно, а не за оба одновременно, очевидно.

Майк: Я еще не знаю, каковы плюсы и минусы обоих. Я был настолько очарован Чакрой, что продолжаю использовать ее по умолчанию. Я такой: «Хорошо, теперь я знаю это очень хорошо. Я люблю это. Я выучу другой позже. Но Tailwind, очевидно, чрезвычайно популярен. Я думаю, что у Tailwind есть базовая структура в наборе инструментов пользовательского интерфейса. Это справедливо?

Дрю: Верно. Да.

Майк: Хорошо. Это, вероятно, будет больше похоже на набор инструментов пользовательского интерфейса Tailwind. На домашней странице Chakra у них есть сравнение того, почему вы можете захотеть достичь того или другого, но я не усвоил его.

Дрю: Ага. Это хорошо. Как мы уже упоминали, для проектов React и того, как это проявляется, а не для некоторых из этих более традиционных систем дизайна, которые дают вам целую кучу имен классов для вашего HTML, и вы должны использовать некоторую структуру HTML, поместить правильные классы на Это. Таким образом вы получаете пользовательский интерфейс, проявляющийся в вашем проекте. С Chakra, поскольку он основан на React, он дает вам целую кучу компонентов для каждого из этих элементов. Вы можете просто импортировать в свой проект. Эти компоненты инкапсулируют собственную разметку и стили, не так ли?

Майк: Да. На самом деле вам не придется писать класс, используя Chakra. у меня нет. Я даже не знаю, возможно ли это. Вся парадигма React — это состав компонентов и их свойства. Инкапсуляция компонентов означает, что вы передаете в компонент определенные свойства. В Чакре у вас есть понятие темы, которая является глобальной парадигмой. Есть тема по умолчанию, и у нее есть значения для цвета и интервала, а также определенные единицы для всех обычных вещей.

Майк: Вы можете настроить эту тему. Он настраивает его глобально. Вы можете увеличить его, как вам нужно. При вызове самого компонента, например текстового ввода. Компонент ввода. У него будут цвета по умолчанию, радиус границы, отступы и поля, как определено темой. Когда вы хотите изменить его стиль, если вы не хотите делать это на глобальной основе, например, когда я указываю нижние поля, я делаю это в каждом конкретном случае. Я не делаю этого на глобальном уровне, потому что это может привести к катастрофе. Вы просто передаете это как подсказку.

Майк: Есть быстрые подсказки. Если у меня есть входной компонент, я просто говорю, что МБ равно, а затем значение, и оно будет применять нижнее поле. Или у них есть MX и MY для вертикали и горизонтали. Или вы можете просто указать M и передать строку так же, как свойство CSS margin. Там нет имен классов. Он делает все имена классов динамически и скрывает их от пользователя.

Дрю: Да. Я думаю, что именно здесь должно быть сравнение с Tailwind. Потому что, как работает Tailwind, он дает вам целую кучу классов. Если вы хотите увеличить маржу, есть класс, который вы можете использовать для увеличения маржи. Звучит на самом деле, вы берете то же самое… Это другая реализация, но тот же подход к ее архитектуре. На самом деле мы используем реквизит, и вы передаете реквизит, чтобы настроить эти вещи.

Дрю: Насколько легко настроить дизайн? Можно ли просто настроить цвета, поля и отступы, чтобы они выглядели немного по-другому? Или вы действительно можете создать тему с помощью Chakra?

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

Майк: Снова вернемся к примеру с текстовым полем. Если вам нужно текстовое поле, ваш компонент именно такой. Вы можете стилизовать все вокруг него или стилизовать само текстовое поле. Или вы можете изменить тему. Установка цветов для глобального ребрендинга.

Майк: На самом деле я написал в Твиттере создателю пользовательского интерфейса Chakra, Сегу, что они должны разместить галерею на сайте, потому что это действительно здорово. С ним можно создать несколько красивых дизайнов. Они очень разнообразны, и вы можете не знать об этом на поверхности. Я не знаю, есть ли в пользовательском интерфейсе Chakra какие-либо сообщения, которые делают очевидным, что вы используете пользовательский интерфейс Chakra для своего сайта.

Майк: Я видел с ним кое-что довольно симпатичное. Но с ним можно делать что угодно. Я делал статические сайты. Домашняя страница Cut In The Jamstack завершена. Просто как пример. Мы много раз использовали его в Echobind. Я не могу вспомнить, использовали ли мы это для echobind.com. Но наверняка многие сайты наших клиентов. Тогда приложение, которое я создавал, JamShots, это приложение. У него еще нет маркетинговых страниц. Но это всего лишь пользовательский интерфейс, и весь этот пользовательский интерфейс построен с использованием чакры.

Майк: Еще одна вещь, пока я восхваляю Чакру, это то, что есть еще один веб-сайт, которым я часто пользуюсь в последнее время, и я использую его в… Я также собираюсь представить его в книге. Chakratemplates.net. Чакра-templates.net. Это распространенный шаблон дизайна, который заключается в том, что любой, кто вносит свой вклад, находит единицу-героя или единицу ценообразования. Им просто нужно скопировать и вставить код чакры.

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

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

Майк: О, да. Абсолютно.

Дрю: Это в равной степени относится к интерфейсам приложений и маркетинговым сайтам? Искажает ли это то или иное, или это просто полезно, что бы вы ни строили?

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

Майк: На сайте есть что-то, что они упоминают, например, когда вы не хотите использовать Чакру? Они говорят, что из-за того, как упрощает этот интерфейс CSS. Могут быть проблемы, когда у вас много данных на экране. Если вы создаете тонны и тонны элементов DOM и делаете много обновлений в реальном времени, вы можете столкнуться с проблемами производительности.

Майк: Я никогда не видел проблем с производительностью. Но я также не создавал что-то, что требовало бы таких больших объемов данных в режиме реального времени. Это забота. Если бы я собирался создать такое приложение, я, вероятно, все равно хотел бы использовать два разных подхода, просто чтобы посмотреть, как они работают с целым рядом. Но да. Это универсально полезно для обоих этих случаев.

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

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

Дрю: Как и следовало ожидать от дизайн-системы такого типа, она поставляется с компонентами для типографики. Для макета. Затем перейдем к мельчайшим деталям кнопок и элементов формы, а также к библиотеке значков. Там есть почти все, что вы ожидаете увидеть на странице кухонной раковины дизайн-систем. У вас есть все там. Мне все это кажется довольно современным. Я заметил, что компонент сетки макета на самом деле использует сетку CSS, что всегда приятно видеть. Это не просто дает какую-то гибкую коробку.

Майк: О, да. Полностью.

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

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

Майк: Но если вам нужно немного больше гибкости в поведении сетки, тогда у вас есть общий компонент сетки, который, вероятно… Простой компонент сетки, вероятно, является оберткой для другого компонента сетки. Это просто еще один фасад поверх самого себя.

Майк: Такой подход к композиции компонентов — это ценная парадигма в мире React из-за того же самого. Если у вас есть компонент, который очень универсален и имеет много реквизитов, тогда может быть набор вариантов использования, в которых вы хотите использовать компонент одним способом довольно часто. Вы просто оборачиваете его другим компонентом со статическими или предварительно указанными реквизитами для более надежных компонентов.

Майк: Они очень хорошо используют этот подход в Chakra. Я еще не сталкивался с чем-то, что я не могу с этим сделать. Я уверен, что это где-то там. Или что-то, что просто немного больше хлопот сделать. Но в целом этого еще не произошло. По крайней мере, я не могу придумать.

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

Майк: Да.

Дрю: Конечно, в рекламной информации. Это заложено в самом коде? Они практикуют то, что проповедуют? Действительно ли он имеет хорошую встроенную доступность?

Майк: Думаю, да. Самое близкое, что я сделал для проверки, — это запуск Lighthouse против него. Он неизменно обеспечивает высокие баллы за доступность. Обычно я использую Chakra Next.js. Next.js — это производительность прямо из коробки. Довольно часто вы будете видеть высокие баллы и все такое. Я только что написал сегодня в твиттере о том, что домашняя страница книги имеет три из четырех баллов Lighthouse. Есть доступность, лучшие практики, производительность и одна четвертая. Я сейчас не думаю.

Майк: Все, кроме производительности, было близко к 100%. Часть производительности лежит на мне только потому, что я много размещаю на странице и еще не оптимизировал ее. Это имеет тенденцию делать это. Показатели доступности в Lighthouse отличные, когда я использую Chakra UI.

Дрю: Это здорово. Вы упомянули, что они используют рендеринг на стороне сервера и что у вас есть. Такие вещи, как Next, Gatsby и то, что у меня есть у вас, абсолютно не проблема, не так ли? Есть ли какие-либо препятствия, чтобы знать об использовании Чакры с ними?

Майк: О, нет. Нисколько. Я не использовал его. Я склонен сосредотачиваться на Next.js. Я не подключался к Gatsby или другим инструментам SSR. Но пока в фреймворке нет ничего, что мешало бы ему использовать его как таковое, все должно быть в порядке.

Майк: Для React Chakra предоставляет провайдера контекстного API. Поставщик темы, чтобы, когда вы… Например, в моих приложениях Next.js у вас был… Next.js имеет JS- или TS-файл приложения с подчеркиванием, который просто оборачивает каждую страницу в приложении. Вы просто подключаете поставщика тем, а Chakra делает всю остальную работу, и он становится доступным везде. Конечно, нет никаких препятствий для добавления в Next.js. Но я думаю, что и не в Чакру.

Дрю: Чакра использует TypeScript? Я верю, что да, не так ли?

Майк: Он поддерживает это. Ага.

Дрю: Он поддерживает это. Это большой плюс для людей, которые уже используют TypeScript в своих проектах. Есть ли в этом недостатки, если люди еще не используют TypeScript?

Майк: Я так не думаю. Я использую TypeScript по умолчанию во всех своих проектах, как и Echobind. Но когда я делаю что-то на личном уровне, я использую… я бы хотел сказать немного TypeScript. Typescript чрезвычайно полезен для уменьшения количества ошибок за счет создания статических типов. Однако для этого есть носитель, где, в зависимости от ваших знаний о нем, TypeScript может стать настоящим препятствием.

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

Майк: То же самое можно сказать и о Chakra и TypeScript. Я склонен использовать небольшое количество TypeScript, по крайней мере, в начале, пока я действительно не конкретизирую и не стабилизирую проект. Но он не представляет проблем при использовании Chakra как с TypeScript, так и без него. Это здорово с. Я люблю его с ним, но вы, безусловно, можете использовать его и без него.

Дрю: Ага. Я считаю, что с TypeScript вы получаете 80% преимуществ, как вы говорите, всего с несколькими типами. Если вы зайдете слишком далеко в кроличью нору, вы получите сценарий, который в основном состоит из TypeScript. Затем немного JavaScript в конце.

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

Дрю: Мне кажется, что документация по чакре очень хорошо продумана, и… в ней есть обзор каждого компонента. Тогда это действительно полезно включать любые технические примечания о проектных соображениях, которые были сделаны при реализации этого компонента. Что, как фронтенд-инженер, я думаю, что это здорово. Они говорят на моем языке. Я понимаю. Я знаю, что компонент делает немного под капотом.

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

Майк: О да. Абсолютно. Моя точка зрения немного другая. Мне не всегда нужно знать, что происходит под капотом, но обычно я чувствую, что могу сделать вывод. Если я смотрю на компонент коробки, я просто просматриваю документы сейчас, пока мы говорим для освежения. Если я смотрю на компонент коробки, я такой: «Хорошо. Вероятно, это div по умолчанию. Я вижу, как это передается в свойствах градиента, что угодно».

Майк: Я могу получить некоторое представление о том, что происходит внутри, не полностью понимая их магию перевода CSS. Переведите реквизит в CSS. Но документация хороша тем, что она очень линейна. Это очень последовательно. Все перечислено с примерами. Небольшое копирование и вставка.

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

Дрю: Единственное, что мне не понравилось в документах после беглого просмотра, так это количество рекламы. На каждой странице коммерческого предложения Chakra UI Pro.

Майк: Я их не видел. Интересно. Я видел это. Я определенно видел это. Но я не вижу его прямо сейчас. О, да. Хорошо. Есть Chakra UI Pro. Думаю, я отфильтровал это мысленно. Я слышу тебя. По крайней мере, это не слишком большой и в вашем лице.

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

Майк: Да. Просто бегло взгляните на это сейчас. Некоторые из них действительно доступны. Или их версии доступны бесплатно, как шаблоны Chakra. Это шаблоны Chakra, я думаю, это решение с открытым исходным кодом для Chakra Pro или конкурента с открытым исходным кодом. Я уверен, что вы получите тонну, заплатив за это. Похоже, что Chakra Pro чрезвычайно надежен и доступен по разумной цене, если у вас есть профессиональная потребность в них. Похоже, есть пара вариантов для вашего проекта.

Дрю: Ага. Похоже, вокруг него выстроена целая экосистема. Вы знаете, как долго проект существует и какие есть последователи? Широко ли он используется в сообществе React?

Майк: Я хочу сказать да. Я не знаю, в какой степени. Мне было бы любопытно просто посмотреть, какова, я думаю, рыночная доля Tailwind по сравнению с Chakra в настоящее время. Я знаю, что «Чакра» получила награду сравнительно недавно. Премия GitNation React Award за самый важный проект для сообщества. Я бы сказал, что он довольно большой и довольно хорошо обнимается. По уважительной причине, и это здорово. Людям это определенно нравится. Я не один.

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

Майк: Да.

Дрю: Насколько я понимаю, чакра постоянно совершенствуется. Это случай, когда вы импортировали его и построили с ним, вы оставляете его заблокированным на определенной версии? Или вообще безопасно обновляться? Является ли он относительно стабильным с точки зрения дизайна и элементов вашего сайта, не меняющихся при обновлении Chakra?

Майк: Это было так далеко. Да. В основном, я бы сказал, что это из-за прогресса в разработке. Сейчас они на версии 1.6.3. Несколько месяцев назад они выросли с нуля до единицы. Это был единственный раз, когда у них были критические изменения. С тех пор они просто постоянно выпускали новые функции и исправляли ошибки.

Майк: Последние пару месяцев все было просто добавлением. Дополнения и исправления. Там нет критических изменений. Я не знаю, как выглядит дорожная карта, но я полагаю, что она останется такой. Каждый раз, когда я обновлял его, одну из этих второстепенных версий, все было в порядке. Я никогда не видел, чтобы что-то сломалось от него. Но когда вышла версия 1.0, в ней произошли серьезные изменения. Я не помню, чтобы это было катастрофическим, хотя.

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

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

Дрю: Ага. Это всегда важное соображение, не так ли?

Майк: Ага.

Дрю: Есть ли что-нибудь еще, что мы должны знать о пользовательском интерфейсе Chakra, прежде чем мы погрузимся и будем использовать его в проекте?

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

Дрю: Ага. Это прекрасно. Вы выпустили книгу под названием Cut Into The Jamstack, которая является предварительным выпуском. На данный момент бета-версия. Вы сами публикуете это. Это правильно?

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

Дрю: Книга буквально проводит читателя через процесс создания программного обеспечения как сервисного приложения.

Майк: Ага.

Дрю: Все на Jamstack. Почему вы решили написать это сейчас и применить такой подход к книге?

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

Майк: Где-то в октябре прошлого года у меня было это… Я хотел выложить что-то, что было бы продуктом. Электронная книга казалась действительно хорошим способом начать. Я действительно увлечен Next.js и тем, что вы можете с ним делать. Я использую термин Jamstack и рассматриваю Next.js как часть Jamstack, потому что по умолчанию он имеет генерацию статического сайта.

Майк: Но я думаю, что есть одна вещь, о которой, по моему мнению, недостаточно говорят или которую можно было бы объяснить, — это создание с ее помощью программного обеспечения как сервисных приложений. Потому что Jamstack предназначен не только для веб-сайтов. Он очень хорошо работает для веб-сайтов, ориентированных на контент, потому что он статичен, быстр и оптимизирован для SEO.

Майк: Но там столько богатой функциональности, особенно в Next.js, где вчера Vercel провела свою конференцию Next.js, и они выпускают там все больше и больше замечательных функций. Я увлечен созданием программного обеспечения как услуги. Веб-сайты с программным обеспечением великолепны, но программное обеспечение предназначено для того, чтобы что-то делать.

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

Майк: Next.js, Jamstack, Vercel и Chakra UI — все они создают вещи, которые упрощают для вас многие вещи. Next.js упрощает многие проблемы, связанные со скоростью и доступностью. Инстанализация. Вот и все, маршрутизация сделана за вас. Вам не нужно беспокоиться о маршрутизации на стороне клиента или службы. Это автоматически. Пользовательский интерфейс Chakra делает это с помощью специальных возможностей и тем. Эти инструменты вместе взятые, они просто… Опыт разработчика становится действительно замечательным, и все просто… Это дает вам свободу создавать действительно программное обеспечение.

Майк: Чтобы ответить на твой вопрос. Причина, по которой я выпустил книгу сейчас, заключается в том, что мне действительно нужно время, чтобы что-то опубликовать, и когда экосистема Jamstack начинает приносить плоды и расти. Это также дало мне возможность написать больше кода в Jamstack, что мне очень нравится.

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

Майк: Да.

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

Майк: Да.

Дрю: … и я могу… Я думаю, для читателей, с точки зрения читателя вашей книги, просто пройти и построить этот пример, следуя вместе с вами, это, вероятно, отличный способ преодолеть это препятствие, чтобы просто помочь мягко переключите свое мышление на «хорошо». Вот как я мог бы делать все эти вещи, но на Jamstack. Ты бы согласился с этим?

Майк: Да. Вот на что я надеюсь. Я думаю, что да. Это действительно то, что он предназначен. Недавно я подписывал доклад, доклад на конференции, который… Часть моей мотивации для этой темы и способа, которым я решил преподавать в этой книге, заключается в том, что я могу научить вас одному языку программирования. Фреймворк, но лучше познакомить вас со стеком на практике, потому что каждый разработчик с большим опытом хорошо справляется с документацией, поиском в Google и использованием переполнения стека. Зачем мне тратить ваше время на то, чтобы учить вас этому?

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

Майк: Одна вещь, которую я подробно рассматриваю, например, это функция, которую я создаю для асинхронной загрузки нескольких файлов. У Next.js есть внешний интерфейс и внутренний интерфейс. Хотя в передней части интерфейса и в задней части интерфейса, если вы используете эту аналогию, у вас есть слой React. Затем у вас есть слой узлов. Вот эти маршруты API.

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

Майк: Вам нужно принять этот знак и выполнить загрузку, которая идет из браузера, в обход вашего API и направляется прямо в Cloudinary. Затем вам нужно сохранить это в своей базе данных, которая использует ваш внешний интерфейс. Есть много частей и Next.js… В сообществе Next.js пока нет плагина с открытым исходным кодом для этого. Которые я могу извлечь из приложения сейчас, когда оно создано, и поместить его в одно, потому что это будет у других людей.

Mike: Anyway, all that's just to say that, I think that's something really valuable to teach to people. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. Да. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

Дрю: Фантастика.

Mike: I've got another one coming up in probably a couple of weeks. Да. Да. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. Вот и все.

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. Майк. Были ли у вас напутствия?

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.