Richard Johnson Goal Designs Inc.

yrekazzyzxamuckInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 11 μήνες)

150 εμφανίσεις

Richard Johnson Goal Designs Inc.
GDG Twin Cities
Meetup

May 1, 2013
Slides
available: http://
goaldesigns.com
/presentations
-
2013
rjohnson@
goaldesigns.com
Web browser
Web Apps
Web Server
Cloud
Web browser
Web Apps
Web Server
Cloud
<!
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
<!
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

to
AngularJS
declarative relationships
<input type="text"
ng
-
model="
yourName
">
<h1>Hello {{
yourName
}}!</h1>
<input type="text" id="
yourName
">
<h1 id="
helloName
"></h1
>
<script type="text/
javascript
”>
$(function() {
$("#
yourName
").
keyup
(function () {
$("#
helloName
").text("Hello " +
this.value
+ "!");
});
});
</script>

jQuery
abstracts browser functionality

e.g. DOM traversal, event binding

AngularJS abstracts relationships
(and more)

AngularJS
, and all web apps, are built on
browser functionality

Must use the technologies of the web

HTML

CSS

JavaScript

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 client
-
side 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
-
View
-
Whatever
.
…”
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

Communication is asynchronous
$
http({method:
‘GET’,
url
:
fetchUrl
}
)
.
success(function(data, status) {
// process the data here
}
)
.
error(function(data, status) {
// error handling
}
);

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

Karma

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)

Yeoman

workflow manager

Yo
-
scaffolding

Grunt
-
build

Bower
-
dependency management

Chrome debugger plugin (
Batarang
)

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/angular
-
strap/

Blog

official
announcments

Forums

support

JSFiddle Examples

Cheat Sheet

AngularJS

Green &
Seshadri

O’Reilly (
Just Published

April 29)

AngularJS Web Application Development

Darwin & Kozlowski

Packt
(
July 2013)

AngularJS in Action

Ford &
Ruebbelke

Manning (
Fall 2013
)

Coding in Angular

http://www.egghead.io/

Front
-
end Masters

AngularJS
&Testability

Misko
Hevery

Javascript
the Good Parts

Douglas
Crockford

A
nimation support

M
ore flexible (and faster)
ngRepeat
directive

P
owerful promise
-
based http request
interceptors

D
ynamically generated directive templates

I
nitial batch of mobile/touch support

“What a web browser would have been had it
been designed for web applications”

-
Miško
Hevery