AngularJS in large applications - AE NV

AngularJS in large
applications
AngularJS Meetup

ae nv/sa
Interleuvenlaan 27b, B-3001 Heverlee
T +32 16 39 30 60 - F +32 16 39 30 70
www.ae.be

Agenda






Introduction
Managing a large application
Communication through hypermedia
Break
Reusable components

 2

http://www.slideshare.net/AE_nv/angular-js-in-large-applications
http://ow.ly/sPVGy

#ajsugbe
 3

Introduction
 Glenn Dejaeger @glenndejaeger
 Experience: 2+ years

 Thomas Anciaux @thomaux
 Experience: 2+ years

 Pieter Herroelen @piether
 Experience: 1 year

We work for AE @AE_NV

 4

Project context







Enterprise environment
Master database system
CRUD
Spearhead
Internal project
Infrequent releases

 5

Project size

 17 developers, 4 js developers
 10k MD total
 LOC’s
 JavaScript: 7k
 Java REST layer: 11k
 Java total: 700k+

 6

PART 1

MANAGING A LARGE APPLICATION

 7

Historical Issues

APP

MODULES

FRAMEWORK

REQUIREJS

APP
.LESS

MODULES
.LESS

 8

Historical issues
 No real build
 Manual
 Monolithic

 RequireJS
 Karma

 9

Initial solutions
 Introduce Grunt
 And separate builds

 Remove dependency on RequireJS

 10

New Issues

APP

MODULES

FRAMEWORK

MODULES

BOOTSTRAP

ANGULAR

BOOTSTRAP

FRAMEWORK

FRAMEWORK

ANGULAR

ANGULAR
 11

New issues
<base href=“whatever/buildnr/”>
directive(“aDirective”, function(){
return {
...,
templateUrl: “relative/path/...”
...
}
});

 12

New issues
 Dependency management?
 Referencing HTML templates

 13

Dependency Management?
 Manual!
 Error prone
 Not feasible with a large set of dependencies

 Wrap dependencies with output
 Ugly!

 14

New Solution
 Introduce Bower
 Introduce $templateCache

 15

Bower
 Setup each project as a Bower module
 Publish versions independently
 Bower can target local or zipped folders
 Store the tagged versions anywhere you’d like

 16

$templateCache
 Angular service
 Registers templates by name
 Grunt task compiles and concatenates all HTML to
JS

 17

Conclusion
 Advantages
 Automation of build system
 Closer to pure angular (easy Karma setup etc.)
 Dependency management

 Disadvantages
 One big file per project/module
 Harder to use Chrome Dev tools

 18

PART 2

COMMUNICATION THROUGH
HYPERMEDIA
 20

Project needs
 A lot of similar functionality (CRUD)
 Hierarchical data
 Flexible UI: “A browser in a browser”
 Multiple tabs
 Links all over the place
...

 21

First approach
"municipality": {
"criteria": {
"groups": [["LABEL“,"POSTAL_CODE"]],
“label": {
"type": "TEXT_MEDIUM",
"operators": "ALPHA",
"common": true,
"mandatory": false
},
…
},
…
 22

First approach

CLIENT

DATA

SERVER

CONFIG

 23

First approach

http://www.youtube.com/watch?v=62RvRQuMVyg

 24

Richardson maturity model

http://martinfowler.com/articles/richardsonMaturityModel.html
 25

Richardson maturity model

http://martinfowler.com/articles/richardsonMaturityModel.html
 27

Hypermedia

CLIENT

HYPERMEDIA

SERVER

 28

Hypermedia

CLIENT

JSON over HTTP

SERVER

 29

http://www.toddmgreen.com/wp-content/uploads/2011/12/Arthur-C-2.png
 30

Hypermedia
Content-type: application/hal+json

CLIENT

HYPERMEDIA

SERVER

 31

Hypermedia

SPEC

 32

Hypermedia

SPEC
CLIENT

SERVER

 33

HAL - Hypertext Application Language

http://stateless.co/hal_specification.html
 36

"_links": {
"self": { "href": "/orders"}
},
"currentlyProcessing": 14,
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
"self": { "href": "/orders/123" },
"ea:basket": { "href": "/baskets/98712" }
},
"total": 30.00
}
...
 38

"_links": {
},
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
},
"total": 30.00
}
...
 39

"_links": {
},
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
},
"total": 30.00
}
...
 40

EPiaAACBSwaADEtPoHTMD

<resource uri=“http://example.com/path”> ...

 41

JSON

• properties
• links
• embedded

$scope

objects

 42

JSON

• properties
• links
• embedded

$scope

functions

 43

follow() Replace content of directive with
resource behind link

Example:
<a ng-click=“links[‘children’].follow()”></a>

 44

function(method, data) Do an HTTP call
with the specified method and the specified data
in the request. Returns a promise.
Example:
$scope.links[‘save’](‘POST’, $scope.form).then(...);

 45

HAL

CLIENT

SERVER

LINK RELATIONS

 47

JSON

• properties
• links
• embedded

$scope

Recursive
structure

 48

JSON

$scope

HTML

• properties
• links
• embedded

• header

property

 49

JSON

$scope

<ng-include
src=“property+’.html’”>
</ng-include>

• properties
• links
• embedded

• header

HTML

property

 50

http://www.x17online.com/gisele-elephant.jpg

 51

http://www.x17online.com/gisele-elephant.jpg

 53

PART 3

DEVELOPING REUSABLE
COMPONENTS
 56

What is a component?
 An identifiable part of a larger program or
construction
 Provides a particular function or group of related
functions
 Has its own responsibility

 59


COMPONENT

DIRECTIVE

 60

Grid component
directive(“grid”, function(){
return {
...
scope: {
data: ‘=‘,
columnDefs: ‘=‘,
sortable: ‘=‘,
filterable: ‘=‘
...
}
controller: ‘gridController’,
template: $templateCache.get(‘grid.html')
...
}
});
 62

Grid component
<div ng-init=“columnDefs=[
{field: ‘firstName’, title: ’firstname’},
{field: ‘lastName’, title: ’lastname’},
{field: ‘city’, title: ’city’},
{field: ‘title’, title: ’title’},
{field: ‘birthDate’, title:’birthdate’},
{field: ‘age’, title:’age’},
]”>
<div grid
data=“$scope.persons”
column-defs=“columnDefs”></div>
</div>

 63

Problem 1
 1 big controller
 Unreadable
 Unmaintainable
 No separation of concerns

 64

Solution

 Different services with their own responsibility
 Injected into controller
 Only logic, no state!

 65

Problem 2
 1 big object to configure all the columns
 Unreadable
 Static
 Error prone

 66

Solution

<div grid data=“$scope.persons”>
<div grid-column field=“firstName” title=“firstname”/>
<div grid-column field=“lastName” title=“lastname”/>
<div grid-column field=“city” title=“city”/>
<div grid-column field=“title” title=“title”/>
<div grid-column field=“birthDate” title=“birthdate”/>
<div grid-column field=“age” title=“age”/>
</div>

 67


COMPONENT

DIRECTIVE
DIRECTIVE
DIRECTIVE

 68

Grid component

directive(“grid”, function(){
return {
...
transclude: true
...
}
});

 69

Grid component
directive(“gridColumn”, function(){
return {
...
scope: {
field: ‘@‘,
title: ‘@‘,
hidden: ‘=‘
...
}
require: ‘^grid’,
link: function(scope, elem, attrs, gridCtrl){
...
}
...
});
 70

Communication between components
 Isolated scopes
 Don’t pollute other scopes
 No direct access to parent scope

 71

Communication between components
 Events
 Loosely coupled
 No control over listeners

 Shared services
 Tightly coupled
 Control over consumers

 72

Parting words
 Solved a number of problems
 Modularity of the build
 Interaction with a hypermedia back-end
 Modularity of the code

 Created a few new problems
 YMMV

 73

@ae_nv
linkedin.com/company/ae-nv-sa

AngularJS in large applications - AE NV

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to AngularJS in large applications - AE NV

Similar to AngularJS in large applications - AE NV (20)

More from AE - architects for business and ict

More from AE - architects for business and ict (14)

Recently uploaded

Recently uploaded (20)

AngularJS in large applications - AE NV