AngularJS - Architecture decisions in a large project
Download as PPTX, PDF•5 likes•3,548 views
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.
AngularJS - Architecture decisions in a large project
- 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
- 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
- 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
- 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
- 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)
- 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
- 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
- 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 ?