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.
30. 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
31. Why Jest?
• Easy setup (especially using Nx)
• Very fast (parallelization, run slowest tests first)
• Similar syntax as jasmine
• Good mocking support
• Provides snapshot testing
32. 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.
34. Cypress vs. Protractor
• 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
• Based on Selenium which
• is the industry standard
• works across OS & programming
• supports Cross-browser testing
• Main problem: timing
35. BENEFITS OF USING BETTER TESTING TOOLS
• Writing tests makes more fun
• Code is more readable
• Tests run faster
54. Internationalization (i18n)
• Store translations in separate files and do not hardcode them in your
• Be prepared for multiple languages and dynamic language switches
Angular use ngx-translate
55. Building Complex Components
• Use Angular CDK which provides a set of tools that implement common
interaction patterns whilst being unopinionated about their
• 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.
58. Prettier: Opinionated Code Formatter
What is Prettier?
• An opinionated code formatter
• Supports many languages
• Integrates with most editors
• Has few options
• You press save and code is
• No need to discuss style in
• Saves you time and energy
• And more
• State management: Start with simple state using a service, use NgRx if state
• 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
• Lazy load all your modules. This way you can split your application in
multiple smaller bundles which are only loaded if necessary.
Nx is an easy to use version of the powerful monorepo tools used at companies like Google
Build a graph which will never be out of sync!
An Nx workspace can contain dozens or hundreds of applications and libraries. As a codebase grows, it can be difficult to understand how they depend on each other and the implications of making a particular change.
Free for personal projects and early-stage applications
View actual code in stack traces for over 32 languages and frameworks.
Backend & frontend error tracking
Trail of events by using breadcrumbs
Snapshot testing is great. It lets you capture a string that represents your rendered component and store it in a file. Then you can compare it later to ensure that the UI didn't change
Selenium executes in a process outside of the browser or device we are testing
Cypress executes in the browser and in the same run loop as the device under test.
supports all major APIs of Angular
Open-source and on npm
No server needed, no sources uploaded online
7 themes & responsive
Angular Material code snippets
GitHub curated component collections
When an array changes, Angular re-renders the whole DOM tree. But if you use trackBy, Angular will know which element has changed and will only make DOM changes for that particular element.
NgRX: you build an application with a lot of user interactions and multiple data sources, when managing state in services are no longer sufficient.
reduce the size of the application to be loaded
improve the application boot time by not loading the modules that are not used.