Эти 5 технологий находятся в верхней части списка того, что разработчики полного стека должны изучить в 2022 году.

Реагировать

С более чем 15 000 000 еженедельных загрузок на npm, React в настоящее время является библиотекой номер один для создания веб-интерфейсов. Его используют многие крупнейшие и самые инновационные технологические компании и стартапы в мире. Несмотря на то, что есть некоторая кривая обучения, которую нужно полностью освоить, она с самого начала была разработана для постепенного внедрения. Это означает, что вы можете использовать столько React, сколько вам нужно и/или хочется.

Изучение реакции

Лучший способ изучения React — научиться «думать» компонентно-ориентированным образом. Чтобы лучше понять, как разрабатывать приложения в React, вы должны рассматривать свой пользовательский интерфейс как иерархию повторно используемых компонентов. Если у вас есть набросок, нарисуйте рамки вокруг всех уникальных частей, из которых он состоит. Это ваши разные компоненты. Это отличный способ визуально мыслить и планировать в React. Как только вы освоите это, вы уже на пути к тому, чтобы стать отличным разработчиком React.

Перед изучением React у вас должно быть хотя бы базовое понимание JavaScript и HTML/CSS.

Ресурсы

Node.JS

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

Изучение Node.JS

Если вы знаете JavaScript, у вас не должно возникнуть проблем с изучением Node.JS. Есть несколько нативных библиотек, основы которых вам следует знать, например, http, file, stream и process. Как только вы поймете основы работы с Node.JS, вероятно, будет хорошей идеей перейти к изучению фреймворка для создания API и сервисов, таких как Express, Nest.JS или подобных.

Ресурсы

  • "Введение"

Next.JS

React и Express — отличное начало для изучения того, как создавать одностраничные приложения (SPA). Для создания готовых к производству приложений, где статическая отрисовка хотя бы некоторых страниц важна из-за поисковой оптимизации (SEO), этого обычно недостаточно. Кроме того, при создании веб-приложения производственного уровня необходимо учитывать множество других соображений, таких как разделение кода, оптимизация изображений и многое другое. Особенно, если вы создаете приложение с большой пользовательской базой.

На сегодняшний день двумя основными платформами для создания веб-приложений производственного уровня являются Gatsby и Next.JS. Оба имеют много общего. В качестве примера я сосредоточился на Next.JS, но Gatsby также является отличной альтернативой.

Next.JS имеет встроенные функции для рендеринга на стороне сервера (SSR), статической генерации (SSG), оптимизации изображений, разделения кода и многого другого. Кроме того, он предлагает отличный опыт разработчика, особенно учитывая, что он разработан Vercel. Vercel a предлагает отличный хостинг и непрерывную интеграцию для приложений Next.JS, среди прочего.

Изучение Next.JS

Как только вы освоите React и фреймворк на основе Node.JS, такой как Express, вы готовы приступить к изучению Next.JS. С Next.JS вы будете писать как бэкенд (API, статический рендеринг), так и внешний интерфейс вместе взятые. Имейте в виду, что Next.JS гораздо более самоуверен, чем Express. Например, маршруты и обработчики маршрутов определяются не явно, а с использованием шаблонов (имен файлов и путей). Я рекомендую ознакомиться с этими шаблонами и с тем, как использовать макеты для лучшего повторного использования на ранней стадии. Сейчас, вероятно, самое время углубиться в Typescript, если вы еще этого не сделали.

Ресурсы

Здравомыслие

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

Sanity — это безголовая система управления контентом (CMS) и платформа для хранения и структурирования контента. С Sanity легко определить модели данных и структурировать контент.

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

Обучение здравомыслию

Обучение Sanity означает изучение того, как определять и структурировать контент с помощью схем, обучение настройке и настройке Sanity Studio и изучение того, как запрашивать данные с помощью GraphQL и/или GROQ. Если вы никогда не работали со структурированным контентом, поначалу это может показаться немного сложным. Но Sanity предлагает отличную документацию, и вы можете скачать стандартные шаблоны для Next.JS + Sanity. Это действительно ускорит процесс обучения.

Ресурсы

Область MongoDB и бессерверная

Как только вы освоите описанные выше технологии, вы будете готовы строить все… почти. Несмотря на то, что Sanity отлично подходит для хранения и приема структурированного контента, это не база данных. Он не предлагает API в реальном времени и становится довольно дорогим при хранении и запросе больших объемов данных.

Если вы создаете приложение для миллионов пользователей с большими объемами генерируемых пользователями данных, вам нужен по-настоящему масштабируемый сервер. Серверная часть с такими функциями, как авторизация, проверка ввода, обработка разрешений и многое другое.

Это может быть относительно сложно и дорого построить для небольших компаний и стартапов. Однако есть и другие альтернативы, такие как Mongodb Realm (скоро Mongodb Atlas Services). В сочетании с бессерверными функциями вы получаете практически неограниченную вычислительную мощность, а также масштабируемую и настраиваемую серверную службу, способную обрабатывать тысячи запросов в секунду. Вы платите только за то, что используете, и есть довольно щедрая бесплатная квота.

Изучение области MongoDB

Прежде чем вы начнете изучать область Mongodb, вы должны иметь хотя бы базовое представление о Mongodb и хранилищах документов. Вы также должны иметь некоторый опыт работы с управляемыми облачными сервисами.

Чтобы правильно настроить серверную службу с использованием области MongoDB, вам необходимо научиться определять свои модели предметной области, отношения, правила/разрешения на чтение/запись, триггеры и бессерверные функции. Вам также потребуется настроить провайдеров входа в систему. После завершения у вас будет многофункциональный и масштабируемый серверный сервис для обработки пользовательского трафика.

Ресурсы: