Приветствую всех моих читателей и надеюсь, что все вы живы и здоровы. Давайте погрузимся в первую библиотеку / структуру этой серии блогов «Аурелия». Теперь, когда в сети полно сообщений о React, Angular и Vue, я решил изучить не очень популярную библиотеку AureliaJS. Приятного обучения!
Введение
Aurelia - это платформа JavaScript с открытым исходным кодом, предназначенная для создания одностраничных приложений и создания пользовательского интерфейса веб-приложений. Он состоит из набора функционально-ориентированных модулей современного JavaScript, таких как Внедрение зависимостей, Привязка, Шаблоны, Маршрутизатор и т. Д. Одним из преимуществ использования Aurelia является то, что он придерживается философии «соглашение важнее конфигурации», которая помогает разработчикам следовать установленным шаблонам за счет сокращения объема кода, необходимого для создания системы приложений.
Некоторые из основных функций AureliaJS:
- Компоненты - это строительные блоки приложения Aurelia, состоящие из пар моделей представления JavaScript и представления HTML.
- Позволяет разработчикам выбирать между TypeScript и JavaScript в зависимости от сложности проекта и требований.
- Поскольку Aurelia сочетает в себе современные JS-модули с ненавязчивым подходом, модульное тестирование вашего веб-приложения так же просто, как тестирование Vanilla JavaScript. (Прочтите мой предыдущий пост о ванильных веб-компонентах)
- Aurelia - один из самых чистых современных фреймворков, полностью ориентированный на веб-стандарты.
- Он предлагает простой и расширяемый способ интеграции с другими инструментами и библиотеками, не входящими в структуру Aurelia.
- Это платформа с открытым исходным кодом, лицензированная MIT и обеспечивающая корпоративную / коммерческую поддержку.
Как и любая другая компонентная структура (React, Angular, Vue), компоненты Aurelia также имеют определенные методы жизненного цикла, которые позволяют разработчикам контролировать жизненный цикл компонента. Давайте кратко рассмотрим методы жизненного цикла компонентов:
Теперь, когда у нас есть краткий обзор Aurelia как фреймворка, давайте погрузимся в него и создадим простой проект.
Обзор проекта:
Мы создадим простой проект, статическое одностраничное приложение с использованием AureliaJS, AureliaCLI, HTML, и CSS, которое вы сможете продемонстрировать в качестве своего онлайн-портфолио / резюме. Чтобы проект был коротким и простым, мы не будем использовать какие-либо методы маршрутизации или жизненного цикла компонентов, как это предусмотрено фреймворком. Мы просто коснемся нескольких концепций Aurelia, таких как проектирование на основе компонентов, привязка и циклическое прохождение представлений. По завершении я также расскажу вам о развертывании вашего приложения в Netlify, бесплатном хостинге для небольших и статичных веб-проектов. Ознакомиться с готовым приложением можно здесь.
Начальная настройка
Итак, для начала убедитесь, что на вашем компьютере установлены NodeJS и Диспетчер пакетов узлов (NPM). Мы будем использовать NPM для установки Aurelia CLI, а затем создадим новое приложение с помощью команд CLI. Откройте вкладку терминала на своем компьютере и перейдите в рабочий каталог, в котором вы хотите создать веб-приложение. В окне терминала введите следующие команды, чтобы настроить приложение Aurelia.
npm install -g aurelia-cli au new aureliaCV
При выполнении команды «au new» на терминале интерфейс командной строки предоставляет вам набор предустановок, которые вы можете использовать для создания приложения или подключаемого модуля по умолчанию с помощью JavaScript или TypeScript. Убедитесь, что вы выбрали «Приложение ESNext по умолчанию» и установили необходимые зависимости модуля узла в командной строке интерфейса командной строки. Перейдите в каталог вашего проекта на терминале и откройте его в IDE по вашему выбору. Чтобы запустить приложение Aurelia, вы можете выполнить следующую команду в корне каталога вашего проекта.
au run -> Compiled Successfully and running on localhost:8080
Файловая структура:
После успешного выполнения команды CLI вы можете перейти в каталог своего проекта на терминале и открыть его в IDE по вашему выбору. Вы увидите множество файлов, созданных Aurelia CLI, о которых вам пока не стоит беспокоиться. Мы будем работать только с папкой «src» приложения. Файловая структура вашей папки «src» должна выглядеть следующим образом:
-src ----resources ----app.html ----app.js ----main.js ----styles.css
main.js - это точка входа в наше приложение, где вы можете определить параметры конфигурации для своего веб-приложения. app.js является основным компонентом вашего приложения и имеет соответствующий шаблон как app.html. Вы не найдете стандартный styles.css, но вы можете загрузить файл здесь, который я создал для этого проекта, и поместить его в свой src папка.
После того, как вы выполните эту настройку, создайте папку с именем «components», в которой будут размещены все наши другие компоненты-модули. Убедитесь, что ваше приложение соответствует файловой структуре, показанной ниже.
-src ----resources ----app.html ----app.js ----main.js ----styles.css ----components ------contact --------contact.js --------contact.html ------education --------education.js --------education.html ------experience --------experience.js --------experience.html -------introduction --------intro.js --------intro.html -------skills ---------skills.js ---------skills.html -------social ---------social.js ---------social.html
Примечание. Я также добавил свое изображение профиля и резюме в формате PDF в статическую папку, которую я буду использовать в своих представлениях компонентов.
Как видите, мы разделили наше приложение на разные компоненты. При работе над компонентами Aurelia файл JS соответствует компоненту класса, охватывающему данные и бизнес-логику компонента, тогда как файл HTML соответствует представлению этого компонента. Мы начнем с привязки простых компонентов к представлению, а затем отрендерим динамические представления на основе связанных данных.
Контактный модуль
Как видно из блоков кода, показанных выше, функция-конструктор в файле «contact.js» используется для определения значений, которые должны быть привязаны к шаблону. В дальнейшем мы можем использовать эти связанные значения компонентов в шаблоне с помощью «интерполяции строк» . Метод «href.bind» в файле «contact.html» - это способ обработки ссылок Aurelia, который используется для привязки атрибутов HTML к выражениям JavaScript. Мы также будем использовать атрибут «скачать», доступный для тега ‹a› ‹/a›, чтобы включить загрузку файла резюме при нажатии.
Мы можем реализовать компоненты Introduction и Social, используя те же базовые функциональные возможности привязки данных с помощью конструктора.
Вводный модуль
Социальный модуль
Модуль навыков
Теперь, когда у нас настроены наши простые компоненты, давайте посмотрим, как мы можем отображать динамические представления для данных, представленных в массиве, привязанном к шаблону. Мы создадим 2 массива, включающих список технологий, подпадающих под основные и второстепенные навыки.
Чтобы просмотреть список основных и второстепенных навыков, мы будем использовать метод Aurelia «repeat.for», который позволяет вам перебирать коллекцию, связанную с компонентом. Затем мы можем визуализировать определенные представления для элементов в массиве, используя «интерполяцию строк» . Обратите внимание, что представление, которое вы определяете для одного элемента в массиве, будет отображаться несколько раз в зависимости от общего количества элементов в массиве. Мы продвинемся вперед и рассмотрим более сложный пример итерации по коллекции при работе с объектами в компоненте.
Модуль опыта
Для нашего компонента опыта работы мы будем связывать наши данные в массиве объектов, которые содержат метаданные о вашем опыте работы, такие как название должности, компания, продолжительность и обязанности.
Небольшое примечание - я использовал `` (обратные галочки) для включения многострочных строк
Просматривая файл «experience.html», вы можете видеть, что вы можете перебирать список объектов с помощью метода «repeat.for», который предоставляет вам каждый объект в список, и вы можете отображать определенные представления для объекта, используя «интерполяцию строк» и «точечную нотацию» для доступа к свойствам объекта.
Образовательный модуль
Подобно компоненту опыта, мы также можем реализовать компонент образования со связанным списком объектов, содержащих метаданные о вашем образовании.
Собираем все вместе!
Теперь, когда мы определили наши отдельные компоненты, реализующие разделение задач и привязку данных в соответствии с требованиями к компонентам, пришло время собрать их все вместе под одной крышкой. Мы будем импортировать эти модули в наш «app.html» и отображать их, как показано ниже.
Вы можете импортировать модули компонентов и styles.css с помощью тега ‹require› ‹/require›, который предоставляет Aurelia Framework. Aurelia импортирует файлы, как определено во время компиляции, и эти модули компонентов доступны для использования в шаблоне, содержащем тег ‹require› ‹/require›. Обратите внимание, что вы можете использовать тег ‹require› ‹/require› в любом шаблоне компонента для реализации концепции вложенных компонентов.
Развертывание на Netlify
Давайте рассмотрим пошаговый подход к развертыванию веб-приложения Aurelia CV в Netlify.
Шаг 1. Измените свой package.json
"scripts": {
"start": "au run",
"build": "au build"
}
Шаг 2. Инициализируйте репозиторий Git в своей учетной записи Github и отправьте локальный машинный код в удаленный источник.
git init git commit -m "first commit" git branch -M main git remote add origin [email protected]:username/aureliaCV.git git push -u origin main
Интересный факт: на Github / Git «master» теперь «main», потому что #BlackLivesMatter
Шаг 3: Создайте новую ветку netlify, которая будет использоваться для развертывания.
git branch netlify git checkout netlify
Шаг 4. Измените «.gitignore», чтобы удалить папку «dist», в которой скомпилированы и построены файлы вашего проекта.
Шаг 5: Выполните следующую команду в корневом каталоге вашего проекта, чтобы собрать приложение в папке «dist».
npm run build
Шаг 6: Переместите ветвь «netlify» в исходную точку, используя следующую команду.
git push -u origin netlify
Шаг 7: Войдите в Netlify и подключите свою учетную запись Github. Это позволяет вам выбирать между различными репозиториями, доступными в вашей учетной записи Github, для развертывания на Netlify.
Шаг 8: Выберите вариант «Новый сайт из Git», который переместит вас к простому графическому интерфейсу для развертывания вашего приложения.
Шаг 9: Выберите aureliaCV в качестве репозитория для развертывания и настройте параметры развертывания следующим образом:
Branch to deploy - netlify Build Command - npm run build Publish Directory - /dist
Шаг 10: Нажмите «Развернуть сайт», и ваш сайт будет запущен. Вы можете изменить URL-адрес и домен своего сайта в настройках домена вашего проекта в Netlify.
Вывод
Что ж, мы успешно реализовали наше первое одностраничное приложение с использованием AureliaJS. Хотя мы не коснулись некоторых очень продвинутых функций, которые предлагает Aurelia, этот проект станет хорошей отправной точкой для начала работы с базовыми концепциями и использования Aurelia в ваших будущих проектах.
Если вспомнить мой опыт работы с Aurelia, то он определенно обеспечивает чистое программирование, заставляя разработчиков следовать соглашениям, установленным фреймворком, и сосредотачиваться на коде и бизнес-логике. Поскольку он использует современные JS-модули в сочетании ненавязчиво, с ним легко работать, как с обычным JavaScript, а также предоставляет возможности для эффективного тестирования компонентов.
Вы можете найти полный исходный код этого приложения на Github. Подписываюсь под этим постом. Надеюсь, вам понравилось. Увидимся в следующем!
