SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual Studio - Ryan Salva,...
-
Upload
sencha -
Category
Technology
-
view
50 -
download
1
Transcript of SenchaCon 2016: Cross-Platform Mobile App Development with Cordova and Visual Studio - Ryan Salva,...
Cross-Platform Mobile App Development with Cordova and Sencha Visual Studio
Code PluginRyan J. Salva, Microsoft
Sandeep Adwankar, Sencha
42% of professional developers are building mobile apps
58%
42%
Desktop & Server MobileVisionMobile 2016 Mobile Developer Report
17% of enterprise developers are building mobile apps
83%
17%
Desktop & Server MobileVisionMobile 2016 Mobile Developer Report
Innovators
Early Adopters
Early Majority
Late Majority Laggards
Consumer AppsLate majority market
Revenue through the app store
Enterprise AppsVery early majority market
Mobile apps are a cost centerDeployed to private stores
Modern AppsSystems of Engagement
and Innovation
Delivering personalized context
Direct to consumer
Short Time to Market
Each App for a concrete scenario
Companion LOB Client apps
In-the-moment tasks
New innovative UI
Open to Social networks
Targeting partners, employees and customers.
Mobile & Web
DESK
TOP
DEVICES
MOBILE
SOCIAL
WEB
Systems of Record
Foundational LOB Applications
Long-term
Foundational processes
Long development cycle
Departmental applications
Development productivity
Targeting employeesQoS
Core-Business
Dev. Easy to get started
Modern and Mobile Applications
More people use JavaScript than any other language
JavaScript
SQL
Java
C#
PHP
Python
C++
C
Node JS
Angular JS
Ruby
Objective-C
0% 10% 20% 30% 40% 50% 60%
Stack Overflow Developer Survey, March 2016
2X the Nearest Competitor
PhoneGap/Cordova
Xamarin
Unity
Qt
Adobe Air
Appcelerator
Corona
Marmelade
Codename One
Live Code
0% 10% 20% 30% 40% 50% 60% 70%61%
35%
31%
18%
15%
13%
12%
9%
4%
3%
Prioritize this tool Using this toolVision Mobile Analysis of Cross-Platform Development, July 2015
Who’s using hybrid?
Untappd
Zynga Mob Wars
Swork It
Feedly
Uber
AT&T
Apple App &Book Stores
So… yeah. It works.
What is Apache Cordova?
• Open-source framework• Hosted webview• Single, shared codebase deployed
to all targets• Plugins provide a common JS API to
access device capabilities• About 6% of apps in stores
(13% in enterprise)
Native Wrapper
<webview>Your JavaScript App
Cordova Plugin JS API
Xcode• HTML, CSS, JS• iOS Runtime• iOS Plugins• iOS Config
Visual Studio• HTML, CSS, JS• Windows Runtime• Windows Plugins• Windows Config
Android Studio• HTML, CSS, JS• Android Runtime• Android Plugins• Android Config
Cordova• HTML, CSS, JS • Resources• Configuration• Platform code• Plugin code
Build
Sencha Ext JS• HTML, CSS, JS • Resources• Configuration
UniversalWindows App
Native iOS App
NativeAndroid App
Platform Build ToolsDev. Environment Command Line Tools
Create
Visual Studio Code
2.0JavaScript
TypeScript
C++
HTML
C#
Go
Python
PHP
F#
Node JS
JSON
And more…
2 Million Installsin the first 6 months
100+ 300+ 1,000+LanguagesSupported
Pull RequestsContributed
ExtensionsCreated
TernJS
Eclipse Visual Studio IDE VS Code
Ext JS
Sencha Cmd
Sencha Visual Studio Code Plugin Architecture
Provides language services
Sencha VS Code Plugin - Now Early Access Available
• Supports Ext JS 4+ (non-minified versions)
• Works with custom classes and overrides in addition to framework
• No update required when upgrading the framework
Visual Studio Code Extensions
• Intellisense
• Code Generation
• Code Navigation
• Command Line Tools
• Documentation Lookup
• Debugging
Let’s code.
NEW
CodePush uploads your JavaScript package to the cloud (Azure)
After building your Sencha app, run:$ cd cordova$ code-push release-cordova [app] [platform]
Phone asks, “Hey, Azure! Do you have an update for me?”Azure says, “Yup! Here’s a ZIP with all the web assets.”
Code-Push extracts ZIP and replaces the contents of /www
Let’s code push.
Sencha VS Code Plugin
IntelliSense – Code Completion
• Properties
• Keys in Configs
• xtypes
• Events
Code Navigation
Supports code navigation for
• class name
• xtypes and other type aliases
• methods and properties
• config keys
• events
Documentation Lookup
Supports documentation lookup (F1) for Ext JS
• class name
• xtypes and other type aliases
• methods and properties
• config keys
• events
Code Generation - Create New Ext JS App
Code Generation - Template Creation
• Classes
• Views
• View Models
• View Controllers
• Models
• Controllers
• Stores
Integration with Sencha Cmd
• Watch app source code for changes
• Rebuild outputs
• Web Server is started and hosts app
• See compilation errors as they happen
Debugging Ext JS Apps
• Microsoft’s “Debugger for Chrome” extension
• Launch Chrome browser with remote debugging enabled
• Attach extension to the browser
• Start debugging F5
http://aka.ms/sencha-code Early Access VS Code Plugin
Available for all Ext JS packages (Std. Pro. Prem.)Follow us on Twitter! @ryanjsalva @adwankar