Как мы помогаем развиваться web3 front-end разработчикам благодаря нашей Карте развития в 2024 году

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

Карта развития как инструмент прокачки разработчиков

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

1. На тот момент было очень мало структурированных учебных материалов для разработчиков в онлайне — тому, кто хочет начать карьеру в IT все приходилось изучать самим: много копать, фильтровать и изучать тонны информации.

2. В момент создания карты на рынке была очень высокая конкуренция за кадры, и нам казалось, что вкладываясь в образование своих сотрудников, мы будем более конкурентоспособны.

Решением было создать свою собственную карту развития. Помимо этого, мы сделали собственную бесплатную программу обучения, которая частично пересекается с картой развития на последнем ее этапе. После успешного прохождения нашей программы гарантировалось трудоустройство: так к 2020 году мы получали по 2–4 выпускника в месяц, которые трудоустроились в 100% случаев. Часть из них мы нанимали к себе в штат, а часть — уходили к партнерам. Подробнее о том, как мы создали программу можно почитать в этой статье.

Что изменилось и как выглядит карта сейчас

За последние годы мы сильно выросли и наша карта развития — тоже. Мы проработали множество топиков, закрыли пробелы и продолжаем улучшать и поддерживать карту в актуальном состоянии по сей день. Так например, мы переделали темы по React, когда тот перешёл с классовых компонентов на функциональные, обновили темы по TypeScript и JS, добавили топики про SEO, Rendering и много чего ещё. У нас есть внутренний Roadmap по поддержке и развитию карты. Наша карта является одним из основных инструментов по прокачке наших собственных разработчиков.

С 2021 года мы почти полностью ушли в web3 разработку, теперь мы создаем даппы и разрабатываем смарт‑контракты. Фронтенд тоже не остался в стороне: нам много пришлось изучить, чтобы понимать, как взаимодействовать с блокчейном, подключать кошельки и какие библиотеки для этого использовать. Нам приходилось адаптироваться под быстро развивающуюся экосистему и менять одни инструменты на другие. Пользовательский опыт в web3 приложениях так же отличается от web2, поэтому мы изучали существующие продукты, как они взаимодействуют с пользователем, какой интерфейс предоставляют и, конечно же, собирали фидбек с наших клиентов для роста качества UI/UX.

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

Как возникла идея карты развития по web3 фронтенду

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

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

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

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

Создание ресурса с качественными, актуальными и структурированными материалами по web3 для фронтендеров стало бы ценным подспорьем для всех, кто только начинает свой путь в этой области.

Как выглядит наша карта по web3 фронтенду

Мы сосредоточились на трех ключевых вопросах:

1. Какие минимальные знания нужны, чтобы начать работу с блокчейном?

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

3. С какими технологиями необходимо познакомиться?

Поэтому карта состоит из двух разделов: 

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

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

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

Еще в этом разделе мы уделили внимание одному из инструментов работы с EVM‑сетями, который активно используем в работе — wagmi. Wagmi — это набор хуков и утилит, которые позволяют взаимодействовать с блокчейном используя привычное API React (но вообще не только React, он также имеет интеграцию с Vue и может использоваться как нативная JS библиотека, без каких либо фреймворков) и совмещённое API viem + react‑query. В итоге вы получаете все преимущества для асинхронной логики из react‑query (кэширование, дедупликация, обработка состояний и т. д.), а также преимущества модульности и превосходного вывода типов из viem.

Помимо этого, wagmi предоставляет удобный и расширяемый API подключения кошельков в приложение, благодаря чему появляется множество классных решений «из коробки», которые сами рисуют весь интерфейс по подключению кошельков вместо вас. Подробнее об инструментах я рассказывал в нашем телеграм‑канале, переходите почитать.

Второй раздел – это практика, которая состоит из двух заданий. 

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

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

Кому точно подойдет карта по web3 фронтенду

Этот раздел предназначен в первую очередь для фронтенд разработчиков, у которых есть опыт за плечами, глубокие знания HTML, CSS и JS, и кто хочет попробовать себя в разработке dApp (децентрализованных приложений).

Изучение web3 разработки — задача непростая. Мир блокчейна заметно отличается от того, к чему вы могли привыкнуть за время разработки классических web2 проектов. Мы сами столкнулись с этим: изучали тонны материалов, пробовали на практике и закрепляли результат. Мы прошли сложный путь и хотим, чтобы для других разработчиков он стал проще, а уровень входа в web3 фронтенд разработку — ниже. Поэтому карта — это не просто куча теоретического материала, а отражение нашего собственного опыта.

Подводя итоги

Ценность этой карты в том, что помимо базовых знаний, мы даем еще и best practices. Это прям такая база знаний, к которой можно обращаться, если вы хотите разобраться в том, как работает фронтенд в даппах и не только. Сейчас мы используем новый раздел для прокачки нашей команды и новичков, которых мы онбордим и у которых ещё не было опыта с web3. 

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