Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Best Practices

Angular Best Practices

Coding practices edition.

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

November 09, 2018
Tweet

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!