frontdays #2. Артём Лисовский, Кроссплатформенные...
TRANSCRIPT
![Page 1: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/1.jpg)
Лисовский Артем
![Page 2: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/2.jpg)
![Page 3: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/3.jpg)
Чтоэтоисчемедят
![Page 4: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/4.jpg)
![Page 5: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/5.jpg)
Область применения AngularJS. Откуда такая популярность?
• Идеален для Single Page Application (SPA) приложений («богатое» приложение, генерирующее и изменяющее большой объем DOM’а «на лету» без перезагрузки страницы)
• «Умный». Возможность директив • Код более сложный, но его в разы меньше • Никакой привязки к #id и .class для работы с элементами
![Page 6: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/6.jpg)
![Page 7: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/7.jpg)
Ionic<ion-header-barclass="bar-posi?ve">
<h1class="?tle">Haha</h1></ion-header-bar><ion-content>
<ion-list> <ion-itemng-repeat="iteminitems">
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}…];
});
![Page 8: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/8.jpg)
Ge^ngstartedInstall$sudonpminstall-gionicStartproject$ionicstarttodoblankRun&debug$ionicserve$ionicserve--labAddpladormfordeployorna?verun$ionicpladormaddios$ionicbuildios$ionicemulateios
![Page 9: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/9.jpg)
Чтовкоробке?
Стилиииконкиhmp://ionicframework.com/docs/components/
Директивыhmp://ionicframework.com/docs/api/direc?ve/ionTabs/hmp://ionicframework.com/docs/api/direc?ve/ionScroll/
![Page 10: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/10.jpg)
Кудадальше?• МодулиCordova
– Ac?onSheet– AdMob– AppAvailability– AppRate– AppVersion– Badge– BackgroundGeoloc– BameryStatus– BarcodeScanner– Calendar– Camera– Capture– Clipboard– Contacts– DatePicker– Device– DeviceMo?on
– DeviceOrienta?on– Dialogs– EmailComposer– Facebook– File– FileTransfer– FileOpener2– Flashlight– Geoloca?on– Globaliza?on– GoogleAnaly?cs– HealthKit– ImagePicker– InAppBrowser– Instagram– Keyboard– Keychain– LocalNo?fica?on– Media– Na?veAudio– Network
– OAuth– PinDialog– Preferences– Printer– ProgressIndicator– PushNo?fica?ons– SMS– SocialSharing– SpinnerDialog– Splashscreen– SQLite– StatusBar– Toast– TouchID– Vibra?on– ZIP
hmp://ngcordova.com/docs/plugins/
![Page 11: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/11.jpg)
![Page 12: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/12.jpg)
Итог:плюсы
БыстроПросто-легкаясборка-легкаяотладка
Чтоугодно,любойсложностиАвтоматическаягенерацияподлюбуюплатформуБольшоекомьюнити,многоинфы,плагиныБесплатно
![Page 13: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/13.jpg)
Проблемыwebview-based
ВозможныеразличияввёрсткеТормозаилагиНевозможностьуправлятьпамятьюитпUIнеNa?ve(аэтоглавное)hmps://www.youtube.com/watch?v=juWhxCz1Wmg
![Page 14: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/14.jpg)
Ктоещё?
EnyoJSSenchaMeteorPhoneGapOnsenUIIntelXDK
KendoUIJqueryMobileFramework7Famo.usMonacaMeteor.js…
![Page 15: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/15.jpg)
Окей.ХочуNa?ve.Какэтобудетработать?
• Пишемкоднаjs• Происходитпреобразованиеjsto<pladorm-code>
![Page 16: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/16.jpg)
Какиепроблемы?• Неultra-crosspladorm,таккак:
– укаждойплатформысвоикосяки– частонеобходимразныйкодподразныеплатформы(работасView’хамиитп)
• Нужночто-тоизучатьдополнительно• Порогвхода
![Page 17: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/17.jpg)
Ктоестькто?• Na?veSсript• TabrisJS• Appcelerator• Fuse(FuseTools)• Trigger.io• ReactNa?ve
![Page 18: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/18.jpg)
![Page 19: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/19.jpg)
Минусы• нетмногихкомпонент• маленькоекоммьюнити
![Page 20: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/20.jpg)
Tabris
![Page 21: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/21.jpg)
Appcelerator
![Page 22: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/22.jpg)
Минусы
• баги• ide–Aptana• прайс• коммьюнити
![Page 23: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/23.jpg)
![Page 24: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/24.jpg)
ReactNa?ve
Плюсы:• Facebook• коммьюнити• react
Минусы:• разныйкодподразныеплатформы
![Page 25: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/25.jpg)
кодим
![Page 26: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/26.jpg)
НЕJS
• Xamarin• unity• Coronalabs
![Page 27: FrontDays #2. Артём Лисовский, Кроссплатформенные приложения на js: от web-based к native](https://reader034.vdocuments.mx/reader034/viewer/2022042706/58775e701a28ab4e4f8b6239/html5/thumbnails/27.jpg)
Вывод
• JSкакЯПдлямобильнойразработкиэтовозможно
• возможнописатькроссплатформенныенативныеприложения
• реальнаявозможностьдляweb-разработчиков