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
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
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
components
• 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
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.
56. UI Component
Library
• Put dumb components in
a UI component library
• Use something like
StoryBook to visualize
your components
58. 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
59. 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.
61. mokkapps
Steps to your next successful Angular project
• Use Nx
• Use DDD
• Implement Error Handling &
Tracking
• Prepare for i18n
• Use available tools
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.