SlideShare a Scribd company logo
1 of 18
Prototyping Mobile
Apps
Build great apps with NativeScript and Angular!
Mike & Nick Branstein
@mikebranstein | @nickbranstein
nativescript.org/book
https://brosteins.com
@brosteins
http://kizan.com
Agenda
• Today’s Rules
• Intro to NativeScript & why it’s
different
• Workshop – Ch. 0 & 1
• Intro to Angular
• Workshop – Ch. 2 - 6
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.
NativeScript is…
Created and supported by Telerik
Innovative and Stable
- Strong backing by Progress and Telerik
- Open source, with Apache 2.0
- Paid support offering
- Advanced tooling = greater productivity
- Easy to learn, with various options: Core, Angular, Vue
- Large collection of libraries: NodeJS, Plugins site, Use CocoaPods
- Near-native performance…because it’s Native UI
- Telerik’s NativeScript Premium UI Controls for free
- Sidekick & Playground – Get Started Fast – no installs!
The {N} difference…
Search for
“Examples NativeScript”
in the iOS App Store or Google
Play to try this out for yourself.
Rich, animated,
“no compromise”
native UI
(with shared UI code)
1
Maximum code
and skill
reusability
2
Video credit: Nathan Walker, {N} community member
100% access to
Android and
iOS APIs
3
Runs on V8 JavaScript VM
Runs on JavaScriptCore VM
More details at http://bit.ly/how-nativescript-works
Example: NativeScript file module
The same approach works for the UI
NativeScript Modules—There are a lot
NativeScript Plugins
Repository
https://github.com/mikebranstein/nativescript-spacex-workshop-
instructions

More Related Content

What's hot

Rethinking Mobile with Ionic
Rethinking Mobile with IonicRethinking Mobile with Ionic
Rethinking Mobile with Ionic
Mike Hartington
 
Mobile web in eZ Publish
Mobile web in eZ PublishMobile web in eZ Publish
Mobile web in eZ Publish
Igor Vrdoljak
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
Troy Miles
 

What's hot (20)

React Native
React NativeReact Native
React Native
 
Introduction to NativeScript - BuildTruly Native Apps using JavaScript
Introduction to NativeScript - BuildTruly Native Apps using JavaScriptIntroduction to NativeScript - BuildTruly Native Apps using JavaScript
Introduction to NativeScript - BuildTruly Native Apps using JavaScript
 
Introduction to Rhodes - By Surendran - Spritle software
Introduction to Rhodes - By Surendran - Spritle softwareIntroduction to Rhodes - By Surendran - Spritle software
Introduction to Rhodes - By Surendran - Spritle software
 
Icinga Camp Berlin 2017 - Welcome & State of Icinga
Icinga Camp Berlin 2017 - Welcome & State of IcingaIcinga Camp Berlin 2017 - Welcome & State of Icinga
Icinga Camp Berlin 2017 - Welcome & State of Icinga
 
Nativescript
NativescriptNativescript
Nativescript
 
Cordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ CodeaholicsCordova, Angularjs & Ionic @ Codeaholics
Cordova, Angularjs & Ionic @ Codeaholics
 
Intro to ionic 2
Intro to ionic 2Intro to ionic 2
Intro to ionic 2
 
Rethinking Mobile with Ionic
Rethinking Mobile with IonicRethinking Mobile with Ionic
Rethinking Mobile with Ionic
 
Intro to Raspberry Pi - by Sivakumar V
Intro to Raspberry Pi - by Sivakumar VIntro to Raspberry Pi - by Sivakumar V
Intro to Raspberry Pi - by Sivakumar V
 
Cross platform mobile apps using rhomobile and jquery mobile
Cross platform mobile apps using rhomobile and jquery mobileCross platform mobile apps using rhomobile and jquery mobile
Cross platform mobile apps using rhomobile and jquery mobile
 
Container on Windows, not windows containers Docker meetup Melbourne
Container on Windows, not windows containers  Docker meetup MelbourneContainer on Windows, not windows containers  Docker meetup Melbourne
Container on Windows, not windows containers Docker meetup Melbourne
 
Mobile web in eZ Publish
Mobile web in eZ PublishMobile web in eZ Publish
Mobile web in eZ Publish
 
Mobile applications in a new way with React Native
Mobile applications in a new way with React NativeMobile applications in a new way with React Native
Mobile applications in a new way with React Native
 
Intro to Amplifyjs by Visnupriya
Intro to Amplifyjs by VisnupriyaIntro to Amplifyjs by Visnupriya
Intro to Amplifyjs by Visnupriya
 
Arduino for developers by Steve Robinson
Arduino for developers by Steve RobinsonArduino for developers by Steve Robinson
Arduino for developers by Steve Robinson
 
Develop Your CMS In Your CMS
Develop Your CMS In Your CMSDevelop Your CMS In Your CMS
Develop Your CMS In Your CMS
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework
 

Similar to Prototyping Mobile Apps with NativeScript and Angular

UCCSC 2016
UCCSC 2016UCCSC 2016
UCCSC 2016
Alex Wu
 
ChrisSchilling_SideProjects
ChrisSchilling_SideProjectsChrisSchilling_SideProjects
ChrisSchilling_SideProjects
Chris Schilling
 

Similar to Prototyping Mobile Apps with NativeScript and Angular (20)

ng-conf NativeScript and Angular 2 Workshop
ng-conf NativeScript and Angular 2 Workshopng-conf NativeScript and Angular 2 Workshop
ng-conf NativeScript and Angular 2 Workshop
 
I knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile appsI knew there had to be a better way to build mobile apps
I knew there had to be a better way to build mobile apps
 
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016
 
Building iOS app using meteor
Building iOS app using meteorBuilding iOS app using meteor
Building iOS app using meteor
 
Ionic and Azure
Ionic and AzureIonic and Azure
Ionic and Azure
 
The Wikitude SDK and the Wikitude Studio
The Wikitude SDK and the Wikitude StudioThe Wikitude SDK and the Wikitude Studio
The Wikitude SDK and the Wikitude Studio
 
UCCSC 2016
UCCSC 2016UCCSC 2016
UCCSC 2016
 
Titanium @ Minnebar
Titanium @ MinnebarTitanium @ Minnebar
Titanium @ Minnebar
 
«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​«I knew there had to be a better way to build mobile app»​
«I knew there had to be a better way to build mobile app»​
 
Building mobile apps using meteorJS
Building mobile apps using meteorJSBuilding mobile apps using meteorJS
Building mobile apps using meteorJS
 
Hybrid app development with ionic
Hybrid app development with ionicHybrid app development with ionic
Hybrid app development with ionic
 
Experiences building apps with React Native @UtrechtJS May 2016
Experiences building apps with React Native @UtrechtJS May 2016Experiences building apps with React Native @UtrechtJS May 2016
Experiences building apps with React Native @UtrechtJS May 2016
 
React Native - Framework For Mobile App (Seminar)
React Native - Framework For Mobile App (Seminar)React Native - Framework For Mobile App (Seminar)
React Native - Framework For Mobile App (Seminar)
 
Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016Experiences building apps with React Native @DomCode 2016
Experiences building apps with React Native @DomCode 2016
 
Hybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJSHybrid vs. Native app - Ionic Framework with AngularJS
Hybrid vs. Native app - Ionic Framework with AngularJS
 
Why and When Enterprise Should Adopt NativeScript for App Development
Why and When Enterprise Should Adopt NativeScript for App DevelopmentWhy and When Enterprise Should Adopt NativeScript for App Development
Why and When Enterprise Should Adopt NativeScript for App Development
 
How native script angular helps to build truly native mobile applications
How native script angular helps to build truly native mobile applicationsHow native script angular helps to build truly native mobile applications
How native script angular helps to build truly native mobile applications
 
ChrisSchilling_SideProjects
ChrisSchilling_SideProjectsChrisSchilling_SideProjects
ChrisSchilling_SideProjects
 
Ionic framework
Ionic frameworkIonic framework
Ionic framework
 
Hybrid app development frameworks
Hybrid app development frameworksHybrid app development frameworks
Hybrid app development frameworks
 

More from Mike Branstein

More from Mike Branstein (11)

Inspire 2017 - Data Community Insiders - Acceleration of IoT
Inspire 2017 - Data Community Insiders - Acceleration of IoTInspire 2017 - Data Community Insiders - Acceleration of IoT
Inspire 2017 - Data Community Insiders - Acceleration of IoT
 
Code PaLOUsa Azure IoT Workshop
Code PaLOUsa Azure IoT WorkshopCode PaLOUsa Azure IoT Workshop
Code PaLOUsa Azure IoT Workshop
 
KiZAN IoT Workshop - Memphis
KiZAN IoT Workshop - MemphisKiZAN IoT Workshop - Memphis
KiZAN IoT Workshop - Memphis
 
Stream Data into the Cloud with Raspberry Pi and Windows 10 IoT Core
Stream Data into the Cloud with Raspberry Pi and Windows 10 IoT CoreStream Data into the Cloud with Raspberry Pi and Windows 10 IoT Core
Stream Data into the Cloud with Raspberry Pi and Windows 10 IoT Core
 
IoT Workshop Chicago
IoT Workshop ChicagoIoT Workshop Chicago
IoT Workshop Chicago
 
IoT Workshop - Waukesha
IoT Workshop - WaukeshaIoT Workshop - Waukesha
IoT Workshop - Waukesha
 
IoT Workshop Indianapolis
IoT Workshop IndianapolisIoT Workshop Indianapolis
IoT Workshop Indianapolis
 
IoT Workshop Cincinnati
IoT Workshop CincinnatiIoT Workshop Cincinnati
IoT Workshop Cincinnati
 
IoT Workshop Nashville
IoT Workshop NashvilleIoT Workshop Nashville
IoT Workshop Nashville
 
IoT Workshop Louisville
IoT Workshop LouisvilleIoT Workshop Louisville
IoT Workshop Louisville
 
Iot Workshop Columbus
Iot Workshop ColumbusIot Workshop Columbus
Iot Workshop Columbus
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

Prototyping Mobile Apps with NativeScript and Angular

Editor's Notes

  1. Rules: I need your help – volunteer to help me keep track of how many apps we create I’m going to move fast – really fast, but I think you can keep up
  2. I want to call out a few things about what NativeScript is an what it is not. You can build mobile apps with: JavaScript, markup, and CSS Similar to hybrid apps in that you can use Angular 2, CSS, skills to write apps You get native performance, because you’re running native code Not in a web view Native discussion Before we go any further, OK, what I want you to come away with today is that there are options. A lot of options for mobile development. Native, Phone Gap/Cordova, Xamarin, and NativeScript. This talk isn’t about saying that NativeScript is the best choice for every app, because you can write great apps in all of these technologies. But this is a compelling technology.
  3. I mention this because, in today’s world, where you have a multitude of options, constantly evolving, it’s important to pick an innovative and stable options.
  4. I mention this because, in today’s world, where you have a multitude of options, constantly evolving, it’s important to pick an innovative and stable options. Stable Strong backing by Progress and Telerik – you’ll recognize Telerik from the UI component space with Kendo UI or their UI Controls for Angular. Open source, and with Apache 2.0 licensing Paid support offering Advanced tooling: VS Code integration, Chrome Debugger Tools integration, NativeScript Sidekick app, CLI, NativeScript Playground, Kinvey It’s easy to learn – I learned the basics of {N} in 2 hours, then wrote my first app in another 2 hours B/c it’s JavaScript, there’s already an ecosystem Near-native performance Premium UI components make it easy to develop great apps quickly
  5. How? Let’s talk about 3 reasons why NativeScript is different.
  6. One. You have access to native UI components on iOS and Android, with native performance, with shared UI code. You write markup, this is directly transposed to native UI elements and rendered. Head to the Android and iOS stores to get a copy of this app and see for yourself – search for “Examples NativeScript”
  7. Two Do you currently use npm, CocoaPods, Android Arsenal? You can use that with {N}. Here’s the same app, running in-browser, on Android, and on iOS. Same code, 3 platforms.
  8. Three dot One This is where it gets really cool: this is the iOS API but it’s not written with Objective-C – it’s really JavaScript using the iOS API
  9. Three dot Two Here’s how it works: You access the native apis directly from JavaScript Your app runs in a JavaScript VM V8 on Android, JavaScriptCode on iOS When the app runs, the VM marshals the API calls directly down to the native API, running in real-time
  10. That’s ok.
  11. There is a set of core modules that abstract these things away for you, so you have a unified experience across the platforms, BUT if you really need to access Objective C and Java directly, that capability is always there.
  12. The XML markup you use for a UI is actually instantiates the JavaScript objects, which get mapped back to native API objects.
  13. When the core modules of NativeScript aren’t good enough, there are 100’s of plugins built by Telerik and the community available. They’re free, and the NativeScript team works to ensure they’re reliable and high-quality.