AngularJS-WebDesign-130415

Download Report

Transcript AngularJS-WebDesign-130415 

Richard Johnson Goal Designs Inc.
Minnesota Web Design Meetup – April 15, 2013
Slides available: http://goaldesigns.com/presentations-2013
[email protected]




Web designed for documents
Server creates pages / browser displays
Data input sent to and processed by the server
Updated pages created on the server and resent
<!doctype html>
<html>
<head>
</head>
<body>
<form method="post" action="hello.php">
<label>Name:</label>
<input type="text" id="yourName”>
<input type="submit" value="Say Hello" />
<hr>
<?php
echo "<h1>Hello ".$HTTP_POST_VARS["yourName"]."!</h1>";
?>
</form>
</body>
</html>

Interactive client-side web
 Collect input from user
 Update display
 Communicate with server

Client-side processing enabled by
 JavaScript
 DOM manipulation
 HTTP server messaging
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#yourName").keyup(function () {
$("#helloName").text("Hello " + this.value + "!");
});
});
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" id="yourName">
<hr>
<h1 id="helloName"></h1>
</div>
</body>
</html>




Simplifies event binding and DOM
manipulation
Common API across multiple browsers
Supports plug-in modules to extend
functionality
Requires writing JavaScript code to wire

Follow good programming practices
 Separate: data / display / processing


Simplify connecting data to display
Let us focus on the technologies of the web
 HTML
 CSS
 JavaScript
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/ ⬋
angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

Compare jQuery imperative wiring
<input type="text" id="yourName">
<h1 id="helloName"></h1>
<script type="text/javascript”>
$(function() {
$("#yourName").keyup(function () {
$("#helloName").text("Hello " + this.value + "!");
});
});
</script>

to AngularJS declarative relationships
<input type="text" ng-model="yourName">
<h1>Hello {{yourName}}!</h1>

jQuery abstracts browser functionality
 e.g. DOM traversal, event binding

AngularJS abstracts relationships (and more)

Note: AngularJS, and all web apps, are built
on browser functionality




HTML is a declarative document language
Browser translates HTML into a Document
Object Model (DOM)
DOM is the browser’s in-memory document
representation
JavaScript can manipulate the DOM



Browsers send a document (i.e. DOM) ready
event
AngularJS can intercede and rewrite the
DOM
The rewrite is driven by markup in the DOM

Software architectural pattern
 Separates display from data
 Originated with Smalltalk programmers
 From work at Xerox PARC in the late 70’s



Models represent knowledge
Views provide a (visual) representation of attached
model data
Controllers connect to and control views and models

Different variations of the pattern
 Model-View-ViewModel (MVVM)
 Model-View-Presenter (MVP)

Variations differ on…
 … connectivity
 … cardinality
 … directionality
“MVC vs MVVM vs MVP. What a controversial topic that many developers
can spend hours and hours debating and arguing about.
For several years AngularJS was closer to MVC (or rather one of its clientside variants), but over time and thanks to many refactorings and api
improvements, it's now closer to MVVM – the $scope object could be
considered the ViewModel that is being decorated by a function that we call
a Controller.
…
I hereby declare AngularJS to be MVW framework - Model-ViewWhatever.
…”
Igor Minar – Google AngularJS Development Team

Backbone.js
Ember.js
Knockout
Others

Summary from 2012 Throne of JS conference




Library (Backbone and Knockout)
 passive functionality
 invoked by the application

Framework (Ember)
 provides application architecture
 handles common requirements
 invokes application code

AngularJS is closer to a framework

*I ported my Backbone application to angular. The Code
size went down from 5k lines of code to guess what? 750
lines. Not just that.. The code is much cleaner.. Earlier,
there was a huge technical debt attached to this
implementation in backbone.. Each time I had to sit with
it. It took me quite a while to understand all the hooks and
how the individual models and classes and views
interacted together.. ..Now its a breeze.. *

http://stackoverflow.com/a/10264263

Working with AJAX in mid-2011
 XML for data
 XSLT to map XML data to HTML


Considered changing to JSON
Found a link to AngularJS (alpha)




AngularJS website: angularjs.org
Examples are live
Phonecat tutorial is worthwhile
My “goto” sources:
 Developer guide
 API reference

Load AngularJS
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.0.6/angular.min.js"></script>

Bootstrap
<html ng-app>

Declare relationships
ng-model="yourName”
{{yourName}}




One created with each controller
Prototypically inherits from parent
AngularJS has a root scope
Can create isolated scopes (e.g. in directive)



Automatic
propagation of
data changes
Model is single
source of truth
Digest cycle


Contains the
code behind
the view
Try to keep
lightweight

Added to a WordPress site
 Custom theme
 Page templates with shortcodes
Built summer 2012 (just as AngularJS 1.0
shipped)
 Created order form and product location pages

Note – it’s a live site (and good wine )

Too much code in the controller - modularize




Provides declarative form validation
Input fields declared as: required, email
Form has flags for: $valid, $dirty
Usable as a standalone validation library


Directives enhance HTML
Custom element name or attribute (also class
and comment)

AngularJS provides over 50
 form – element directive
 ng-repeat – attribute directive (it’s amazing!)

Declarative way to
 format displayed data
 filter and sort data arrays





Software architectural components
Services provide data and compute
Exist across views
Depend on other services
AngularJS has 20+
 $http – service to communicate with servers

$http service
 Input config object
 Returns promise
$http({method: ‘GET’, url: fetchUrl})
.success(function(data, status) {
// process the data here
})
.error(function(data, status) {
// error handling
});
 Communication is asynchronous



Promises represent result of an action
Particularly used with asynchronous actions
They are either resolved or rejected




DI is a software architectural pattern
Separation of concerns
Service creation independent from usage
Good for
 Modular code
 Allows AngularJS to wire in correct order
 Supports substitution (for patching and testing)



Services identified by parameter name
Minification obfuscates the name
Pass names as strings in array
angular.module('GoaleryServices')
.factory('StatusManager',
[
'CloudLogin', '$q',
function (cloudLogin, $q) {
…

Prototype-based scripting language
Dynamic, weakly typed, first-class functions

Great JavaScript book:

 Crockford (2008) JavaScript: The Good Parts –
O’Reilly



JavaScript doesn’t have a compiler
Must execute code to test
Testability was a fundamental objective of
AngularJS
 Miško Hevery (AngularJS creator)
 Previously created JsTestDriver

Unit testing support
 JsTestDriver
 Jasmine

DI allows substituting mocks for hard to test code
 Server communication
 Logging

Angular Scenario Runner – E2E testing
 Simulates user interations
Single web page
 Loads the base HTML and included sources once
 App changes views dynamically
 Server is called upon when needed
 Prefer using asynchronous server calls

 Data changes
 Fetch more data


Declarative view specification
HTML augmented with:
 Directives, Markup, Filter, Form Controls

Loaded either
 with a simple single web page
 dynamically into a view as partials



Define the mapping from URL to view
Can also bind controller
Define URL parameters
$routeProvider.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: BookCntl
});
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: ChapterCntl
});




AngularJS navigation updates the browser
address bar
Uses the HTML5 history API – fallback to
hash-bang (#!) URL
Users can link to pages in you app
Server must recognize the link pattern and
serve the application






Directives package reusable HTML
Naming nuance: “myDir” becomes “my-dir”
Conceptual compile and link phases
Can specify: scope, binding, restrictions, etc
Supports transclusion
Consider creating a custom DSL




Packaging of JavaScript code
Modules declare dependencies
AngularJS instantiates in correct order
Provides separation of namespaces





Open source – MIT License
Built by Google and community
1.0 released June 2012
1.0.6 current (April 2013)
http://angularjs.org/

AngularJS 1.0.X are considered stable production
releases
 Contains bug fixes and documentation updates



AngularJS 1.1.X is unstable development
Next stable feature release will be 1.2.X
Available on the Google CDN
 https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angul
ar.js
 Both full source and minified (angular.min.js)




AngularJS includes a jQuery “lite”
Provides the minimal features directly used
Including jQuery will be used instead
Note – jQuery must be included before
AngularJS






Chrome
Internet Explorer 9+ (others see next slide)
Firefox
Safari
Opera
mobile browsers (Android, Chrome Mobile,
iOS Safari)

IE 8 is officially supported and tested





Declare custom element tags
Routing uses #! mode (IE9 also has no HTML 5 history)
A few other XML namespace declarations
See http://docs.angularjs.org/guide/ie
IE 6 & 7 support is possible “in theory”
 Google doesn’t test these versions
 < 1% of U.S. browsers (March 2013)


Chrome debugger plugin
Jasmine testing framework plugin

AngularJS UI – https://github.com/angular-ui
 Compilation of several projects
▪
▪
▪
▪

AngularJS UI – calendar, date, map, if
UI Bootstrap – Twitter bootstrap components
ng-grid – data grid
UI-Router – enhanced routing with UI states
AngularStrap - http://mgcrea.github.io/angularstrap/




Blog – official announcments
Forums – support
JSFiddle Examples
Cheat Sheet

AngularJS (April 29, 2013)
Green & Seshadri – O’Reilly

AngularJS in Action (Fall 2013)
Ford & Ruebbelke– Manning

Coding in Angular
 http://www.egghead.io/

Front-end Masters
 AngularJS &Testability – Misko Hevery
 Javascript the Good Parts – Douglas Crockford





Animation support
More flexible (and faster) ngRepeat directive
Powerful promise-based http request
interceptors
Dynamically generated directive templates
Initial batch of mobile/touch support

“What a web browser would have been had it
been designed for web applications”
 - Miško Hevery

Upcoming AngularJS presentation
 Google Developer Group – Twin Cities
 May 1, 2013 at CoCo