В какой -то момент ландшафт фронтального фронта имел три больших игрока: React, Vue и Angular. Знание всех трех было в основном золотым билетом, когда дело дошло до охоты на работу. Затем появился рост легких приложений, рендеринга на стороне сервера и желания никогда больше не создавать пакет WebPack. Внезапно большая тройка стала многими. И когда дело дошло до выбора, какую технологию использовать, вопрос «Знаете ли вы, как использовать X?» Сместился на «Какая технология лучше всего подходит для этого проекта?»
Одним из многих вариантов сегодня является современная структура полного стека, разработанная для простоты и скорости. Если вы ищете быстрое прототипирование или выполняете малый проект первого бэкэнд, Enhance-это твердый выбор. Enhance дает вам легкий подход с минимальной настройкой, позволяя быстро подключить API и базу данных.
Усиление против Астро
Другие легкие рамки, такие как Astro, имеют тенденцию быть первыми. Основное внимание Astro-создание статических сайтов или страниц, получавших сервер, где HTML, CSS и JavaScript, которые вы доставляете в браузер. Вы можете добавить логику бэкэнд, но это не основной рабочий процесс.
Усовершенствование является первым. Логика приложений, конечные точки API и взаимодействие базы данных поступают на первом месте. Вам не нужно сразу думать о статических компонентах HTML или странице. Вы также можете использовать одну из фреймворков «Большой тройки» в качестве фронта, используя эти навыки.
Если вы не можете выбрать между Astro и улучшить, вот способ приблизиться к нему.
При строительстве с Astro ваши приоритеты:
- Оптимизация рендеринга фронта и производительность загрузки страницы.
- Структурирующие компоненты для макетов для статических или серверных страниц.
- Минимизация JavaScript на стороне клиента и управление гидратацией.
При построении с улучшением ваши приоритеты:
- Разработка логики бэкэнд, конечных точек API и функций на стороне сервера.
- Легкая настройка и интерактивность с базой данных.
- Быстро прототипирование функций полного стека без шаблона.
Создание приложения Enhance
Теперь, когда мы рассмотрели основы, давайте построим крошечное приложение с полным стеком в комплекте с базой данных SQL. Поскольку frontend не является фокусом, мы создадим простое приложение CRUD (создать, читать, обновить, удалить), где вы можете добавить голосование через текстовое поле на экране. Вы сможете редактировать и удалить заметки. Поскольку у нас будет полностью работающая база данных, обновление страницы не повлияет на примечания, которые вы уже сохранили.
Начало работы: файлы и установки
Создайте и откройте новую папку проекта.
Инициализировать проект Node.js (это создаст package.json).
Установите Enhance и SQLite зависимости.
Теперь мы собираемся создать наши файлы проекта. Они будут довольно простыми. Структура будет выглядеть так:
Убедитесь, что вы находитесь в папке Notes-App, прежде чем сделать следующий шаг.
Как только вы подтвердили, что вы находитесь в правильной папке, мы можем создать все файлы, которые нам понадобятся.
Вы можете подтвердить, что сделали это правильно, открыв основную папку Notes-App.
Теперь мы готовы построить.
Создание базы данных SQLite
Первое, что мы собираемся настроить, это база данных, db.js.
Файл базы данных будет подключаться к базе данных SQLite на основе файлов (myApp.db). Это также создаст таблицу заметок с идентификатором, заголовком и контентом. Этот файл — почему вы можете обновить страницу, не стирая заметки.
Вы можете заметить, что мы используем термин, а не импорт в этом коде. Мы продолжим делать это до конца учебника, потому что мы используем синтаксис CommonJS, а не модули ES. Вы можете переключиться на модули ES, если ваш Package.json включает в себя «Тип»: «Модуль». Обратите внимание, что примеры и документы Enhance часто показывают CommonJS, потому что это самая простая настройка.
Добавление функциональности CRUD
На этой странице API.JS является мясом применения. Функции:
GetNotes ()
Это запрос получить. Основная цель — извлечь все заметки из базы данных.
addnotes ()
Это запрос POST, потому что он добавляет новый запрос в базу данных.
EditNote ()
Это запрос на пут. Он обновит примечание, когда указано пользователем (через кнопку «Редактировать», которую мы добавим позже).
DeletEnote ()
Это запрос Delete, и он удалит заметку, используя его идентификатор, если указать пользователь (другая кнопка, которую мы добавим позже).
Мы собираемся построить асинхронный код, чтобы поддерживать наш код чистым и не блокирующим.
Создание сервера
Наш файл Server.js будет включать сборку для основного HTTP -сервера. Нет ничего уникального для улучшения на этом сервере.
Фронт
Наконец, давайте построим наш index.html. Для этого урока мы просто используем HTML — но вы можете подключить более надежную фронтальную структуру к этому бэкэнду для дополнительной функциональности.
Поскольку наше приложение Notes-App использует встроенный HTTP-модуль Node, вы можете запустить сервер Dev с помощью этой простой команды:
Когда вы направляетесь к вам, вы должны увидеть домашнюю страницу с двумя текстовыми полями, где вы можете добавить заметки.
Давай, добавьте записку. Как только вы нажмете «Добавить заметку», вы увидите заметку с появлением кнопок «Редактировать и удалить кнопки».
Доступ к базе данных
Ни одна из этих команд базы данных не является уникальной для улучшения. Вы можете использовать тот же SQL, который вы бы использовали для другого приложения.
Вы можете получить доступ к базе данных в вашем терминале со следующими командами:
Это так просто!
Заключение
Enhance имеет другие более продвинутые функции, не рассматриваемые в этом уроке. Вот не эксплуатационный список:
- Сериализация JSON: улучшение автоматически обрабатывает сериализацию запроса/ ответа, позволяя вам вернуть простые объекты JavaScript, которые преобразуются в JSON.
- Функции как конечные точки: вы можете написать простые функции JavaScript, которые действуют как конечные точки API, а не нуждаются в отдельном сервере или структуре.
- Zero-javascript по умолчанию: вы можете сложить JavaScript там, где это необходимо, но страницы функциональны и доступны, не требуя JavaScript на стороне клиента.
Теперь у вас есть основа для создания и масштабирования реальных приложений с улучшением. Что вы построите?
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Джессика Вахтел — писатель по маркетингу разработчиков в InfluxData, где она создает контент, который помогает сделать данные о мире временных рядов более понятными и доступными. Джессика имеет опыт работы в разработке программного обеспечения и технической журналистике. Подробнее от Джессики Вахтел
