Как фронтендерам обновиться из Web 2.0 в Web 3.0

Крипта становится популярнее, и все чаще в разговоре можно услышать «веб-три». Но в этой статье я отброшу истории про «вкладывать в крипту все деньги, торговать на фьючерсах и абузить StepN» и подойду к Web 3.0 с технической стороны.

Если вы до сих пор не слышали про Web 3.0 – я посоветую вам хорошую вступительную статью на эту тему. В этом же материале речь пойдёт про практическую подготовку разработчика к переходу в Web 3.0.

Хочу рассказать про эту тему, так как сам в октябре 2021 года задумался о переходе и уже спустя 2 месяца перешёл на фулл-тайм в крипту.

💡 Если вы фронтендер, то на 90% вы готовы к переходу в работу с Web 3.0

Что остаётся неизменным?

Во фронтенде всё так же нужно делать интерфейсы для пользователей 👀

Вам все так же нужно заботиться об удобном интерфейсе, доступности для пользователей и оптимизациях. Все ваши знания фреймворков (React, Vue, Svelte и тд) всё так же актуальны и понадобятся в процессе работы. В конце концов, всё сводится к манипуляциям с DOM. Разница заключается в том, как приложения Web 2.0 и Web 3.0 обрабатывают данные и аутентификацию.

Что отличается?

Основная смена парадигмы в Web 3.0 произошла на этапе работы с данными и аутентификацией.

Аутентификация

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

💡 dApp – Web 3.0 сайт или приложение

Интерфейсы в карусели выше очень похожи для того, чтобы сохранить удобство пользователя, но в технической реализации это совершенно разные процессы. Преимущество Web 3.0 авторизации в том, что мы не оставляем приложениям свой контактный адрес, который чаще всего передается при авторизации через соц. сети. Вы можете держать крипто-кошелёк максимально обезличенно, авторизовываться на всех платформах и не получать какого-то спама. Так же, децентрализованные приложения не требуют вас проходить какие-либо верификации и дополнительные KYC (Know Your Client)

Взаимодействие с сервером

Вместо того, чтобы делать сетевые запросы к централизованным API серверам, вы начинаете считывать данные с блокчейна напрямую. Обычно для этого используются смарт-контракты. Как Web 3.0 инженер, вы будете ежедневно взаимодействовать со смарт-контрактами. Убедитесь, что вы хорошо понимаете, что такое смарт-контракт, как он работает, что такое ABI смарт-контракта и т. д.

💡 Про смарт-контракты можно почитать у бинанса, про ABI есть интересная статья на хабре

Так же, достаточно сильно изменяется работа с мутацией данных. Если в Web 2.0 вы просто отправляете POST запросы от пользователя на бэкенд, то в Web 3.0 для этого нужно отправить транзакцию с вызовом смарт-контракта в блокчейн. За вызов пользователь должен платить комиссию (тот самый газ, который доходит до десятков тысяч долларов во время высокой нагрузки эфира). Поэтому разработчику важно быть осторожным с вызовами смарт-контрактов на фронтенде. Нужно убедиться, что вызываются правильные функции, а в параметры уходят достоверные данные в правильном формате. Смарт-контракты и все, что находится в блокчейне, неизменяемо по своей природе. Как только данные появились в блокчейне – они там и остаются. Если вы хотите изменить отправленные данные, это стоит денег, а иногда это невозможно — в зависимости от характера смарт-контракта, с которым вы взаимодействуете.

Работа с данными в Web 3.0 также занимает гораздо больше времени, чем в Web 2.0. POST-запросы в Web 2.0 обычно занимают несколько сотен миллисекунд. Вызовы смарт-контрактов и транзакции, могут занимать от нескольких минут до бесконечности.

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

Добавим к этому всему огромное количество разных сетей. Если ваш смарт-контракт находится в Ethereum сети, то пользователь не может выполнить его, находясь в Polygon-е. В продукте, над которым я работаю, мы поддерживаем совершенно разные блокчейны и нужно отправлять транзакции во многих EVM-like сетях, но помимо этого есть поддержка Solana, написанной на Rust и имеющей совершенно другие смарт-контракты (в солане их называют программами)

Но не спешите расстраиваться если вам ничего не понятно про взаимодействие с Solidity, вызовами смарт-контрактов и обработкой блоков. Есть много решений с открытым исходным кодом для упрощения работы с Web 3.0:

  • Web3-wallets, поддерживает Near, Solana, все EVM-like сети. Open source решение, которое я разрабатываю на своей работе. Пока не user-friendly для подключения (еще не описана документация и ставится как git submodule)
  • wagmi.sh, поддерживает все EVM-like сети. Typescript ready, лучшая документация и тестовая среда.
  • web3modal, поддерживает все EVM-like сети. Самая популярная библиотека на данный момент. Положительная особенность в том, что она написана на JS и не привязана к фронтенд фреймворкам.
  • react-moralis, поддерживает Solana и все EVM-like сети. Большое количество функционала, удобное использование, но сильно привязана к своему бэкенду, за использование которого в проекте под нагрузкой придётся раскошелиться 👀

💡 Здесь был раздел с сравнением кода, но вы ведь на vc. ru пришли не код смотреть. Если будет интересно – этот раздел можно найти у меня в Telegram канале

Гайд

И так, отвечая на вопрос из заголовка статьи, давайте подытожим, что нужно знать. Если вы хотите начать работу в Web 3.0 в качестве frontend разработчика, это примерный гайд, который вы можете использовать в качестве справочника. Гайд вдохновлён как моим личным опытом, так и тем, что я видел, как делают другие.

  • Изучите основы блокчейна и Ethereum (на этом пункте можно очень надолго застрять, учите только самое необходимое)
  • Узнайте о смарт-контрактах
  • Узнайте о кошельках и подключении кошельков в Web 3.0 (provider, signer, различные провайдеры кошельков)
Цикл видео, которые помогают понять первые 3 шага из гайда
  • Сделайте первый фронтенд-проект, который просто позволяет подключить кошелек и показывает адрес подключенного кошелька (гайдов по таким проектам очень много, в конце статьи прикреплю большое количество источников)
  • Посмотрите опенсорс проекты, созданные для Web 3.0. Найдите, где вы можете сделать Pull Request с какими-то изменениями. Не стоит сразу лезть в корни работы с провайдерами, RPC и библиотеками. Вы можете применить свои знания в написании тестов, оптимизировать бандл или же написать полезную и удобную документацию.
  • Начинайте искать работу 😎 На этом шаге гайда у вас есть все основы, необходимые для того, чтобы называть себя фронтенд-инженером Web 3.0. В своём канале я уже публиковал подборку сайтов с вакансиями в Web 3.0, попробуйте откликнуться на 8-10 вакансий оттуда и поймете, что рынку не хватает разработчиков и даже большие проекты готовы брать новичков.

📚 Прямо во время написания этого блока статьи я нашёл пару статей на тему “Как я устраивался в Web 3.0”.

Тезисы

– Для трудоустройства нужна лишь пара презентаций, щепотка наглости и средний английский (автор из СНГ).

– Даже расхайпленным проектам не хватает рабочих рук. Любая инициатива наказуема горсткой токенов.

– Несмотря на заглавие «официальное трудоустройство», оно вряд ли будет официальным.


Почитать можно здесь

Подборка ресурсов для изучения

Ну какая же статья без огромного списка дополнительных статей, чтобы закрыть FOMO. Добавляйте себе всё, распланируйте время на изучение и постройте road map. Не все ресурсы я полностью изучал и читал, но всё это собрано за 8 месяцев развития в Web 3.0. Упущу платные курсы, потому что информации в открытом доступе очень много. Оставьте деньги на психолога или купите себе первую NFT 😉

Enjoy 🎉 Начнем с курсов

  • Buildspace.so – не перестану рекомендовать этих ребят, самое простое изучение. Все курсы бесплатны, есть свой борд с вакансиями
  • learnweb3.io/ – очень давно сижу у ребят в дискорде, но так и не проходил их треки. Кажется, что очень похожи на билдспейс
  • https://www.web3.university/ – ещё один аналог билдспейса, до которого у меня не дошли руки
  • https://rabbithole.gg/ – место, где за выполнение активностей в Web 3.0 и изучении протоколов еще и платят
  • https://cryptozombies.io/ – классика для основ solidity. Спойлер: в конце будете учить jQuery
  • https://capturetheether.com/ – опять игра, и опять про Solidity
  • https://speedrunethereum.com/ – какой гайд без спидранов
  • https://a16z.com/crypto-startup-school/ – (есть на русском) (НЕ только для разработчиков)
  • https://eth.build/ – (уже давал ссылку на их плейлист на 3 пункте гайда)

Roadmaps

Документации

All-in-One

Спасибо за прочтение. Подписывайтесь на мой канал, твиттер и Welcome to Web 3.0 🎉 #криптовалюта #web3 #подборка #frontend #фронтенд

99
2 комментария

🚨🔥

1
Ответить

Из предоставленной информации напрашивается вывод что пользователи будут платить за просмотр страниц сайта(dApps) сразу при посещении(открытии) любой из страниц?

Ответить