Angular Best Practices

Coding practices edition.

Transcript

1. ANGULAR BEST PRACTICES Alfredo Bonilla Web Developer <CODING PRACTICES EDITION />
2. SMALL FUNCTIONS Small functions are easey to reuse, understand and maintain. If a function is becoming too crowned is a time to create a new one.
3. SINGLE RESPONSABILITY PRINCIPLE It is very important not to create more than one component, service or directive inside a single file. Every file should be responsible for a single functionality. By doing this, we are keeping our files clean, readable and maintainable.
4. IMMUTABILITY COPY OBJECTS IN AN IMMUTABLE WAY By modifying reference types immutably, we are preserving the original objects and arrays and modifying only their copies. The easiest way to modify objects and arrays immutably is by using the es6 spread operator (…)
5. IMMUTABILITY
6. ACCESS MODIFIERS Those properties and functions, which we are going to reference from the template should always have the public access modifier. The private ones will be visible to the HTML template as well, but it is not a good practice due to AoT compilation failure.
7. SAFE NAVIGATION OPERATOR To be on the safe side we should always use the safe navigation operator while accessing a property from an object in a component’s template. If the object is null and we try to access a property, we are going to get an exception. But if we use the save navigation (?) operator, the template will ignore the null value and will access the property once the object is not the null anymore.
8. SAFE NAVIGATION OPERATOR
9. SHORT HAND TECHNIQUES TERNARY OPERATOR
10. SHORT HAND TECHNIQUES SHORT-CIRCUIT EVALUATION
11. SHORT HAND TECHNIQUES COMBINED TECHNIQUES
12. SHORT HAND TECHNIQUES COMBINED TECHNIQUES
13. TS - USE ENUMS FOR CONSTANTS • Help organize collection of related values. • Please use caps to follow the convention and make them more readable.
14. TS - SE ENUMS FOR CONSTANTS
15. NGRX – CLASSES FOR ACTIONS This will grant you awesome benefits like type safety in all the places where you use the action: components, reducers, effects, etc. This might feel a bit weird when you start using it, as one would prefer the less clutter way of factory methods, but using classes will pay off on the long run.
16. NGRX – CLASSES FOR ACTIONS
17. NGRX – PAYLOAD PROPERTY NAME Always name the property of the action payload.
18. WHAT'S HOT THIS WEEK (… for me) • STACK BLITZ - https://stackblitz.com/ • ADVENTURES IN ANGULAR - https://devchat.tv/adv-in-angular/ • NGRX DATA - https://github.com/johnpapa/angular-ngrx-data • CHROME DEV SUMMIT - https://developer.chrome.com/devsummit/
19. SOURCES • https://code-maze.com/angular-best-practices/ • https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html • https://angular.io/guide/aot-compiler • https://www.youtube.com/watch?v=kW9cJsvcsGo • https://blog.angularindepth.com/a-deep-deep-deep-deep-deep-dive-into-the-angular-compiler-5379171ffb7a • https://blog.bitsrc.io/11-angular-component-libraries-you-should-know-in-2018-e9f9c9d544ff • https://definitelytyped.org/guides/best-practices.html • https://codeburst.io/five-tips-i-wish-i-knew-when-i-started-with-typescript-c9e8609029db • https://medium.com/panaseer-labs-engineering-data-science/clean-house-with-typescript-ba3f43de05a2 • https://basarat.gitbooks.io/typescript/docs/styleguide/styleguide.html • https://blog.usejournal.com/best-practices-for-writing-angular-6-apps-e6d3c0f6c7c1 • https://codeburst.io/five-tips-i-wish-i-knew-when-i-started-with-typescript-c9e8609029db
20. SOURCES • https://technologyconversations.com/2014/06/18/build-tools/ • https://codeburst.io/angular-best-practices-4bed7ae1d0b7 • https://github.com/palantir/tslint • https://www.codemag.com/article/1511051/TypeScript-The-Best-Way-to-Write-JavaScript • https://medium.com/panaseer-labs-engineering-data-science/clean-house-with-typescript-ba3f43de05a2 • https://www.intertech.com/Blog/google-javascript-style-guide-takeaways-for-typescript-developers/ • https://blog.codeminer42.com/the-good-the-bad-and-the-ugly-of-typescript-58a3ff3e248 • https://medium.com/panaseer-labs-engineering-data-science/angular-connect-2018-and-what-we-learned-about-angular-ivy- 73013093ca6d • https://medium.com/@kmathy/angular-tips-and-tricks-for-css-structure-cb73fa50f0e8 • https://github.com/johnpapa/angular-ngrx-data • https://blog.angularindepth.com/ngrx-tips-tricks-69feb20a42a7
21. HAPPY CODING!