From CodeStock 2017: Your web development skills can be used to build more than web apps. You can leverage the skills and tools you are already familiar with to build mobile applications with Visual Studio Tools for Apache Cordova. In this talk, you will learn how to take your existing knowledge of HTML, CSS, and JavaScript, and create mobile applications without leaving the comfort of Visual Studio. You will learn the basics of Visual Studio Tools for Apache Cordova, and you will see how "VS TACO" makes the impossible possible as we connect an iOS device a Windows PC, then deploy, run, and debug that app from within Visual Studio.

1. Building Mobile Apps
with Visual Studio Tools
for Apache Cordova
Matt Honeycutt
@matthoneycutt
http://trycatchfail.com
Icon from icons8.com

2. About Me
Icon from icons8.com

3. WARNING: DRAGONS AHEAD!

5. Story Time!

6. Story Time!

7. Story Time!

8. The Problem
People who know
HTML, CSS, JavaScript,
and .NET
People who know,
Xcode, Swift, Java…
Our
Team

9. The Problem

10. Possible Solutions
Go Native
• Learn new
languages and
tooling
• Write the app
twice
Xamarin
• Another new
thing to learn
• Uses XAML
???
• Uses our
existing skills
• Uses tools we
already know

11. Standardized API
Creates native
application
wrappers
Enables the
equation:
HTML + CSS + JS =
mobile app
Cordova

12. Under the Hood
Source: https://cordova.apache.org/docs/en/latest/guide/overview/index.html

13. Under the Hood
Source: https://cordova.apache.org/docs/en/latest/guide/overview/index.html

14. Under the Hood
Source: https://cordova.apache.org/docs/en/latest/guide/overview/index.html

15. Under the Hood
Source: https://cordova.apache.org/docs/en/latest/guide/overview/index.html

16. Under the Hood
Source: https://cordova.apache.org/docs/en/latest/guide/overview/index.html

17. Sits on top of
Cordova
Create Cordova
projects in Visual
Studio
Let’s call it
“VS TACO”
Visual Studio Tools for Apache Cordova

18.  Handles the complex setup for
you
 Leverages the debug tools you
know
 Fully supports the Android
Emulator
 Build and debug for iOS from
Windows
Why VS TACO?

19. Installing VS TACO

20. Download VS 2017

21. Installation

22. Already installed VS 2017?

23. Installing VS TACO gives you…
Node.js and
npm
Cordova Git Java JDK
Android SDK
SDK
Platform
Tools
Android
Build Tools
Intel HAXM
x86 Android
Emulator
Images
ARM Android
Emulator
Images

24. DEMO

25. Ionic

26. Ionic

27. Some Ionic Apps

28. Ionic Templates for Visual Studio
Download at: https://goo.gl/qhUcTu

29. DEMO

30. So what do we need for iOS?
Mac OS X
Mavericks+
Apple Developer
Program
Membership
Xcode
Node.js & npm Cordova

31. VS TACO’s Clever Solution

32. VS TACO’s Clever Solution

33. VS TACO’s Clever Solution

34. VS TACO’s Clever Solution

35. VS TACO’s Clever Solution

36. VS TACO’s Clever Solution

37. VS TACO’s Clever Solution

38. Apple, we have a problem…
People Who Have
Windows PCs
People Who Have Macs
Our
Team

39. MacinCloud
 Your own Mac in the cloud
 Already (mostly) setup for VS TACO
development
 Uses Remote Desktop
 Many different plans available
 Not perfect
 Shared server

40. MacinCloud

41. DEMO

42. Cordova apps *can*
be easy to spot
Performance still
lags behind native
Built on HTML,
JavaScript, and CSS
VS TACO tooling is
rough
Pros and Cons
Create ONE application
Can achieve near-100%
code reuse across
platforms
Familiar tools and
languages
Use your favorite
framework

43. More Alternatives Available
NativeScript React Native

44. Pluralsight Course
https://goo.gl/QXoOhO
Want More?
Twitter:
@matthoneycutt
Blog:
http://trycatchfail.com
Consulting:
mbhoneycutt@gmail.com