Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Nativescript - Front in Maceió
Márcio Vicente
March 18, 2017
Programming
0
48
Nativescript - Front in Maceió
Front in Maceió - Nativescript introduction
Márcio Vicente
March 18, 2017
Tweet
Share
More Decks by Márcio Vicente
See All by Márcio Vicente
marciovicente
0
77
Other Decks in Programming
See All in Programming
rishitdagli
0
180
saki4869
0
200
hirotokirimaru
1
440
siketyan
1
120
azdaroth
0
180
standfm
0
270
azdaroth
0
100
junmikai
0
300
shigeruoda
0
490
kenmaz
1
100
kgmyshin
1
280
nbkouhou
1
1.4k
Featured
See All Featured
hannesfritz
27
930
zenorocha
296
40k
danielanewman
1
480
smashingmag
229
18k
chrislema
231
16k
samlambert
237
9.9k
marktimemedia
6
340
holman
448
130k
62gerente
587
200k
edds
56
9.3k
jnunemaker
PRO
40
4.6k
mthomps
39
2.3k
Transcript
NativeScript Building truly native mobile apps with javascript }
} $ whoami Co-founder Software Engineer Márcio Vicente marciovicente
ARE YOU KIDDING ME? ARE YOU KIDDING ME? ARE YOU
KIDDING ME? ARE YOU KIDDING ME?
Native UX Native APIs Web Easy to learn Reuse Code
(desktop/mobile) Hybrid The problem }
What is NativeScript? "An open source framework for building truly
native mobile apps with JavaScript. Use web skills, like TypeScript, Angular and CSS, and get native UI and performance on iOS and Android"
Behind the scenes Cordova Plugins 1.7M+ Developer Community 130K+ Customers
300+ Awards
Not like Hybrid Apps There’s no DOM to manipulate or
style No WebView }
Not like React Native Unlimited API Faster }
Not like Xamarin No cross-compile No bindings required to access
native APIs }
Stack "This is your last chance. After this, there is
no turning back…”
Architecture pattern No more MVC M V VM Model View
View-Model Data logic UI Application Logic
Layout system Stack Wrap } Absolute Flexbox Dock Grid
Styling } Limited CSS properties Themes "Bootstrap" SAAS support Separated
files by platform or resolution
Plugins } Extensible
Full access to Android and iOS APIs
}
}
None
None
//main-page.xml }
}
Truly full access to Android and iOS APIs
//Accessing Native APIs }
}
TELL ME HOW TELL ME HOW TELL ME HOW TELL
ME HOW
J V M Javascript Virtual Machine JavaScriptCore V8
JVM Foo() → _Foo() C++ JNI JAVA OBJ-C
UI Components
}
}
}
Wrappers
} //Importing wrappers
Create your own NS module
} //Custom NS plugins // custom-plugins/device.ios.js module.exports = { version:
UIDevice.currentDevice().systemVersion } // custom-plugins/device.android.js module.exports = { version: Build.VERSION.RELEASE } // app.js import device from ‘./custom-plugins/device’; console.log(device.version);
Same Codebase
} //Same codebase <Button ios:text=“Submit" android:text=“Send" /> // attributes if
(page.ios) { new UiAlertDialog().show('text'); } else { new CustomJavaDialog('text'); } // from JS my-component.android.ts my-component.ios.ts // from file
There’s no silver bullet
None
} Get started $ npm install -g nativescript $
tns create my-app $ tns platform add ios $ tns run ios --emulator
Some tips • Use VS Code (+ NS extension) •
Create from template • nativescript.rocks
We’re hiring
} #obrigadoMCZ ❤