6 ms·

How AngularJS helped us ship our mobile site quicker - Part 1 (Directives)

131 points by geelen 14y ago

ben_h 14y ago
Great post. I didn't understand the role of controllers and directives but this explained them well with a thoughtful walk through. The idea of wrapping distinct chunks of logic in separate directives that can then be sprinkled around the DOM declaratively is great. In my view this is a welcome alternative; in my (maybe limited) experience, many other JS frameworks have you writing substantial amounts of glue code (i.e. bug-magnet code) to achieve comparable things.
MatthewPhillips 14y ago
Custom attributes are a deal-breaker for me personally.
- timriley 14y ago
  You actually have a fair bit of flexibility here, if that helps: https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1.0.0rc1 https://github.com/angular/angular.js/blob/master/CHANGELOG....
- riffraff 14y ago
  is there a concrete reason for not liking them, other than the content possibly being "non-valid"? I also feel somewhat dirty when using custom attributes, and I admit I preferred xmli-sh HTML and namespaces a-la ng:attr.. but is there any practical difference?
  - ehutch79 14y ago
    they're not semantic. just like css classes are not semantic... also, ids are not semantic either.
    - pygy_ 14y ago
      ... and neither is JavaScript. We're dealing with applications here, not documents, and even in the latter case, your views regarding ids and classes are extreme. Angular templates, more than just markup, are the skeleton of your application. The markup they generate is as semantic as you make it.
      - ehutch79 14y ago
        the sarcasm tag is also not semantic
        pygy_ 14y ago
        :-) Actually, I hesitated before posting... I had ruled sarcasm out because purely snarky posts are usually frowned upon here, and your parent post was asking a legitimate question... That being said, we obviously agree on the topic.
        ehutch79 14y ago
        poe's law? In all seriousness though. That is kind of the correct answer to the parent. There's kind of this weird attachment to a whole bunch of weird 'best practices' in the design front. Many of them conflicting, many of them not well thought out. (There are some good ones coming out). It's similar to twitter's bootstrap. Designers think it's horrible, if you believe the kind of blog with grey text on a grey background. But I can't believe people would recommend against it when they've seen the alternative.
        pygy_ 14y ago
        True. That's some cool stuff you make with your band, btw. What do you play?
  - libria 14y ago
    I think a lot of folks are afraid it's a slippery slope to this[1]: http://wekeroad.com/images/koouch.png http://wekeroad.com/images/koouch.png [1] http://wekeroad.com/2011/08/18/my-eyes-please-youre-killing-javascript-kitties/ http://wekeroad.com/2011/08/18/my-eyes-please-youre-killing-...
- geelen 14y ago
  Angular supports using data-attributes or using classes, I just prefer using custom attributes: http://docs.angularjs.org/guide/directive http://docs.angularjs.org/guide/directive
- windock 14y ago
  It is possible to prefix them with data- thus making it kinda valid html.
- taude 14y ago
  In an era where any reasonably complex web application requires JavaScript, I'm less worried about the purity of the HTML. And with HTML5 "data-" attributes, I'm even less so.
- simonw 14y ago
  I held out for a while, but data- attributes really do make writing reusable JavaScript components SO much easier - if you use them responsibly I don't see any downside to them at all.
  - MatthewPhillips 14y ago
    I agree, I was talking about non data- custom attributes, but others have pointed out that you can use the data- versions as well, which is acceptable.
- dhkl 14y ago
  Since 1.0.0rc1 that was released 5 months ago (1.0.0 went gold 2 months ago), the custom attributes used for by AngularJS can be turned into valid html5 attributes by prepending the "ng-*" AngularJS attributes with "data-". For example, <html ng-app> can be turned into a valid attribute by making it <html data-ng-app> I'm really glad to see how quickly the AngularJS team is addressing concerns like these. AngularJS is moving very fast, and there is a lot of room for improvements in documentation. But a quick check with the changelog would have showed that AngularJS supports the use of valid custom attributes for directives almost half a year ago.
aquark 14y ago
Interesting -- but doesn't all that work to remove the 300ms delay mean make the site totally broken on any browser that doesn't generate touchstart/touchend/touchmove events? I guess you could code around this by catching the click event and deciding if you have already handled it, but that is beginning to feel like a lot of fragile and browser specific code that certainly isn't application specific. I tried to access your mobile site from my phone but it wants me to sign in with either Facebook or Twitter before showing anything, so that was a non-starter.
- djb_hackernews 14y ago
  Fair point, but, I think people need to realize it's ok to only support certain browsers. Every project doesn't need to support every browser from the start. There are of course trade offs, but they mention they are targeting Safari on iOS, and this is ok.
- deleted 14y ago
  [deleted]
- pygy_ 14y ago
  > I tried to access your mobile site from my phone but it wants me to sign in with either Facebook or Twitter before showing anything, so that was a non-starter. I created dummy accounts to that end. See https://twitter.com/loganloginski https://twitter.com/loganloginski
nl 14y ago
I love Angular.JS, and I appreciate seeing more stuff about it. One thing I would like to see less of in introductory-type articles is Coffeescript. I do understand the advantages of Coffeescript, but when one is trying to show off a framework like Angular.JS there is already quite a lot of non-obvious magic (eg: automatic dependency injection, the HTML compiler, etc etc) and introducing another thing that most people won't know well is a mistake IMHO. If you like Coffeescript, then do a post about it, but mixing the two loses a lot of the audience.
- joelhooks 14y ago
  I agree, it is interesting, but could definitely be another entire article. I've been having similar discussions around testing in this type of article. Angular has an excellent "testing story", with the end to end tests having a lot of baked in functionality. Unfortunately, most articles don't mention e2e or unit tests... ever. On some levels, I feel like testing should be included, even in beginner articles, but the cognitive load is already high...
- Pherdnut 14y ago
  I don't really get the point of coffeescript at all tbh. JS is one of the most flexible languages in heavy use right now.
  - ebiester 14y ago
    Very simple: JS (module pattern, encapsulation) is verbose. CoffeeScript is more compact, allowing for more code on one page. I toy with going back to JS (I don't like everything about CS, especially with debugging and test tools in node development) but CS optimizes for the good parts of JS and ignores the parts I don't want to use anyway.
    - ceslami 14y ago
      As a guy who spends a lot of time writing JS, what are the good parts of JS that CS optimizes for, and what are the parts it ignores that you do not want to use?
kinleyd 14y ago
Thanks, for me this was a great introduction to AngularJS. It looks good and pretty mature as well. I look forward to evaluating it in more depth.
markus2012 14y ago
AngularJS has been one of my pet projects recently. I really like the idea of creating new modules and directives and I've created a few of them. However, after creating a number of modules and directives I started to think that it would be nice to have a central repo so I can quickly look for and find new directives. The angular ui project doesn't fit the bill as I just want to import specific directives into my project. Some way to determine directive dependencies would be nice too :-D
edwinyzh 14y ago
AngularJS is the ONLY web front end framework that makes me exciting, maybe because I'm from a Delphi background ;)
eknuth 14y ago
I'm curious about why people jump on angular without even checking out knockoutjs. Knockout provides similar functionality with slightly less code. The demo/doc site is incredible. I think it is also interesting that since backbone all the hot front end frameworks are of the model binding variety. Honestly when you do stuff like angular or knockout backbone just feels clunky. I know that there are model binding plugins for backbone, but you still end up writing a bunch more code.
- clivestaples 14y ago
  The things that sold me on AngularJS over Knockout were built-in routing and REST (via $resource). I feel like these things should be included in Knockout and by using third-party solutions or attempting to roll my own would have created more code/complexity than the AngularJS solution for my app.

131 points by geelen 14y ago

ben_h 14y ago

Great post. I didn't understand the role of controllers and directives but this explained them well with a thoughtful walk through. The idea of wrapping distinct chunks of logic in separate directives that can then be sprinkled around the DOM declaratively is great. In my view this is a welcome alternative; in my (maybe limited) experience, many other JS frameworks have you writing substantial amounts of glue code (i.e. bug-magnet code) to achieve comparable things.

MatthewPhillips 14y ago

Custom attributes are a deal-breaker for me personally.

timriley 14y ago
You actually have a fair bit of flexibility here, if that helps: https://github.com/angular/angular.js/blob/master/CHANGELOG.md#1.0.0rc1 https://github.com/angular/angular.js/blob/master/CHANGELOG....
riffraff 14y ago
is there a concrete reason for not liking them, other than the content possibly being "non-valid"? I also feel somewhat dirty when using custom attributes, and I admit I preferred xmli-sh HTML and namespaces a-la ng:attr.. but is there any practical difference?
- ehutch79 14y ago
  they're not semantic. just like css classes are not semantic... also, ids are not semantic either.
  - pygy_ 14y ago
    ... and neither is JavaScript. We're dealing with applications here, not documents, and even in the latter case, your views regarding ids and classes are extreme. Angular templates, more than just markup, are the skeleton of your application. The markup they generate is as semantic as you make it.
    - ehutch79 14y ago
      the sarcasm tag is also not semantic
      - pygy_ 14y ago
        :-) Actually, I hesitated before posting... I had ruled sarcasm out because purely snarky posts are usually frowned upon here, and your parent post was asking a legitimate question... That being said, we obviously agree on the topic.
        ehutch79 14y ago
        poe's law? In all seriousness though. That is kind of the correct answer to the parent. There's kind of this weird attachment to a whole bunch of weird 'best practices' in the design front. Many of them conflicting, many of them not well thought out. (There are some good ones coming out). It's similar to twitter's bootstrap. Designers think it's horrible, if you believe the kind of blog with grey text on a grey background. But I can't believe people would recommend against it when they've seen the alternative.
        pygy_ 14y ago
        True. That's some cool stuff you make with your band, btw. What do you play?
- libria 14y ago
  I think a lot of folks are afraid it's a slippery slope to this[1]: http://wekeroad.com/images/koouch.png http://wekeroad.com/images/koouch.png [1] http://wekeroad.com/2011/08/18/my-eyes-please-youre-killing-javascript-kitties/ http://wekeroad.com/2011/08/18/my-eyes-please-youre-killing-...
geelen 14y ago
Angular supports using data-attributes or using classes, I just prefer using custom attributes: http://docs.angularjs.org/guide/directive http://docs.angularjs.org/guide/directive
windock 14y ago
It is possible to prefix them with data- thus making it kinda valid html.
taude 14y ago
In an era where any reasonably complex web application requires JavaScript, I'm less worried about the purity of the HTML. And with HTML5 "data-" attributes, I'm even less so.
simonw 14y ago
I held out for a while, but data- attributes really do make writing reusable JavaScript components SO much easier - if you use them responsibly I don't see any downside to them at all.
- MatthewPhillips 14y ago
  I agree, I was talking about non data- custom attributes, but others have pointed out that you can use the data- versions as well, which is acceptable.
dhkl 14y ago
Since 1.0.0rc1 that was released 5 months ago (1.0.0 went gold 2 months ago), the custom attributes used for by AngularJS can be turned into valid html5 attributes by prepending the "ng-*" AngularJS attributes with "data-". For example, <html ng-app> can be turned into a valid attribute by making it <html data-ng-app> I'm really glad to see how quickly the AngularJS team is addressing concerns like these. AngularJS is moving very fast, and there is a lot of room for improvements in documentation. But a quick check with the changelog would have showed that AngularJS supports the use of valid custom attributes for directives almost half a year ago.

aquark 14y ago

Interesting -- but doesn't all that work to remove the 300ms delay mean make the site totally broken on any browser that doesn't generate touchstart/touchend/touchmove events? I guess you could code around this by catching the click event and deciding if you have already handled it, but that is beginning to feel like a lot of fragile and browser specific code that certainly isn't application specific. I tried to access your mobile site from my phone but it wants me to sign in with either Facebook or Twitter before showing anything, so that was a non-starter.

djb_hackernews 14y ago
Fair point, but, I think people need to realize it's ok to only support certain browsers. Every project doesn't need to support every browser from the start. There are of course trade offs, but they mention they are targeting Safari on iOS, and this is ok.
deleted 14y ago
[deleted]
pygy_ 14y ago
> I tried to access your mobile site from my phone but it wants me to sign in with either Facebook or Twitter before showing anything, so that was a non-starter. I created dummy accounts to that end. See https://twitter.com/loganloginski https://twitter.com/loganloginski

nl 14y ago

I love Angular.JS, and I appreciate seeing more stuff about it. One thing I would like to see less of in introductory-type articles is Coffeescript. I do understand the advantages of Coffeescript, but when one is trying to show off a framework like Angular.JS there is already quite a lot of non-obvious magic (eg: automatic dependency injection, the HTML compiler, etc etc) and introducing another thing that most people won't know well is a mistake IMHO. If you like Coffeescript, then do a post about it, but mixing the two loses a lot of the audience.

joelhooks 14y ago
I agree, it is interesting, but could definitely be another entire article. I've been having similar discussions around testing in this type of article. Angular has an excellent "testing story", with the end to end tests having a lot of baked in functionality. Unfortunately, most articles don't mention e2e or unit tests... ever. On some levels, I feel like testing should be included, even in beginner articles, but the cognitive load is already high...
Pherdnut 14y ago
I don't really get the point of coffeescript at all tbh. JS is one of the most flexible languages in heavy use right now.
- ebiester 14y ago
  Very simple: JS (module pattern, encapsulation) is verbose. CoffeeScript is more compact, allowing for more code on one page. I toy with going back to JS (I don't like everything about CS, especially with debugging and test tools in node development) but CS optimizes for the good parts of JS and ignores the parts I don't want to use anyway.
  - ceslami 14y ago
    As a guy who spends a lot of time writing JS, what are the good parts of JS that CS optimizes for, and what are the parts it ignores that you do not want to use?

kinleyd 14y ago

Thanks, for me this was a great introduction to AngularJS. It looks good and pretty mature as well. I look forward to evaluating it in more depth.

markus2012 14y ago

AngularJS has been one of my pet projects recently. I really like the idea of creating new modules and directives and I've created a few of them. However, after creating a number of modules and directives I started to think that it would be nice to have a central repo so I can quickly look for and find new directives. The angular ui project doesn't fit the bill as I just want to import specific directives into my project. Some way to determine directive dependencies would be nice too :-D

edwinyzh 14y ago

AngularJS is the ONLY web front end framework that makes me exciting, maybe because I'm from a Delphi background ;)

eknuth 14y ago

I'm curious about why people jump on angular without even checking out knockoutjs. Knockout provides similar functionality with slightly less code. The demo/doc site is incredible. I think it is also interesting that since backbone all the hot front end frameworks are of the model binding variety. Honestly when you do stuff like angular or knockout backbone just feels clunky. I know that there are model binding plugins for backbone, but you still end up writing a bunch more code.

clivestaples 14y ago
The things that sold me on AngularJS over Knockout were built-in routing and REST (via $resource). I feel like these things should be included in Knockout and by using third-party solutions or attempting to roll my own would have created more code/complexity than the AngularJS solution for my app.