Как фронтендерам обновиться из 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:

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

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

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

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

Roadmaps

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

All-in-One

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