Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Some AngularJS pitfalls

branchandbound.net

Post reply on HN
Print view View original

21–30 of 30 posts

Re: Some AngularJS pitfalls

#21

Post by weavie »

TeamMCS wrote: post #4

My biggest issue with AngularJS is the inflexibility of it to play nice with existing '1.0' sites. Almost all the sites I'll develop take advantage of progressively enhanced components or at minimum, widgets that are bootstrapped server side. Angular wants you to load everything via AJAX - that can get heavy very quickly. This is also evident within the codebase. You find yourself dancing around DRY violations as you…

Rendr (https://github.com/airbnb/rendr) tries to get around this with Backbone.

Re: Some AngularJS pitfalls

#22

Post by oinksoft »

sequoia wrote: post #20
oinksoft wrote: post #19

Earlier quoted context omitted.

Why even teach it/include it at all? I fear that other developers will read a comment like this three months down the road and take it hook, line, and sinker. It is in line with the narrative that AngularJS and similar tools hide their complexity/inflexibility, and that the up-front examples are marketing fluff. I know I am guilty of this when I look to comments like this one for the "on the ground" perspective. Real…

take it hook, line, and sinker. :( I'm not a framework developer at all, just a user; this is just my observation. Maybe it's incorrect or poorly informed, just how it appears to one person. Anyway I'm not trying to sell anyone anything, neither am I a fisher of men, so feel free to spit out my tackle. :)

Perhaps then the lure leads to a tree branch, snarled by a poor cast from another angler earlier :) I didn't mean to imply devious presentation on your part.

Re: Some AngularJS pitfalls

#23

Post by numbsafari »

sequoia wrote: post #17

Nice writeup! I'm using angular now on a work project for the first time. My observation here is the same as what I've had for many "look how easy it is!" frameworks: A lot of frameworks sport "look how easy it is!" syntax, but using the easy/short syntax actually isn't adequate in some (sometimes most) circumstances, and often it isn't even "recommended." So you start using the longer, more explicit syntax, and all…

It's a valid point when you consider that PHP has suffered from the fact that just about every tutorial starts by showing how to use the mysql package (which still hasn't been purged).

If it doesn't work for a real working app, the feature is either broken or shouldn't be a feature at all.

Re: Some AngularJS pitfalls

#24

Post by greaterweb »

sequoia wrote: post #17

Nice writeup! I'm using angular now on a work project for the first time. My observation here is the same as what I've had for many "look how easy it is!" frameworks: A lot of frameworks sport "look how easy it is!" syntax, but using the easy/short syntax actually isn't adequate in some (sometimes most) circumstances, and often it isn't even "recommended." So you start using the longer, more explicit syntax, and all…

Once you have 3 different workarounds for what's basically the most fundamental framework feature

I wouldn't call ngCloak[1] a work around, it's part of the framework and specifically meant to handle this sort of thing.

Use of the ngInclude[2] is more aligned with my personal preference on how I organize and setup my projects.

The reality is though, if you are using Angular to drive your entire page (aka, everything is part of a single Angular app), the use of ngView[3] goes hand and hand to work with your routing. This brings in the view template for the route in the same way an ngInclude would for other parts of the page.

I'm drawing off my own experience in Angular development and looking at the basic examples given. If there are more complex examples that illustrate UI flicker as a real problem I'd certainly like to see them.

[1] http://docs.angularjs.org/api/ng.directive:ngCloak [2] http://docs.angularjs.org/api/ng.directive:ngInclude [3] http://docs.angularjs.org/api/ng.directive:ngView

Re: Some AngularJS pitfalls

#25

Post by SanderMak »

marknutter wrote: post #6
SanderMak wrote: post #3

Earlier quoted context omitted.

Correct, the particular system I encountered this minification issue has an Ant-based build (which calls r.js for concatenation and minification). I'll have to check on your compile suggestion. I tried lots of things, including using the postLink etc. Do you have an example?

Here's an example using the jQuery UI draggable plugin: http://jsfiddle.net/marknutter/hSbjX/4/

Thanks! I also just found out about angular-ui-utils, where they have a generic pass-thru directive for initializing jQuery plugins. Interestingly, they opted to use $timeout inside the compile function: https://github.com/angular-ui/ui-utils/blob/master/modules/j...

Wonder why that is, are there cases that would otherwise break?

Re: Some AngularJS pitfalls

#26

Post by goblin89 »

conradfr wrote: post #12
avolcano wrote: post #7

Earlier quoted context omitted.

> Almost all the sites I'll develop take advantage of progressively enhanced components or at minimum, widgets that are bootstrapped server side. Angular wants you to load everything via AJAX - that can get heavy very quickly. I'm surprised that I haven't seen a library for any JavaScript framework that elegantly handles loading JSON returned within a server-side template. It seems like the best of both worlds - use…

On initial page load I usually put json in a global javascript variable and retrieve it in Angular. Maybe you can do something cleaner with module.value() ?

> Maybe you can do something cleaner with module.value() ?

I do a simple thing like that for certain settings[0]. I imagine this could easily be done for bootstrapped model data as well.

[0] https://gist.github.com/strogonoff/6159373

Re: Some AngularJS pitfalls

#27

Post by marknutter »

SanderMak wrote: post #25
marknutter wrote: post #6

Earlier quoted context omitted.

Here's an example using the jQuery UI draggable plugin: http://jsfiddle.net/marknutter/hSbjX/4/

Thanks! I also just found out about angular-ui-utils, where they have a generic pass-thru directive for initializing jQuery plugins. Interestingly, they opted to use $timeout inside the compile function: https://github.com/angular-ui/ui-utils/blob/master/modules/j... Wonder why that is, are there cases that would otherwise break?

I'm not sure, that's a good question.

Re: Some AngularJS pitfalls

#28

Post by wnevets »

sequoia wrote: post #17

Nice writeup! I'm using angular now on a work project for the first time. My observation here is the same as what I've had for many "look how easy it is!" frameworks: A lot of frameworks sport "look how easy it is!" syntax, but using the easy/short syntax actually isn't adequate in some (sometimes most) circumstances, and often it isn't even "recommended." So you start using the longer, more explicit syntax, and all…

IIRC the only place the mustache syntax has a FOUC is in the main index.html file. Everywhere else is fine, directive templates, partials, etc. So it makes perfect sense to teach and show off that nice syntax .

http://youtu.be/ZhfUv0spHCY

Re: Some AngularJS pitfalls

#29

Post by beefsack »

Some suggestions from someone using AngularJS in a significant sized commercial project, which manages pages with complex DOM structures with tens of thousands of nodes on some pages:

* Don't modify the DOM with anything other than Angular, not with jQuery, not with anything. You will create a maintenance hell for yourself if you try to do things Angular isn't good at, but if you work well within it's strong areas you will achieve bliss.

* Make everything a directive if possible, Angular performs much better when you are dealing with much smaller scopes contained in directives.

* Angular watchers (including ng-repeat) can be very slow when handling large complex data sets. Create a $watch on the set length, and use that to create a flat index and ng-repeat over the index.

Re: Some AngularJS pitfalls

#30

Post by esailija »

SanderMak wrote: post #11
avolcano wrote: post #7

Earlier quoted context omitted.

> Almost all the sites I'll develop take advantage of progressively enhanced components or at minimum, widgets that are bootstrapped server side. Angular wants you to load everything via AJAX - that can get heavy very quickly. I'm surprised that I haven't seen a library for any JavaScript framework that elegantly handles loading JSON returned within a server-side template. It seems like the best of both worlds - use…

Agreed. I tried to explore this issue a while back: http://branchandbound.net/blog/web/2012/11/unify-server-side... Turns out that using script-tags is somewhat problematic, but as a comment points out, data-attributes could work.

This is not a problem in e.g. PHP, out of the box it can embed json in script tags, with default settings you never get the sequence `` (you get `` instead) and it even escapes U+2028` and U+2029 which are syntax errors in Javascript string literals but not in JSON.
Post reply on HN