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.
Nx is an easy to use version of the powerful monorepo tools used at companies like Google
Shared package.json Multiple technologies
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.
stack traces Backend & frontend error tracking Trail of events by using breadcrumbs Version changes
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 Search engine 7 themes & responsive
Angular CDK 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.
Lazy load: reduce the size of the application to be loaded improve the application boot time by not loading the modules that are not used.
How I Would Start A New Angular Project
Angular: A good choice for large-scale enterprise
How I Would Start A New
Munich Frontend Developers Meetup
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
• Easy setup (especially using Nx)
• Very fast (parallelization, run slowest tests first)
• Similar syntax as jasmine
• Good mocking support
• Provides snapshot testing
• 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.
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
BENEFITS OF USING BETTER TESTING TOOLS
• Writing tests makes more fun
• Code is more readable
• Tests run faster
• 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
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.
• Put dumb components in
a UI component library
• Use something like
StoryBook to visualize
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.