Framework7: делаем мобильные приложения в нативном стиле. Сравнение решений для кроссплатформенной разработки: PhoneGap, Xamarin, Flutter, React Native Фреймворк для создания приложений

Вокруг так много фреймворков и библиотек... И как выбрать перспективные и нужные для своего проекта?

Команда собрала для вас ТОП лучших фреймворков для Front-end разработки в 2018 году .

Уверены, что эта статья станет вашей путеводной звездой и не даст утонуть в море фреймворков. Поехали!

Но, для начала, немного теории:

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

Основные плюсы фреймворков:

Рентабельность

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

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

Ф. значительно улучшают производительность, и все потому, что максимально он оптимизирует процесс. Потому что, проще использовать ф. с оптимизацией и хорошо структурированными шаблонами, чем писать сотни строки кода.

Безопасность

Трендовые JavaScript-фреймворки могут похвастаться не только поддержкой большого сообщества на GitHub, но и железной системой безопасности.

Итак, рассмотрим ТОП 10 фреймворков и библиотек для Front-end Dev, которые актуальны в 2018 году:

Отличный JavaScript фреймворк, выпущенный в 2013 году Instagram и Facebook. Используя его, вы сможете легко и просто создавать сложные и крупномасштабные динамические приложения. Чаще всего используется для построения пользовательских интерфейсов. На GitHub этот фреймворк имеет больше 89 тыс. звезд.

Минусы:

Алгоритм Virtual DOM неточный и медленный

Требуется сложное асинхронное программирование при общении с сервером

AngularJS – это каркас для разработки веб-приложений от Google. Хорошо подходит для динамических веб-приложений, с использованием HTML для статических веб-страниц. Незаменимый фреймворк не только для разработчиков ПО, но и для дизайнеров. AngularJS, Angular 2 и Angular 4 прочно обосновались среди востребованных фреймворков.

Плюсы:

Открытый исходный код

Сохранение фрагментов кода для последующего использования

Разработчики сталкиваются с меньшим количеством ошибок, поскольку привязка данных строится на базе Angular-элементов

Поддерживаются различные элементы MVС

Хорошо работает в среде Agile

Масса инструментов для тестов

Минусы:

Сложный для новичков

Vue проще в плане архитектуры

API Angular огромное, и нужно разобраться со многими концепциями

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

Плюсы:

Не требует каких-либо компиляторов по умолчанию,

Трансформация из библиотеки до фреймворка в процессе использования

Управление продвинутыми одностраничными приложениями

Отличный баланс между читаемостью, ремонтопригодностью кода и написания самого кода

Минусы:

Runtime ошибки в шаблонах

Kомпонентный подход в React более гибок

Один из наиболее популярных MVC JavaScript фреймворков. Появился он в 2011 году под открытым исходным кодом. С его помощью можно довольно легко создавать масштабируемые одностраничные веб-приложения и обеспечивает двустороннюю привязку данных. Выполняет первоклассную работу на стороне DOM-рендеринга на стороне сервера. Поддерживается сайтами Discourse, Groupon, LinkedIn, Vine

Плюсы:

Простой в настройке

Разворачивает большие пользовательские интерфейсы

Двусторонняя привязка данных

Минусы:

Жесткая структура проектов

Нет стандартного набора UI-элементов

это не полноценный фреймворк, это библиотека, хоть и самая старая и популярная. jQuery и JavaScript давно и прочно связаны.. А с лицензией MIT эта библиотека предоставляет разработчикам приложений возможность писать более короткий код, сокращая тем самым рабочую нагрузку. Поддерживает DOM-манипуляции и в тандеме с CSS может пригодиться для решения любой задачи.

Плюсы:

широко используется благодаря быстрой обработке

Во всех браузерах ведет себя одинаково

Отлично подходит начинающим для простых приложений

Минусы:

Множество функций, облегчающих работу с DOM, уже реализованы нативно

Он позволяет создавать легкие и быстрые приложения. Современный, простой, быстрый и неблокирующий. GoDaddy и Paypal – лишь некоторые из именитых компаний, которые используют Node.js. Идеально подходит для приложений, связанных с I/O и приложений для потоковой передачи данных.

Плюсы:

Простой и быстрый

Такие ПО могут работать на нескольких хостах

Включение быстрых серверов

Минусы:

Не для «несквозных» операций

Без тестов в Node.js делать нечего

Перед нами грандиозная full-Stack платформа. Он располагает всеми функциями, необходимыми любому разработчику для рендеринга фронт-енда, разработки бекенда и управления базами данных.

Плюсы:

Full-Stack платформа

Cоздание полнофункциональных приложений

Pеактивное программирование

Быстрая обработка данных

Низкий порог вхождения

Минусы:

Cложный интерфейс для новичков

Просто идеальная пара для JavaScript. Это real JavaScript фреймворк.

Отлично подходит для создания веб-приложений и быстродействующих веб-сайтов. Поставляется с сеткой CSS, точками останова, обладает функциями API и нормализации стилей браузера.

Плюсы:

Основан на JavaScript и CSS

Адаптивное изображение для разнообразных мониторов

Можно встроить в любой дизайн

Совместим с любыми браузерами

Минусы:

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

Платформа для создания мобильных и десктопных кроссплатформенных приложений на JavaScript (HTML+CSS в придачу). Это и облачная платформа для сборки/распространения ПО и все, что пожелаете для создания функционально насыщенных приложений. Приятное ассорти из крутых инструментов и функций.

Плюсы:

Простота использовании и обучении

В ысокопроизводительная структура

Для десктопных и мобильных кроссплатформенных ПО

Минусы:

Titanium SDK обновляется позже SDK операционных систем

Отсутствие InterfaceBuilder

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

Эту платформу можно смело назвать фреймворком следующего поколения для мобильных и веб-приложений.

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

Плюсы:

Обширный набор библиотек

Создание собственного фреймворка внутри платформы

Минусы:

Набор библиотек требует дополнения и доработки

Гибридное приложение сочетает в себе элементы как нативных (родных), так и веб-приложений. Разработка нативных приложений делается для конкретной платформы и устанавливается на цифровом устройстве. При создании мобильных приложений, в рамках HTML5 предоставляется несколько альтернатив, которые имеют свою собственную динамику и функциональные возможности.

Эта структура также является полезной для оформления внутреннего и внешнего вида приложения, когда приложение будет готово оно будет работать с помощью HTML, JavaScript и CSS.

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

Создание гибридных мобильных приложений

Ниже предоставлена группа Фреймворков HTML5 для удобства программирования и проектирования:

Sencha Touch является ведущим MVC JavaScript Фреймворком для создания кроссплатформенных мобильных приложений, которая облегчает процесс разработки веб-приложений с использованием HTML5 и javascript. В состав этой платформы входит широкий спектр продуктов, которые работают сразу «с места в карьер». Sencha Touch использует методы аппаратного ускорения для обеспечения высокой производительности компонентов пользовательского интерфейса для мобильных устройств.

С более чем 50 встроенных компонентов пользовательского интерфейса и просмотром темы для всех основных мобильных платформ, Sencha Touch обеспечивает все необходимое для создания впечатляющих приложений, которые работают на iOS, Android, BlackBerry, Windows Phone, и многих других. Адаптивная верстка, плавная анимация и плавная прокрутка позволяют разработчикам создавать приложения, которые реагируют на действия пользователя, почти мгновенно, подобно нативным технологиям.

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

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

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

Telerik Kendo UI является расширением HTML5 Фреймворка, выступает в качестве одной из лучших платформ для разработчиков, которые хотят создавать кросс-платформенные мобильные приложения. Эти Фреймворки во многом зависят от JQuery и включают в себя ряд виджетов на основе JQuery. JavaScript Фреймворк также доступен в этом открытом Фреймворке и в этом его отличительная особенность.

Любители Angular (Angular - Фреймворк с открытым исходным кодом) и bootstrap (Bootstrap - это свободный набор инструментов для создания сайтов и веб-приложений) могут пользоваться мобильным Angular UI, так же, они получают возможность добавлять, как Bootstrap 3, так и Angular платформу для создания HTML5. Основное расширение Bootstrap 3 очень похоже на Angular; тем не менее, оно не имеет зависимость от JS, Bootstrap или JQuery. Мобильный Angular UI использует overthrow.js и fastclick.js для получения мобильного опыты для всех тех, кто его использует.

Intel XDK для поставляется с полным набором инструментов, используемых для разработки, тестирования и эмуляции, отладки и публикации кроссплатформенных гибридных приложений на HTML5. Это тоже Фреймворк с открытым исходным кодом поддерживаемый корпорацией Intel. Темы, предоставляемые этим Фреймворком, поддерживают Android, Windows, Blackberry и т.д.

Onsen UI является относительно новым Фреймворком; однако, он дает вызов существующим тяжелым платформам, особенно для Ionic. Это платформа с открытым исходным кодом предоставляется под лицензией Apache. Для большинства составляющих его пользовательского интерфейса, используются Angular директивы и Фреймворки верхнего уровня.

M Project, мобильный HTML5 JavaScript Фреймворк, используется для построения кросс мобильных веб-приложений, установленных на Backbone.js. Легко интегрируется с PhoneGap, чтобы помочь в создании приложения, является одним из его основных характеристик. Этот простой Фреймворк используется для быстрой разработки приложений.

По сути это мобильное HTML-приложение с открытым исходным кодом, Jo легко интегрируется с PhoneGap и Cordova для разработки приложений. Может свободно использовать Фреймворк с открытым исходным кодом, также может помочь изменить внешний вид приложения с помощью CSS.

Скажу прямо, ваш покорный слуга тащится от многих продуктов яблочной компании, но в этот список Objective-C не входит. У меня было несколько попыток с ним подружиться, но дружба как-то не пошла. Не знаю, не нравятся мне он и все. Релиз Swift можно сказать исправил ситуацию, но пока он в стадии активной разработки и шлифовки. Применять его в реальных проектах не сильно хочется.

Поразмышляв о плюсах и минусах всех доступных технологий разработки под iOS, я решил остановиться на своем любимом JavaScript. Если нет жизненной необходимости в нативных фишках Objective C, а за плечами имеется опыт разработки на JavaScript, то почему бы не начать покорение мобильных платформы именно с него?

Тем более нередко возникают одноразовые проекты (без дальнейшей поддержки) и ради них в серьез изучать Objective-C попросту нет. Как минимум это дорого и долго. Однажды мне выпал проект разработки приложения для корпоративного интернет-магазина. Задача по факту одноразовая – упрощаем покупателям жизнь и отправляем приложение в свободное плавание.

В таких случаях хочется быстрей решить задачу с минимальными затратами. "Серебряной пулей" на этом поприще давно зарекомендовала себя проект PhoneGap . Он генерирует каркас будущего приложения и приравнивает процесс создания мобильного приложения к типовому сайту. Вот и получается, что при наличии средних знаний HTML/CSS/JS вполне себе реально собрать приличное приложение.

Платформа PhoneGap предоставляет все необходимое для создания приложений, но дизайнерские тонкости оставляет на наше усмотрение. Грубо говоря, вот так просто взять и собрать приложение с приближенным к нативному исполнению интерфейсу – не получится. Без привлечения дополнительных технологий тут не обойтись.

Современные веб-разработчики однозначно наслышаны о мощи и неуклюжести фреймворка Bootstrap. Он позволяет творить «чудеса» и за считанные минуты создавать прототипы современных веб-приложений. Framework7 – это своего рода bootstrap , но нацеленный на мобильные платформы. Как и подобает хорошему фреймворку, в F7 собраны всевозможные виджеты, компоненты, позволяющие создать приложение, максимально похожее на нативное.

Изначально F7 специализировался сугубо на платформе iOS. Стандартная тема оформления была ориентирована на iOS 7 и по сравнению с конкурентами выделялась производительностью интерфейса. Совсем недавно, разработчики анонсировали поддержку Material дизайна от Google, тем самым добавив в список поддерживаемых платформ Android.

Разработчики проекта постарались навести под капотом порядок и оставить только действительно необходимые вещи. В итоге, привычных вещей вроде встроенной библиотеки jQuery , в F7 не найти. Вместо нее доступна легковесная Dom7 , обладающая большинством необходимых возможностей.

Резюмируем F7 – это JS/CSS фреймворк со всеми необходимыми UI элементами , выполненными в нативном для мобильной платформы стилем. Скажу честно, подобные фреймворки уже светились на GitHib, но F7 выгодно отличается от многих: производительностью и реализацией многих нативных UX фишек. Например, такие привычные для iOS пользователи как Pull To Refresh (потяни для обновления), Swipe, back-bar и многие другие доступны из коробки и не требуют дополнительного программирования.

На этом сильные стороны F7 не ограничиваются. Не буду вдаваться в подробности, а лишь немного поделюсь личными впечатлениями. Начну с наиболее важного для меня атрибута качественного проекта – документации. Ожидать появление книг по таким скороспелым вещам бессмысленно – пока их будут писать, фреймворк наверняка обновиться и текст потеряет актуальность. Вся надежда в таких проектах на документацию. Чем она подробней и лучше представлена – тем лучше. В F7 с этим полный порядок. Как мне показалось, документирована большая часть проекта, а там, где не хватило текста, разработчики привели примеры кода.

О потрясающей производительности я уже упомянул. Достигается она в первую очередь за счет жесткой диеты и использованию актуальных современных возможностей JavaScript . Что касается замены jQuery на Dom7, то переживать не стоит. Основные методы в ней реализованы точно также. Название однотипных методов, порядок параметров – полностью сохранены. Следовательно, проблем с привыканием не возникнет.

На официальном сайте проекта представлены различные графики, подтверждающие производительность F7, но не особо в них разбирался, т.к. больше доверяю своему восприятию. После разработки первого реального проекта, время отклика интерфейса я проверил самостоятельно. На последних моделях iPhone (5, 5S, 6) оно выше всяческих похвал. Все работает вполне естественно и привычно.

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

Технологии регулярно сменяют друг друга, но одно остается неизменным, лучший способ познакомиться с ними остается - практика. Для демонстрации работы F7, я решил написать полезное приложение, которое обязательно пригодится всем нашим читателем – читалка новостей с сайта любимого журнала. Поскольку в текущей реализации у нашего сайта нет полноценного API для получения материалов, мы воспользуемся старым добрым протоколом RSS (http://xakep.ru/rss).

Создать читалку на стэке HTML/CSS/JS/F7/PhoneGap достаточно просто. Учитывая, что для работы с RSS уже создан достаточно функциональный плагин. В остальном работа сведется к написанию нескольких десятков строк тухлого HTML. Это достаточно скучно, поэтому я взял на себя смелость добавить немного рок-н-ролла. Пример останется тем же, но писать мы его будем в MVC стиле. В итоге мы получим своеобразный микро-фреймворк с прицелом на будущее. Говоря другими словами, мы создадим универсальный каркас для последующей разработки хорошо расширяемых приложений.

Резюмируя перечисленные выше мысли, получаем примерно такой план действий. Первым делом готовим основу для проекта с помощью актуального стека технологий, затем создаем средствами F7 интерфейс приложения и на заключительном шаге заливаем эту ядовитую смесь в PhoneGap. Приложение будем ориентировать на iOS, нюансы разработки под Android оставлю тебе в качестве домашнего задания.

Есть несколько способов организации MVC паттерна в JavaScript , но мы воспользуемся вариантом от Philip Shurpik. Он достаточно простой и его уже успел опробовать (с некоторыми доработками) в своих реальных проектах. Что касается дополнительных компонент/библиотек, то помимо F7 нам потребуются:

• require.js – одно из лучших решений для организации AMD (Asynchronous Module Definition) подхода;
• handlebars – один из самых быстрых шаблонизаторов для JavaScript;
• hbs – простой handlebars для require.js;
• text.js – еще один плагин для reuire.js, позволяющий подгружать текстовые ресурсы;

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

Функционал нашего приложения предельно прост – подтягиваем обновленную RSS ленту и предоставляем пользователю возможность комфортного чтения. Комфорт немыслим, если загружать полные текст новости, поэтому будем придерживаться минимализма. Сначала отображаем заголовки, а полную версию текста пользователь сможет прочитать после тапа по нему.

Отлично, организационные моменты решили, осталось спроектировать структуру будущего приложения. Вариантов как всегда несколько, но я сразу ориентируюсь, что законченное веб-приложение будем скармливать PhoneGap, поэтому наиболее оптимальным вариантом будет:

• css - для хранения собственных стилей оформления. Все что переопределяем или дорабатываем, помещаем в эту директорию.
• img - изображения.
• js - весь клиентский JavaScript. Здесь размещаем только собственные сценарии, а не библиотеки. В корне директории располагаем сценарии общего назначения и модели. Контроллеры и представления должны определяем в одноименных поддиректориях. Смотрим пример, для контроллера «about» будем создавать папку "js/about".
• libs - библиотеки и все возможные дополнительные плюшки. Например, решил ты подключить великолепный «Font awesome» - кидаешь его сюда.

В корневой директории проекта разместятся всего лишь два файлика - app.js и index.html . Первый файл будет стартовой точкой приложения. В нем выполним конфигурирование вспомогательных библиотек и проинициализируем F7.

Загружаем перечисленные библиотеки (bower, git) и распихиваем их по соответствующим директориям. Затем в корне проекта создаем файлик app.js и выполняем конфигурирование дополнительных компонент.

Конфигурация для require.js описана в первом листинге. Здесь мы подключаем дополнительные библиотеки. Поскольку handlebars не оформлен в AMD стиле, подключение выполняется через shim. В принципе, плагин для чтения RSS мы могли бы подключить точно таким способом, но поскольку наше приложение и так не может без него существовать, то его инициализацию будем делать по старинке, через стартовый файл index.html.

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

Принцип прост - к каждому url добавляемый указанный в свойстве аргумент с определенным значением. Чтобы избавиться от кэширования, для аргумента необходимо подбирать уникальное значение. Каждый решает эту задачу по своему, но для уникальности получаю текущее время:

UrlArgs: "fake=" + (new Date()).getTime()

Во втором листинге приведен код модуля “app”. В нем мы выполняем инициализацию систему маршрутизации (router.js) и самого фреймворка. Описываем все виде AMD модуля. Для объявления модуля применяется метод define(). В первом параметре передаем название модуля, во втором перечисляем зависимости, а третьим описываем тело модуля. Подробности смотри в документации к require.js.

Тело модуля начинается с инициализации модуля маршрутизации (см. файл js/router.js). Роутер будет разруливать маршруты и запускать соответствующий метод контроллера. Сам роутинг реализуется достаточно просто (см. листинг 3): на входе получаем имя контроллера и пытаемся вызвать его заранее определенный метод init(). Путь к контроллеру (файлу) определить не сложно - на этапе обсуждения структуры приложения мы договорились сохранять их в папке js/имяКонтроллера/имяController.js.

Закончив с роутингом, приступаем к инициализации Framework7. В самом простом случаем достаточно создать экземпляр объекта Framework7 () и радоваться жизни. Для нашего примера этого хватит, а вообще при конструктор принимает объект с настройками. Их достаточно много и все они подробно описаны в документации . Наиболее заслуживают внимания: fastClicks, cache, cacheDuration, material).

Дальше происходит инициализация области представления. В контексте F7, под областью представления (View), подразумевается отдельная визуальная часть приложения. Каждая область представления характеризуется собственными настройками, навигационной панелью и рядом других элементов.

Инициализировать требуется только те области представления, которым требуется навигация. В нашем случае это.main-view. Сама инициализация сводится к вызову метода addView(). Он просит от нас два параметра: селектор области представления и объект с параметрами.

У нас все готово для разработки интерфейса приложения. Основную его часть опишем в файле index.html, расположенном в корне проекта (обязательно его создай). Текст разметки (html код) размашистый, поэтому копировать сюда его не стану, а направлю тебя на в раздел документации Basic App Layout . Смело бери оттуда весь исходник HTML, копируй подготовленный файл и приготовься внести несколько правок. Начнем с секции подключения сценариев. Приводим ее до следующего вида:

Нам обязательно требуется подключить сам фреймворк и плагин Feeds (для работы с RSS). В самом конце инклудим библиотеку require.js. Далее немного скролим текст и находим блок:

В эту область будем выводить содержимое определенных представлений. У нас планируется одно единственное представление, поэтому не будем заморачиваться и легким движением руки добавим поддержку функционала “Потяни и обнови”. Для этого прописываем в блок дополнительный класс pull-to-refresh-content и получаем примерно следующее:

Следующим шагом подключим дополнительные стили в шапку (framework7.feeds.min.css ) и приступим к созданию контроллера. Я не стал акцентировать внимание на изменение заголовка приложения, добавление вспомогательного текста – всю эту косметику ты сможешь сделать самостоятельно.

Нашему проекту потребуется один единственный контроллер, назовем его index и подготовим отдельную директорию в папке /js. Сразу в ней создавай несколько файликов:

• indexController.js - непосредственно контроллер;
• indexView.js, index.hbs – представление и шаблон;

Модель нам не потребуется, но для примера в корне директории js создан пустой файл-заглушка feedModel.js. При необходимости описываем в нем модель и получаем к ней доступ из контроллера.

Посмотрим на содержимое контроллера (Листинг 4). Первое, что бросается в глаза - формат объявления. Наш контроллер это не что иное, как обычный модуль с одним методом init, получающий порцию зависимостей.

После запроса индексной страницы будет вызван метод init контроллера. Дальше все зависит от задачи. Можем получить какие-нибудь данные и передать их в представление, можем что-то обработать и т.д. В нашем все ограничивается формированием представления. Для этого вызываем метод render(). Передавать данные из контроллера в представление можно через его единственный параметр. Нам передавать ничего не требуется, поэтому просто передадим объект заглушку.

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

Путь к rss ленте и способ отображения (на странице, в окне). Подробности смотри в четвертом листинге.

Код представления приведен в пятом листинге. По организации кода все похоже на контроллер. Тот же модуль и одна единственная функция. Обрати внимание на использование переменной $. Это не библиотека jQuery, а Dom7. Многие их методы идентичны, но в Dom7 есть далеко не все, поэтому будь внимательней.

Данные для вывода мы будем получать из RSS ленты, поэтому шаблон представления, содержит стандартный html. Стоит обратить внимание на добавление функционала pull to refresh (потяни и обнови). Ранее мы добавили соответствующий класс в index.html, а в представлении лишь завершили начатое. Код для запроса обновленной ленты писать не требуется, т.к. плагин RSS-Feed из коробки поддерживает функционал Pull To Refresh.

На этом разработка приложения завершена. Можешь протестировать его с помощью локального веб-сервера (например, входящий в состав gulp).

Веб-приложение готово и теперь остается только собрать его с помощью платформы PhoneGap. Для установки PhoneGap нам потребуется установленный в системе node.js. Если ты не отстаешь от современных трендов, то наверняка нода уже установлена в твоей системе. Если нет, то беги на официальный сайт и следуй инструкциям.

$ sudo nmp install -g phonegap

Отлично, но одного PhoneGap недостаточно. Без инструментов Cordova Command Line тоже не обойтись:

$ sudo npm install -g cordova

Из других вспомогательных тулза для автоматизации процесса сборки – Ant. Установить Ant можно несколькими способами. Проще всего этого сделать с помощью менеджера пакетов. Для OS X их несколько, но у меня прижился HomeBrew (http://brew.sh/). Работает стабильно и содержит большое количество пакетов. Установить HomeBrew достаточно просто. Набираем в терминале команду:

Ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Сразу после завершения установки приступаем за Ant:

$ brew update $ brew install ant

Следующим шагом будет установка XCode. Набираемся терпения и устанавливаем актуальную версию из AppStore. После установки обязательно запускаем его и принимаем лицензионное соглашение. Если этого не сделать, то PhoneGap не сможет собрать проект.

Не отходим далеко от консоли и создадим новый проект мобильного приложения. Вводим в консоле:

$ phonegap create xakepRssReader $ cd xakepRssReader

Отлично, базовая заготовка готова – можно приступать к переносу нашего веб-приложения. Перейди в директорию www и удали из нее все содержимое. Затем скопируй в нее все файлы и папки созданного нами приложения. В результате весь наш проект должен разместить в папке www. Возвращайся в консоль и приступай к сборке. Сначала определим мобильную платформу для сборки (в нашем случае iOS), а затем запустим деплой проекта:

$ cordova platform add ios $ cordova build ios

При отсутствии ошибок в консоль будет выведена надпись “Build Succeeded”. Остается только открыть из директории platforms/js файл xakepRssReader.xcodeprof в XCode и запустить процесс сборки (нажимаем кнопку Play). Если все пройдет успешно (а должно быть именно так), то через несколько секунд запустится окно эмулятора (в моем случае iPhone 6).

Собрать мобильное приложение при помощи знакомого каждому веб-программисту стеку технологий на практике оказалось не так уж и сложно. Если посмотреть в AppStore, то большинство корпоративных приложений – не что иное как трансляция определенного контента/сервиса с официального сайта компании. Можно ли создавать подобные вещи не прибегая к нативным технологиям? Определенно, да.

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

Безусловно, не стоит питать излишних иллюзий и отказываться от изучения нативных технологий (Objective C, Swift). Если ты серьезно настроен на разработку под мобильные платформы, то обойтись одними веб-технологиями скорей всего не удастся. Во всяком случае на текущем временном этапе. Но если твоя цель «попрактиковаться» и неплохо подзаработать на типовых проектах, то веб-технологии определенно смогут помочь.

На этом у меня все. Удачной мобильной разработки!

• Процесс создания максимально похож на разработку web-приложения;
• Единый стэк технологий (HTML/CSS/JavaScript);
• Низкий порог вхождения, быстрые результаты;
• Покрытие всех популярных мобильных платформ (iOS, Android, Windows Phone);
• Низкая стоимость разработки приложения;
• Более дешевое сопровождение;
• Возможность использования JS-наработок;

• Более низкая производительность по сравнению с нативными приложениями;

Веб-разработка

Мир никогда не будет прежним, потому что у нас есть веб-разработка. Одна из ведущих сфер человеческой деятельности по актуальности, влиянию и степени вовлеченности. А по совместительству — один из ведущих профилей нашей компании. Поэтому мы решили сделать небольшой обзор самых популярных фреймворков 2018 года. Держитесь в курсе веб-разработки и следуйте за современными технологиями.

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

Его структура включает в себя целый ряд интересных функций. Вот некоторые из них:

• Используя шаблоны, вы можете показывать информацию из модели и контроллера.
• Angular поддерживает архитектуру MVC. В результате разработчик может просто разделить приложение на MVC компоненты. Все остальное будет управляться средствами фреймворка.
• Все выражения похожи на фрагменты кода, заключенные в фигурные скобки. Они не используют циклы и условные выражения. Наоборот — применяются для форматирования и отображения данных.

Все эти функции являются частью платформы, которая позволит вам построить отличный веб-сайт. Вот лишь некоторые примеры площадок, разработанных с помощью этого фреймворка: Netflix, Freelancer.com, GoodFIlms и т.д.

Этот фреймворк построен на известнейшем языке программирования Ruby. В чем его главная фишка? В том, что повторное использование кода радикально упрощает и ускоряет разработку веб-приложений. Кроме того, такой подход позволяет добавлять некоторые дополнительные функции. Среди популярных веб-сайтов, написанных на Ruby on Rails, можно выделить Basecamp, Ask.fm, GitHub, 500px и пр.

Ruby on Rails — это огромное сообщество разработчиков, где вы запросто найдете помощь для своего проекта. Мы не можем сказать, что RoR относится к дешевым технологиям. Однако фреймворк обеспечивает кучу плюшек. И прежде всего мы имеем в виду быструю разработку с меньшим количеством написанного кода и ошибок. Среди прочих преимуществ выделим:

• Гибкость. Фреймворк подходит для всех отраслей бизнеса, будь то управление проектами или строительство.
• Скорость. Об этом мы уже писали и повторим еще раз: Ruby on Rails сокращает время разработки веб-приложений примерно на 30-40%.
• Возможность вносить изменения в код совершенно безболезненно. Именно поэтому RoR идеально подходит для долгоиграющих проектов. Резкое изменения требований или смена команды разработчиков — все это не станет серьезной проблемой.

YII — платформа с открытым исходным кодом, встроенная в PHP5. Благодаря понятному дизайну и удобному интерфейсу, этот фреймворк обеспечивает чрезвычайно простую и быструю веб-разработку. YII оптимизирован по производительности, поэтому его можно использовать для любых проектов от мала до велика. Кроме того, платформа содержит массу замечательных инструментов, которые помогут вам отладить и протестировать приложение. Еще один плюс — хорошо проработанная документация.

Ключевые особенности YII одной строкой:

• Фреймворк не включает классы и объекты, пока они не понадобятся. Это ускоряет загрузку приложений.
• Использование OOP стандартов, а значит — надежность и безопасность.
• Все профессиональные ресурсы абсолютно бесплатны.

Все эти функции способствуют созданию высокопроизводительной структуры, которая позволит вам разрабатывать классные веб-сайты. Вот некоторые из них: ТАСС, Craftcms, HumHub и так далее.

Этот фреймворк написан на платформе Node.js и позволяет разработчикам создавать различные real-time веб-приложения. Одна из самых крутых особенностей Meteor JS — отличная основа для создания простых сайтов личного пользования.

Meteor JS это изоморфный JavaScript веб-фреймворк с открытым исходным кодом. О чем это говорит? О том, что он позволяет загружать страницы намного быстрее. Кроме того, благодаря интегрированному стеку JavaScript, который простирается от базы данных до экрана конечного пользователя, вы можете выполнить в 10 строках кода то, что обычно растягивается на 1000 строк.

Еще одна интересная особенность заключается в том, что вы можете использовать один и тот же код при разработке под iOS, web, Android или desktop. Также вы можете использовать различные популярные фреймворки и инструменты и сосредоточиться на создании функций вместо того, чтобы писать разрозненные компоненты вместе.

И еще один фреймворк на платформе Node.js. Вам определенно стоит им воспользоваться, если вы хотите разработать веб-приложение и API, как можно быстрее. Почему? Потому что Express.js покрывает целый ряд важных функций плагинами. А еще фреймворк можно использовать для создания мобильных приложений.

По сути, Express.js состоит из Angular и базы данных MongoDB. Это значит, что для разработки веб-сайтов вам достаточно знания HTML, CSS и JavaScript. А используя модули npm, вы сможете расширять функционал приложений сколько угодно и как угодно.

Express.js идеален для создания простых веб-сервисов. Не высоконагруженных порталов, а приложений, которые собираются “на скорую руку”. Если вам нужен MVP или вы просто хотите попрактиковаться в веб-разработке, хватайтесь за Express.js и никуда его не отпускайте.

Zend — это opensource фреймворк, написанный на PHP. Он ориентирован на разработку современных, надежных и безопасных веб-сервисов.

Zend применяет различные профессиональные пакеты PHP, которые делают разработку веб-сайтов самого высокого класса значительно проще и быстрее. Кроме того, фреймворк использует архитектуру MVC, отделяющую базу данных и бизнес-логику от представительского уровня. Таким образом мы получаем более понятный и чистый код.

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

Популярнейший фреймворк для веб-разработки, написанный на Python и использующий архитектуру MVC. Перечисляем ключевые особенности этой платформы:

• Скорость. Главная цель фреймворка — помочь разработчикам сделать приложение, как можно быстрее. Причем, на всех этапах производства — от идеи до релиза. Эффективность и экономичность — именно так можно сформулировать девиз Django. Фреймворк идеально подходящит для разработчиков, у которых горят сроки.
• Безопасность. Вы даже можете позволить себе некоторые ошибки, связанные с секьюрностью. Как правило, они связаны с SQL инъекциями, подделкой межсайтовых запросов и межсайтовым скриптингом. Django эффективно управляет всеми именами пользователя и паролями, а система аутентификации пользователя, как известно, играет решающую роль.
• Масштабируемость. Большинство бизнес-сайтов используют Django для быстрого удовлетворения потребностей трафика.
• Полный фарш. Фреймворк включает в себя различные дополнительные опции для помощи с картами сайта, аутентификацией пользователей, администрированием контента, RSS-каналы и многое другое. Каждая из них оказывает существенную помощь в процесс веб-разработки.

Laravel является одним из лучших PHP фреймворков. С его помощью вы можете легко разрабатывать, как веб, так и мобильные приложения для небольших сайтов и крупного бизнеса. Laravel имеет много интересных функций, таких как техника авторизации, объектно-ориентированные библиотеки, поддержка MVC, миграции баз данных, межсайтовые запросы и т.д.

К основным преимуществам этого фреймворка можно отнести:

• Возможность увеличения трафика на сайт. И да, эта технология применима к любому браузеру и устройству.
• Гибкость. Фреймворк имеет модульную структуру, что помогает упростить сам веб-сайт и процесс его разработки.
• PHP не нуждается в специальных способах обслуживания. Это связано с автоматической загрузкой объекта, который содержится в программном обеспечении.
• Фреймворк Laravel может создавать уникальные URL-адреса, так как реализует различные маршруты с одним и тем же названием.

Выбор правильного фреймворка является одним из ключевых моментов, влияющих на качество будущего сайта. Каждую из описанных технологий можно назвать полной во всех отношениях, так как их используют, как для frontend, так и для backend разработки. Поэтому наш совет будет до безобразия банальным. Просто выберите платформу в соответствии с вашими предпочтениями в языках программирования. Только вы можете сформулировать собственные требования наилучшим образом. И только вы знаете свои сильные и слабые стороны.

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

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

В этой статье мы разберем топ-7 таких фреймворков.

IONIC - одна из самых многообещающих фреймворков для мобильных приложений на основе HTML 5. Построен с использованием SASS, что обеспечивает большое количество компонентов UI, позволяющие создавать интерактивные приложения. Для запуска приложений используется фреймворк JavaScript MVVM и AngularJS. Двустороннее закрепление данных, взаимодействие с серверными службами и API делает AngularJS самым популярным среди разработчиков приложений. Нет сомнений, что он станет еще более популярным, после выхода новой версии AngularJS 2.0, ориентированный на мобильные устройства.

Команда работников IONIC скоро представят новый помощник в создании IONIC приложений под названием «IONIC creator». Он будет анонсирован совсем скоро и будет поддерживать перетаскивание, что намного ускорит создание приложений.

Для того чтобы поближе познакомиться с IONIC, вы можете почитать статьи о начале работы с мобильными приложениями и о разработке игр на основе ОС Firefox.

Mobile Angular UI - фреймворк на основе HTML 5, который использует bootstrap 3 и AngularJS для создания интерактивных мобильных приложений.

Основные особенности Mobile AngularUI включают в себя:

• Bootstrap 3
• AngularJS
• Bootstrap 3 мобильные компоненты, такие как ветвление, оверлейные программы и боковые панели, которых не было в обычном bootstrap.
• AngularJS модули, такие как angular-route, angular-touch и angular-animate.

Ответные медиа запросы отделены от программы начальной загрузки и вам остается только выбрать то, что необходимо. Мобильный Angular UI независим от jQuery, поэтому все, что вам нужно для создания мобильного приложения, это некоторые AngularJS директивы.

Для того чтобы посмотреть Mobile Angular UI в действии, обратите внимание на демо страницу. Также мы рекомендуем вам ознакомиться с инструкцией о том, с чего начинать работу с Mobile Angular UI.

Intel XDK - это мульти платформная разработка Intel. Работать с ней достаточно легко, вам нужно лишь скачать бесплатные приложения, которые совместимы с Linux, Windows и Mac. Она содержит множество шаблонов для начала работы и поддерживает UI фреймворки, такие как Twitter bootstrap, jQuery Mobile и Topcoat.

Intel XDK обеспечивает предварительный просмотр в реальном времени на подключенном устройстве, в то время как вы можете изучать другие интересные инструменты.

На наш взгляд, Intel XDK является самым простым в использовании. Он использует перетаскивание, что позволяет избежать много рутинной работы.

Во введении в работу с Intel XDK вы найдете большое количество обучающего материала по работе с платформой.

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

Titanium - это отличная разработка, в которой вы найдете все, что нужно для создания гибридных мобильных приложений. Для работы с Titanium скачайте Titanium studio. Titanium SDK содержит несколько API платформ и Cloud сервис, работающий как хранилище. Он идет с независимой платформой API, которая упрощает доступ к мобильному устройству.

Titanium использует Alloy, фреймворк MVC для ускорения работы с мобильными приложениями. Созданные с помощью Alloy модули легко повторно использовать для различных приложений, следовательно, значительно уменьшается время работы и линия кода.

Titanium studio содержит некоторые примеры кода, а также мы надеемся, что скоро появятся обучающие видео на SitePoint.

Sencha Touch - это HTML 5 фреймворк для создания приложений для таких платформ как iOS, Android и Blackberry и не только. Он существует уже несколько лет, но относительно недавно стал популярным среди разработчиков гибридных мобильных приложений.

Sencha Touch более продвинутый, чем его оппоненты в вопросе создания родных приложений для различных платформ.

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

Для того чтобы полностью оценить достоинства Sencha Touch, взгляните на примерные коды на официальном сайте.

Telerik’s Kendo UI - HTML 5 фреймворк для создания мульти-платформных мобильных приложений. Kendo UI сильно зависит от jQuery и содержит некоторое количество виджетов, основанных на jQuery.

Работать с ним не сложно. Разработчики знакомые с jQuery оценят легкость работы с Kendo UI. У Kendo UI есть открытый ресурс инструментов и JavaScript фреймворков.

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

Просмотрите официальную документацию для работы с Kendo UI. Там вы найдете видео уроки, которые помогут вам изучить этот фреймворк.

PhoneGap немного выбивается из нашего списка, поскольку этот фреймворк не для создания приложения, а для его упаковки и выпуска. Платная программа PhoneGap находится на открытом источнике Cordova и принадлежит Adobe. Популярен среди многих разработчиков мобильных приложений.

Для работы с PhoneGap вы можете выбрать между фраймфорками JavaScript или UI. Хороши комбинации jQuery Mobile и KnockOut.js или AngularJS. Как только вы закончите работу с кодом, PhoneGap завершает всю оставшуюся работу на платформе, с которой вы работаете. Приложения, созданные с помощью PhoneGap используют веб представление для передачи контента. PhoneGap содержит минимальный набор веб API для доступа к возможностям мобильного устройства и позволяет писать запрашиваемые плагины.

Инструкцию по работе с PhoneGap вы найдете .

Бонус

App.js - библиотека JavaScript для создания мобильных приложений. Этот, не похожий на других фреймворк, не использует AngularJS. Он предоставляет несколько базовых тем и виджетов. Вы можете написать приложение, используя zepto или jQuery.

Вывод

В этой статье мы рассмотрели одни из лучших фреймворков мобильных приложений HTML 5. Мобильный HTML 5 хорошо развивается и с каждым днем предлагает все новые опции. А каким фреймворкам отдаете предпочтение вы? Поделитесь в комментариях.