Круто, когда ты можешь разрабатывать под Android. Ещё круче, если ты умеешь разрабатывать под iOS. Но есть такие инструменты, при помощи которых ты становишься супергероем без знаний Java, ObjC или Swift'а. Да что там! Даже Python знать тебе не обязательно. Достаточно старого-доброго JS. Сказ об инструментах кроссплатформенной разработки и об их развитии: от webview-based(cordova, phonegap, ionic) к native(reactnative, nativescript). Сравним современные фреймворки, выявим плюсы и минусы, напишем простое приложение.

1. Лисовский Артем

3. Что это и с чем едят

5. Область применения AngularJS.
Откуда такая популярность?
• Идеален для Single Page Application (SPA)
приложений («богатое» приложение, генерирующее и
изменяющее большой объем DOM’а «на лету» без
перезагрузки страницы)
• «Умный». Возможность директив
• Код более сложный, но его в разы меньше
• Никакой привязки к #id и .class для работы с
элементами

7. Ionic
<ion-header-bar class="bar-posi?ve">
<h1 class="?tle">Haha</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items">
Item {{item.id}}
</ion-item>
</ion-list>
</ion-content>
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', func?on($scope) {
$scope.items = [
{ id: 0 },
{ id: 1 },
{ id: 2 }
…
];
});

8. Ge^ng started
Install
$ sudo npm install -g ionic
Start project
$ ionic start todo blank
Run & debug
$ ionic serve
$ ionic serve --lab
Add pladorm for deploy or na?ve run
$ ionic pladorm add ios
$ ionic build ios
$ ionic emulate ios

9. Что в коробке?
Стили и иконки
hmp://ionicframework.com/docs/components/
Директивы
hmp://ionicframework.com/docs/api/direc?ve/
ionTabs/
hmp://ionicframework.com/docs/api/direc?ve/
ionScroll/

10. Куда дальше?
• Модули Cordova
– Ac?on Sheet
– AdMob
– App Availability
– App Rate
– App Version
– Badge
– Background Geoloc
– Bamery Status
– Barcode Scanner
– Calendar
– Camera
– Capture
– Clipboard
– Contacts
– Date Picker
– Device
– Device Mo?on
– Device Orienta?on
– Dialogs
– Email Composer
– Facebook
– File
– File Transfer
– FileOpener2
– Flashlight
– Geoloca?on
– Globaliza?on
– Google Analy?cs
– HealthKit
– Image Picker
– In App Browser
– Instagram
– Keyboard
– Keychain
– Local No?fica?on
– Media
– Na?ve Audio
– Network
– OAuth
– Pin Dialog
– Preferences
– Printer
– Progress Indicator
– Push No?fica?ons
– SMS
– Social Sharing
– Spinner Dialog
– Splashscreen
– SQLite
– StatusBar
– Toast
– TouchID
– Vibra?on
– ZIP
hmp://ngcordova.com/docs/plugins/

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

13. Проблемы webview-based
Возможные различия в вёрстке
Тормоза и лаги
Невозможность управлять памятью и тп
UI не Na?ve(а это главное)
hmps://www.youtube.com/watch?v=juWhxCz1Wmg

14. Кто ещё?
Enyo JS
Sencha
Meteor
PhoneGap
Onsen UI
Intel XDK
Kendo UI
Jquery Mobile
Framework 7
Famo.us
Monaca
Meteor.js
…

15. Окей. Хочу Na?ve.
Как это будет работать?
• Пишем код на js
• Происходит преобразование js to <pladorm-
code>

16. Какие проблемы?
• Не ultra-crosspladorm, так как:
– у каждой платформы свои косяки
– часто необходим разный код под разные
платформы(работа с View’хами и тп)
• Нужно что-то изучать дополнительно
• Порог входа

17. Кто есть кто?
• Na?ve Sсript
• TabrisJS
• Appcelerator
• Fuse(FuseTools)
• Trigger.io
• React Na?ve

19. Минусы
• нет многих компонент
• маленькое коммьюнити

20. Tabris

21. Appcelerator

22. Минусы
• баги
• ide – Aptana
• прайс
• коммьюнити

24. React Na?ve
Плюсы:
• Facebook
• коммьюнити
• react
Минусы:
• разный код под разные платформы

25. кодим

26. НЕ JS
• Xamarin
• unity
• Coronalabs

27. Вывод
• JS как ЯП для мобильной разработки это
возможно
• возможно писать кроссплатформенные
нативные приложения
• реальная возможность для web-
разработчиков