How I Would Start A New Angular Project
•0 likes•265 views
Report
Download to read offline
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.
Recommended
More Related Content
Recently uploaded
Recently uploaded(20)
Featured
Featured(20)
How I Would Start A New Angular Project
- 2. Angular: A good choice for large-scale enterprise applications
- 3. How I Would Start A New Angular Project Munich Frontend Developers Meetup 21.11.2019
- 4. Hi, I‘m Michael Hoffmann
- 5. Angular CLI
- 6. We can do better…
- 7. Agenda Nx (Monorepo) Domain Driven Design (DDD) OnPush Useful Tools & Tips
- 8. Nx from Nrwl for Monorepos
- 9. DEVELOP LIKE
- 10. Not just for BIG projects
- 11. MONOREPO? WHY?
- 12. One Repo
- 13. Nx Libs & Apps /LIBS /APPS TypeScript models UI component library NestJS backend Angular frontend React frontend
- 14. Basic Nx Fullstack Workspace
- 16. Build & Test Changesnpm run dep-graph npm run dep-graph
- 17. Run only changed code
- 18. BENEFITS OF USING NX • Build Full-Stack Applications • Develop like Google • Seamlessly use modern tools like Prettier, Cypress, Jest, Nest
- 19. Domain Driven Design (DDD)
- 21. BENEFITS OF USING DDD • Scalable architecture • Ubiquitous Language • Better code with less duplication • And more…
- 22. Reading Recommendation Free eBook from Manfred Steyer: https://leanpub.com/en terprise-angular
- 23. Tracker Domain ErrorHandler, GoogleAnalytics, LoggerService
- 25. LoggerService
- 26. Global Error Handler Service
- 27. BENEFITS OF USING TRACKER DOMAIN • Be able to see errors before the user reports them • Be able to analzye how an error happened
- 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
- 36. OnPush
- 38. CD CD CD CD CD CD CD ChangeDetectionStrategy. Default
- 41. OnPush
- 45. More about Change Detection:
- 46. BENEFITS OF USING ONPUSH • Better application performance
- 47. More Tools & Tips
- 51. strictNullChecks
- 52. tsconfig.json
- 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
- 57. Augury Browser Dev Tool
- 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
Editor's Notes
- Opiniated Release cycles & LTS DI, Forms, Router, TS, RxJS included
- 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.