Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How I Would Start A New Angular Project


Published on

In this talk I want to present you some libraries and architectural decisions I use for new Angular projects. Some of the topics can also be adopted to other frontend frameworks so it is also interesting for non-Angular developers.

Published in: Software
  • Be the first to comment

  • Be the first to like this

How I Would Start A New Angular Project

  1. 1. Angular: A good choice for large-scale enterprise applications
  2. 2. How I Would Start A New Angular Project Munich Frontend Developers Meetup 21.11.2019
  3. 3. Hi, I‘m Michael Hoffmann
  4. 4. Angular CLI
  5. 5. We can do better…
  6. 6. Agenda Nx (Monorepo) Domain Driven Design (DDD) OnPush Useful Tools & Tips
  7. 7. Nx from Nrwl for Monorepos
  9. 9. Not just for BIG projects
  10. 10. MONOREPO? WHY?
  11. 11. One Repo
  12. 12. Nx Libs & Apps /LIBS /APPS TypeScript models UI component library NestJS backend Angular frontend React frontend
  13. 13. Basic Nx Fullstack Workspace
  14. 14. Monorepos are slow
  15. 15. Build & Test Changesnpm run dep-graph npm run dep-graph
  16. 16. Run only changed code
  17. 17. BENEFITS OF USING NX • Build Full-Stack Applications • Develop like Google • Seamlessly use modern tools like Prettier, Cypress, Jest, Nest
  18. 18. Domain Driven Design (DDD)
  19. 19. BENEFITS OF USING DDD • Scalable architecture • Ubiquitous Language • Better code with less duplication • And more…
  20. 20. Reading Recommendation Free eBook from Manfred Steyer: terprise-angular
  21. 21. Tracker Domain ErrorHandler, GoogleAnalytics, LoggerService
  22. 22. Sentry: Error Tracking
  23. 23. LoggerService
  24. 24. Global Error Handler Service
  25. 25. BENEFITS OF USING TRACKER DOMAIN • Be able to see errors before the user reports them • Be able to analzye how an error happened
  26. 26. Jest vs. Karma/jasmine
  27. 27. Why not Karma/jasmine? • Slow build times (especially initially) • Slow test execution (especially in larger projects) • Recompiling does not work reliably • HTML reporter like karma-jasmine-html-reporter tend to be buggy
  28. 28. Why Jest? • Easy setup (especially using Nx) • Very fast (parallelization, run slowest tests first) • Similar syntax as jasmine • Good mocking support • Provides snapshot testing
  29. 29. Test Tips • Consider using Spectator instead of the TestBed API of Angular. • Consider using Jest instead of Karma/Jasmine (Migration is quite easy) • Consider using ng-mocks to mock your component, directives, services, pipes and more. Your unit tests should be pure and therefore isolated. • Test your component from the DOM and not the class, you should think in user events instead of methods.
  30. 30. Cypress vs. Protractor
  31. 31. Cypress vs. Protractor Cypress • Not based on Selenium • executes in the browser and in the same run loop as the device under test • No cross-browser testing • Can only be written in JS • no cross-browser support Protractor • Based on Selenium which • is the industry standard • works across OS & programming languages • supports Cross-browser testing (even IE) • Main problem: timing
  32. 32. BENEFITS OF USING BETTER TESTING TOOLS • Writing tests makes more fun • Code is more readable • Tests run faster
  33. 33. OnPush
  34. 34. Why OnPush? PERFORMANCE!
  35. 35. CD CD CD CD CD CD CD ChangeDetectionStrategy. Default
  36. 36. CD CD CD CD CD CD CD (EVENT) ChangeDetectionStrategy. Default
  37. 37. CD CD CD CD CD CD CD ChangeDetectionStrategy.Default
  38. 38. OnPush
  39. 39. CD OnPush OnPush OnPush CD CD CD ChangeDetectionStrategy.OnPush
  40. 40. CD OnPush OnPush OnPush CD CD CD (EVENT) ChangeDetectionStrategy.OnPush
  41. 41. CD OnPush OnPush OnPush CD CD CD ChangeDetectionStrategy.OnPush
  42. 42. More about Change Detection:
  43. 43. BENEFITS OF USING ONPUSH • Better application performance
  44. 44. More Tools & Tips
  45. 45. Compodoc: Docs Generator
  46. 46. Strict TypeScript
  47. 47. TypeScript: strictNullChecks … … undefined 11 undefined NaN null 33 number number undefined null NaN 11 33 strictNullChecks null
  48. 48. strictNullChecks
  49. 49. tsconfig.json
  50. 50. Internationalization (i18n)
  51. 51. Internationalization (i18n) • Store translations in separate files and do not hardcode them in your components • Be prepared for multiple languages and dynamic language switches Angular  use ngx-translate
  52. 52. Building Complex Components • Use Angular CDK which provides a set of tools that implement common interaction patterns whilst being unopinionated about their presentation • If you build your component also take a look at existing open-source Angular libraries like Angular Material. There you can see how components are written the “Angular way”. • You can also look for existing Angular components in npm, therefore I can recommend taking a look at curated component lists like Awesome Angular Components or Awesome Angular.
  53. 53. UI Component Library • Put dumb components in a UI component library • Use something like StoryBook to visualize your components
  54. 54. Augury Browser Dev Tool
  55. 55. Prettier: Opinionated Code Formatter What is Prettier? • An opinionated code formatter • Supports many languages • Integrates with most editors • Has few options Why Prettier? • You press save and code is formatted • No need to discuss style in code review • Saves you time and energy • And more
  56. 56. Misc • State management: Start with simple state using a service, use NgRx if state becomes complex • Use Husky, to check if commit message has the correct format, code is formatted, linter has no errors and maybe also run unit tests before you push your code. • Lazy load all your modules. This way you can split your application in multiple smaller bundles which are only loaded if necessary.
  57. 57. Corresponding Blog Post
  58. 58. mokkapps Steps to your next successful Angular project • Use Nx • Use DDD • Implement Error Handling & Tracking • Prepare for i18n • Use available tools