
Improving Angular performance with 1 line of code - lolptdr
https://medium.com/@hackupstate/improving-angular-performance-with-1-line-of-code-a1fb814a6476#.f94wuqq7d
======
RKoutnik
As someone who's specialized in AngularJS optimization [0], this doesn't
surprise me in the least. Developers leave plenty of performance optimizations
on the table, some worse than this one. The truth of the matter is that in the
general case, it doesn't matter. We engineers like to go on and on about this
or that perf efficiency but most of the time the code runs fast enough (and
the majority of the time when it doesn't, ads are to blame over framework
tweaks).

Heck, I shouldn't even be saying this as it'll cut into my very lucrative
field but unless you've got a confirmed performance problem, you shouldn't
think about it at all. Really. Leave all of the fancy perf tweaks behind.
Sure, you might get ridiculed on Medium but that's par for the course here on
the internet. I'm afraid articles like these will cause lots of cargo-cult
'optimization' that just makes the job harder for future devs.

Make it _work_ , make it work _well_ , THEN make it work _fast_.

[0] I wrote Batarang's new perf panel before Google abandoned the project

~~~
dmitrygr
>>The truth of the matter is that in the general case, it doesn't matter. We
engineers like to go on and on about this or that perf efficiency but most of
the time the code runs fast enough

THIS!

This is why battery life on mobile sucks

everyone who thinks this way is the reason

.

As everything moves to the web, the performance of your code matters

.

So what if my phone has just enough CPU to render your site? You should not be
content with that - you should strive to use less, so my CPU can go to sleep
faster.

.

Your job is _supposed to be hard_. you're an engineer! Please consider the
consequences of your actions.

~~~
andybak
> Your job is supposed to be hard. you're an engineer! Please consider the
> consequences of your actions.

My clients pay my wages and they are the ones who choose what my priorities
should be. Where are these mythical developers who get to choose how long to
spend on optimising working code without any financial imperatives? Outside of
hobby projects there's always someone counting the pennies.

~~~
verytrivial
I agree, but this is a moral imperative, not a financial one. And before you
say "it's immoral to spend the client money on things they don't want", you're
right. Your job is to convince the client it is "worth" it.

~~~
746F7475
So, what have you done to improve the situation?

------
blinkingled
This is a case of bad defaults - why should a developer be required to write
code, even if it is a one liner, to _disable_ debug? It should be the other
way around - you write a single liner to enable debug.

~~~
megablast
Just another reason to hate angular.

~~~
__derek__
That's not just Angular. From the React README[1]:

> Note: by default, React will be in development mode. The development version
> includes extra warnings about common mistakes, whereas the production
> version includes extra performance optimizations and strips all error
> messages.

> To use React in production mode, set the environment variable NODE_ENV to
> production. A minifier that performs dead-code elimination such as UglifyJS
> is recommended to completely remove the extra code present in development
> mode.

[1]:
[https://www.npmjs.com/package/react](https://www.npmjs.com/package/react)

------
gamache
I'd like to see some data indicating there is actually an appreciable
performance difference. Indeed, with only one line of code to add, the setup
cost is low, but this article asserts a performance gain without any evidence.

~~~
aaronbrethorst
The official Angular docs describe it thusly:

    
    
        You may want to disable this in production
        for a significant performance boost
    

[https://docs.angularjs.org/api/ng/provider/$compileProvider](https://docs.angularjs.org/api/ng/provider/$compileProvider)

I'm inclined to believe the engineers who wrote the docs on this.

~~~
Bahamut
A Twitter engineer mentioned this in a lightning talk in the AngularJS SF
meetup a little more than a year ago - he mentioned that he found speed gains
of about 33% with that one line.

It's a great tool to have in your belt for optimizing angular apps, most
people working with angular are not aware of this unfortunately.

------
Zekio
Shouldn't debugging be something you opt-in to rather than opt-out of?

Seems like a weird design choice

~~~
mkolodny
Django has DEBUG set to True by default, too.

~~~
Lxr
They have a fairly obvious _" SECURITY WARNING: don't run with debug turned on
in production!"_ above it though.

------
nrub
Looks like it's the first suggestion in their production developer guide,
[https://docs.angularjs.org/guide/production](https://docs.angularjs.org/guide/production)

------
jsumrall
I've searched a few minutes for any blog post or article which demonstrates
the performance difference between turning this setting on or off, and I
haven't found anything.

If you don't have a benchmark, you don't have a performance boost.

~~~
dimgl
This is a silly statement. Not everything is placebo. I'm working on a bigger
Angular application and adding this one line of code made a small perceivable
difference.

~~~
rrdharan
Did you do a double blind test or use any instrumentation to confirm your
perception? I ask as someone who has more than once been convinced that I'd
made something faster only to prove myself wrong after measuring it.

------
mangeletti
Wow, I did not know that everyone else _also_ right clicked to "inspect
element" all over the place, for no reason...

I love moments like this.

~~~
melvinmt
It comes in quite handy when you're dealing with sites that attempt to hide
content behind a paywall, with just a front-end solution...

#nevertrusttheclient

~~~
imjustsaying
That still works? Cool.

Off the top of your head, do you remember any examples of sites that expose
paywalled content like this?

~~~
mangeletti
Not a _pay_ wall, but Quora requires login, and you can just remove the
overlay and the "noscroll" body class.

------
sker
Dude should have made a small fortune selling optimization services to those
big corps.

~~~
hinkley
There was a 3 job string in the late nineties where the first impressive thing
I did was go fix the log levels of the code and get transaction times down by
50%. Sometimes the simplest tricks are the best.

I've also been known to take a couple minutes off a build process or fix
something that is annoying everybody to break the ice.

------
aaronbrethorst
Does Angular 2.0 make this _one weird trick_ unnecessary?

~~~
jakegarelick
This article reminds me of those X Hate Him! ads.

[http://i1.kym-
cdn.com/photos/images/newsfeed/000/633/254/14f...](http://i1.kym-
cdn.com/photos/images/newsfeed/000/633/254/14f.jpg)

~~~
cookiecaper
I agree. He kept repeating "this one line of code that improves Angular
performance!" like he's trying to optimize for SEO on the term "improve
angular performance".

------
justinsaccount
I see this more as a tooling failure. All the
yeoman/grunt/gulp/webpack/boilerplate/starterkit BS that you need to do to get
a minified/concatenated/compressed build deployed and none of that turns this
option off?

The only way I was ever able to get an angular project built/tested/deployed
was by using something like yeoman. It's kind of shocking that the default
project templates set up everything that you need except for this one thing.

I do notice that the made with angular site isn't even minifying their code:

[https://www.madewithangular.com/static/js/main.js](https://www.madewithangular.com/static/js/main.js)

Though that may be intentional so that people can see how it is written.

------
aeontech
Yeah, this is the hidden cost of not choosing sane defaults. If you're not
sure what "sane" is, default to "most likely/common use case". It's good to
hear this is changed to opt-in in Angular 2 though.

------
artursapek
Slow websites hate him!

~~~
hiimnate
Check out this one weird trick to making your websites 20% faster!

~~~
melvinmt
Line 17 will make you furious.

------
joesmo
What the author discovered is really shitty defaults for Angular. Most
software is like that. Don't blame the developers using the software, blame
the Angular developers for choosing shitty defaults. Instead of choosing
production ready defaults, they chose development ready defaults, creating
more work for everyone.

~~~
enraged_camel
>>Don't blame the developers using the software, blame the Angular developers
for choosing shitty defaults.

I like to blame developers who don't read the friggin documentation on the
software they are using.

This particular suggestion is literally the very first one in the developer
guide for running Angular in production:
[https://docs.angularjs.org/guide/production](https://docs.angularjs.org/guide/production)

~~~
joesmo
Oh please. There are thousands of Angular guides out there. Some people don't
use the official documentation, especially when it's as shitty as Angular's
is.

------
seanwilson
I've played with this setting on a few projects and didn't notice any big
difference so I'd like to see benchmarks for it. I reasoned that if it's not
significantly slowing the code down and could be used for easier debugging
later I didn't see the harm leaving it in.

------
azernik
Less link-baity title - "Using development options in production is bad for
performance."

------
acconrad
Yeah this seems more like something that Angular should be doing, rather than
the end user. If you're in a production environment Angular should enable this
for you.

------
roncohen
Great trick. Incredible that it's not on by default.

 _if_ you've applied that trick and still find yourself wondering what's
taking up time, we just released a performance monitoring tool. We're looking
for feedback, so please let me know how you find it:
[https://opbeat.com/angularjs](https://opbeat.com/angularjs)

------
teknologist
I think another question to ask is why calling angular.element().scope() is
considered use of "debug info"

------
shanselman
Forgive my ignorance, but doesn't the Angular framework

* have this off by default and you have to turn it ON in prod? * have it cause a Console.Log("DEBUG IS ON Y'ALL");

Either way, I mean, there's ways to give folks the heads up, right? It seems
odd to have to ADD this in Prod.

------
inquire
Protractor also works with debugInfo turned on from v 3.1.0

[https://github.com/angular/protractor/blob/master/CHANGELOG....](https://github.com/angular/protractor/blob/master/CHANGELOG.md)

------
matharmin
If you're using Ionic 1.x, the debugging info is forced to enabled, since some
of Ionic's internals depend on this for some reason. Haven't tested with 2.x
to see if they've improved this yet.

------
Pxtl
Nobody will write that one line until somebody says that it's time to make
performance a priority.

------
awqrre
This might have went unnoticed to most if the web was binary blobs...

------
wintersFright
tried this but it broke the angular-datatables directive

------
wintersFright
tried this but broke the angular datatables directive...

------
nathancahill
Improve Angular performance with 1 line of code: rm -rf /

------
partycoder
TL;DR

------
natvert
this. is. awesome. (and sad that i didnt know this already)

------
iLemming
Whatever. I'm using Clojurescript. I'm happy. When I used angular - I wasn't.

------
Alex3917
Flagged for being written as SEO spam, which is unfortunate because the
content is actually useful.

