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
78
Other Decks in Programming
See All in Programming
makomakok
1
250
afilina
PRO
0
150
legalforce
PRO
0
630
heistak
2
130
grapecity_dev
0
180
williln
0
230
nkjzm
1
170
sters
2
140
lovee
9
2.9k
maito1201
0
140
voyage_tech
0
110
panini
1
160
Featured
See All Featured
colly
66
3k
chriscoyier
145
20k
tenderlove
53
3.5k
mongodb
23
3.9k
danielanewman
1
520
tmm1
61
9.3k
vanstee
117
4.9k
garrettdimon
288
110k
bkeepers
321
53k
destraynor
146
19k
lara
172
9.6k
wjessup
339
16k
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 ❤