Large Scale AngularJS App

December 18, 2015
Reading Time: 2 minutes

My list of how not to completely screw yourself over on a large-scale AngularJS project – The biggest project I’ve done has gone from Angular 1.0.x to 1.4.x. These are what my findings were:

  1. Setup the style guidelines right from the get-go. Seriously, this simple starting point will in the end give you at least the advantages of keeping code clear. John Papa has a community driven one on github that’s excellent.
  2. Get comfortable with directives. Review the way that some of the more popular ones are setup and created. DRY is your friend in any application, and doubly so in a large one.
  3. Be sure that everyone that is going to be working on the design end of it (CSS, LESS, SASS, etc.) are capable of the work. The more complex the CSS of the site, the more potential to royally screw up the UI there will be.
  4. I suggest having everyone watch at least the JavaScript Good Parts video with Douglas Crockford. It’s available on Pluralsight and I think Frontend Masters.
  5. Setup your Linters from the get go. JSCS and ESLINT are my preference. I also highly suggest Uncss and Stylestats for the UI CSS work that’s being done.
  6. Consider a LESS or SASS Library to standardize some basic mixins to use throughout the UI.
  7. If possible, get at least Directive unit tests working properly. It’ll save you many debugging headaches.
  8. Be sure to well document an actual snippet for your directives for use in a top of file comment block. Nothing more annoying than needing to use a random directive that requires you to read all the code to know how to use it properly.
  9. Most browsers work properly most of the time, until you open things in IE.
  10. Get auto-deploy setup to dev servers. Makes having the latest builds available to QA a lot easier when somewhat centrally managed.
  11. If you use $broadcast just throw your computer out of the window.
  12. Don’t roll your own translation directive. Use angular-translate or another community option.
  13. Get used to arcane console.log errors.
  14. If you encounter your app having infinite digest cycle errors, you’ll realize very quickly that they’re not easy to diagnose. I highly suggest reading my post on finding them in a large app and what worked for me.

I may add more to this list in the future – but have fun and make cool stuff!

JavaScript Design Patterns

December 9, 2014
Reading Time: 1 minute

While in the process of needing to add some more complex functionality to my current ordering system project, I knew that I needed to start tackling the implementation for a number of design patterns for the front end. I finally took the time over the weekend to sit down and learn the ones that I needed to use and incorporated them with a basic AngularJS/Bootstrap/JQuery template.

Removing everything but exactly what I was trying to accomplish made understanding and implementing the patterns much more reasonable, as well as efficient.

I created a github repo to put them into in the event anyone else is looking to actually learn some design patterns in JavaScript as well. Check it out here:

https://github.com/SBero/JavascriptPatterns

I’ve so far implemented the following patterns:

  • Factory
  • Command
  • Memento
  • State
  • Strategy
  • Visitor
  • Chaining
  • Lazy Load

Hope this helps anyone out there looking to implement the same things themselves.