Aurelia: Первые шаги в освоении нового фреймворка

Сайтостроение | создано: 22.12.2015 | опубликовано: 22.12.2015 | обновлено: 13.01.2024 | просмотров: 7997

На момент написания статьи, ASP.NET 5 версии находится в статусе Release Candidate 1 (RC1), это значит, что уже совсем скоро, а точнее сказать в первом квартале 2016 года всё случится. В новой версии ASP.NET 5 по отношению к предыдущим версиям, всё поменялось кардинально. Вернее будет сказать, что на протяжении нескольких лет, начиная с первого выхода платформы ASP.NET она была неизменна. Речь идет о структуре проекта, инструментариях и т.д. В пятой версии пришли большие изменения.

Вступление

Вместе с кроссплатформенностью изменятся и структура проекта, и базовае принципы разработки, и набор инструментов, и много другое. Но нельзя не упомянуть о том, что наравне с версией под новую кроссплатформенную базу Microsoft также оставляет и стандарный ASP.NET 5 при этом внеся в него масштабные преобразования. Осталось только сказать, что стандартная версия на данный момент носит название ASP.NET 5, а кроссплатформенная версия ASP.NET 5 Core. Более полную и подробную информацию можно найти на официальном сайте.

Подготовка к старту

Прежде чем приступить к созданию проекта, надо убедиться, что на компьютере установлено не только всё необходимое программное обеспечение, но еще и  последнея версия этого ПО. Я имею в виду ASP.NET 4.6 и/или ASP.NET 5 RC. Напомню, что для работы с новыми версиями вам может потребоваться Visual Studio 2015 (одна из редакций), или Visual Studio Community (бесплатная версия Visual Studio), или Visual Studio Code (которая не только бесплатная, но кроссплатформенная). Всё выше перечисленное вы можете найти на специальном отведенном для этого ресурсе.

176-10-aurelia-start

Установка на моем компьютере ASP.NET RC1 Update 1 заняла порядка 17-18 минут. Если вы устанавливаете ASP.NET 5 в первый раз, то, дабы подтвердить, что установка прошла успешно проделайте следующее. Откройте Windows PowerShell (Пуск -> Выполнить, напишите "powershell" и нажмите enter). В PowerShell напишите команду "dnvm" и нажмите enter. Вы должны увидеть примерно следующее:

176-20-dnvm-test

Это менеджер версий для .NET. Среда стала кроссплатформенной и теперь появилась возможность управлять ею из командной строки (отголоски ориентации на *nix системы). Если ввести команду "dnvm list", то можно увидеть доступные версии среды исполнения (".Net Execution environment", или "DNX" ). А также эта команда покажет какая версия установлена по умолчанию (default).

176-30-dnvm-list

У меня по умолчанию установлена "1.0.0-rc1-final clr x86". Думаю, не лишнем будет отметить, что установить/изменить версию среды исполнения можно также и на закладке Application в свойствах проекта после его создания.

176-40-dnvm-vs

Создаем новый проект на ASP.NET 5

В мастере создания нового проекта в Visual Studio выбираем ASP.NET 5 проект "Empty". Это делается для того, чтобы показать, что новая версия ASP.NET настраивается очень просто, путем подключения требуемых для вашего проекта сборок.

176-50-new-prj

Сразу же после создания проекта Visual Studio проверит наличие всех необходимых библиотек, указанных в главном файле конфигурации проекта (project.json) и скачает недостающие:

176-70-project-folders-restore

В первую очередь, нельзя не заметить, что структура папок проекта теперь выглядить как-то по-другому.

176-60-new-project-folders

Обратите внимание на папку wwwroot. Теперь это основная папка "готового" (статичного) проекта. Именно ее содержимое следует публиковать на сервер хост-провайдера, или в облако Azure, или куда вы там заходите опубликовать свой сайт. Именно в этой папке должны лежать ваши статичные файлы: HTML-страницы, CSS-файлы и JS-файлы сжатые и минимизированные. Название этой папки задается в файле конфигурации проекта (project.json), и вы можете поменять на удобное для вас.

Если сейчас запустить проект, то мы увидим "Hello World!", причем такое сообщение ваш сайт будет показывать независимо от того, какую страницу вы будете запрашивать.

176-80-hello-world

Давайте "научим" наш сайт работать со статичными страницами. Потому что именно на статичной странице мы разместим скрипты нашего Single Page Application приложения и скрипты Aurelia в том числе. Конечно же, нам потребуется всего одна страница, но и для ее запуска потребуется "обучить" ASP.NET находить ее и запускать.

Единственная html-страница SPA

Для начала откроем главный файл с настройками для нашего проекта project.json и добавим в список зависимостей (dependencies) новую зависимость.

176-90-add-new-package

После того как вы сохраните изменения в файле, Visual Studio любезно доустановит (скачает) необходимые сборки и их зависимости. После того как Visual Studio прекратит "суету". Можно в файле Startup.cs установить новые возможности:

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
    }


    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app)
    {
        app.UseIISPlatformHandler();
        app.UseDefaultFiles();
        app.UseStaticFiles();
    }

    // Entry point for the application.
    public static void Main(string[] args) => WebApplication.Run<Startup>(args);
}

В методе Configure вызовим методы:
1) UseStaticFiles() "скажет" системе, что надо использовать статические файлы, а не, например, контролеры MVC;
2) UseDefaultFiles() "скажет" системе, что в статичной папке надо искать файлы с названиями, которые по умолчанию используются как точки входа (index.html, default.html, index.htm, defaul.htm).

Теперь, когда система обучена открывать статичные файлы, пришло время создать таковой в папке wwwroot. Создадим файл default.html с таким содержанием:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Aurelia Demo</title>
</head>
<body>
    <h1>Welcome to Aurelia</h1>
    <p>This is a simple paragraph of plain text.</p>
</body>
</html>

Запустим проект.

176-100-welcome-aurelia

Установка Node.js

Не раз уже говорил, что новая версия ASP.NET 5 является кроссплатформенной, а это значит, что теперь она может работать с Node.js. Вот как описывает node.js википедия:

| Node или Node.js — программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения.

На самом деле Node.js является С++ приложением, которое умеет запускать JavaScript-код. Другими словами, Node.js - это интерпретатор языка JavaScript.

Итак, если у вас не установлен, то при попытке выполнить команду

node -v

в PowerShell вы увидите такой ответ:

176-110-node-not-installed

В таком случае, вам нужно установить node.js. Скачать программу с официального сайта. После успешной установки, выполнение той же команды результат должен быть примерно таким:

176-120-node-version

Мне система показала, что установлена версия 5.2.0, а у вас могут быть другие цифры. Можно в PowerShell запустить node, а потом написать "2+2" и нажать enter. JavaScript в командной строке - предел мечтаний! Не правда ли? :)

176-130-node-demo

Установка пакетов через NPM

NPM - Node.js Package Manager. То есть менеджер пакетов для Node.js. На сайте на данный момент насчитывается уже более 200 тысяч пакетов. А это значит, что своим наработками в программировании с нами уже поделились более 200 тысяч разработчиков. Грех не использовать такой потенциал. Ну, что это я в лирику ударился... Продолжим. Итак, если у вас установлен Node.js, то NPM уже установлен, потому что является менеджером пакетов по умолчанию для Node.js и устанавливается вместе с Node.js (если вы не переключали настройки при установки).

Чтобы начать работать с Aurelia, ее нужно для начала установить в проект. Напомню, что Аурелия создана на EcmaScript 2015 (ES6), то есть использует самые последние новшества в языке JavaScript. Пакет JSPM (JavaScript Package Managet) тоже создан по этим же принципам. Вот что написано про него на официальном сайте:

jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader

Другими словами, jspm - это менеджер пакетов, построенный на основе универсального загрузчика SystemJS по технологиям EcmaScript 2015 (ES6). Aurelia + JSPM = Прекрасный тандем! Подробное описание jspm можно найти на официальном сайте.

Первым делом установим jspm. Я использую Visual Studio Extension (Open Command Line), который при нажатии комбинации определенных клавиш, открывает Powershell из корневой папки проекта. Поэтому всё команды, которые будут показаны в статье будут запускаться именно из этой папки. Это важно, потому что ссылки на папки в генерируемых скриптах строятся относительно папки, из которой запускается команда.

Итак, выполним команду в Powershell из корневой папки проекта, который мы создали:

npm install jspm

Процесс установки выглядит примерно так:

176-140-jspm-installed

Теперь можно для нашего проекта инициализировать jspm, чтобы менеджер создал для нас всё необходимое для управления пакетами, которые мы будем устанавливать.

jspm init

Результат выполнения команды и мои ответы на запросы, которые задает jspm в процессе инициализации вы можете видеть на картинке:

176-160-jspm-init

Примечание: если вы скачали проект (github) то вам нужно выполнить команду "jspm update", чтобы jspm проверил конфигурацию и доустановил необходимые пакеты.

В проекте появились новые файлы и папки.

176-170-folder-after-init

Установка Aurelia

Aurelia на данный момент находится в статусе Beta. Пока ее можно установить только через jspm. Для установки Aurelia выполним в PowerShell команду:

jspm install aurelia-framework

Результать выполнения...

176-180-install-aurelia

И следом еще одну команду.

jspm install aurelia-bootstrapper

Здесь уже побольше пакетов будет установленою...

176-190-install-aurelia-2

Если сообщения на ваших мониторах соответствует двум последним скриншотов с моего монитора, то можно приступать к программированию на Aurelia.

Приложение на Aurelia

Первым делом создадим два файла app.html и app.js. Aurelia при старте ищет именно эти два файла (как view и viewModel) связывает их и открывает. В настройках, естественно, можно изменить это поведение.

Итак, в папке wwwroot я создал app.html и перенес некоторое количество html-кода из файла default.html:

<template>
    <div>
        <h1>Welcome to Aurelia</h1>
        <p>This is a simple paragraph of plain text.</p>
    </div>
</template>

Далее файл app.js. Пусть пока он выглядит "пустоватым":

export class App
{

}

Теперь вся магия будет реализована в файле default.html. После добавления некоторых скриптов и html-атрибутов он стал выглядить так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Aurelia Demo</title>
</head>
<body aurelia-app>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('aurelia-bootstrapper')
    </script>
</body>
</html>

Запустим проект...

176-100-welcome-aurelia

Ничего не изменилось с момента последнего запуска, но мы с вами знаем, что теперь этот контент "рисует" уже Aurelia. Давайте добавим немного интерактивности в наш тестовый пример. Вот так я изменил app.js:

export class App
{
    constructor() {
        this.heading = 'Welcome to Aurelia! Again!';
        this.FirstName = 'John';
        this.LastName = 'Doe';
        this.buttonName = 'Say hello';
    }
    get fullName() {
        return `${this.FirstName} ${this.LastName}`;
    }


    submit() {
        alert(`Hi, ${this.fullName}`);
    }
}

А вот так изенился app.html:

<template>
    <div>
        <h1>Welcome to Aurelia</h1>
        <p>This is a simple paragraph of plain text.</p>
        <h1>${heading}</h1>
        <form role="form" submit.delegate="submit()">
            <input value.bind="FirstName" placeholder="firstname"/><br/>
            <input value.bind="LastName" placeholder="lastname"/><br/>
            <p>${fullName}</p>
            <button type="submit">${buttonName}</button>
        </form>
    </div>
</template>

Запустим проект...
176-200-app-aurelia

Потыкаем по кнопкам...

176-210-app-aurelia

Заключение

В качестве заключения, немного поясню код, который я добавил в app.js и в app.html. В первом, app.js файле я написал JavaScript-код с использованием спецификации EcmaScript 2015 (ES6). Я определил в конструкторе свойства. Создал один getter и один handler на отправку формы. В html-коде можно увидеть как происходит связывает Model и View. Это совершенно иная конструкция чем в knockout, но принцип остался тот же. Дополнительную информацию по связыванию (binding) в Aurelia можно найти на официальном сайте. Надо сказать, что авторы (а теперь это уже не один Rob Eisenberg, теперь Aurelia пишется сообществом GitHub).

Ссылки