FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native
•
0 likes•294 views
Круто, когда ты можешь разрабатывать под Android. Ещё круче, если ты умеешь разрабатывать под iOS. Но есть такие инструменты, при помощи которых ты становишься супергероем без знаний Java, ObjC или Swift'а. Да что там! Даже Python знать тебе не обязательно. Достаточно старого-доброго JS. Сказ об инструментах кроссплатформенной разработки и об их развитии: от webview-based(cordova, phonegap, ionic) к native(reactnative, nativescript). Сравним современные фреймворки, выявим плюсы и минусы, напишем простое приложение.
![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 }
…
];
});](https://image.slidesharecdn.com/random-160523093852/85/FrontDays-2-js-web-based-native-7-320.jpg)
FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native
- 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 } … ]; });
- 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/
- 17. Кто есть кто? • Na?ve Sсript • TabrisJS • Appcelerator • Fuse(FuseTools) • Trigger.io • React Na?ve
- 20. Tabris
- 21. Appcelerator
- 22. Минусы • баги • ide – Aptana • прайс • коммьюнити
- 24. React Na?ve Плюсы: • Facebook • коммьюнити • react Минусы: • разный код под разные платформы
- 25. кодим
- 26. НЕ JS • Xamarin • unity • Coronalabs
- 27. Вывод • JS как ЯП для мобильной разработки это возможно • возможно писать кроссплатформенные нативные приложения • реальная возможность для web- разработчиков