Добро пожаловать на Неделю 2, День 7 из #30DaysOfSWA!!!
Мы добрались до конца второй недели!!! Давайте поаплодируем себе!
За последнюю неделю мы рассмотрели несколько примеров использования различных приложений, генераторов статических сайтов и front-end фреймворков. И это все еще лишь малая часть того, что возможно. Как же сделать это путешествие более практичным и учиться на практике?
На этот вопрос я постараюсь ответить в сегодняшней статье. Также сохраните эту статью в закладки, потому что мы вернемся к ней в конце следующей недели («Dev Tools») и попытаемся повторить некоторые из этих уроков, используя более упрощенный опыт, предоставляемый Azure Static Web Apps CLI (инструмент командной строки для локальной разработки).
Что мы рассмотрим
- Обзор: Неделя примеров использования
- Сборка: Как получить идеи для проекта
- Поделитесь: Вклад в галерею
- Упростить: Использование Static Web Apps CLI!
- Упражнения: Сборка, развертывание и настройка начального приложения.
Подведение итогов второй недели
Эта неделя была насыщена различными сценариями использования и технологиями front-end. Давайте вкратце рассмотрим, что было рассмотрено:
- Понедельник: Мы создали личный блог с помощью Astro.
- Вторник: Мы создали приложение для управления запасами с помощью React.
- Среда: Мы творчески подошли к работе с Vue, ML и Game Engines!
- Четверг: Мы опубликовали контент с помощью Docusaurus
- Пятница: Изучаем примеры безголовых CMS с помощью Blazor WebAssembly
- Суббота: Мы научились делать SWA более прогрессивным веб-приложением.
Визуальная дорожная карта дает представление о том, что было рассмотрено в каждый день. Но это лишь верхушка айсберга. Разработчики JavaScript имеют в своем распоряжении широкий выбор фронтенд-фреймворков и статических генераторов сайтов. И, как мы видели на примере Blazor WebAssembly, у разработчиков, не использующих JavaScript, есть и другие фреймворки, которые они используют для разработки современных веб-приложений. Итак, как же продолжить путь обучения на практике? Читайте дальше, чтобы узнать некоторые идеи.
Идеи проектов
1. Статические сайты
Самый простой способ начать — использовать один из многочисленных генераторов статических сайтов, доступных сегодня. Большинство из них предоставляют шаблоны, с которых можно начать и которые можно настроить, просто добавив свой собственный контент (данные, медиа-активы и т.д.). Нужно вдохновение? Взгляните на недавно опубликованный список Rising Stars Of JavaScript: Static Sites list и посмотрите, есть ли в этих проектах стартеры, которые вы можете использовать повторно.
Пример: Мой проект «Recipe Me».
Ранее на этой неделе мы рассмотрели примеры с Astro (#2), Docusarus (#3) и VuePress (#9) в наших примерах использования. Сегодня мы рассмотрим Eleventy (#7).
Ранее в этом году я проводил #30DaysOfPWA, аналогичную серию, посвященную Progressive Web Apps. И я хотел получить демонстрацию! Я всегда хотел иметь блог с рецептами, и я нашел этот стартовый Eleventy, который идеально подошел. Я настроил его, добавив необходимые функции и код, чтобы сделать его PWA-совместимым. И я настроил его для размещения на Azure Static Web Apps. Бонус: в процессе я узнал много нового о фреймворке и изменениях в конфигурации для SWA!
Сопутствующие ресурсы:
- Прочитать учебник
- Просмотреть источник
- Посетите веб-сайт
2. Фреймворки
Следующим шагом вперед будет изучение существующих стартовых наборов приложений или обучающих программ, ориентированных на популярные front-end и full-stack фреймворки. В отличие от генераторов статических сайтов (которые ориентированы на контент), эти приложения позволяют исследовать продвинутое взаимодействие с пользователем, которое может выиграть от концепций SWA, таких как бессерверный API и поддержка аутентификации. Нужно вдохновение? Взгляните на недавно опубликованный список Rising Stars Of JavaScript: Front-end Frameworks и посмотрите, есть ли в этих проектах стартеры, которые вы можете использовать повторно.
Пример: Проект Симоны «Магазин наклеек».
Посмотрите на этот пример от Симоны Котин (Simona Cotin) (в настоящее время она является главным специалистом в команде Static Web Apps), которая форкнула стартер электронной коммерции Strapi и адаптировала его для развертывания на Azure Static Web Apps. В учебнике по Strapi рассказывается о настройке и структуре приложения, что делает его идеальным местом для изучения простого добавления интеграций SWA. Бонус: развертывание Симоны также использует преимущества поддержки пользовательских доменов SWA, делая приложение доступным на домене https://aswa.cloud.
Связанные ресурсы:
- Прочитать учебник
- Просмотреть источник
- Посетите веб-сайт
3. Приложения OSS
Иногда вы находите подходящее приложение не из-за фреймворка, а потому что его сценарий использования действительно резонирует с вами — даже если вы не знакомы с базовой технологией. Такие проекты хороши тем, что ваш интерес к конечному результату заставляет вас с большим любопытством копаться под капотом, улучшая свое понимание новых архитектур приложений и инструментария. Нужно вдохновение? Моя любимая отправная точка — awesome repo, которая представляет собой каталог списков awesome-XYZ для данной технологии XYZ. Многие из этих списков определяют учебники, проекты с открытым исходным кодом и стартовые шаблонные репозитории, которые могут стать основой для ваших экспериментов!
Пример: Мой проект «Google Codelabs».
Если вы посещали какие-либо мероприятия для разработчиков Google или конференции сообщества, то наверняка сталкивались с сайтом Codelabs — хранилищем пошаговых руководств, охватывающих широкий спектр технологий. Но знаете ли вы, что они предоставили открытый доступ к инструментам управления и хостинга codelabs?
В качестве базового инструментария используется Golang, но фактический контент написан в формате Markdown и преобразован в необходимые статические файлы с помощью claat, утилиты «Code Labs As A Tool». Следуйте этому примеру, чтобы создать свои собственные кодовые лаборатории — и разместить их на Azure Static Web Apps. Бонус: размещенное приложение является учебником по его созданию. Разве это не мета?
Связанные ресурсы:
- Прочитать учебник
- Просмотреть источник
- Посетите веб-сайт
Поделиться: Галерея
Мы уже говорили об идеях проектов, которые помогут вам учиться, перерабатывая проекты с открытым исходным кодом, учебники или шаблоны, созданные другими. Теперь давайте поговорим о том, как сделать это, поделившись своим проектом, чтобы вдохновить других.
Именно с этой целью мы создаем витрину статических веб-приложений, которая будет представлена до конца мая. Вы можете увидеть предварительный просмотр того, как выглядит галерея приложений, позволяющая разработчикам искать проекты, которые имеют живые развертывания и открытые кодовые базы, а также используют одну из перечисленных технологий front-end. Добавьте это сообщение в закладки или отслеживайте ссылку Showcase на этом сайте, чтобы знать, когда функция Showcase заработает! Будьте первым, кто представит проект для некоторых из недавно добавленных в этот список технологий!
Упрощение: SWA CLI
И последнее. Во всех примерах использования и руководствах до сих пор мы обычно подчеркивали либо вариант IDE (с использованием расширения Visual Studio Code SWA), либо вариант Azure Portal (активируемый кнопкой Deploy to Azure, настроенной в README репозитория).
Но что если бы вы могли делать все из командной строки — от инициализации конфигурации проекта, сборки и тестирования приложения локально до развертывания его в облаке в производственной или предварительной среде? Именно в этом заключается идея Azure Static Web Apps CLI. Присоединяйтесь к нам 19 мая на специальном мероприятии #SWAanniversary, чтобы узнать о некоторых интересных анонсах в этом контексте.
Затем сохраните эту страницу в закладках и вернитесь к ней позже в мае, чтобы прочитать обновленный раздел, в котором мы обсудим, как мы можем еще больше упростить и оптимизировать наши проекты «обучение на практике» с помощью этого инструмента!
Упражнение
Мы рассмотрели различные ресурсы, с которых вы можете начать, чтобы создать реальное приложение, которое затем можно настроить для развертывания SWA и дальнейшей кастомизации. Выберите что-то одно и расширьте приложение, чтобы создать что-то новое. Затем внесите его в наш предстоящий проект Showcase!
Нужно больше вдохновения? Я являюсь поклонником React, но мне хотелось изучить Preact как альтернативный вариант с сопоставимым API. На странице демонстраций Preact есть богатый набор примеров, включая этот генератор домашней страницы, который представляет собой идеальный 1-страничный шаблон резюме, который вы можете настроить для своего профиля. Попробуйте!