Почему я решил использовать Ionic 2
Полистав upwork я пришел к выводу, что мой горячо любимый angularjs стремительно уступает позиции своему преемнику. Довольно странное ощущение: еще вчера angular 2 был в бете и буквально за пару месяцев после релиза почти догнал своего монолитного предшественника в количетсве объявлений о разработке веб-приложений! В 22 года я почувствовал себя довольно старым и решил потратить время на то, чтобы снова догнать моду.
И тут начинается: webpack или system.js? Typescript или ES6? Promises или Observables? Что-то не так. Почитал, окончательно запутался. Но понял, что в 2016 про gulp уже лучше вслух не вспоминать — застыдят.
Собравшись с мыслями вспомнил о своем опыте работы с гибридными приложениями. Да, там было много боли и слез, но все же я с улыбкой вспоминал Ionic. А тут как раз вторая версия вроде как вполне стабильна. Ребята из ionic core team уже позаботились обо мне, выбрав за меня почти весь стек, настроив конфиги и предложив готовую структуру проекта. Это счастье — просто брать и писать код, а потом видеть результаты, держа в руках свой телефон. Загорелся и решил написать небольшое приложение и выложить его на github.
Идея была максимально проста — взять мой годовалый эксперимент знакомства с React Native и написать его сводного брата на Ionic 2. За пару дней написал и поделился результатом.
Что у меня получилось
Слева приложение, написанное на Ionic 2, справа — на React Native:
Что я думаю об этом опыте
Разработать приложение на незнакомом мне Ionic 2/angular 2 оказалось намного проще, чем на таком же незнакомом React Native год назад. Хотя сравнения скорее всего неуместны — год назад React Native был совсем сырым и чтобы сделать простейшие действия или анимации приходилось довольно долго ломать голову. Я уверен, что сегодня React Native гораздо более зрелый и уже давно готов для написания production-кода.
Наверно, одна из причин, почему мне не было сложно — потрясающее сообщество, которое уже сформировалось вокруг Ionic 2 и angular 2. Любой вопрос решался максимально быстро с помощью stackoverflow и форума Ionic 2. Даже чаще с помощью форума — разработчики фреймворка следят за вопросами пользователей и оперативно отвечают на них.
Впечатления от angular 2 тоже сугубо положительные, особенно я доволен компонентами, хотя они и появились в angular 1.5, проекты, в разработке которых я участвовал, использовали максимум angular 1.4. Не раз я видел приложения, в которых почти весь код был написан в одном огромном контроллере и приходилось по-настоящему страдать, принимая такое наследие от предыдущих разработчиков. Теперь, надеюсь, компоненты сделают этот… подход настолько неестесственным, что я больше не столкнусь со всем этим ужасом.
Мне еще рано делать далеко идущие выводы, ведь мое приложение слишком маленькое, чтобы столкнуться с проблемами angular 2. Я пока что ничего не могу сказать (на своем опыте) о его производительности, хотя я уже столкнулся с тем, что мои огромные ngFor на странице комментариев плохо отображались на телефоне. Сейчас я немного схитрил и сделал ответы на комментарии свернутыми по умолчанию — помогло, но с проблемой все еще интересно разобраться, вникнув в нее, я пойму много новых для себя вещей.
В скором времени планирую реализовать пару новых возможностей, после чего я буду достаточно уверенно ориентироваться в angular 2, чтобы использовать его в настоящих проектах. Но уже сегодня я с уверенностью могу сказать, что Ionic 2 помог мне быстрее втянуться в разработку и снял головную боль при выборе стека, структуры проекта и настроке окружения, а это дорогого стоит.
Комментарии (35)
moxnoryl
09.12.2016 16:48+8В 22 года я почувствовал себя довольно старым
То чувство, когда тебе 32 и ты даже не пробовал заниматься angular
astec
09.12.2016 17:37+1Тоже решил делать свой проект на Ionic2@angular2 и очень доволен выбором. Нравится что можно сразу и мобильные приложение под 3 платформы и живое демо на сайт выложить. И всё это на одной кодовой базе. Для примера: https://debtstracker.io/
hrabouski
09.12.2016 17:47+1я около года писал приложения на первом ionic и скажу, что он был хорош для простых клиентов к серверу, но что-то уровня uber вышло бы ужасным :)
Casufi
09.12.2016 19:04Подскажите, насколько удобно шарить код между SPA на ангуляре и приложением на ионике, есть какието BP для этого?
Понятно вьюхи и контролеры будут свои, но сервисы и фабрики хорошо было бы держать общими. Если возможно держать код для SPA и приложений в одном дереве, то как собирать отдельно для веб и для девайсов?astec
09.12.2016 19:25+1Ну у меня просто приложение на ионик2 который внутри использует ангуляр2. И код и для SPA и для мобильных приложений один и тот же. Просто собирается под разные платформы. Очень удобно.
Casufi
09.12.2016 23:00Не могу понять, каким образом код один и тот же, 1) Разве вьюхи ионик работают в вебе, там же спефичній набор контролов, как я понимаю? 2) Как собрать ионик приложение побликации в веб, там же на выходе не HTML + JS + CSS? Нет у вас в открітом доступе примера код посмотреть?
astec
10.12.2016 12:09Там обычный HTML5. Для приложений используется Cordova.
У них вся документация с живыми примерами прямо на сайте — очень удобно. Можете посмотреть и исходники и результат. Так же есть примеры приложений на github. Например ionic conference app.
ansaril3
09.12.2016 21:47+2Ionic2, действительно, очень быстро развивается и имеет отличное сообщество — для личного проекта тоже решил использовать именно его.
Но на данный момент у фреймворка есть 2 серьезных минуса, которые вы должны знать если планируете начать разрабатывать на нем:
1) Еще не вышел финальный релиз, а значит надо быть готовым к корректировке кода со временем (когда в сентябре beta перешла в rc, пришлось перерабатывать большую часть кода).
2) Ionic2 довольно скромно смотрится в плане скорости запуска программ — 5-10 секунд для запуска это много.
Мой проект на ionic2 — http://medicine-live.ru/app/hrabouski
10.12.2016 00:14а какие кордова-плагины ты использовал?
ansaril3
10.12.2016 14:39Список плагиновonesignal-cordova-plugin
ionic-plugin-keyboard
cordova-sqlite-ext
cordova-plugin-whitelist
cordova-plugin-statusbar
cordova-plugin-splashscreen
cordova-plugin-inappbrowser
cordova-plugin-google-analytics
cordova-plugin-email-composer
cordova-plugin-device
cordova-plugin-console
com.verso.cordova.clipboard
com.sarriaroman.PhotoViewer
sentyaev
10.12.2016 05:14когда в сентябре beta перешла в rc, пришлось перерабатывать большую часть кода
а потом они поменяли router, снова
Но сейчас все довольно стабильно на мой взгляд.
MOTORIST
10.12.2016 11:55Тоже столкнулся с проблемой долгой загрузки + поддержку роутера они отключили, пока ангулар не станет стабильным.
anatoly314
10.12.2016 21:44This app is incompatible with all of your devices для Nexus 5. Не подскажете в чем может мыть проблема?
BalinTomsk
10.12.2016 05:01+1В моей средне-статистической конторе опубликовали стратегию развития нашего ЕА департамента на 2017 год. Интересно сгруппировали технологии — что рекомендуется перестать использовать в новых проектах, что рекомендуется использовать прямо сейчас, а что пока лишь рассматривается в перспективе.
Неплохой список, полезно для обновления собственных скилзов чтоб быть на уровне :-)
Ангуляр — отмирает, и активно убирается из проектов :-)
Старье:
— HOLD: (fine on existing projects they’re already in, but cannot be used on future projects)
— Angular.js
— CMS as Platform
— Backbone.js
— Subversion
— MySQL/MariaDB
— Metero.js
— Riot.js
— Vue.js
— SOAP
Современность, то что надо пользовать:
— ADOPT:
— Test Driven Development
— Continuous Delivery
— APIs as a Product
— Data Lake
— React.js
— Ember.js
— Git
— Node.js
— Polyglot Persistence
— ElasticSearch
Ближайшая перспектива:
— TRIAL:
— Containerization
— React Native
— Functional Programming
— Spring Boot
— Enterprise CSS Framework
— Hadoop
— Project Documentation in Source Control
— HSTS
Стадия анализа:
— ASSESS:
— Virtual/Augmented Reality
— Pipelines as Code
— Serverless Architecture
— Chaos Monkey
— iBeacons
— Kanban
— Security Scan During Build
— QA in Production
— Postgresql
— Grafanasentyaev
10.12.2016 05:18-1Почему MySQL выбрасываете?
sarcasm on;
Да, пора уж и за TDD, воистину «современность»)))
sarcasm off;
AMar4enko
11.12.2016 15:46Светлое будущее гибридной разработки на JS для меня выглядит так:
- TypeScript как язык (статический анализ это круто)
- Redux and friends для управления состоянием (помойка документации, примеров, best-practice и инструментов разработчика). На нем пилим ядро бизнес-логики, framework-agnostic
- React-native для мобильных устройств.
- your-framework-of-choice для фронта, с поддержкой серверного рендеринга.
Есть пара сравнительно крупных проектов на Ionic 1, в каждом около ~20 cordova-плагинов, push-уведомления, universal links.
Впечатления плохие.
Во втором чуть получше — без digest-циклов, человеческий роутер, но все те же лагающие события, запинающиеся анимации.
Писать на cordova новый проект не хочется, это постоянная боль.
У RN свои приколы, конечно, но с ними можно мириться, в конце концов переписать лагающие компоненты на натив.
artemgapchenko
12.12.2016 12:23Я уверен, что сегодня React Native гораздо более зрелый и уже давно готов для написания production-кода.
Насколько я знаю, React Native уже сейчас используется в Airbnb при написании их iOS и Android приложений. Целиком переписывать всё на RN они не стали, там у них сейчас смесь нативного кода и RN.
via-site
16.12.2016 21:53Считаю абсолютно правильным и логичным решением автора статьи соскочить с умирающего Angular 1.x на технологию, которая в ближайшие годы (а может и дольше) будет держать лидирующие позиции на рынке.
Сам предпринял аналогичный шаг практически в то же время (чуть раньше). Эта история мне до боли знакома.
Вначале я и сам столкнулся с небольшим отторжением Angular-CLI (webpack), т.к. у меня уже была собственная система сборки на Gulp + SystemJS и было просто жалко выбрасывать свои наработки + сборка работала в разы быстрее и понятнее (на тот момент).
Трезво оценив перспективы использования коробочного решения от самих разработчиков Angular + заметив интеграцию с Angular-CLI в моей любимой IDE, принял решение использовать как бы стандарт для работы с Angular приложениями и считаю что не прогадал.
Сам фреймворк довольно стабилен и проблем вообще не возникало, кроме роутера. Роутинг в приложении довольно сложен (lazy-loading, named outlets, multiple childs), но все мои задумки все же удалось реализовать, хотя и через… Думаю что в следующих релизах они доведут до ума и сам роутер. Но это все мелочи.
Единственная серьезная проблема, с которой я столкнулся — это катастрофическая нехватка готовых, стабильных веб компонентов на Angular 2, к которым я привык еще в первой версии. Понимаю что это временная проблема всех новых фреймворков, но все же хотелось бы использовать привычные инструменты уже сейчас. Хотя Angular Material 2 еще в альфе и довольно сырой, пришлось использовать именно его, т.к. Google's Material интерфейс просто шикарен, особенно на мобильных устройствах. Фреймворк для CSS разметки (Angular 2 Flex-Layout) — вообще в глубокой альфе, а Twitter Bootstrap и Angular Material не совместимы.
Еще очень порадовала уже работающая AOT компиляция (prerendered templates). Там проблемы с интеграцией в Angular-CLI, но все же она работает.
P.S. Я, как и большинство ангулярщиков, понимаем что Angular 2 — это совсем новый фреймворк, имеющий с Angular 1.x общего только первую часть названия. Вначале, весь многолетний опыт работы с Angular мне даже мешал и его пришлось пришлось просто выбросить. Наверное в этом есть удел всех хороших программистов-разработчиков. Мы быстро переучиваемся. Правда, среди знакомых есть еще и те, кто начинал еще с Backbone и до сих пор на нем работает. Мне их почему-то искренне жаль. Жаль еще бывших коллег, которые допиливают проект на AngularJS, осознавая что в данный момент получают опыт, который уже не актуален.
hrabouski
Буду рад ответить на все ваши вопросы :)
t0rsym
Прямо вчера сидел выбирал фреймворк для кросс-платформенного написания приложений и тут как сам Б-г послал. Интересует такой вопрос: как на счет производительности и скорости? PhoneGap (поставил туда Polymer 1.0, т.к. пишу на нем) вроде был многообещающим, а получилось УГ — приложение загружается долго, анимация лагает. NativeScript вроде ничего так, но все равно замечаю, что работает оно как-то не так, хотя он вроде транслирует часть кода в нативный. Лучшего чем Xamarin и Qt пока не видел, но не горю желанием писать на C++ или C# (привык уже к python и javascript), но ведь интернет большой, мог что-то упустить. Есть ли смысл писать на том же Ionic'e или NativeScript'e приложение типа Pinterest но только в реальном времени?
hrabouski
У меня нет экспертизы в NS. Могу рассказать про первый айоник. Приложения получались намного более юзабельные, чем просто на cordova (PhoneGap). В перовом айонике ребята уже решили пару проблем (например, скролл) гибридных приложений своими директивами.
Но все равно эти приложения проигрывали в плавности нативным. Да и плагины не всегда давали нужную функциональность.
Я бы посмотрел в сторону React Native — год назад писать на нем было ужасно. Теперь, слышал, довольно удобно, да и результат вроде хорош.
И вот мой староватый пост https://habrahabr.ru/post/302084/
michaelmashay
Зависит конечно от сложности приложения, но для не сильно сложных и не требующих горы кастома — посмотрите Tabris.js он не так на слуху, но мне нравится. Я писал о нем тут, с тех пор много добавили: Windows, WebSockets, новые компоненты и упростили их вызов. Обещают скоро тоже Angular2-компоненты завезти (на сайте указано полгода период, но оно так уже 3-4мес., надеюсь скоро)