This document discusses architecture decisions for a large JavaScript project. It covers the project's technology stack including using Bower for frontend artifacts, ES6 classes for cleaner code, and RequireJS for asynchronous module loading. It also discusses design principles like separation of concerns, testing as a baseline, and enabling easier reusability of components. Specific Angular directives design topics are covered such as making directives singletons, handling state with $scope, and the compile and link functions.

1. Architecture decisions
in a large project

2. Who's speaking ?
• Elad Hirsch – Team Leader @ IDI
(Java , JavaScript , DevOps , Architecture)
• Guest lecture at TheEdge & Jenkins
Conferences
• A Programming Geek 

3. Technology stack

4. Project Bootstrap

5. Project Bootstrap

6. Project Bootstrap

7. Project Bootstrap

8. Its all about the people

9. + =
divide et impera

10. Architecture Principles
How do we handle large scale JavaScript Application ?

11. Bower frontend artifacts
Library
• Share API
• Bower
Dependencies
Bootstrap
• Dev Bootstrap
• Karma Tests
• Watch &
Recompile
Deployable
• Application
Archive
• UI/E2E Tests

12. Project structure

13. 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

14. Full Build

15. Private Bower

16. NPM Registry

17. Artifactory

18. Artifactory & NPM

19. • 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

20. ES6 Classes
Enable cleaner and more readable code.
Wizard
Engine
MD
Infra

21. if both the compile and link functions
are used, link should be the
return value of compile

22. Directives are Singletons
Get state via $scope
$scope
$scope
$scope
$scope
$scope
$scope

24. if both the compile and link functions
are used, link should be the
return value of compile

25. ES6 Register.js
Michael bromley
Enforce the use of a compile function
isn’t necessary in some cases
Decorate the compile
method

26. Easier Reusability
of Components
Separation of Concerns
Testing as a baseline
Easy mocking
Goals to achieve

27. AngularJS DI ?
Applications x Modules => Scalable enough ?

28. RequireJS and AMD
• Asynchronous Module loading
• Script tags -> Real module dependencies
• Modularizing / Protect module internals
• Compile code into single minified file

29. RequireJS plans for AngularJS

30. Inject static files
Angular $Injection
Angular Directive
Lifecycle
Angular Directive
configuration
Require angular module

31. Minification safe $inject
using the inline, construction way – messy !!
$inject annotation technique – still not good
Use ng-annotateRequireJS plugin
Require-inject.js

32. require $inject plugin
Register Class
Require angular module

33. ng-annotate plugin

34. 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)

35. dependency
information
Usage by another
module

36. 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)

37. TypeScript & Angular 2

38. Error handling

43. 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

45. 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

46. 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

47. Server rendering

48. Angular SEO
How crawler retrieve the page - http://localhost:5000/http://localhost:8081

50. A Hybrid Approach
change the business logic on the
fly without need to compile or
change java code

51. Java 8 Nashorn (JSR-223)

52. 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

53. NodeJS on the JVM

54. Rule engine
Client
Rule Engine
Server
Rule Engine

55. UI Decisions
Kendo UI Mobiscroll

59. Israeli accessibility policy

60. • 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

61. 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.

62. dirty checking
User 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

64. The browser UI is frozen
Challenge : moving the digest cycle and
dirty checking into separate thread.

65. Web Workers

66. 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

67. Spring & AngularJS

68. 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

69. Resources
• Angular design documents
• Serious angular SEO
• Improving Angular web app performance
example
• Inside AngularJS directives

70. Stay sharp - follow on twitter

71. Questions ?