1. Time Saving AngularJS TipsAngularJS is a powerful tool for creating dynamic web pages,but as with any tool it can make things more complicated andunwieldy when used incorrectly. Below are some tips for thoselooking to improve the performance or the stability of theirAngularJS website. Some of these tips will save memory foryour application, resulting in a smaller footprint, while otherswill focus on the development process allowing for quickeridentification of errors that would otherwise emerge at themost inopportune time.Letting Your Data Dictate the AppOne of the keys to a good architecture in AngularJS is understanding howyour data will be used in the application. Too many Angular.js applicationsrely on jQuery-style DOM manipulation to achieve their look and feel, whichcan be slow and problematic as DOM manipulation is an expensive operation.Structuring your application based on the data being presented instead allowsyou to have more readable code, and lets AngularJS work as it was intended.A few good resources on how best to structure your code are offered on GitHubby John Papa in his AngularJS Style Guide and Angular demos repositories.www.backand.com

2. Make Use of Unit TestsThe structure of AngularJS often means that the code you write isnt executeduntil it is needed by the browser. While this is great from a code availabilitystandpoint, as you dont need to bounce the web server to display informationin a different way, this also means that your newly-deployed code may havebugs that didnt come up during post-development testing. Having a robustunit test suite can help discover these errors before they bring your site downin production.Luckily, AngularJS is written with testing in mind, and there are unit testframeworks such as karma, released by the team at Google responsible forAngularJS in the first place that make the entire process relatively painless.Simply adopt a testing approach that makes sense for your developmentgoals, and start testing. Maximum coverage is the target here in the absenceof a compiler, you want to make sure syntax errors are caught as quickly aspossible.Some good examples of unit testing can be found in the AngularJSdocumentation as well as on Egghead.io in Testing Hello World.Debugging Actively, Not PassivelyA common front-end development practice is using Console.log() as theprimary means of debugging. This arose from necessity, as early browsershad a complete lack of development tools for front-end code. Most modernbrowsers, though, have a fairly robust set of development tools built-in,rendering this logic somewhat obsolete. Chromes development tools, forexample, allow for all of the debugging functionality of a standard IDE fromline-by-line debugging to profiling. A break point set at the problem point ofa function can provide far more information than a simple logging statement.If you still want to use console logs, or if the call stack is too tedious to workthrough, here is a quick tip: use a console log call in a conditional break point.The console log call evaluates to false, so the break point will never actuallytrigger this allows you to get quick logging on the call stack leading up tothe function being tested without having to refresh the page.There are several AngularJS debugger extensions available today, the mostpopular being Batarang, Firebug and ng-inspector are a few of the otheroptions. Definitely worth watching is Darius Riggins presentation, Intro toChrome Dev Tools with AngularJS.www.backand.com 3. Be Aware of Memory UsageOne of the major elements impacting page load time is the number andsize of data objects loaded into memory. While it is very tempting to storethe entirety of an object in memory, you should structure your applicationsso that only the data elements needed for the UI are passed through. Thisresults in a smaller memory footprint for your application, resulting in fasterload times and quicker UI response. Additionally, evaluate using local storageinstead of the cache. Cache size can be limited, particularly on older mobiledevices, causing instability under load.Related to this tip is the use of infinite scrolling. While an infinite scrollmay seem like the ideal element for your application, using it in the wronglocations can result in excessive memory usage as rendered items can be keptin memory even after they have been scrolled off-screen. You can mitigatethis memory usage by writing a custom infinite scroll driver that cleans upthe beginning of the scroll as it moves off the page, more often than not asimple paginated result display is the quicker and easier option.We found two code examples, AngularJS Memory Leak Playground andRunning From AngularJS Memory Leaks to help you with your memory issues.Build an AngularJS/Bootstrap admin over your cloud database with Backand:Get started now.www.backand.comContact InformationBackand Inc.info@backand.comwww.backand.com