webcamp 2016: front-end. Виталий Бобров: javascript для мобильной...

36

Upload: webcamp

Post on 13-Apr-2017

91 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки
Page 2: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки
Page 3: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Vitaliy BobrovFront-end Developer @Provectus

@bobrov1989

Page 4: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Overview

• What we can call “native” app?• Ionic Framework• NativeScript• ReactNative• What to choose?

Page 5: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

“Native” app criteria

• Installed from store• Platform specific code• Consistent UI/UX• Hardware access• Responsibility (performant feel)

Page 6: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

What is “Native” code?

“Native code is computer programming that is compiled to run with a processor

and its set of instructions”

Wikipedia

Page 9: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

JavaScript Front-end

Page 10: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

JavaScript Back-end

Page 11: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

JavaScript IoT

Page 12: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

It’s everywhere and it’s so cool

Page 13: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Ionic Framework

“Write once, run everywhere”

Ionic Framework

Page 14: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Ionic Technologies

Ionic Framework

• Cordova• WebView• Angular• Crosswalk (optional)

Page 15: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

“Old good” web

• HTML• CSS• JavaScript

Page 17: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Two large communities

Ionic Forum

• Cordova Community• Ionic Community

Page 18: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Tools and services

• Ionic Native• Ionic View• Ionic Cloud• Ionic CLI• Ionic Lab• Ionic Market

Page 19: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

NativeScript

NativeScript

“Get full access to native”

Page 20: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

NativeScript Technologies

NativeScript

• V8 JavaScript VM• Native UI• Native API• Angular

Page 21: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Native UI

NativeScript Docs

• Consistent UX• Performant• Customizable

Page 23: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Reflection

NativeScript Runtime

All native call accessible in JavaScript global scope

Page 24: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

React Native

React Native

“Learn once, write anywhere”

Page 25: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

React Native Technologies

React Native

• V8 JavaScript VM• Native UI• Native Plugins• React

Page 26: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Reactive native UI

React Native Docs

• Flux/Redux• Performant• Flexbox

Page 27: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Hot Reloading

React Native Hot Reload

Easy to develop and debugCode updates on device/emulator without

code compilation

Page 29: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

For what it can fit?

• eCommerce• Events• News• Messenger

Page 30: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

So what to choose?

Page 31: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Choose Ionic when:

• Not only iOS & Android• Custom non-standard design• No hard calculations• Angular experience

Page 32: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Choose NativeScript when:

• Lot native API usage• Standard UI• Native performance• Angular experience

Page 33: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Choose React Native when:

• Fast learning & development• Standard UI• Native performance• React experience

Page 34: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Choose that fits best

“Each objective its tools”

Page 35: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

The End

Make Love Open Source, not War

Page 36: WebCamp 2016: Front-end. Виталий Бобров: JavaScript для мобильной разработки

Thank you!

Questions?