Как Ionic 2 помогает мне вникнуть в angular 2

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

    Почему я решил использовать 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 помог мне быстрее втянуться в разработку и снял головную боль при выборе стека, структуры проекта и настроке окружения, а это дорогого стоит.
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 36

      0
      Буду рад ответить на все ваши вопросы :)
        +1
        Прямо вчера сидел выбирал фреймворк для кросс-платформенного написания приложений и тут как сам Б-г послал. Интересует такой вопрос: как на счет производительности и скорости? PhoneGap (поставил туда Polymer 1.0, т.к. пишу на нем) вроде был многообещающим, а получилось УГ — приложение загружается долго, анимация лагает. NativeScript вроде ничего так, но все равно замечаю, что работает оно как-то не так, хотя он вроде транслирует часть кода в нативный. Лучшего чем Xamarin и Qt пока не видел, но не горю желанием писать на C++ или C# (привык уже к python и javascript), но ведь интернет большой, мог что-то упустить. Есть ли смысл писать на том же Ionic'e или NativeScript'e приложение типа Pinterest но только в реальном времени?
          0
          У меня нет экспертизы в NS. Могу рассказать про первый айоник. Приложения получались намного более юзабельные, чем просто на cordova (PhoneGap). В перовом айонике ребята уже решили пару проблем (например, скролл) гибридных приложений своими директивами.

          Но все равно эти приложения проигрывали в плавности нативным. Да и плагины не всегда давали нужную функциональность.

          Я бы посмотрел в сторону React Native — год назад писать на нем было ужасно. Теперь, слышал, довольно удобно, да и результат вроде хорош.

          И вот мой староватый пост https://habrahabr.ru/post/302084/
            0
            Зависит конечно от сложности приложения, но для не сильно сложных и не требующих горы кастома — посмотрите Tabris.js он не так на слуху, но мне нравится. Я писал о нем тут, с тех пор много добавили: Windows, WebSockets, новые компоненты и упростили их вызов. Обещают скоро тоже Angular2-компоненты завезти (на сайте указано полгода период, но оно так уже 3-4мес., надеюсь скоро)
          +8
          В 22 года я почувствовал себя довольно старым

          То чувство, когда тебе 32 и ты даже не пробовал заниматься angular
            +1
            То чувство, когда тебе 40 и тебя коробит фраза про gulp
              0
              Когда тебе 50 и ты пинаешь своих 20-30-40 летних сотрудников чтобы они уже начали переходить на современные технологии.
              Блин, да я лучше них знаю эти новомодные вещи…
            0
            Мир ЖабаСкрипта старит людей. Уже 23 летние синьеры чувствуют себя старыми!
              0
              к сожалению, так и есть
                +1
                дорогу школярам!!!
              +1

              Тоже решил делать свой проект на Ionic2@angular2 и очень доволен выбором. Нравится что можно сразу и мобильные приложение под 3 платформы и живое демо на сайт выложить. И всё это на одной кодовой базе. Для примера: https://debtstracker.io/

                +1
                я около года писал приложения на первом ionic и скажу, что он был хорош для простых клиентов к серверу, но что-то уровня uber вышло бы ужасным :)
                  0

                  Ну мне первый ангуляр вообще не нравился и я его даже не пробовал щупать. А второй что ангуляр что ионик очень даже. Но конечно не для всего подойдёт.

                    0
                    попробую выцепить на апворке какую-нибудь работу на нем, думаю, много мыслей новых появится
                  0
                  Подскажите, насколько удобно шарить код между SPA на ангуляре и приложением на ионике, есть какието BP для этого?
                  Понятно вьюхи и контролеры будут свои, но сервисы и фабрики хорошо было бы держать общими. Если возможно держать код для SPA и приложений в одном дереве, то как собирать отдельно для веб и для девайсов?
                    0
                    у меня такого опыта, к сожалению, нету
                      +1

                      Ну у меня просто приложение на ионик2 который внутри использует ангуляр2. И код и для SPA и для мобильных приложений один и тот же. Просто собирается под разные платформы. Очень удобно.

                        0
                        Не могу понять, каким образом код один и тот же, 1) Разве вьюхи ионик работают в вебе, там же спефичній набор контролов, как я понимаю? 2) Как собрать ионик приложение побликации в веб, там же на выходе не HTML + JS + CSS? Нет у вас в открітом доступе примера код посмотреть?
                          0

                          Там обычный HTML5. Для приложений используется Cordova.


                          У них вся документация с живыми примерами прямо на сайте — очень удобно. Можете посмотреть и исходники и результат. Так же есть примеры приложений на github. Например ionic conference app.

                    0
                    Сейчас и для angular 2 есть NativeScript http://docs.nativescript.org/angular/start/introduction.html
                      0
                      Интересно услышать мнение тех, кто пробовал и то и то.
                      +2
                      Ionic2, действительно, очень быстро развивается и имеет отличное сообщество — для личного проекта тоже решил использовать именно его.
                      Но на данный момент у фреймворка есть 2 серьезных минуса, которые вы должны знать если планируете начать разрабатывать на нем:
                      1) Еще не вышел финальный релиз, а значит надо быть готовым к корректировке кода со временем (когда в сентябре beta перешла в rc, пришлось перерабатывать большую часть кода).
                      2) Ionic2 довольно скромно смотрится в плане скорости запуска программ — 5-10 секунд для запуска это много.

                      Мой проект на ionic2 — http://medicine-live.ru/app/
                        0
                        а какие кордова-плагины ты использовал?
                          0
                          Список плагинов
                          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
                          0
                          когда в сентябре beta перешла в rc, пришлось перерабатывать большую часть кода

                          а потом они поменяли router, снова

                          Но сейчас все довольно стабильно на мой взгляд.
                            0
                            Тоже столкнулся с проблемой долгой загрузки + поддержку роутера они отключили, пока ангулар не станет стабильным.
                              0
                              This app is incompatible with all of your devices для Nexus 5. Не подскажете в чем может мыть проблема?
                              +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
                              — Grafana
                                –1
                                Почему MySQL выбрасываете?

                                sarcasm on;
                                Да, пора уж и за TDD, воистину «современность»)))
                                sarcasm off;
                                  0

                                  QA в проде, git… я уж подумал, что Германия.

                                    0

                                    Вы наверное про 1й ангуляр. Второй это совершенно другая история.

                                      0
                                      спасибо, интересная информация
                                      0

                                      Светлое будущее гибридной разработки на 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 свои приколы, конечно, но с ними можно мириться, в конце концов переписать лагающие компоненты на натив.

                                        0
                                        Я уверен, что сегодня React Native гораздо более зрелый и уже давно готов для написания production-кода.

                                        Насколько я знаю, React Native уже сейчас используется в Airbnb при написании их iOS и Android приложений. Целиком переписывать всё на RN они не стали, там у них сейчас смесь нативного кода и RN.
                                          0
                                          Считаю абсолютно правильным и логичным решением автора статьи соскочить с умирающего 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, осознавая что в данный момент получают опыт, который уже не актуален.
                                            0
                                            <hate> Как пользователь, а со вчера ещё и вынужденный разработчик приложений на ионик2 (предыдущий разработчик ниасилил а прототип нужен, потом перепишем нахтивно) от всего сердца желаю вам гореть в аду, и захватите с собой пожалуйста создателей ionic, react native и firefox os а также людей джаваскриптеров пишущих приложения для вышеобозначенных платформ, их заказчиков и маркетологов</hate>

                                            Only users with full accounts can post comments. Log in, please.