DEV Community

Nosa Roy Okunbor
Nosa Roy Okunbor

Posted on

Angular Odyssey: 5 Years of Learning and Vibes

Introduction:
Alright, buckle up, fellow code wranglers! My journey into the wild world of Angular has been nothing short of a rollercoaster. Coming from a non-computer science background, I dipped my toes into the vast sea of web development back in 2008 with Adobe Dreamweaver. Back then, I was quite lost, but my insatiable curiosity for all things computer-related propelled me forward. Now, after more than five years of Angular adventures, it's time to spill the beans on what I've learned and, of course, add a dash of my own unconventional charm to it.

  1. A11y(Accessibility):
    Let's kick things off with a heavy hitter – accessibility. Ignoring this is like building sandcastles in a tsunami. Visually impaired users, and screen readers – they're all part of the game. Neglecting accessibility is a one-way ticket to losing users faster than you can say "404 error." So, let's be considerate developers and build with everyone in mind, even your younger siblings!

  2. Application Version:
    Time for a quick detour – keep your Angular game up to date. It's like keeping your wardrobe current but for your code. Don't let your library turn into a dusty attic; embrace the latest stable versions for maintainability and to dodge the bugs of yesteryears.

  3. Testing:
    Ah, testing – the unsung hero of development. Unit tests, end-to-end tests – they're not just for show. Writing tests is like having a superhero sidekick that helps you identify bugs faster than a caffeine-fueled coder

  4. Forms:
    Reactive forms, my friend. Yes, they can be a thorn in the side, especially when they're nested or doing the cha-cha dynamically. But trust me, this should be your go-to and this is the glue that holds your application together. Embrace the pain; it's worth it.

  5. Async pipes:
    Let's talk pipes, not the plumbing kind. When dealing with observables in RxJS, async pipes are your secret weapon. They're like the Avengers, improving readability, saving code reviews, and boosting your app's performance – all in one elegant swoop.

  6. Lazy Loading:
    Lazy loading – it's not a siesta for your code but a performance-enhancing strategy. Don't treat every folder like it's a Hollywood blockbuster; sometimes, you need a slow burn. Lazy load those pages, and watch your app sprint like it's on a caffeine high.

  7. Typescript Types:

By default, angular uses typescript, don't ruin the party by throwing 'any' around like confetti. Knowing your types is the secret handshake; use it wisely, and your app will thank you later, for example, a lot of people instead of defining the right type go straight to inferring a property as type: any, Aside from being bad practice this also kills the purpose of what it is used for, it makes debugging harder and eventually exposes your application to future bugs. please use of type any should almost not be bargainable when you're building your applications.

  1. Error Handling:
    Errors – the necessary evil. Handle them like a pro, or your users might think your app's on a coffee break. Nobody likes vague error messages. Be specific, guide your users, and avoid potential revenue loss. It ensures a positive user experience, facilitates debugging and maintenance, supports graceful degradation, and contributes to the overall security of the application. Consider a sign-up form where a user is meant to input his passwords with special keys or some fields are important but the submit button is still active(excuse the bad practice, please don't do it 🙏🏾) and the user tries submitting but encounters an error, and receives a generic error message like "An error occurred" without specific details, they might think your app is broken and they have no idea what the issue is.

  2. Template Logic:
    Templates are for show, not for heavy lifting. Don't turn them into a circus; keep the logic in the controller(.ts) file. Your app will thank you, and your users won't be stuck in a buffering nightmare.

  3. State management:
    Ah, the grand finale – state management. NgRx is the hero your dynamic data deserves. I could write a novel on this, but let's save that for another day. In short, when the data gets dynamic, state management is your compass in the coding wilderness.

Closing:
And that's a wrap for today's Angular escapade. I hope you enjoyed this ride or at least picked up a nugget of wisdom along the way. Until next time, happy coding, and chao! ❤️ 😅.

Top comments (0)