A React fanboy in Angular-land

I have a confession to make; I love new tech. New frameworks, new transpilers (which spellcheck tells me isn't even a real word), new anything. I was a big fan of Angular when I first learned of it while working at BEAM Interactive in 2013. As a newbie to the world of post jQuery JavaScript, I was blown away by how easy it was to make fairly complex applications with minimal knowledge of the framework. My love affair however was brief, as I soon joined a team using Backbone.js and no longer had two way data-binding at my finger tips.

People describe Angular's learning curve as a hockey stick, with anything beyond the initial tutorials taking considerable time to master. It even has a slew of words describing its own inner workings that seem Biblical in their lexicographic origins. Transclusion anyone? Oh look, spellcheck doesn't recognize that one either. Not to be confused with transmogrification (transform, especially in a surprising or magical manner), which while used in Catholic dogma, is also a fine word to describe ones experience learning Angular. For the most part, this was my experience recently when I took on a partially completed project using Angular 1.x.

I started the project like most developers, cursing the unknown names of those who coded before me, as I sifted through a frankenstein of best practices and wtf's. After several existential crises and internal debates to blow it all up and start again in my flavor of choice, React, I decided to put my big kid pants on and turn lemons into cocktail garnish. After all I was developer, master of my universe... within the confines of the given framework I used. I decided to shape this Angular app in my own React loving image. I would largely ignore two-way data-binding and make Angular work more like previous applications I had built in React and Redux. I stopped short of actually using Redux (which apparently is a thing you can do with Angular 1.x now), and instead tried to make some sense of order with how my application worked. This is surprisingly for some people with Angular, because it allows you to do so much, in so many different ways. Here is an incomplete list of things that might be obvious to you, but were critical in the transmogrification of my own appreciation and understanding of Angular (just in time to learn Angular 2).

1. Use UI Router, Angular's router is not suitable for large applications. I also found some UI Router add-ons that helped tremendously; doing things like stateful modals without changing the initiating state (think sticky modals), became fairly easy to implement.
2. Use resolve to preload data before your view state transitions. This can be a bit slow if you have lots of data to fetch, so I'd recommend using it when you are doing something like displaying a single collection of items.
3. Consider abstracting API calls to a single API service, or at least to the particular service responsible for that endpoint. When I took on this project, each directive or controller had $http requests all over the place, cleaning things up to be in a single source was extremely helpful.
4. Make a service for each data type. Comments get a CommentsService, Widgets get a WidgetsService, and so on. If a single item in a collection has different needs than it does as a collection, consider making single services for those as well.
5. If you are wary of piling up $watch'ers, consider using an Observer pattern to let your various components register for future updates as your Services change. This seems to be faster for the most part, with less overhead. Shout out to whomever recommended this on Stack, I owe you a beer or five.
6. Directives are your friend. My initial instinct was to make controllers and views for most of the components, as they were seldom repeated, and pass various actions down to the directives(my React brain...). This proved to be mostly ineffective, and letting the directive talk to the Service itself and call API methods in the API Service made things much more understandable.
7. Even your friends (directives) can #$@! you over. Scope should be a four letter word. Maybe I'll call it Scop from now on. Beware of $scope in your directives, as it can be shared between each instance, which I'm sure is useful to someone, but certainly not me.
8. Manipulating, creating and appending DOM elements in Angular kind of sucks. This is the one part of this project that has taken up way more time than it should. Angular uses jQuery or a light version of jQuery to do DOM manipultion, which is fine, but leaves many things I took for granted in React harder to achieve. If you have any tips beyond $compiling, please drop them in the comments.
9. Some of the best community driven repositories are now dead. This was a huge bummer, as it meant I had to write things and solve problems that had already been solved before. Several times I found originally well regarded packages that had not been updated in over a year or two, as people's focus drifted onto new frameworks.

This project has actually given me a good appreciation for Angular 1.x. I wouldn't recommend using it for future projects, due to the stale death of many repositories on GitHub, but over all it has certainly improved my own skills as a developer and love for Services. If you have an unwieldy Angular 1.x app in need of some tough love, send me a message, I'd be happy to apply some of these principals to your project.