ANGULAR BEST PRACTICES Alfredo Bonilla Web Developer

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.

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.

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 (…)

IMMUTABILITY

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.

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.

SAFE NAVIGATION OPERATOR

SHORT HAND TECHNIQUES TERNARY OPERATOR

SHORT HAND TECHNIQUES SHORT-CIRCUIT EVALUATION

SHORT HAND TECHNIQUES COMBINED TECHNIQUES

SHORT HAND TECHNIQUES COMBINED TECHNIQUES

TS - USE ENUMS FOR CONSTANTS • Help organize collection of related values. • Please use caps to follow the convention and make them more readable.

TS - SE ENUMS FOR CONSTANTS

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.

NGRX – CLASSES FOR ACTIONS

NGRX – PAYLOAD PROPERTY NAME Always name the property of the action payload.

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/

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

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

HAPPY CODING!