Embed Size (px)
Citation preview
Angular: Go Mobile!
Doris Chen Ph.D.
Senior Developer Evangelist
Microsoft
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: [email protected]
• 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 heregetAddress().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>
DemoToDo 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 mobileFrom web app to hybrid app
Apps dominate the mobile web
Low investment for more capabilities
Capabilities
Deve
lop
er
Inve
stm
ent
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
:)
DemoConverting 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
