Angular mobile angular_u

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
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

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?
• Hosted webview
• Single, shared codebase
deployed to all targets
<webview>
Your JavaScript App

• Hosted webview
• Plugins provide a common
JavaScript API to access
device capabilities
<webview>
Your JavaScript App
Cordova Plugin JS API

• Hosted webview
• 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

Angular mobile angular_u

Recommended

More Related Content

What's hot (20)

Similar to Angular mobile angular_u (20)

More from Doris Chen (20)

Recently uploaded (20)

Angular mobile angular_u