Комплексное предложение Microsoft для образования (Алексей Бобров)
WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной...
-
Upload
webcamp -
Category
Technology
-
view
94 -
download
1
Transcript of WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной...
![Page 1: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/1.jpg)
![Page 2: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/2.jpg)
![Page 3: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/3.jpg)
Vitaliy BobrovFront-end Developer @Provectus
@bobrov1989
![Page 4: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/4.jpg)
Overview
• What we can call “native” app?• Ionic Framework• NativeScript• ReactNative• What to choose?
![Page 5: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/5.jpg)
“Native” app criteria
• Installed from store• Platform specific code• Consistent UI/UX• Hardware access• Responsibility (performant feel)
![Page 6: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/6.jpg)
What is “Native” code?
“Native code is computer programming that is compiled to run with a processor
and its set of instructions”
Wikipedia
![Page 7: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/7.jpg)
Android architecture
ELinux
![Page 9: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/9.jpg)
JavaScript Front-end
![Page 10: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/10.jpg)
JavaScript Back-end
![Page 11: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/11.jpg)
JavaScript IoT
![Page 12: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/12.jpg)
It’s everywhere and it’s so cool
![Page 13: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/13.jpg)
Ionic Framework
“Write once, run everywhere”
Ionic Framework
![Page 14: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/14.jpg)
Ionic Technologies
Ionic Framework
• Cordova• WebView• Angular• Crosswalk (optional)
![Page 15: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/15.jpg)
“Old good” web
• HTML• CSS• JavaScript
![Page 17: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/17.jpg)
Two large communities
Ionic Forum
• Cordova Community• Ionic Community
![Page 18: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/18.jpg)
Tools and services
• Ionic Native• Ionic View• Ionic Cloud• Ionic CLI• Ionic Lab• Ionic Market
![Page 19: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/19.jpg)
NativeScript
NativeScript
“Get full access to native”
![Page 20: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/20.jpg)
NativeScript Technologies
NativeScript
• V8 JavaScript VM• Native UI• Native API• Angular
![Page 21: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/21.jpg)
Native UI
NativeScript Docs
• Consistent UX• Performant• Customizable
![Page 22: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/22.jpg)
Native type conversion
NativeScript Native API
Access to native data types
![Page 23: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/23.jpg)
Reflection
NativeScript Runtime
All native call accessible in JavaScript global scope
![Page 24: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/24.jpg)
React Native
React Native
“Learn once, write anywhere”
![Page 25: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/25.jpg)
React Native Technologies
React Native
• V8 JavaScript VM• Native UI• Native Plugins• React
![Page 26: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/26.jpg)
Reactive native UI
React Native Docs
• Flux/Redux• Performant• Flexbox
![Page 27: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/27.jpg)
Hot Reloading
React Native Hot Reload
Easy to develop and debugCode updates on device/emulator without
code compilation
![Page 28: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/28.jpg)
Huge community and resources
React Native Facebook examples
![Page 29: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/29.jpg)
For what it can fit?
• eCommerce• Events• News• Messenger
![Page 30: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/30.jpg)
So what to choose?
![Page 31: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/31.jpg)
Choose Ionic when:
• Not only iOS & Android• Custom non-standard design• No hard calculations• Angular experience
![Page 32: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/32.jpg)
Choose NativeScript when:
• Lot native API usage• Standard UI• Native performance• Angular experience
![Page 33: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/33.jpg)
Choose React Native when:
• Fast learning & development• Standard UI• Native performance• React experience
![Page 34: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/34.jpg)
Choose that fits best
“Each objective its tools”
![Page 35: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/35.jpg)
The End
Make Love Open Source, not War
![Page 36: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки.](https://reader031.fdocuments.net/reader031/viewer/2022021814/58ee6f7f1a28abb65e8b4625/html5/thumbnails/36.jpg)
Thank you!
Questions?