Slide 1

Slide 1 text

ANGULAR BEST PRACTICES Alfredo Bonilla Web Developer

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

IMMUTABILITY

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

SAFE NAVIGATION OPERATOR

Slide 9

Slide 9 text

SHORT HAND TECHNIQUES TERNARY OPERATOR

Slide 10

Slide 10 text

SHORT HAND TECHNIQUES SHORT-CIRCUIT EVALUATION

Slide 11

Slide 11 text

SHORT HAND TECHNIQUES COMBINED TECHNIQUES

Slide 12

Slide 12 text

SHORT HAND TECHNIQUES COMBINED TECHNIQUES

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

TS - SE ENUMS FOR CONSTANTS

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

NGRX – CLASSES FOR ACTIONS

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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/

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

HAPPY CODING!