angularjs - architecture decisionsin a large project
TRANSCRIPT
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.
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 ?