Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nativescript - Front in Maceió
Search
Márcio Vicente
March 18, 2017
Programming
0
94
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
Nativescript - Building truly native apps with Javascript
marciovicente
0
100
Other Decks in Programming
See All in Programming
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
990
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
3
300
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
200
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.1k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
ゆるい個人開発のススメ
kuroppe1819
10
1k
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
2 週間で Twitter Bot を作ってみた
contour_gara
0
710
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
400
AmperとFleetを使ったAndroidアプリ
yoppie
0
240
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Thoughts on Productivity
jonyablonski
59
3.8k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Unsuck your backbone
ammeep
663
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
The Language of Interfaces
destraynor
151
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
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 ❤