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
93
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
98
Other Decks in Programming
See All in Programming
Learning PHP and Static Analysis with PHP Parser
inouehi
1
220
Static Analysis Automation for Hunting Vulnerable Kernel Drivers
takahiro_haruyama
1
1.4k
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
700
ログラスの継続的なプロンプト改善のためのLLMOpsの今 / LLMOps at loglass now
rkaga
PRO
1
330
25 Years of the JCP Program
ivargrimstad
0
1k
軽率にVue 3で リアルタイム3Dアプリを作れる ライブラリを作ってみた/vue-with-3d-app
drumath2237
3
1.1k
sbt-assemblyにハマってDB接続できず時間が溶けた話
wakye5815
1
660
Reckoner の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
820
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
0
610
document.write再考
brn
5
1.9k
BuefyのMaintainerを引き継いだ件
kikuomax
0
360
Learning Ruby
okuramasafumi
5
370
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
What the flash - Photography Introduction
edds
64
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.4k
A Philosophy of Restraint
colly
195
15k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Code Reviewing Like a Champion
maltzj
512
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
4
1.4k
Side Projects
sachag
451
41k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
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 ❤