Вот список вещей, на которые следует обратить внимание как новичкам, так и опытным разработчикам JavaScript.
Независимо от того, являетесь ли вы новичком в JavaScript или опытным ветераном, вот список вещей, на которые стоит обратить внимание в течение следующих нескольких лет. Соскучились по любимому инструменту/платформе? Дайте нам знать об этом в комментариях!
Этот список предназначен для всех, кто использовал JavaScript или интересуется им! За последние несколько лет появились действительно отличные технологии.
Найдите новый сторонний проект или причину, чтобы начать использовать что-то из этого списка. Это может просто изменить вашу жизнь.
Давайте начнем с чего-нибудь для разработчиков полного стека.
tRPC — https://trpc.io
Вы когда-нибудь думали, что GraphQL раздражает или утомляет?
Что, если я скажу вам, что есть лучший способ?
С помощью tRPC вы можете создавать надежные и безопасные API-интерфейсы для своих приложений Next.js, React и Node.js.
tRPC обеспечивает сквозную типобезопасность, поэтому вы можете обнаруживать ошибки кодирования между интерфейсом и сервером во время компиляции, а не во время выполнения.
tRPC предназначен для работы с полнофункциональным приложением TypeScript. Интерфейсный API реализован в виде строго типизированных серверных функций TypeScript. Клиентский API tRPC — это SDK для вашего API, по сути, благодаря сигнатурам типов.
Используйте tRPC для получения данных для вашего внешнего интерфейса на Edge.
Говоря о Edge, давайте поговорим о новом золотом стандарте фреймворков JavaScript.
Next.js — https://nextjs.org/docs/
Есть много чего рассказать, так что пристегнитесь. Я расскажу об основных моментах и о том, что, по моему мнению, делает Next.js особенным.
Оптимизация изображений и шрифтов
Я не хочу оптимизировать активы на каждой странице, которую я создаю. Оптимизация активов должна быть легкой. В Next.js это есть. Вы вставляете изображение, и оно автоматически становится нужного размера. Когда макет смещается, вам не нужно об этом беспокоиться. Кроме того, у него есть ленивые нагрузки!
API-сервер Встроенный
В папке pages/api я могу указать конечные точки API. Вот несколько отличных применений:
- Промежуточное программное обеспечение API позволяет мне изменить запрос (например, его заголовки), чтобы сделать другой запрос на другой сервер.
- Я хочу запросить ресурсы из других доменов, но CORS мне мешает. Next.js может справиться с этим, используя класс
pages/api.
Создайте API-интерфейс TypeScript во внешнем интерфейсе, который масштабируется по всему миру и автоматически загружает изображения правильного размера для каждого окна браузера из проекта IDE.
Переменные среды
Приложения Next.js имеют две среды: браузер и сервер. Вы можете просмотреть переменные среды в связанном коде, если хотите; переменные сервера скрыты, потому что пользователи не имеют доступа к удаленным хостам и их коду.
Next.js позволяет мне создавать обе переменные env без настройки Webpack или установки библиотеки для их обработки.
Маршрутизация на основе имени файла
Next.js обрабатывает каждый файл с расширениями «.js», «.jsx», «.ts» или «.tsx» в каталоге pages как маршрут, автоматически используя файловую систему для маршрутизации.
Вы знаете, как вы ожидаете? Наконец, JavaScript Framework, который имеет смысл.
Вы знаете, что хорошо сочетается с Next.js, так это хостинг.
Хостинг Vercel — https://vercel.com
С Vercel развертывание веб-сайтов или приложений упрощается. Вам больше не нужно беспокоиться о таких проблемах, как недоступность серверов, потому что вы можете мгновенно развернуть свой бизнес-сайт.
Он также оборудован для автоматического масштабирования, поэтому ваш сайт всегда будет иметь достаточную вычислительную мощность для его поддержки, независимо от того, насколько популярным он станет.
Разработчики могут настроить свои проекты на свой собственный домен (или бесплатный URL-адрес) и бесплатный сертификат SSL, автоматически шифруя данные между сервером и клиентом.
Разработчики могут размещать статические веб-сайты и веб-приложения, которые развертываются при каждом запросе push или pull для предварительного просмотра изменений непосредственно с помощью Vercel.
Сочетание Vercel с Next.js делает его лучшей платформой для безголового веб-сайта WordPress. С помощью WordPress можно создать как монолитный, так и безголовый веб-сайт. Кроме того, REST API, встроенный в WordPress, может извлекать контент в безголовой архитектуре, что позволяет использовать WordPress таким образом.
Итак, вы знаете, что лучше, чем WordPress для безголовой CMS?
Страпи — https://strapi.io
Их слоган звучит так: «Разработчикам Headless CMS понравится», и вы понимаете, почему.
Strapi — это безголовая CMS с открытым исходным кодом, основанная на Node.js. Он имеет мощную панель администратора с интерфейсом перетаскивания и предоставляет разработчикам визуальную среду для создания своей безголовой CMS.
Strapi позволяет разработчикам создавать собственные API и может использоваться с любой технологией внешнего интерфейса, такой как React, Vue или Angular.
Strapi имеет встроенную поддержку самых популярных баз данных с открытым исходным кодом (MySQL, PostgreSQL, MongoDB), но также поддерживает любую другую базу данных через свою систему адаптеров.
Он может быть интегрирован с Stripe из коробки, но также может быть подключен к любой биллинговой системе благодаря своей модульной архитектуре и системе адаптеров.
Что, если вы не выполняете рендеринг на стороне сервера и вам нужна статическая опция?
Страницы Cloudflare — https://pages.cloudflare.com
Cloudflare Pages — это платформа JAMstack, позволяющая разработчикам интерфейсов совместно работать и развертывать веб-сайты. Он работает на Cloudflare, который кое-что знает о производительности.
Совместная работа упрощается с помощью Pages.
Мне нравится использовать Pages для размещения статических сайтов, и вот еще несколько причин, почему это фантастический сервис.
Это бесплатно.
Это быстро.
Это просто.
Вы можете создать сайт за считанные минуты, и ваша команда начнет работать над кодовой базой в Git. С помощью Pages ваш сайт развертывается непосредственно на Edge, который находится в миллисекундах от клиентов и работает в глобальном масштабе.
А как насчет Serverless, спросите вы?
Глобальная бессерверная платформа Cloudflare, Cloudflare Workers, позволяет разработчикам интерфейсов легко создавать масштабируемые серверные части для своих приложений на JavaScript.
Рабочие стоят всего 5 долларов за 10 миллионов запросов, что делает его в десять раз дешевле, чем другие бессерверные платформы; первые 100 000 запросов каждый день бесплатны.
Говоря о хостинге, который не является Node.js. Хотите больше вариантов?
Deno & Deno Deploy — https://deno.land
Вместо использования Node.js рассмотрите возможность использования Deno, построенного на V8, Rust и Tokio.
Встроенный TypeScript, поддержка JSX, поддержка WebAssembly, встроенное тестирование, безопасность по умолчанию, включает инжектор зависимостей и средство форматирования кода; Другими словами, добро пожаловать на последнюю платформу/фреймворк/вещь JS, которая вам когда-либо понадобится.
Вы получаете выгоду от среды выполнения и менеджера пакетов при использовании Deno. Кроме того, загрузка модуля проста и чем-то похожа на загрузку модуля Golang; вставьте URL-адрес.
Deno можно использовать в качестве замены служебных сценариев, которые ранее могли быть написаны на Bash или Python.
Вы хотите поговорить о скорости развертывания? Глобальное развертывание менее чем за десять секунд! Будет трудно победить это.
Deno стремится использовать существующие API-интерфейсы веб-платформы, где это возможно, в соответствии со спецификацией. Иногда имеет смысл немного отклониться из-за модели безопасности. Тем не менее, он имеет набор отличных стандартных модулей, которые гарантированно работают.
Хотите больше опций фреймворка, который является компилятором?
Svelte — https://svelte.dev
Svelte — это компилятор для вашего интерфейса. В то время как Deno занимает второе место, Svelte — самый любимый фреймворк для JavaScript.
Хотите что-то быстрее, чем React, без виртуального DOM? Когда вы компилируете приложение Svelte, специфичный для Svelte код транслируется в JavaScript, который выполняется браузером. Svelte — это в первую очередь компилятор.
Svelte часто требует меньше кода, чем VanillaJS, и выполняется примерно так же быстро. Svelte — это не просто еще один JavaScript-фреймворк.
Во время компиляции Svelte берет ваши компоненты HTML, CSS и JavaScript и встраивает их в крошечные модули JavaScript.
Он использует статический анализ шаблонов компонентов, чтобы гарантировать, что браузер выполняет как можно меньше действий.
Хорошо, отлично, но что, если вам нужен серверный фреймворк, связанный с интерфейсом?
Ремикс — https://remix.run
Ремикс вошел в чат.
Remix — это компилятор, подобный Svelte, построенный на React Router и вокруг него.
Но подождите, есть еще. Remix — это фронтенд и бэкэнд фреймворк. Remix более самоуверен, чем Next.js, но менее самоуверен, чем Angular.
Remix как серверная среда MVC охватывает части приложения View и Controller, оставляя модель на ваше усмотрение.
Поддерживается множество отличных баз данных с поддержкой JavaScript, включая ORM и библиотеки.
Вы также получаете управление файлами cookie и сеансами через помощники Remix Fetch API.
Remix Stacks — еще одна замечательная функция для изучения JavaScript Fullstack Development. Они генерируются с помощью интерфейса командной строки Remix и обеспечивают быстрое и простое создание проекта.
Несколько встроенных и официальных стеков представляют собой полнофункциональные приложения, что упрощает начало работы.
Что делает Remix особенным, так это то, что он может работать на любом сервере Node.js, таком как Vercel или Netlify, а также в средах, отличных от Node.js, таких как Cloudflare Workers и Deno Deploy.
Вите — https://vitejs.dev
Давайте поговорим об инструментах сборки на секунду. Вы хотите лучшее? Используйте Вайт.
Прекратите использовать Webpack и вместо этого используйте Vite.
Прекратите использовать Snowpack и используйте вместо этого Vite.
Vite использует уникальный подход и не использует сборщик JavaScript. Вместо этого мы обнаруживаем, что он использует пакет под названием Esbuild.
Esbuild, написанный на Golang, работает до 100 раз быстрее, чем сборщики на основе JavaScript.
Vite может определить, какие разделы кода должны быть загружены на основе маршрутов. Из-за этого не нужно все переупаковывать.
Vite — это не Bundler инструмент сборки.
С Vite вы можете превратить свой HMTL/CSS/JS в собственный ESM. Современные браузеры, поддерживающие модули ES, могут автоматически загружать правильный код.
Когда вы начнете работать с Vite, вы обнаружите, что это действительно хороший слой, поддерживающий все новейшие функции на стороне браузера, но находящийся между интерфейсом и сервером.
С Vite вы строите отличные вещи.
Vite был последним местом, но десятый пункт в этом списке заслуживает упоминания.
Похвальный отзыв
У вас есть внешний интерфейс на JS с полным стеком серверной части на другом языке, таком как Ruby или PHP?
Inertiajs — https://inertiajs.com
Это легкое модульное решение, которое можно легко интегрировать с любой серверной технологией. Он позволяет создавать одностраничные приложения с приложениями React, Vue и Svelte.
Кроме того, у Inertiajs есть два официально поддерживаемых полнофункциональных адаптера фреймворка для Rails и Laravel. Inertiajs — это то, что позволяет нам внедрять современные фреймворки JavaScript в ваши серверные монолиты.
И угадай что? Inertia.js построен с помощью Vite. Видите, как все это связано?
Понравилась статья? Хлопайте 👏, подписывайтесь на Twitter, подписывайтесь на Medium и присоединяйтесь к сообществу DevOps на phpops.
Познакомьтесь с моим проектом Keywords.direct — заголовки блогов, созданные искусственным интеллектом и оптимизированные для SEO. Включая этот заголовок статьи!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn и Discord.
