SlideShare a Scribd company logo
Angular: Go Mobile!
Doris Chen Ph.D.
Senior Developer Evangelist
Microsoft
doris.chen@microsoft.com
http://blogs.msdn.com/dorischen/
@doristchen
Doris Chen, Ph.D.
• Developer Evangelist at Microsoft based in Silicon Valley, CA
• Blog: http://blogs.msdn.com/b/dorischen/
• Twitter @doristchen
• Email: doris.chen@microsoft.com
• Over 18 years of experience in the software industry focusing on web
technologies
• Spoke and published widely at O'Reilly OSCON, Fluent, HTML5 Dev Conf,
JavaOne, Google Developer Conference, Silicon Valley Code Camp and
worldwide User Groups meetups
• Doris received her Ph.D. from the University of California at Los Angeles
(UCLA)
Agenda
• Angular
• Demo: ToDo App in Angular
• Mobile Apps for JavaScript
• Demo: ToDo App with Apache Cordova
• Summary and Resources
Angular
Angular
Architecture MV* (Model View Whatever)
Template Support YES. doesn’t require any other separate template engine.(Also
doesn’t support template engine)
File Size 39.5K (no dependencies)
Nested Template Support Yes
Data Binding Yes
Routing Yes
Compatible with other frameworks Yes
Additional Features Dependency Injection, Directives, Watch Expressions and 2-way
Binding, HTML5 validations, Form Validations, and Filtering
Angular: templates
• Simply HTML with binding expressions baked-in
• Binding expressions are surrounded by double curly braces
<ul>
<li ="framework in frameworks"
title="{{framework.description}}">
{{framework.name}}
</li>
</ul>
Angular: model
• Angular does not use observable properties, no restriction on
implementing model
• No class to extend and no interface to comply
• Free to use whatever you want (including existing Backbone
models)
• In practice, most developers use plain old JavaScript objects
(POJO)
2-way bindings and directives
<div class="templateWrapper" ng-repeat="toDoItem in todos">
<div class="templateContainer">
<input class="templateTitle"
ng-class="{crossedOut: toDoItem.done}" type="text"
ng-text-change="changeToDoText(toDoItem)"
ng-model="toDoItem.text" />
<h3 class="templateAddress">{{toDoItem.address}}</h3>
</div>
</div>
Dependency injection
<section id="todoapp" ng-controller="ToDoCtrl">
<button class="templateLeft templateRemove"
ng-click="removeToDo(toDoItem)"></button>
</section>
angular.module("xPlat.controllers")
.controller('ToDoCtrl', ['$scope', 'maps', 'storage',
function ($scope, maps, storage) {
$scope.removeToDo = function (toDoItem) {
storage.del(toDoItem).then(function (todo) {
var index = $scope.todos.indexOf(todo);
$scope.todos.splice(index, 1);
});
}
}]);
Angular: more good things
• Building application blocks into: Controllers, Directives,
Factories, Filters, Services and Views (templates).
• Views UI, Controllers logic behind UI, Services communication with
backend and common functionality, Directives reusable components
and extending HTML by defining new elements, attributes and
behaviors
• Promises play a main role in Angular
Custom directives
<input class="templateTitle"
ng-class="{crossedOut: toDoItem.done}" type="text"
ng-text-change=" changeToDoText(toDoItem)"
ng-model="toDoItem.text" />
angular.module('xPlat.directives')
.directive('ngTextChange', function () {
return {
restrict: 'A',
replace: 'ngModel',
link: function (scope, element, attr) {
element.on('change', function () {
scope.$apply(function () {
scope.$eval(attr.ngTextChange);
});
…
});
Custom directives, continued
$scope.changeToDoText = function (toDoItem) {
//Notice .then Promise pattern is used here
getAddress().then(function (address) {
toDoItem.address = address;
return storage.update(toDoItem);
}, function (errorMessage) {
toDoItem.address = errorMessage;
return storage.update(toDoItem);
});
}
Angular: bad things
• Extremely opinionated
• Frustrated: prior experience in creating UI with Javascript is rendered almost useless
• Do everything according to the “Angular way”
• Directives could be super complicated and odd
• Expression language too powerful
• <button ng-click="(oldPassword && checkComplexity(newPassword) &&
oldPassword != newPassword) ? (changePassword(oldPassword, newPassword) &&
(oldPassword=(newPassword=''))) : (errorMessage='Please input a new password
matching the following requirements: ' + passwordRequirements)">Click
me</button>
Demo
ToDo MVC in Angular and Backbone
When to use Angular?
• Something declarative that uses View to derive behavior
• Custom HTML tags and components that specify your application
intentions
• Easily testable, URL management (routing) and a separation of
concerns through a variation of MVC
• Good at making quick changes
• create easily testable code and test it often
• Not a good fit for Angular
• Games and GUI editors are examples of applications with intensive and tricky
DOM manipulation, different from CRUD apps
• may be better to use a library like jQuery
• Has its own scaffolding tools available (angular-seed)
Go mobile
From web app to hybrid app
Apps dominate the mobile web
Low investment for more capabilities
Capabilities
DeveloperInvestment
Web App
Hybrid App
Native App
What is Apache Cordova?
• Open-source framework
Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase
deployed to all targets
<webview>
Your JavaScript App
Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase
deployed to all targets
• Plugins provide a common
JavaScript API to access
device capabilities
<webview>
Your JavaScript App
Cordova Plugin JS API
Native WrapperWhat is Apache Cordova?
• Open-source framework
• Hosted webview
• Single, shared codebase
deployed to all targets
• Plugins provide a common
JavaScript API to access
device capabilities
• About 6% of apps in stores
(13% in enterprise)
<webview>
Your JavaScript App
Cordova Plugin JS API
Why Cordova?
72%
62%
34%
28% 27%
24%
20%
9%
0%
10%
20%
30%
40%
50%
60%
70%
80%
Familiarity of
Languages
(HTML, JS, CSS)
Cross Platform
Support
Performance Availability of
Tools/Libraries
Productivity Based on Open
Standards
Cost of
Development
Community
Source: Kendo UI Developer Survey 2013
Speed & cost of development matter
:)
Demo
Converting ToDo MVC into a hybrid app
World Wide Web Cordova
Delivery mechanism Delivered via browser Packaged on my device
Input Touch Touch
Offline Support No Yes
Device Capabilities Web APIs Only Native Device APIs
Monetization Web Commerce App Store & In-App Purchases
Discoverability Bookmarks & Search Engines Always on my home screen
🌐
Tips, Tricks & Considerations
• Use Cordova when an idea makes sense as a web app, but you
need…
• Cross-platform support as a packaged application
• Offline support
• Access to native device capabilities (e.g. camera, accelerometer, file system)
• Better reach & discoverability
• Cordova depends on the platform build system
• To build for iOS, you need a Mac
• To build for Windows 8+, you need Windows 8+
• To build for Android, you need the Android SDK
• Touch input means bigger everything. Consider a control framework
like Ionic.
Use Cordova if you want to…
• Use your web skills & assets
• Maintain one codebase
• Use the JS libraries you love
You might be better off writing native apps if…
• Performance is of utmost concern
• You want different apps on different devices
• You <3 Java, ObjC, or DirectX (If you love XAML/C#, consider Xamarin)
• Your apps have deep integration with devices, such as the DirectX rendering
pipeline
Should I build a Cordova app or Native apps?
Resources
• AngularJS: http://angularjs.org
• ToDo MVC: http://todomvc.com
• Tools for Apache Cordova: http://aka.ms/cordova
• StackOverflow #multi-device-hybrid-apps

More Related Content

What's hot

The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
SPTechCon
 
Modern development paradigms
Modern development paradigmsModern development paradigms
Modern development paradigms
Ivano Malavolta
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
 
[2015/2016] Backbone JS
[2015/2016] Backbone JS[2015/2016] Backbone JS
[2015/2016] Backbone JS
Ivano Malavolta
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
Todd Anglin
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
Mark Rackley
 
[2015/2016] JavaScript
[2015/2016] JavaScript[2015/2016] JavaScript
[2015/2016] JavaScript
Ivano Malavolta
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
James Pearce
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Bootstrap4XPages webinar
Bootstrap4XPages webinarBootstrap4XPages webinar
Bootstrap4XPages webinar
Mark Leusink
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
Todd Anglin
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
Mark Rackley
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
Teamstudio
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
Ivano Malavolta
 
Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQueryBuilding intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
Alek Davis
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
tutorialsruby
 
Sightly - AEM6 UI Development using JS and JAVA
Sightly - AEM6 UI Development using JS and JAVASightly - AEM6 UI Development using JS and JAVA
Sightly - AEM6 UI Development using JS and JAVA
Yash Mody
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
 
XPages Workshop: Customizing OneUI
XPages Workshop: Customizing OneUIXPages Workshop: Customizing OneUI
XPages Workshop: Customizing OneUI
Michael McGarel
 

What's hot (20)

The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
 
Modern development paradigms
Modern development paradigmsModern development paradigms
Modern development paradigms
 
SharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuerySharePoint Saturday St. Louis - SharePoint & jQuery
SharePoint Saturday St. Louis - SharePoint & jQuery
 
[2015/2016] Backbone JS
[2015/2016] Backbone JS[2015/2016] Backbone JS
[2015/2016] Backbone JS
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast2/15/2012 - Wrapping Your Head Around the SharePoint Beast
2/15/2012 - Wrapping Your Head Around the SharePoint Beast
 
[2015/2016] JavaScript
[2015/2016] JavaScript[2015/2016] JavaScript
[2015/2016] JavaScript
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Bootstrap4XPages webinar
Bootstrap4XPages webinarBootstrap4XPages webinar
Bootstrap4XPages webinar
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have knownSPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
 
SPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentialsSPTechCon - Share point and jquery essentials
SPTechCon - Share point and jquery essentials
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
Building intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQueryBuilding intranet applications with ASP.NET AJAX and jQuery
Building intranet applications with ASP.NET AJAX and jQuery
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
Sightly - AEM6 UI Development using JS and JAVA
Sightly - AEM6 UI Development using JS and JAVASightly - AEM6 UI Development using JS and JAVA
Sightly - AEM6 UI Development using JS and JAVA
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
XPages Workshop: Customizing OneUI
XPages Workshop: Customizing OneUIXPages Workshop: Customizing OneUI
XPages Workshop: Customizing OneUI
 

Similar to Angular mobile angular_u

From Containerization to Modularity
From Containerization to ModularityFrom Containerization to Modularity
From Containerization to Modularity
oasisfeng
 
Ionic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile appsIonic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile apps
Andreas Sahle
 
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
ITCamp
 
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
Todd Anglin
 
Android - Anroid Pproject
Android - Anroid PprojectAndroid - Anroid Pproject
Android - Anroid Pproject
Vibrant Technologies & Computers
 
Apache Cordova 4.x
Apache Cordova 4.xApache Cordova 4.x
Apache Cordova 4.x
Ivano Malavolta
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
Mihail Mateev
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
Ivano Malavolta
 
Native script overview
Native script overviewNative script overview
Native script overview
Baskar rao Dsn
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual Studio
Mizanur Sarker
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
 
Gapand 2017 - Diseñando Arquitecturas Serverless en Azure
Gapand 2017 - Diseñando Arquitecturas Serverless en AzureGapand 2017 - Diseñando Arquitecturas Serverless en Azure
Gapand 2017 - Diseñando Arquitecturas Serverless en Azure
Alberto Diaz Martin
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
Mark Roden
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
DevelopmentArc LLC
 
Android Scripting
Android ScriptingAndroid Scripting
Android Scripting
Juan Gomez
 
Apache cordova
Apache cordovaApache cordova
Apache cordova
Carlo Bernaschina
 
Google Developer Group(GDG) DevFest Event 2012 Android talk
Google Developer Group(GDG) DevFest Event 2012 Android talkGoogle Developer Group(GDG) DevFest Event 2012 Android talk
Google Developer Group(GDG) DevFest Event 2012 Android talk
Imam Raza
 
Build beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutterBuild beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutter
RobertLe30
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
Ivano Malavolta
 

Similar to Angular mobile angular_u (20)

From Containerization to Modularity
From Containerization to ModularityFrom Containerization to Modularity
From Containerization to Modularity
 
Ionic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile appsIonic Framework - get up and running to build hybrid mobile apps
Ionic Framework - get up and running to build hybrid mobile apps
 
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
 
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
 
Android - Anroid Pproject
Android - Anroid PprojectAndroid - Anroid Pproject
Android - Anroid Pproject
 
Apache Cordova 4.x
Apache Cordova 4.xApache Cordova 4.x
Apache Cordova 4.x
 
Win j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateevWin j svsphonegap-damyan-petev-mihail-mateev
Win j svsphonegap-damyan-petev-mihail-mateev
 
[2015/2016] Apache Cordova
[2015/2016] Apache Cordova[2015/2016] Apache Cordova
[2015/2016] Apache Cordova
 
Native script overview
Native script overviewNative script overview
Native script overview
 
Cross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual StudioCross-Platform Development using Angulr JS in Visual Studio
Cross-Platform Development using Angulr JS in Visual Studio
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
Gapand 2017 - Diseñando Arquitecturas Serverless en Azure
Gapand 2017 - Diseñando Arquitecturas Serverless en AzureGapand 2017 - Diseñando Arquitecturas Serverless en Azure
Gapand 2017 - Diseñando Arquitecturas Serverless en Azure
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
Android Scripting
Android ScriptingAndroid Scripting
Android Scripting
 
Apache cordova
Apache cordovaApache cordova
Apache cordova
 
Google Developer Group(GDG) DevFest Event 2012 Android talk
Google Developer Group(GDG) DevFest Event 2012 Android talkGoogle Developer Group(GDG) DevFest Event 2012 Android talk
Google Developer Group(GDG) DevFest Event 2012 Android talk
 
Build beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutterBuild beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutter
 
Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app Anatomy of an HTML 5 mobile web app
Anatomy of an HTML 5 mobile web app
 

More from Doris Chen

OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
Doris Chen
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Doris Chen
 
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Doris Chen
 
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS AppsWhat Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
Doris Chen
 
Windows 8 Opportunity
Windows 8 OpportunityWindows 8 Opportunity
Windows 8 Opportunity
Doris Chen
 
Wins8 appfoforweb fluent
Wins8 appfoforweb fluentWins8 appfoforweb fluent
Wins8 appfoforweb fluent
Doris Chen
 
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Doris Chen
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
Doris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
Doris Chen
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
Doris Chen
 
HTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopHTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and Desktop
Doris Chen
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
Doris Chen
 
Performance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesPerformance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best Practices
Doris Chen
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
Doris Chen
 
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Doris Chen
 

More from Doris Chen (20)

OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
 
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS AppsWhat Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS Apps
 
Windows 8 Opportunity
Windows 8 OpportunityWindows 8 Opportunity
Windows 8 Opportunity
 
Wins8 appfoforweb fluent
Wins8 appfoforweb fluentWins8 appfoforweb fluent
Wins8 appfoforweb fluent
 
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
 
HTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopHTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and Desktop
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
 
Performance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesPerformance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best Practices
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
 
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
Develop Netflix Movie Search App using jQuery, OData, JSONP and Netflix Techn...
 

Recently uploaded

How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
flufftailshop
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
saastr
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
Operating System Used by Users in day-to-day life.pptx
Operating System Used by Users in day-to-day life.pptxOperating System Used by Users in day-to-day life.pptx
Operating System Used by Users in day-to-day life.pptx
Pravash Chandra Das
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 

Recently uploaded (20)

How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdfNunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
Nunit vs XUnit vs MSTest Differences Between These Unit Testing Frameworks.pdf
 
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStrDeep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
Deep Dive: Getting Funded with Jason Jason Lemkin Founder & CEO @ SaaStr
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
Operating System Used by Users in day-to-day life.pptx
Operating System Used by Users in day-to-day life.pptxOperating System Used by Users in day-to-day life.pptx
Operating System Used by Users in day-to-day life.pptx
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 

Angular mobile angular_u

  • 1. Angular: Go Mobile! Doris Chen Ph.D. Senior Developer Evangelist Microsoft doris.chen@microsoft.com http://blogs.msdn.com/dorischen/ @doristchen
  • 2. Doris Chen, Ph.D. • Developer Evangelist at Microsoft based in Silicon Valley, CA • Blog: http://blogs.msdn.com/b/dorischen/ • Twitter @doristchen • Email: doris.chen@microsoft.com • Over 18 years of experience in the software industry focusing on web technologies • Spoke and published widely at O'Reilly OSCON, Fluent, HTML5 Dev Conf, JavaOne, Google Developer Conference, Silicon Valley Code Camp and worldwide User Groups meetups • Doris received her Ph.D. from the University of California at Los Angeles (UCLA)
  • 3. Agenda • Angular • Demo: ToDo App in Angular • Mobile Apps for JavaScript • Demo: ToDo App with Apache Cordova • Summary and Resources
  • 5. Angular Architecture MV* (Model View Whatever) Template Support YES. doesn’t require any other separate template engine.(Also doesn’t support template engine) File Size 39.5K (no dependencies) Nested Template Support Yes Data Binding Yes Routing Yes Compatible with other frameworks Yes Additional Features Dependency Injection, Directives, Watch Expressions and 2-way Binding, HTML5 validations, Form Validations, and Filtering
  • 6. Angular: templates • Simply HTML with binding expressions baked-in • Binding expressions are surrounded by double curly braces <ul> <li ="framework in frameworks" title="{{framework.description}}"> {{framework.name}} </li> </ul>
  • 7. Angular: model • Angular does not use observable properties, no restriction on implementing model • No class to extend and no interface to comply • Free to use whatever you want (including existing Backbone models) • In practice, most developers use plain old JavaScript objects (POJO)
  • 8. 2-way bindings and directives <div class="templateWrapper" ng-repeat="toDoItem in todos"> <div class="templateContainer"> <input class="templateTitle" ng-class="{crossedOut: toDoItem.done}" type="text" ng-text-change="changeToDoText(toDoItem)" ng-model="toDoItem.text" /> <h3 class="templateAddress">{{toDoItem.address}}</h3> </div> </div>
  • 9. Dependency injection <section id="todoapp" ng-controller="ToDoCtrl"> <button class="templateLeft templateRemove" ng-click="removeToDo(toDoItem)"></button> </section> angular.module("xPlat.controllers") .controller('ToDoCtrl', ['$scope', 'maps', 'storage', function ($scope, maps, storage) { $scope.removeToDo = function (toDoItem) { storage.del(toDoItem).then(function (todo) { var index = $scope.todos.indexOf(todo); $scope.todos.splice(index, 1); }); } }]);
  • 10. Angular: more good things • Building application blocks into: Controllers, Directives, Factories, Filters, Services and Views (templates). • Views UI, Controllers logic behind UI, Services communication with backend and common functionality, Directives reusable components and extending HTML by defining new elements, attributes and behaviors • Promises play a main role in Angular
  • 11. Custom directives <input class="templateTitle" ng-class="{crossedOut: toDoItem.done}" type="text" ng-text-change=" changeToDoText(toDoItem)" ng-model="toDoItem.text" /> angular.module('xPlat.directives') .directive('ngTextChange', function () { return { restrict: 'A', replace: 'ngModel', link: function (scope, element, attr) { element.on('change', function () { scope.$apply(function () { scope.$eval(attr.ngTextChange); }); … });
  • 12. Custom directives, continued $scope.changeToDoText = function (toDoItem) { //Notice .then Promise pattern is used here getAddress().then(function (address) { toDoItem.address = address; return storage.update(toDoItem); }, function (errorMessage) { toDoItem.address = errorMessage; return storage.update(toDoItem); }); }
  • 13. Angular: bad things • Extremely opinionated • Frustrated: prior experience in creating UI with Javascript is rendered almost useless • Do everything according to the “Angular way” • Directives could be super complicated and odd • Expression language too powerful • <button ng-click="(oldPassword && checkComplexity(newPassword) && oldPassword != newPassword) ? (changePassword(oldPassword, newPassword) && (oldPassword=(newPassword=''))) : (errorMessage='Please input a new password matching the following requirements: ' + passwordRequirements)">Click me</button>
  • 14. Demo ToDo MVC in Angular and Backbone
  • 15. When to use Angular? • Something declarative that uses View to derive behavior • Custom HTML tags and components that specify your application intentions • Easily testable, URL management (routing) and a separation of concerns through a variation of MVC • Good at making quick changes • create easily testable code and test it often • Not a good fit for Angular • Games and GUI editors are examples of applications with intensive and tricky DOM manipulation, different from CRUD apps • may be better to use a library like jQuery • Has its own scaffolding tools available (angular-seed)
  • 16. Go mobile From web app to hybrid app
  • 17. Apps dominate the mobile web
  • 18. Low investment for more capabilities Capabilities DeveloperInvestment Web App Hybrid App Native App
  • 19. What is Apache Cordova? • Open-source framework
  • 20. Native WrapperWhat is Apache Cordova? • Open-source framework • Hosted webview • Single, shared codebase deployed to all targets <webview> Your JavaScript App
  • 21. Native WrapperWhat is Apache Cordova? • Open-source framework • Hosted webview • Single, shared codebase deployed to all targets • Plugins provide a common JavaScript API to access device capabilities <webview> Your JavaScript App Cordova Plugin JS API
  • 22. Native WrapperWhat is Apache Cordova? • Open-source framework • Hosted webview • Single, shared codebase deployed to all targets • Plugins provide a common JavaScript API to access device capabilities • About 6% of apps in stores (13% in enterprise) <webview> Your JavaScript App Cordova Plugin JS API
  • 23. Why Cordova? 72% 62% 34% 28% 27% 24% 20% 9% 0% 10% 20% 30% 40% 50% 60% 70% 80% Familiarity of Languages (HTML, JS, CSS) Cross Platform Support Performance Availability of Tools/Libraries Productivity Based on Open Standards Cost of Development Community Source: Kendo UI Developer Survey 2013
  • 24. Speed & cost of development matter
  • 25. :)
  • 26. Demo Converting ToDo MVC into a hybrid app
  • 27. World Wide Web Cordova Delivery mechanism Delivered via browser Packaged on my device Input Touch Touch Offline Support No Yes Device Capabilities Web APIs Only Native Device APIs Monetization Web Commerce App Store & In-App Purchases Discoverability Bookmarks & Search Engines Always on my home screen 🌐
  • 28. Tips, Tricks & Considerations • Use Cordova when an idea makes sense as a web app, but you need… • Cross-platform support as a packaged application • Offline support • Access to native device capabilities (e.g. camera, accelerometer, file system) • Better reach & discoverability • Cordova depends on the platform build system • To build for iOS, you need a Mac • To build for Windows 8+, you need Windows 8+ • To build for Android, you need the Android SDK • Touch input means bigger everything. Consider a control framework like Ionic.
  • 29. Use Cordova if you want to… • Use your web skills & assets • Maintain one codebase • Use the JS libraries you love You might be better off writing native apps if… • Performance is of utmost concern • You want different apps on different devices • You <3 Java, ObjC, or DirectX (If you love XAML/C#, consider Xamarin) • Your apps have deep integration with devices, such as the DirectX rendering pipeline Should I build a Cordova app or Native apps?
  • 30. Resources • AngularJS: http://angularjs.org • ToDo MVC: http://todomvc.com • Tools for Apache Cordova: http://aka.ms/cordova • StackOverflow #multi-device-hybrid-apps