A presentation at Mobilization7 in in Łódź, Poland by Rowdy Rabouw
AWESOME NATIVE APPS WITH
NATIVESCRIPT AND ANGULAR!
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 SENIOR SOFTWARE ENGINEER NATIONALE-NEDERLANDEN FREELANCE WEB AND APP DEVELOPER DOUBLE-R WEBDEVELOPMENT CURATOR NATIVESCRIPT.NL TELERIK DEVELOPER EXPERT FOR NATIVESCRIPT ROWDY RABOUW
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT OPEN SOURCE FRAMEWORK FOR BUILDING TRULY NATIVE MOBILE APPS WITH JAVASCRIPT AND NATIVE CODE IF YOU WANT TOGETHER WITH MARKUP (XML/HTML) AND CSS CROSS PLATFORM : ONE CODEBASE FOR IOS AND ANDROID
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NOT PHONEGAP OR IONIC • NO DOM TO MANIPULATE • NOT HTML ELEMENTS STYLED LIKE NATIVE COMPONENTS
• REAL NATIVE COMPONENTS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NOT REACT NATIVE • NO WRITING OBJECTIVEC, SWIFT OR JAVA • {N} JAVASCRIPT HAS 100% ACCESS TO NATIVE APIS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NOT XAMARIN • NO CROSS COMPILING • 100% ACCESS TO NATIVE APIS WITHOUT WRITING BINDINGS • NO .NET OR C#
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 JAVASCRIPT
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 ANGULAR 2 • OPINIONATED JAVASCRIPT FRAMEWORK
•
OBJECT ORIENTED
•
CLASSES
•
TYPESCRIPT
•
FULL-FEATURED ROUTING
• DEPENDENCY INJECTION
• DATA BINDING • DOCUMENTATION • COMMUNITY
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 HOW DOES NATIVESCRIPT WORK? APPLICATION CODE NATIVESCRIPT MODULES NATIVESCRIPT RUNTIME ANDROID IOS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT HISTORY JUNE 2014: NATIVESCRIPT IS ANNOUNCED BY TELERIK MAY 2015: VERSION 1.0 LAUNCHED MAY 2016: VERSION 2.0 LAUNCHED (TIGHT ANGULAR 2 INTEGRATION ) MAY 2017: VERSION 3.0 LAUNCHED DECEMBER 2014: TELERIK IS ACQUIRED BY PROGRESS SOFTWARE
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NPM
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NODE PACKAGE MANAGER LOTS OF PREBUILT CODE OVER 530.000 NPM PACKAGES ANDROID ARSENAL COCOAPODS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 HOW TO START? INSTALL NODE.JS INSTALL IOS AND ANDROID REQUIREMENTS (SCRIPT)
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https:// www.nativescript.org/setup/win'))"
ruby -e "$(curl -fsSL https://www.nativescript.org/setup/mac)"
npm install -g nativescript INSTALL N ATIVESCRIPT CLI tns doctor VERIFY THE SETUP
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT CLI
tns create HelloWorld --ng CREATING APPS
cd HelloWorld
tns run ios tns run android RUNNING APPS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 LAYOUTS & NATIVE ELEMENTS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 MARKUP < ActionBar
"Mobilization7"
</ ActionBar
< StackLayout
< Label
"Hello Ł ÓD Ź "
</ Label
</ StackLayout
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 CSS Actionbar {
background-color : yellow ; } Stacklayout {
padding : 40 ;
text-align : center ; } Label {
font-size : 20 ;
color : red ; }
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 STACKLAYOUT < StackLayout
"horizontal"
< Label
"1"
</ Label
< Label
"2"
</ Label
< Label
"3"
</ Label
< Label
"4"
</ Label
</ StackLayout
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 ABSOLUTELAYOUT < AbsoluteLayout
< Label
"40"
"30"
</ Label
< Label
"70"
"80"
</ Label
</ AbsoluteLayout
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 DOCKLAYOUT < DockLayout
"true"
< Label
"top"
</ Label
< Label
"bottom"
</ Label
< Label
"right"
</ Label
< Label
"left"
</ Label
</ DockLayout
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 GRIDLAYOUT < GridLayou t
"100, auto, *"
"100, auto, *"
< Label
"1"
"0"
"0"
</ Label
< Label
"2"
"0"
"1"
"2"
</ Label
< Label
"3"
"1"
"0"
"2"
</ Label
< Label
"4"
"1"
"1"
</ Label
< Label
"5"
"1"
"2"
</ Label
< Label
"6"
"2"
"1"
</ Label
< Label
"7"
"2"
"2"
</ Label
</ GridLayout
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 WRAPLAYOUT < WrapLayout
"vertical"
< Label
"1"
</ Label
< Label
"2"
</ Label
< Label
"3"
</ Label
< Label
"4"
</ Label
</ WrapLayout
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 FLEXBOXLAYOUT < FlexboxLayout
"row-reverse"
< Label
"1"
"1"
</ Label
< Label
"2"
"2"
</ Label
< Label
"3"
"3"
</ Label
< Label
"4"
"4"
</ Label
< Label
"5"
"5"
</ Label
< Label
"6"
"6"
</ Label
</ FlexboxLayout
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 LIVE CODING ! LAYOUTS & NATIVE ELEMENTS & NATIVE CODE
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 MULTILINGUAL
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NGX-TRANSLATE IS AN INTERNATIONALIZATION LIBRARY FOR ANGULAR 2+
DEFINE TRANSLATIONS FOR YOUR CONTENT IN DIFFERENT LANGUAGES
AND SWITCH BETWEEN THEM EASILY MULTILINGUAL
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 MULTILINGUAL {
"HOME" : {
"TITLE" : "Mobilization7" ,
"TAGLINE" : "Whoever wins... we win!"
},
"SLIDERS" : {
"TITLE" : "Sliders" ,
"HEADER" : "Default Slider" ,
"HEADER_CUSTOM" : "Custom iOS Slider"
},
"VIDEO" : {
"TITLE" : "Video"
},
"SOUNDBOARD" : {
"TITLE" : "Soundboard"
}
}
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 MULTILINGUAL < StackLayout
< Label [ text ]= "'HOME.TAGLINE' | translate"
</ Label
</ StackLayout
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 LIVE CODING ! MULTILINGUAL
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 PLUGINS
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT VIDEO PLAYER PLUGINS • ANDROID: MEDIAPLAYER • IOS: AVPLAYER < VideoPlayer
"[source]"
"true"
"300"
/> TNS PLUGIN ADD NATIVESCRIPT-VIDEOPLAYER
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 DEMO " NATIVESCRIPT VIDEO PLAYER
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT TEXT TO SPEECH PLUGINS • ANDROID: TEXTTOSPEECH
• IOS: AVSPEECHSYNTHESIZER let
new
TNSTextToSpeech ();
let
speakOptions : SpeakOptions = {
text:
'Hello world!' ,
speakRate:
0.5 , // optional - default is 1.0
pitch:
1.0 , // optional - default is 1.0
volume:
1.0 , // optional - default is 1.0
locale:
"en-GB"
,
// optional - default is system locale,
}
TTS . speak ( speakOptions ); TNS PLUGIN ADD NATIVESCRIPT-TEXTTOSPEECH
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 DEMO
NATIVESCRIPT TEXT TO SPEECH
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT AUDIO PLUGINS • ANDROID: MEDIAPLAYER / MEDIARECORDER
new
TNSPlayer ();
this . _player . initFromFile ({
audioFile:
“[source]" ,
loop:
false
});
this . _player . play (); TNS PLUGIN ADD NATIVESCRIPT-AUDIO
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 DEMO $ NATIVESCRIPT AUDIO
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT FINGERPRINT AUTHENTICATION PLUGINS doVerifyFingerprint (): void {
this . fingerprintAuth
.
verifyFingerprint ({
message:
"Scan your finger"
// optional
})
.
then (
()
=> { alert ({ title:
"Fingerprint / passcode OK" }) },
()
=> { alert ({ title:
"Fingerprint NOT OK / canceled" }) }
);
} • ALSO WORKS WITH FACE ID ON IPHONE X TNS PLUGIN ADD NATIVESCRIPT-FINGERPRINT-AUTH
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 DEMO % NATIVESCRIPT FINGERPRINT AUTHENTICATION
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT SPEECH RECOGNITION PLUGINS • ANDROID: SPEECHRECOGNIZER • IOS: SFSPEECHRECOGNIZER this . speechRecognition
. startListening ({
locale:
"en-US" ,
returnPartialResults:
true ,
onResult: ( transcription : SpeechRecognitionTranscription ) => {
transcription . text ));
}
}) TNS PLUGIN ADD NATIVESCRIPT-SPEECH-RECOGNITION
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 DEMO & NATIVESCRIPT SPEECH RECOGNITION
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 ALIEN ³
(1969)
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT BLUETOOTH LOW ENERGY PLUGINS TNS PLUGIN ADD NATIVESCRIPT-MIP-BLE
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 DEMO ' NATIVESCRIPT BLUETOOTH LOW ENERGY
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 RESOURCES
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 FREE NATIVESCRIPT BOOK
450 PAGES, 17 CHAPTERS, AND TONS OF CODE SAMPLES RESOURCES WRITTEN BY NATIVESCRIPT EXPERTS MIKE BRANSTEIN AND NICK BRANSTEIN
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT.NL
RESOURCES COURSES, TOOLS AND TIPS TO HELP YOU CODE AWESOME APPS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT MARKETPLACE
RESOURCES HIGH QUALITY PLUGINS, TEMPLATES AND TOOLS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT AIR
RESOURCES • IMPROVING PERFORMANCE OF A NATIVESCRIPT APP WITH STANIMIRA VLAEVA
• LAYOUTING A NATIVESCRIPT APP WITH BRAD MARTIN
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT ANGULAR BOOK
200 PAGES RESOURCES WRITTEN BY NATIVESCRIPT EXPERTS NATHAN WALKER AND NATHANAEL ANDERSON
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT PLAYGROUND
RESOURCES QUICKLY AND EASILY TEST YOUR NATIVESCRIPT CODE
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT THEME BUILDER
RESOURCES LOAD AND EDIT CUSTOM COLOR SCHEMES FOR NATIVESCRIPT
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT SIDEKICK
RESOURCES RICH STARTER TEMPLATES, VERIFIED PLUGINS, CLOUD BUILDS, AND DEBUGGING
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT DOCS
RESOURCES NATIVESCRIPT CORE NATIVESCRIPT WITH ANGULAR API REFERENCE NATIVESCRIPT SIDEKICK NATIVESCRIPT FORUM NATIVESCRIPT SLACK CHANNEL VISUAL STUDIO CODE PLUGIN
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 STANDARDS • ENTRY LEVEL 15” MACBOOK PRO (INTEL I7 PROCESSOR AND 16GB RAM) @ROWDYRABOUW
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR! MOBILIZATION 7 STANDARDS • ENTRY LEVEL 15” MACBOOK PRO (INTEL I7 PROCESSOR AND 16GB RAM) @ROWDYRABOUW DZI Ę KUJ Ę CI BARDZO
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-BARCODESCANNER
EDDY VERBRUGGEN (BULK)SCAN QR OR BARCODES PLUGINS NATIVESCRIPT- TOAST TOBIAS HENNIG
CONTRIBUTIONS BY EDDY VERBRUGGEN FEEDBACK IN A SMALL POPUP
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-APPVERSION
EDDY VERBRUGGEN RETRIEVE YOUR APP'S PACKAGE ID AND CURRENT VERSION
PLUGINS
@ROWDYRABOUW AWESOME NATIVE APPS WITH NATIVESCRIPT AND ANGULAR!
MOBILIZATION 7 NATIVESCRIPT-EMAIL
EDDY VERBRUGGEN CREATING DRAFT E-MAILS
PLUGINS
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-PLUGIN-FIREBASE
EDDY VERBRUGGEN ANALYTICS PLUGINS
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-TELERIK-UI
PROGRESS LISTVIEW AND SIDEDRAWER PLUGINS
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 NATIVESCRIPT-IQKEYBOARDMANAGER
TJ VANTOLL
CONTRIBUTIONS BY EDDY VERBRUGGEN WRAPPER FOR THE POPULAR IQKEYBOARDMANAGER IOS FRAMEWORK PLUGINS
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 CRYPTO-JS
EVAN VOSBERG
CRYPTOGRAPHY STANDARDS PLUGINS
@ROWDYRABOUW CASE STUDY NATIONALE-NEDERLANDEN NATIVESCRIPT DEVELOPER DAY EUROPE 2017 LODASH
LODASH
TAKING THE HASSLE OUT OF WORKING WITH ARRAYS, OBJECTS, STRINGS, ETC PLUGINS
Developing native iOS and Android apps can be very time consuming and expensive. What if you could build native apps with one code base and web techniques? Well, you can with NativeScript! In this introduction, I’ll explain what NativeScript is and how it compares to other platforms. And in a live demo, I will show you how easy it is to get started and to make use of native capabilities.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.