Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic 2
Code

Введение в Ionic 2

by
Length:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

В этой статье мы рассмотрим Ionic 2, новейшую версию Ionic - кросс-платформенного фреймворка для мобильных приложений. Во-первых, мы расскажем, что такое Ionic и для чего он используется. Затем мы будем погружаться в Ionic 2. Я расскажу вам, что здесь нового и чем он отличается от Ionic 1, я так же помогу вам решить, следует ли использовать его в своем следующем проекте или нет.

Что такое Ionic?

Ionic - это фреймворк для создания гибридных приложений с использованием HTML, CSS и JavaScript. Он поставляется с набором компонентов и функций пользовательского интерфейса, которые можно использовать для создания полностью функциональных и привлекательных мобильных приложений.

Ionic построены на стеке Cordova.  Вы не можете создавать мобильные приложения только с помощью Ionic, потому что он обрабатывает только пользовательскую часть интерфейса. Он должен работать с Angular, который обрабатывает логику приложения, и Cordova. фреймворк кросс-платформенного приложения, который позволяет вам скомпилировать ваше приложение в установочный файл и запустить его в веб-представлении мобильного устройства.

Приложения, созданные с помощью Cordova и Ionic, могут работать как на устройствах Android, так и на iOS. Вы также можете установить плагины Cordova для обеспечения собственных функций, таких как доступ к камере и работа с устройствами Bluetooth Low Energy.

Для получения дополнительной информации о Cordova,  ознакомьтесь с некоторыми нашими курсами и учебниками здесь, в Envato Tuts +.

Однако Ionic - это нечто большее, чем просто UI фреймворк. Ionic компания также предлагает услуги, которые поддерживают Ionic фреймворк, такие как Ionic CreatorIonic View, и Ionic Cloud.

Что нового в Ionic 2?

В этом разделе мы рассмотрим некоторые существенные изменения в Ionic версии 2, а также новые функции и инструменты, которые были введены в Ionic 2.

Поддержка браузера

Ionic 1 был построен с учетом только гибридных мобильных приложений. Но Ionic 2 создан для поддержки прогрессивных веб-приложений и приложений Electron. Это означает, что теперь вы можете создавать не только Ionic приложения, работающие внутри среды Cordova, но и прогрессивные веб-приложения, которые используют современные веб-функции.

Вы также можете нацелиться на Electron, платформу для создания кросс-платформенных настольных приложений с использованием HTML, CSS и JavaScript. Electron очень похож на Cordova, но используется для настольных операционных систем, таких как Windows, Ubuntu или macOS.

Angular 2 и TypeScript

Ionic 2 теперь использует Angular 2 для логики шаблонов и приложений. Это означает, что разработчикам придется изучить новый синтаксис Angular 2, прежде чем они смогут начать писать полноценные приложения Ionic 2. Однако не беспокойтесь, потому что концепции по-прежнему те же, как и в Angular 1. Существуют также такие ресурсы, как ngMigrate, которые помогут вам преобразовать ваши навыки Angular 1 в Angular 2.

Помимо Angular 2, Ionic 2 также использует TypeScript. Для тех, кто незнаком с ним, TypeScript является надмножеством JavaScript. Это означает, что для написания приложений вы все равно можете использовать синтаксис JavaScript. Если вы хотите использовать функции, входящие в состав TypeScript, такие как синтаксис ES6 и ES7, статический ввод и интеллектуальное завершение кода, вы можете использовать синтаксис, специфичный для TypeScript. Существуют плагины, которые вы можете установить в своем любимом текстовом редакторе или в IDE, чтобы воспользоваться преимуществами расширенных функций завершения кода TypeScript.

Синтаксис

Как я уже упоминал, синтаксис шаблона в Ionic 2 значительно изменился, в основном из-за его перехода на использование Angular 2. Вы даже можете прийти к выводу, что новый синтаксис более прост и краток. Ниже приведены несколько примеров для сравнения синтаксиса Ionic 1 и Ionic 2:

Прослушивание событий:

Использование модели:

Прохождение через массив и отображение каждого элемента:

Структура папок

Если вы сравните структуру папок проекта Ionic 1и Ionic 2, вы заметите, что большинство папок, которые вы использовали для в проекте Ionic 1, все еще присутствуют в Ionic 2. Это связано с тем, что основная платформа на самом деле не изменилась - Ionic 2 по-прежнему использует Cordova. Единственное, что изменилось, это части, которые связаны с вашими исходными файлами. Вот скриншот структуры папок приложения Ionic 1:

ionic 1 folder structure

И вот приложение, построенное с помощью Ionic 2:

ionic 2 folder structure

Если вы посмотрите ближе, вы заметите, что теперь есть папка src. Вот где находятся все исходные файлы вашего проекта, и каждый раз, когда вы вносите изменения в файл в этом каталоге, измененный файл компилируется и копируется в каталог www/build. Раньше исходные файлы были в каталоге www, и вам не требовался дополнительный этап компиляции.

Структура каталогов также теперь более организована. Если вы проверите каталог src/pages, вы увидите, что каждая страница имеет свою собственную папку, а внутри каждой из них - файлы HTML, CSS и JavaScript для этой конкретной страницы.

Раньше, в Ionic 1, вам просто давали пустой каталог и вы могли структурировать ваш проект, как вы захотите. Но это было скорее недостатком, чем приемуществом. Вы могли бы лениться и придерживаться структуры, которая объединила все файлы вместе, что может затруднить работу более крупных команд, работающих над сложными приложениями.

Тематизация

В отличие от предыдущей версии Ionic, которая имела только один внешний вид для всех платформ, Ionic 2 теперь поддерживает три режима: Material Design, iOS и Windows. Теперь Ionic соответствует внешнему виду платформы, на которой она развернута. Так что, если ваше приложение установлено на Android, например, оно будет использовать стиль и поведение, аналогичные привычным приложениям для Android.

Существует поддержка для тем in Ionic, хотя на момент написания этой статьи она поставляется только с темой Light по умолчанию. Если вы хотите настроить тему, вы можете отредактировать файл src/theme/variables.scss.

Инструменты

Ionic 2 также поставляется с новыми инструментами, которые вам могут сильно помочь в создании мобильных приложений. Я покажу вам несколько из них в этом разделе.

Генераторы

Ionic 2 теперь предоставляет генератор, который позволяет создавать страницы и службы для вашего приложения:

Это создаст следующие файлы в папке вашего приложени app/pages:

В каждом файле также есть код шаблона:

Это также служит руководством для новых разработчиков, чтобы они знали наилучшую практику структурирования своего кода. Вот сгенерированный код TypeScript, который обрабатывает логику для страницы выше:

Отчет об ошибках

В Ionic 2 теперь есть инструмент для создания отчетов об ошибках для интерфейсного модуля. Это означает, что в любое время, когда в вашем коде возникает ошибка, Ionic откроет модальное окно прямо в предварительном просмотре приложения. Это позволяет разработчикам легко узнать об ошибках, которые происходят в приложении.

Ionic App Scripts

Ionic App Scripts - это сборник скриптов сборки для Ionic-проектов. Ранее Ionic использовал Gulp для обработки процесса сборки.

Ionic 2 поставляется с несколькими из этих скриптов, чтобы упростить выполнение общих задач разработки. Сюда относятся такие вещи, как перенос кода TypeScript на ES5, обслуживание приложения для тестирования в браузере или его запуск на определенном устройстве.

Вы можете найти сценарии по умолчанию в файле проекта package.json:

Новые компоненты

Компоненты являются строительными блоками пользовательского интерфейса в Ionic. Например кнопки, карточки, списки и поля ввода. В Ionic 2 добавлено множество новых компонентов, и в этом разделе мы рассмотрим некоторые из них.

Слайды

Если вы хотите, чтобы ваше приложение отобразило небольшой тур для пользователей, которые в первый раз открыли приложение, компонент «Слайды» упрощает его создание. Этот компонент позволяет создавать макеты страниц, которые пользователь может свайпнуть, чтобы прочитать все о вашем приложении.

Листы действий

Листы действий - это меню, которые скользят вверх от нижней части экрана. В верхнем слое экрана отображается лист действий, поэтому вам нужно либо отменить его, нажав на пробел, либо выбрать опцию из меню. Это обычно используется для подтверждений, например, при удалении файла на устройстве iOS.

Сегменты

Сегменты похожи на вкладки. Они используются для группировки связанного контента вместе таким образом, что пользователь может видеть только содержимое выбранного в данный момент сегмента. Сегменты обычно используются со списками для фильтрации для связанных элементов.

Тост

Тосты - это тонкая версия предупреждений. Они обычно используются для информирования пользователя о том, что что-то произошло, что не требует каких-либо действий пользователя. Они часто отображаются в верхней или нижней части страницы, чтобы не мешать отображаемому в данный момент контенту. Они также исчезают через определенное количество секунд.

Панель инструментов

Панель инструментов используется в качестве контейнера для информации и действий, расположенных в верхнем или нижнем колонтитуле приложения. Например, заголовок текущего экрана, кнопок, полей поиска и сегментов часто содержится в панели инструментов.

Дата и время

Компонент DateTime используется для отображения пользовательского интерфейса для выбора дат и времени. Пользовательский интерфейс похож на тот, который генерируется при использовании элемента datetime-local  с той лишь разницей, что этот компонент поставляется с простым в использовании JavaScript API. Раньше у Ionic не было компонента для работы с датами и временем. Вы либо должны были использовать собственный элемент браузера выбора даты, либо установить плагин.

Плавающие кнопки действий

Плавающие кнопки действий (FAB) - это кнопки, которые фиксируются в определенной области экрана. Если вы когда-либо использовали приложение Gmail, кнопка для создания нового сообщения является плавающей кнопкой действия. Они не ограничены одним действием, потому что они могут расширяться, чтобы показывать другие плавающие кнопки при нажатии.

Для получения дополнительной информации о новых компонентах ознакомьтесь с документацией по компонентам.

Новые возможности и улучшения

Ionic 2 также оснащен новыми функциями и улучшениями. В основном это связано с его переходом на Angular 2 и TypeScript.

API веб-анимации

Одним из преимуществ перехода на Angular 2 является новая анимационная система Angular, построенная поверх API веб-анимаций. Обратите внимание, что API веб-анимации не поддерживается во всех браузерах, поэтому вам нужно использовать Crosswalk для установки поддерживаемого браузера вместе с вашим приложением. Единственным недостатком этого является то, что он сделает размер установки более крупным. Другой вариант - использовать polyfill.

Производительность

Приложения, созданные с помощью Ionic 2, более эффективны, чем те, которые созданы с помощью Ionic 1. Вот почему:

  • Угловая 2: манипуляции с DOM и производительность JavaScript значительно улучшились в Angular 2. Вы можете проверить эту таблицу, если хотите узнать о специфике. Еще одно преимущество, которое прилагается к Angular 2, - это шаблоны компиляции с опережением времени, предварительно скомпилированные с использованием инструмента построения вместо того, чтобы компилироваться, когда приложение работает в браузере. Это заставляет приложение инициализировать быстрее, потому что больше не нужно собирать шаблоны «на лету».
  • Native Scrolling: Ionic больше не использует прокрутку JavaScript. Вместо этого он теперь использует собственную прокрутку для поддерживаемых WebView. Она также теперь доступна на всех платформах. Помимо естественной прокрутки, есть также Virtual Scroll, который позволяет прокручивать очень большой список элементов с очень небольшим увеличением производительности. Эти два изменения дополняют более плавную прокрутку.
  • Веб-работники: веб-работники позволяют запускать сценарии в фоновом режиме, изолированные от потока, который запускает веб-страницу. Ionic 2 реализует веб-работников через компонент ion-img. Использование этого компонента вместо стандартного элемента img позволяет делегировать HTTP-запросы для получения изображений веб-работнику. Это упрощает загрузку изображений, особенно внутри больших списков. Компонент ion-img также обрабатывает ленивую загрузку, которая будет запрашивать и отображать изображение только тогда, когда оно становится видимым в окне просмотра пользователя.

Ionic Native

Ionic Native является эквивалентом ngCordova для Ionic 2. Они оба действуют как обертки для плагинов Cordova для реализации собственных функций (например, Camera, GeoLocation). Вы даже можете использовать Ionic Native в своем приложении Ionic 1, если хотите. Основное отличие состоит в том, что Ionic Native позволяет писать код с использованием функций ES6 и синтаксиса TypeScript. Это упрощает работу с Ionic 2, поскольку он уже использует TypeScript по умолчанию. Вот пример того, как реализовать плагин камеры Cordova в ngCordova:

И вот как это делается с использованием Ionic Native:

Документация

Документация значительно улучшилась. Мне особенно нравится тот факт, что теперь есть разные предварительные просмотры для каждого компонента на каждой платформе. Это дает разработчикам действительно хорошее представление о том, как будет выглядеть их приложение. И все это доступна без разработчика, и ни единой строчки кода!

Следует ли вам использовать Ionic 2?

На момент написания этой статьи был выпущен Ionic 2. Это означает, что он готов к использованию в боевых приложениях. Учитывая все новые функции, инструменты и преимущества, которые приходят с Angular 2 и TypeScript, единственное, что не позволит вам использовать Ionic 2, - это статус вашего проекта.

Если вы только начинаете новый проект, вы все равно можете использовать Ionic 1, если вы и ваши товарищи по команде знакомы только с Angular 1, и ваш проект должен быть завершен как можно скорее. Но если вам дали достаточное время для проекта, вам следует подумать об использовании Ionic 2. Придется немного обучиться, и вы также столкнетесь с некоторыми проблемами, но все это стоит тех усилий, из-за новых возможностей и улучшений в Ionic 2.

Если вы уже начали свой текущий проект на Ionic 1, вы, вероятно, захотите придерживаться Ionic 1 и избегать серьезного переписывания. Не беспокойтесь о поддержке, улучшениях и исправлениях ошибок для Ionic 1- разработчики Ionic, прилагают огромные усилия к поддержке Ionic 1. Как долго точно не ясно. По крайней мере, это будет поддерживаться в течение нескольких лет после выхода стабильной версии Ionic 2. Но нам также нужно помнить, что Ionic - проект с открытым исходным кодом с более чем 200 участниками. Поэтому, пока люди продолжают использовать его, мы всегда можем ожидать некоторую поддержку со стороны сообщества.

Вывод

Это оно! В этой статье вы узнали все об Ionic 2. В частности, вы узнали о значительных различиях между Ionic 2 и его предшественником. Мы также рассмотрели новые функции, добавленные в Ionic 2, и рассмотрели вопрос, следует ли использовать их для своих будущих проектов или нет. В следующем учебном пособии мы собираемся применить эти знания на практике, создав приложение Ionic 2. Будьте на связи!

Если вы хотите узнать больше об Ionic 2, обязательно ознакомьтесь со следующими ресурсами:

И, конечно же, у нас есть углубленный курс Ionic 2, который вы можете пройти, прямо здесь, на Envato Tuts +!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.