AngularJS - Architecture decisionsin a large project 

Architecture decisions

in a large project

Who's speaking ?

• Elad Hirsch – Team Leader @ IDI

(Java , JavaScript , DevOps , Architecture)

• Guest lecture at TheEdge & Jenkins

Conferences

• A Programming Geek

Technology stack

Project Bootstrap

Project Bootstrap

Project Bootstrap

Project Bootstrap

Its all about the people

+ =

divide et impera

Architecture Principles

How do we handle large scale JavaScript Application ?

Bower frontend artifacts

Library

• Share API

• Bower Dependencies

Bootstrap

• Dev Bootstrap

• Karma Tests

• Watch & Recompile

Deployable

• Application Archive

• UI/E2E Tests

Project structure

Snapshot

Deployment

• For rapidly moving code where bug fixes and

enhancements are coming fast

• Reduce the amount of framework based

checkout and builds

• Less framework variation to maintain

Always Moving forward

Full Build

Private Bower

NPM Registry

Artifactory

Artifactory & NPM

• Code reuse –Separate concerns :

– UI Widget – framework team

– MD logic – applicative teams

• DOM representation :

– link / compile overhead

– Complex DOM structure /Huge DOM nesting

• Distinction between directive instances :

– Via controllers -> more $scopes

– Event-bus || $rootScopes -> complex / hard to track

Angular directives

ES6 ClassesEnable cleaner and more readable code.

WizardEngine

MDInfra

if both the compile and link functions

are used, link should be the

return value of compile

Directives are Singletons

Get state via $scope

$scope

$scope

$scope

$scope

$scope

$scope

if both the compile and link functions

are used, link should be the

return value of compile

ES6 Register.jsMichael bromley

Enforce the use of a compile function

isn’t necessary in some cases

Decorate the compile

method

Easier Reusability

of Components

Separation of Concerns

Testing as a baseline

Easy mocking

Goals to achieve

AngularJS DI ?

Applications x Modules => Scalable enough ?

RequireJS and AMD

• Asynchronous Module loading

• Script tags -> Real module dependencies

• Modularizing / Protect module internals

• Compile code into single minified file

RequireJS plans for AngularJS

Inject static files

Angular $Injection

Angular Directive

Lifecycle

Angular Directive

configuration

Require angular module

Minification safe $inject using the inline, construction way – messy !!

$inject annotation technique – still not good

Use ng-annotate RequireJS pluginRequire-inject.js

require $inject plugin

Register Class

Require angular module

ng-annotate plugin

Putting It All Together

• Define your Angular components as

ES6 Classes

• Configure RequireJS DI

• Use traceur-compiler to convert to

JavaScript-of-today compiler

• Register your class to module

Register -> type (module ,name ,class)

dependency

information

Usage by another

module

What is TypeScript ?

• Open Source

• Compiles to plain JavaScript on any browser

• Syntactic sugar for JavaScript.

• Syntax is a superset of (ES5) syntax

• Primary goal is to add strict typing to

the language (while aligning with ES6)

TypeScript & Angular 2

Error handling

Expressions are forgiving

Type Attribute Evaluation

Forgiving Control Flow Statements

JavaScript evaluated against the

global window

Throw ReferenceError

TypeError

Supported

AngularJS Properties Evaluated

against $scope

Encapsulate the error

null/undefined

No support

add a Decorating $interpolate

Angular rendering

• Page Rendering is slower since browser

needs to do the extra work of DOM

• Compatibility with older browsers is hard

to accomplish

• Search Engines Optimization (SEO)

the biggest challenge

Angular rendering

• Page Rendering is slower since browser

needs to do the extra work of DOM

• Compatibility with older browsers is hard

to accomplish

• Search Engines Optimization (SEO)

the biggest challenge

Server rendering

Angular SEO

How crawler retrieve the page - http://localhost:5000/http://localhost:8081

A Hybrid Approach

change the business logic on the

fly without need to compile or

change java code

Java 8 Nashorn (JSR-223)

Import via webjar

Registers

dropbox zxcvbn globally

as it would in the browser

Run a password through

the globally zxcvbn function

Turn the return value

into a Java POJO

NodeJS on the JVM

Rule engine

ClientRule Engine

ServerRule Engine

UI Decisions

Kendo UI Mobiscroll

Israeli accessibility policy

• Slow — Anything faster than 50 ms is

imperceptible to humans and thus can

be considered as "instant"

• Limited — You can't really show more

than about 2000 pieces of information to

a human on a single page

dirty-checking is inefficient ?

Humans are

Lazy loading experiment

Browser performance basic fact:

• User events / layout / rendering / painting

all happen in turns in a single thread

• When your code runs for too long,

user's interaction is blocked.

dirty checkingUser event

• For Every scope.$$watchers->function return value check

against previous value

• This is called dirty checking and can be quite slow if there are

lots of objects to compare

The browser UI is frozen

Challenge : moving the digest cycle and

dirty checking into separate thread.

Web Workers

Use Cases

• Prefetching and/or caching data for later use

• Code syntax highlighting

• Real-time text formatting (Spell checker)

• Analyzing video or audio data

• Background I/O or polling of web-services

• Process large arrays or humungous

JSON responses

Spring & AngularJS

Spring Boot

Spring Security

AngularJS

Bootstrap

Bower

Metrics

Java 7 or Java 8

Maven or Gradle

Authentication Type:

- Cookie-based or OAuth2

Type of Database: SQL / NoSQL

Caching: EhCache or Hazelcast

Grunt or Gulp.js

Frameworks Project Options

Technology stack

Resources

• Angular design documents

• Serious angular SEO

• Improving Angular web app performance

example

• Inside AngularJS directives

Stay sharp - follow on twitter

Questions ?