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

Vitaliy BobrovFront-end Developer @Provectus

@bobrov1989

Overview

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

“Native” app criteria

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

What is “Native” code?

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

and its set of instructions”

Wikipedia

Android architecture

ELinux

Why JavaScript?

RedMonk

JavaScript Front-end

JavaScript Back-end

JavaScript IoT

It’s everywhere and it’s so cool

Ionic Framework

“Write once, run everywhere”

Ionic Framework

Ionic Technologies

Ionic Framework

• Cordova• WebView• Angular• Crosswalk (optional)

“Old good” web

• HTML• CSS• JavaScript

Well documented

Ionic 2 Docs

Two large communities

Ionic Forum

• Cordova Community• Ionic Community

Tools and services

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

NativeScript

NativeScript

“Get full access to native”

NativeScript Technologies

NativeScript

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

Native UI

NativeScript Docs

• Consistent UX• Performant• Customizable

Native type conversion

NativeScript Native API

Access to native data types

Reflection

NativeScript Runtime

All native call accessible in JavaScript global scope

React Native

React Native

“Learn once, write anywhere”

React Native Technologies

React Native

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

Reactive native UI

React Native Docs

• Flux/Redux• Performant• Flexbox

Hot Reloading

React Native Hot Reload

Easy to develop and debugCode updates on device/emulator without

code compilation

Huge community and resources

React Native Facebook examples

For what it can fit?

• eCommerce• Events• News• Messenger

So what to choose?

Choose Ionic when:

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

Choose NativeScript when:

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

Choose React Native when:

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

Choose that fits best

“Each objective its tools”

The End

Make Love Open Source, not War

Thank you!

Questions?