Это мнение руководство о том, как стать разработчиком web3 в 2023 году.
Я опишу точные шаги, которые я лично предпринял, чтобы получить должность инженера по связям с разработчиками в Thirdweb; набор инструментов разработчика для создания в web3.
В отличие от других дорожных карт, я не собираюсь давать вам 300 вещей для изучения и заставлять вас застревать в аду туториалов. Это действенная последовательность технологий, которые вы должны изучить, включая те ресурсы, которые я нашел наиболее полезными на протяжении всего своего путешествия.
Давайте погрузимся в это! Ниже приведен предварительный просмотр каждого слоя стека, который мы рассмотрим.
Важный отказ от ответственности (ПРОЧИТАЙТЕ ЭТО)
Потребление ресурсов само по себе никогда не научит вас тому, как стать разработчиком.
Каждый разработчик должен постоянно вести собственные битвы на пути к пониманию того, как программировать, и по пути собирать кусочки гигантской головоломки.
Как только вы узнаете, как НАЧАТЬ строительство, выйдите из дорожной карты и приступайте к делу в одиночку. Просто попробуйте что-нибудь построить. Это будет отстой. И в этом суть! Возвращайтесь к ресурсам, чтобы заполнить пробелы в ваших знаниях, когда вы застряли; узнайте, какие инструменты доступны для решения ваших проблем с помощью ресурсов в этом руководстве.
Каждый ваш проект будет лучше предыдущего, и вскоре вы будете смущены своим старым кодом.
НЕ просто потребляйте эти ресурсы, они нужны только для того, чтобы указать вам правильное направление в логическом порядке, когда вы на самом деле создаете свои собственные проекты.
Это будет непросто, но оно того стоит. Пристегнитесь и приступим!
Дорожная карта
В этой дорожной карте мы затронем множество тем, и я предоставлю вам ресурсы, которые я лично использовал для развития своего понимания на каждом этапе пути. Вот краткий обзор некоторых инструментов, которые мы рассмотрим:
Основы: HTML и CSS
Каждый сайт состоит из трех вещей:
HTML: структура элементов на странице
CSS: стиль элементов на странице.
JavaScript: интерактивность элементов на странице
Любое приложение, которое вы создаете, независимо от того, какую технологию вы используете, в конечном итоге преобразуется в эти три языка и отображается для пользователя на веб-странице.
Следовательно, важно понять самые основы HTML и CSS, прежде чем погрузиться в какое-либо «программирование» (добавление интерактивности или логики в ваше приложение).
HTML и CSS
CS50 — это вводный курс Гарварда в компьютерные науки. Это выдающийся ресурс, который преподают лучшие лекторы в мире. Я прошел несколько их бесплатных онлайн-курсов, включая курс CS50 предыдущих лет, и не могу рекомендовать его достаточно.
Ниже приведена девятая лекция (начиная с индекса 0) курса, посвященного HTML, CSS и JavaScript. Он учит вас основам работы веб-страниц и знакомит с тем, как три языка работают вместе для создания интерактивных веб-сайтов.
Даже если вы уже знакомы с HTML и CSS, вы будете удивлены тем, как много вы узнаете из этих лекций, вернувшись к основам и получив более глубокое понимание основ.
JavaScript
Овладеть основами HTML и CSS значительно проще, чем изучить JavaScript; который является бегемотом в сравнении; но и гораздо больше веселья!
Во-первых, вам нужно изучить абсолютные основы программирования, прежде чем углубляться в сам JavaScript. Сюда входят концепции, ключевые для любого языка программирования; переменные, функции, циклы и структуры данных.
Относительно кратким ресурсом, который научит вас этим основным основам, является приведенное ниже видео «Учебник по JavaScript для начинающих».
Видео выше — всего лишь пример контента, удобного для начинающих, для понимания основ JavaScript. Есть много других, и я призываю вас изучить столько, сколько вам нужно, прежде чем продвигаться дальше по этой дорожной карте.
Вот еще несколько замечательных интерактивных ресурсов, которые вы можете использовать для обучения новичка:
- Free Code Camp: Полный курс JavaScript для начинающих
- Проект Один
- Вес Бос — JavaScript30
- Документация MDN
Дополнительно (на данный момент): основы компьютерных наук
JavaScript удобен для начинающих и избавляет от многих сложностей программирования; он разработан так, чтобы вы могли быстро взяться за дело.
Если вы готовы потратить значительно больше времени на изучение основ компьютерных наук, рассмотрите возможность просмотра полного плейлиста лекций для CS50 2022; что составляет ~ 20 часов всего.
Мое личное мнение заключается в том, что лучше вернуться к этим основам позже и начать создавать что-то как можно скорее.
Лично я не изучал эти основы информатики в деталях до тех пор, пока не проработал 1–2 года в качестве профессионального инженера-программиста (знаю, что это может показаться безумием). Опять же, это мое личное мнение, и другие с ним не согласятся.
Расширенный JavaScript
Вот где кривая обучения достигла для меня крутой точки.
Ресурсы, которыми я собираюсь поделиться, поначалу могут показаться ошеломляющими; мне потребовалось несколько повторных просмотров и много-много страниц заметок, чтобы начать понимать эти концепции.
Как на самом деле работает JavaScript
Видео ниже подробно рассказывает о нюансах JavaScript и о том, как магия языка работает под капотом! 🧙
Такие темы, как область видимости, замыкания и наследование прототипов, как ни странно, за последние несколько лет меня несколько раз спрашивали на собеседованиях при приеме на работу.
Это еще одна лекция CS50 2018 года, и она по сей день остается одним из моих любимых ресурсов для изучения JavaScript!
Асинхронный JavaScript
Следующая лекция в этом плейлисте тоже довольно сложная, но охватывает невероятно важные темы для более глубокого понимания JavaScript. Вы познакомитесь с некоторыми более современными функциями JavaScript, представленными в ES6, такими как обратные вызовы, промисы и асинхронные функции.
(Необязательно) Платный курс: «ES6 для всех!» Вес Бос
Дополнительным ресурсом, который я рекомендую (если вы можете себе это позволить), является курс ES6 для всех! от Wes Bos. Это отличный интерактивный курс, который научит вас множеству очень полезных синтаксических средств, которые являются частью более поздних выпусков ECMAScript.
Это не обязательно, но Уэс — отличный учитель, и курс — это увлекательный способ научиться более эффективным способам работы с JavaScript.
Этот курс очень удобен для начинающих и поможет вам написать более современный Javascript.
(ОЧЕНЬ необязательно) Платный курс: Освойте собеседование по кодированию
Пока вы находитесь в пути и создаете свои проекты, некоторый код, который вы пишете, не будет таким эффективным, как мог бы быть.
Платный курс, который многому научил меня в написании лучшего кода, — это курс Master the Coding Interview: Big Tech (FAANG) Interviews от Andrei Neagoie.
Название курса немного кликбейтное, но он учит почти всему, что нужно знать о структурах данных и алгоритмах; с 30 интерактивными вопросами для вас; все в JavaScript!
Для меня это было чрезвычайно тяжело, и мне потребовалось много месяцев, чтобы пройти через это; Вот почему я поставил этому курсу тег «очень необязательный». Это замечательный ресурс, который я рекомендую вам использовать в какой-то момент вашего путешествия, но если вы новичок, он, вероятно, будет для вас слишком сложным.
React — создание пользовательских интерфейсов
Если к этому моменту вы начали создавать свой проект, вы, вероятно, поняли, что сложно создать приложение, написав только HTML, CSS и JS.
За последнее десятилетие разработчики придумали множество различных библиотек и фреймворков для решения этих проблем; jQuery, Angular, Svelte, Vue… список можно продолжать!
Одна библиотека вышла на первое место; Реагировать, а это:
React использует синтаксис под названием JSX, чтобы объединить написание структуры и дизайна вашего пользовательского интерфейса с вашей интерактивностью в одном месте:
Отличным ресурсом для понимания «почему» React является эта лекция CS50W о пользовательских интерфейсах:
Эта лекция описывает проблемы создания приложений без фреймворка или библиотеки и представляет React как решение некоторых проблем, с которыми вы, возможно, уже сталкиваетесь.
Погружаемся глубже в React
В течение последних нескольких месяцев (или лет) основная команда React неоднократно выпускала новую «бета-версию» документации.
Эта новая документация превосходна, и я настоятельно рекомендую вам ознакомиться с их Быстрым стартом, чтобы изучить все основные концепции React на одной простой странице.
Вы узнаете о наиболее распространенных шаблонах React, таких как создание компонентов, отображение данных и реагирование на события.
Прежде чем вы слишком углубитесь в создание только с помощью React, я познакомлю вас с еще одним уровнем абстракции поверх React, который называется Next.js; который выводит вещи на следующий уровень.
Next.js — Делаем React НАМНОГО лучше
Я избавлю вас от многих проблем: полностью пропустите Create React App (CRA) и, возможно, даже Vite. Начните использовать Next.js с самого начала.
Ниже приведено отличное трехминутное объяснение того, почему CRA больше не идеален для новых проектов, использующих React:
Начать работу с Next.js
Документация Next.js просто великолепна. Ли Робинсон и его команда инженеров DX написали потрясающую интерактивную документацию, которая поможет вам изучить Next.js и проверить свои знания.
По этой причине я рекомендую сначала просмотреть интерактивную документацию; а затем погрузиться в создание вашего первого приложения Next.js с их CLI.
Машинопись
Еще один горячий взгляд на эту статью 🌶️: Начните использовать TypeScript как можно скорее! JavaScript — отличный язык для начинающих, но это палка о двух концах. Одна из причин, по которой он хорош для начинающих, заключается в том, что он дает вам большую свободу для написания 💩 кода, и он не жалуется на это!
Поначалу TypeScript может быть настоящей болью в 🍑, но как только он щелкнет, вы никогда не захотите возвращаться. Все больше и больше разработчиков и инструментов разработчика по умолчанию используют TypeScript, и на то есть веские причины; Безопасность типов значительно снижает вероятность ошибок в вашем коде!
Мое предложение: выключите строгий режим в начале. Используйте тип всякий раз, когда вы полностью застряли и не знаете, что делать. На самом деле это плохая практика, но она поможет вам адаптироваться к TypeScript, не желая ломать клавиатуру.
По мере того, как вы будете писать все больше и больше кода на TypeScript и осваивать все больше приемов, вы почувствуете себя комфортно, включив строгий режим и более экономно используя тип any
; до тех пор, пока вы в конечном итоге не получите полную безопасность типов в своей кодовой базе и не будете смотреть на JavaScript с отвращением!
Стайлинг
У вас есть несколько вариантов создания более красивых приложений, которые в конечном итоге представляют собой просто разные способы абстрагирования CSS, так что это… в основном CSS, но проще.
По общему мнению, к 2023 году Tailwind CSS является золотым стандартом для добавления стилей в ваше приложение. Мне лично нравится использовать инструмент под названием Material UI, который поставляется с готовыми компонентами; однако большинство людей не согласны со мной в этом.
Отличное видео, взвешивающее различные доступные варианты, их плюсы и минусы, — The Best of CSS от Theo:
Краткий ответ: если вы еще не знаете и не любите библиотеку пользовательского интерфейса, выберите Tailwind CSS.
Основы блокчейна
Если вы еще не знаете, что такое блокчейн или смарт-контракт, полезным ресурсом для начинающих является курс блокчейна Патрик Коллинз.
Я предлагаю вам посмотреть первые 2 часа 32-часового курса, который знакомит с основными концепциями блокчейна, смарт-контрактов и web3. Вы можете выбрать другие области курса, которые вас интересуют, по вашему желанию!
Понимание стека Web3
Вступительное видео, которое я рекомендую посмотреть, — Определение стека Web3 от Nader Dabit; в котором описывается эквивалентный технологический стек web3 по сравнению с традиционным приложением web2.
В качестве обновленной иллюстрации к выступлению Надера в 2021 году я представил свои мысли о техническом стеке приложения web3 ниже:
Есть много движущихся частей, которые следует учитывать при создании веб-приложения 3. Существует множество доступных инструментов, которые помогут вам создать различные аспекты вашего децентрализованного приложения, и вам решать, что вам больше нравится.
Конечно, я приведу здесь свои рекомендации, к которым пришел после экспериментов с рядом этих инструментов в прошлом году.
Создание полного стека веб3-приложения «сложный путь»
Возможно, лучшим ресурсом, который я использовал, когда входил в пространство web3, был видеоурок Nader Dabit Full Stack NFT Marketplace. Вы узнаете, как быстро создавать практически все аспекты полнофункционального веб-3-приложения, в том числе:
- Смарт-контракт NFT Collection
- Смарт-контракт торговой площадки NFT
- Среда разработки и тестирования смарт-контрактов
- Загрузка и скачивание файлов IPFS
- Фронтенд-технологии и Next.js для создания web3-приложения
- Узлы RPC и шлюзы IPFS
Это может показаться большим скачком по сравнению с предыдущим шагом, и вы можете не сразу все понять в этом видео, и это нормально!
Этот ресурс многому научил меня о том, как части стека web3 сочетаются друг с другом, и научил вас, как создать грандиозный проект с использованием современных технологий.
Расширение проекта Надера
Что-то, что действительно заставило меня понять, что происходит, было добавление дополнительных функций к проекту торговой площадки Nader NFT; в частности, добавление функции для получения информации об отдельном листинге смарт-контракта торговой площадки.
Добавление этой возможности в проект может показаться простым, но оно проверяет, действительно ли вы понимаете, как работает проект; и это отличный шаг, чтобы добавить поверх самой сборки.
Почему это «трудный путь»?
Этот ресурс знакомит вас с тем, что я бы назвал низкоуровневой абстракцией создания полнофункционального веб-3-приложения; он показывает вам каждый шаг процесса, который очень важно понять.
Однако я бы сказал, что цель видео не в том, чтобы создать «готовое к производству» приложение в 2023 году. Я говорю это потому, что с середины 2021 года было выпущено большое количество инструментов ( время, когда было снято это видео), что значительно упростило создание полнофункциональных веб-3-приложений.
Давайте быстро рассмотрим несколько других основных концепций, а затем углубимся в более современные инструменты, доступные для создания веб-приложений.
RPC-узлы
Для связи с блокчейном и обратно вам нужно использовать узел. Если вы не хотите запускать свой собственный узел, вам нужно использовать для этого поставщика услуг, такого как Alchemy, Coinbase или Moralis, (или Thirdweb, как мы объясним в следующем разделе).
Ниже приведен отличный ресурс, описывающий, что такое узел RPC и почему он необходим для создания приложений web3.
Интересный проект: Lava Network
Проект, который я с нетерпением жду в 2023 году, — это Lava Network; который предлагает децентрализованную альтернативу узлам RPC. Посмотрите, если вам интересно!
Решения для децентрализованного хранения
Не вся информация должна храниться в блокчейне. Хранение данных в самой цепочке блоков требует платы за газ и имеет значительный лимит хранения; по этой причине распространенным шаблоном является хранение вашей информации «вне цепочки» и вместо этого сохранение URL-адреса этих данных в цепочке блоков.
Существуют решения для хранения данных, которые не хранятся «в сети», но при этом не контролируются централизованной службой, такой как AWS или Google Cloud. Два известных решения для децентрализованного хранения в 2023 году:
ИПФС
Ниже приведено краткое изложение того, что такое IPFS, как оно работает и как вы можете интегрировать его в свои приложения с помощью Thirdweb (подробнее об этом мы поговорим далее).
Для доступа к данным, хранящимся в IPFS, в большинстве браузеров, таких как Google Chrome, вам потребуется использовать шлюз IPFS. Здесь для вас доступно несколько вариантов:
- Общедоступный шлюз (доступен для всех, не очень надежен)
- Частные шлюзы — использование таких сервисов, как Pinata или nft.storage для более высокой скорости и большей доступности, (опять же, или просто используйте Thirdweb, как мы обсудим далее).
Арвайв
Еще одно отличное видео Надера Дабита доступно для вас, чтобы вы могли понять Arweave и другие аспекты экосистемы Arweave, такие как Smartweave и Warp.
Я должен упомянуть, что многие из этих технологий, таких как Arweave, имеют программы грантов, если вы строите с ними; если вы ищете какое-то финансирование, это может быть вам интересно.
третья сеть
Я использовал видео Nader’s Marketplace NFT в качестве отправной точки для внештатного проекта, над которым я работал, когда начал повышать свои навыки в разработке web3. Я пришел к выводу, что создавать смарт-контракты СЛОЖНО!
На тот момент у меня не было достаточно уверенности, чтобы написать полнофункциональный, оптимизированный для газа и безошибочный смарт-контракт торговой площадки для требований моих клиентов; поэтому я начал спрашивать себя: «Кто-то должен был сделать это и где-то ПРАВИЛЬНО выложить в открытый доступ!?»
Оказывается, я был прав!
Я наткнулся на Thirdweb вскоре после его выпуска и обнаружил, что у них есть смарт-контракты с открытым исходным кодом для коллекций NFT, торговых площадок и многого другого.
По сути, я планировал просто скопировать и вставить их смарт-контракты Solidity в свой существующий проект и продолжить свой путь 😂! Вот доказательство (не говорите ):
Но когда я больше изучил продукт, я обнаружил, что у них есть SDK! Мне больше не нужно было использовать эфиры! У них также есть инструменты для подключения кошельков пользователей и управления моим хранилищем IPFS! Мне больше не нужен был мой код смарт-контракта в моем проекте, поскольку у них была панель инструментов, с помощью которой я мог его развернуть.
Я смог удалить СТОЛЬКО кода, который я написал для своего проекта на рынке, и заменить его инструментами третьего веб-сайта, что в конечном итоге я влюбился в продукт; и подал заявку на мою текущую должность в Thirdweb через несколько месяцев после завершения внештатной работы!
Итак, несмотря на то, что мне платят за продвижение продуктов Thirdweb, я делаю это от всего сердца, а не из своего… кошелька? 🥲 Я действительно использовал их инструменты до того, как присоединился к команде.
Изучение третьего веба
Я потратил много времени на доработку схемы Начало работы в документации Thirdweb, чтобы вы могли в кратчайшие сроки перейти от создания смарт-контракта к созданию клиентского приложения Next.js! Так что моя рекомендация - начать с этого!
Кроме того, есть видео о начале работы, которое охватывает тот же контент:
Как только вы ощутите всю мощь стека Thirdweb, вам не захочется возвращаться! 🤠 С тех пор, как я присоединился к нам, мы добавили еще больше функций, упрощающих процесс создания web3:
- Бесплатный шлюз IPFS и компоненты рендеринга IPFS в SDK.
- Бесплатный RPC включен непосредственно в SDK (который можно переопределить).
- Загрузка и загрузка IPFS в хуки React с Хранилищем.
- React hooks для всего, что только можно представить на фронтенде; как для пользовательских кошельков, так и для взаимодействия со смарт-контрактами.
- Full Solidity SDK под названием ContractKit похож на OpenZeppelin.
- Страница Исследовать; для вас, чтобы развернуть самые популярные стандарты смарт-контрактов.
Разверните смарт-контракт с Thirdweb и подключитесь к нему в своем приложении Next.js, и я обещаю, что вы никогда не захотите вернуться к своему старому стеку.
Другие библиотеки внешнего интерфейса Web3
Чтобы не быть полностью предвзятым, я также порекомендую вам некоторые другие современные библиотеки, доступные для создания более надежных интерфейсов для ваших веб-приложений.
вагми
wagmi — это библиотека React Hooks для создания интерфейсов EVM. Как и в Thirdweb React SDK, в нем есть хуки почти для всего, что вы можете себе представить, и это значительно лучше, чем использование только эфиров или web3.js.
Документация — отличная отправная точка для понимания того, как использовать ее в своих приложениях Next.js/React.
Радужный комплект
RainbowKit — отличная библиотека для добавления возможностей подключения кошелька в ваше приложение и поддержки различных вариантов подключения для ваших пользователей.
Их документация лаконична и включает полезные короткие видеоролики, которые помогут вам быстро приступить к работе.
Решения для индексации
Некоторым веб-приложениям требуется информация, которая недоступна напрямую ни в одном смарт-контракте; например, какие NFT принадлежат кошельку или сколько раз NFT был передан.
Когда дело доходит до решений для индексации, вы можете использовать The Graph; децентрализованное решение, и снова используйте ресурсы Надера, чтобы узнать, как начать работу:
Вы можете предпочесть использовать SDK или конечные точки API для получения проиндексированной информации, и есть ряд популярных решений, которые вы можете использовать, каждое из которых содержит полезные ресурсы и видео в документации:
Эти инструменты имеют схожие возможности с различными плюсами и минусами, вы можете использовать их документацию, чтобы узнать, какой инструмент подходит именно вам.
Смарт-контракты
Может показаться безумием, что раздел смарт-контрактов находится здесь. 🤯
Причина, по которой я разместил смарт-контракты после изучения полного стека технологий внешнего интерфейса, заключается в том, что вы часто будете строить поверх смарт-контрактов, которые уже развернули другие люди; таких как Протокол объектива, или развертывание проверенных смарт-контрактов, оптимизированных для газа, которые соответствуют вашим потребностям, например, доступны на Thirdweb Explore.
Чтобы получить работу в web3, вам не нужно быть экспертом в написании собственных смарт-контрактов. В Thirdweb у нас есть команда, которая занимается написанием смарт-контрактов Solidity и созданием нашего Solidity SDK; остальные наши инженеры понимают код Solidity; но не пишут активно смарт-контракты на ежедневной основе.
Это может быть горячо 🌶️🥵, но вы должны изучить детали создания смарт-контрактов после того, как узнаете, как на самом деле создавать вещи, с которыми люди взаимодействуют; что обычно означает, что вам нужны какие-то навыки работы с интерфейсом.
Некоторые люди не согласятся с этим; поскольку почти все в web3 зависит от базового уровня децентрализованных приложений; что представляет собой смарт-контракты. Я не говорю, что это правильно, это просто путь, которым я лично пошел, чтобы изучить web3.
Есть много ресурсов, которые вы можете использовать для изучения самой Solidity, например:
Объектно-ориентированного программирования
ООП. больше похоже на oof, я прав? 😑
Solidity — это объектно-ориентированный язык программирования для создания собственных смарт-контрактов. Если вы знаете принципы ООП, вы уже прошли большую часть пути, чтобы написать основы Solidity.
Обычно вы не видите, чтобы JavaScript использовался для объектно-ориентированного программирования; другие языки, такие как Java, C# или Python, лучше подходят для такого стиля написания кода.
Чтобы понять основы ООП, я рекомендую вам потреблять столько ресурсов, сколько вам нужно, чтобы понять основные принципы. Ниже приведено введение в ООП в JavaScript, которое поможет вам получить основные понятия:
ООП в солидности
Как только вы узнаете, что такое ООП, я рекомендую вам вернуться к видео Патрика в this timestamp (глава 3), чтобы увидеть, как наследование и переопределение работают в Solidity:
Использование смарт-контрактов OSS
Обычно вам нужно создать несколько стандартов ERC, таких как взаимозаменяемые токены ERC20, NFT ERC721 или торговые площадки, с изюминкой, которая сделает ваш проект уникальным.
Теперь, когда вы знаете, как использовать наследование в Solidity, вы можете использовать такие библиотеки, как OpenZeppelin Contracts и Thirdweb ContractKit, для импорта основных фрагментов логики в ваши смарт-контракты; и настроить их, как вы хотите!
КонтрактКит
ContractKit от Thirdweb имеет широкий набор смарт-контрактов с возможностью «включай и работай», которые вы можете расширять, настраивать и включать в свои собственные смарт-контракты; включая ERC721, ERC1155, ERC20, стейкинг, аирдроп и многое другое 🤠!
Безопасность смарт-контрактов
Важно знать наиболее распространенные уязвимости смарт-контрактов, которые Патрик снова подробно освещает в своем 32-часовом курсе Solidity в главе 18 с этой временной меткой.
Существует также подробный репозиторий с открытым исходным кодом, в котором описаны общие векторы атак для смарт-контрактов и исторические эксплойты с использованием этих атак:
Заключение
Вот и все! Это ресурсы, которые я лично использовал, чтобы развить свои знания в web3 и получить работу инженера по связям с разработчиками в Thirdweb!
Я хотел бы повторить, что одних руководств и ресурсов никогда не будет достаточно, чтобы стать разработчиком. Вам нужно как можно скорее запачкать руки, вернуться к этим ресурсам, когда вы столкнетесь с проблемами в своем проекте, и постоянно сражаться в одиночку в течение многих лет.
Цель этой статьи не в том, чтобы дать вам месяцы ресурсов для потребления, она здесь, чтобы вы могли вернуться к надежным источникам высококачественной информации, пока вы создаете свои собственные проекты в одиночку! 🦸
Если вы хотите присоединиться к сообществу разработчиков в своем путешествии, зайдите в мое сообщество Discord server и представьтесь! 👋
Первоначально опубликовано на https://blog.jarrodwatts.com.