10 Tips to Be a Good Angular Developer

1. Modularize your app

splitting the application into different modules will make your app:

• Implement a separation of concerns: every module will make its work

• Make your modules reusable between projects and approaches

• Run faster, because your submodules can be lazy-loaded in specific routes using the loadchildren() function from the Angular Routing module

• Clearer in terms of coding: every time you got reported about an issue you know on which module you need to work for the fix

• Separate routes using sub-routing modules: every module should have its routing modules with rules to access, parameters, and more

2. Separate logic in subcomponents

Working with subcomponents will make your app:

• Make your components reusable between parent components, even more, if you use simple presentational ones

• Syncing data and parameters using @Input(), services, Observables, Subjects, and more

• Syncing emitted events using @Output()

• Basing its functionalities on something like a template engine

• Delegate specific logic on Classes underneath the parent Component

3. Don’t abuse services, they’re not meant to be

• Don’t use services to do anything, always consider a plain and clear alternative to do what services shouldn't

• Don’t manage the application state with services, it won’t be scalable and you will lose control of what kind of information and behaviours services are holding and handling

• Don’t generate tons of services, most apps can hold just some of them

• Don’t inject services everywhere, if you come to this maybe your service is doing too much and for too many components

• If you need to manage a complex state, you’d better use a Redux approach rather than plain services

4. Avoid template-driven Forms (most of the time)

• They don’t scale much

• They’re not programmable because the view is static. And yes, you can “generate” elements using *ngFor but it’s a really bad approach.

• They don’t provide APIs and methods, template-driven forms just have “states”. Reactive forms have arrays, controls, validators and methods to set values atomically and not.

• They’re good for very minimal forms, you can avoid Reactive forms for simple search engines, logins and stuff like that.

5. Use a powerful TypeScript, not just ES6 stuff

• Use types and avoid “any”: everywhere! Typescript finally gives a direction to JavaScript implementations, providing a variety of types and data structures. They just compile well to ES5 — use it!

• Use interfaces more than classes: in a front-end application, classes are most times not necessary, objects don’t need methods and you can extend interfaces too. They’re just simple and amazing.

• Make the code clean using spread operators, Partials, arrow functions and everything you can. TypeScript is just so “direct” and smart.

• Use optional and try to understand why they’re useful instead of just being more than a pain in the eye.

6. Approach routing the right way

• Angular’s routing gives you guards to protect your routes

• Separate logic using multiple modules

• Use parameters and the ActivatedRoute service to grab parameters between components

7. Choose the right UI kit for your project

• There are a lot of UI kits available for Angular

• They’re a lot different from themself, you need time and training to explore them and choose the right one

• Some are complex, and some are very basic, but they all integrate directives, animations and separation of concerns

8. Eventually integrate a state manager

• If the app becomes complex, you should integrate an architectural design pattern

• If you don’t, using services, instances, components and orchestrating the whole thing will make you lose control

• Redux could be a good choice and NgRx is a solid library and a very powerful tool

• If you use Redux, don’t forget to set up Dev tools (available for Firefox and Chrome)

• Remember: not every application need a state manager, consider this solution only for complex and enterprise project

9. Approach authentication the right way

• Use a JWT (or equivalents) to store the user identity and protect it with a signature

• Implement guards to protect authorized routes

• Use an Interceptor to append the Authentication Bearer to HTTP Requests

• Always validate the JWT server-side to make it secure and recognize the user

• Consider JWT alternatives if needed, authentication is a wide and fundamental aspect of your application.

10. Keep the template syntax “plain”

There are a lot of things you can code to the view while developing in Angular: bindings, directives (structural, attributes, custom), pipes, template variables, interpolations; and you always have to try to keep in mind that your template must be readable. Overcoding HTML tags with too much stuff is no good because it will mess up your indentation and your view’s source code. Always use subcomponents and presentation components to split up concerns and invoke methods if your comparisons or your computed value is too complex to just stay on that HTML tag. Remember that the HTML is the view of the MVC pattern — so why should you code it too much?