How do I “think in AngularJS” if I have a jQuery background? | Hacker News Reader

How do I “think in AngularJS” if I have a jQuery background?

stackoverflow.com

287 pointslaurent12345668 comments

A couple months ago I created an Angular app just to try it out for myself (only NYCers will find it useful: http://summerstagelove.com) and it was the first Javascript-using website, since having learned jQuery 5+ years ago, that I've made that doesn't include jQuery...I tried for awhile to get jquery.isotope.js to work but didn't know enough about the order of callbacks and such in directives, so just left it out entirely.

I've developed enough Rails apps to think architecture-first...but thinking back in my jQuery only days, the OP's question seems like it'd be a very common one among jQuery-only-front-end developers...and the top-answer is excellent: if you don't include jQuery, then you're forced to think about the architecture, and you'll be better off for it as a developer.

Not to nitpick but by including angular you are including jqlite which is a subset of jquery. But yeah, your point still stands.

But it is a very, very small subset. :-)

Isotope is a jQuery plugin, so it stands to reason that you'll need it. Angular will use jQuery over jqlite as long as you include it first.

I use isotope with angular and have written directives to support it. I haven't written it up, but If you're interested, I can share some of that with you.

This looks great. Thanks!

I'm very glad to see that this answer hasn't been closed as not constructive! It seems like most popular questions like this are, even though they're incredibly useful and insightful.

I was leaning toward learning Ember, but this post makes me really curious about Angular. In particular, the ease of testing has my interest piqued. Is testing as simple/easy with Ember? I know that unlike Angular, Ember doesn't have DI as a core feature. Either way, I should probably just flip a coin and start learning!

  > I'm very glad to see that this answer hasn't been closed as not constructive!

Don't jinx it!

I was disappointed that it hadn't been closed. The first answer is a backhanded dig at non-angular developers saying that angular is about architecture and implying that the others aren't.

I like angular but "angular architect" rolls off the tongue too easily.

You're disappointed that a really informative answer has not been closed because of some subtext you've read into it that may or may not actually be there? That doesn't seem like a very productive attitude to me.

Another google employee. You're just contributing to the mutual admiration society that's all over that answer and its comments.

The answer was made by a Google employee? Never knew.

Actually, no, the person who wrote the so-called "answer" which is more like an essay (and therefore not a proper Stack Overflow response) isn't a google employee. I didn't mean to imply that.

OK, then I'm unclear on why you brought up my employer. Did it have something to do with my support of the answer in your mind? Like is Angular a Google project? Or was it just some random thing you could attack?

That's funny. You rushed to Angular's defense without mentioning your financial connection and now you're annoyed that somebody else mentioned it.

Ah, that is your way of answering, "Yes, Angular is a Google project." I was not aware of that. I am not annoyed, just confused.

Ember includes a full test suite which is run on each pull request, so TDD is not unique to Angular.

Personally, I found Angular's concepts a bit foreign and hard to grasp while Ember was much more straight-forward, but that's just a personal opinion.

How is the framework having unit tests ( and please, don't say TDD, when you mean unit tests) say anything about how testable code written using the framework is?

How well do screen readers for the blind and AngularJS play together?

I thought that JavaScript-based frameworks are often not very compatible with screen reading technologies, but have not investigated what advances have been made for the blind in this area.

http://stackoverflow.com/q/15318661/59087

http://juicystudio.com/article/making-ajax-work-with-screen-...

This post is about Ember, but in sure it's not much different: http://words.steveklabnik.com/emberjs-and-accessibility

The http://vimeo.com/59124303 link is illuminating, as is the WAI-ARIA specification from http://www.w3.org/TR/wai-aria/.

I was about to come back here and yell at you for making a post about accessibility unaccessible to the hard-of-hearing (and those of us who browse with SOs sleeping right next to us that we never, ever, ever want to wake.) Then I saw the transcript below the fold.

Cool post, thanks!

That's a fantastic post. VoiceOver seems to blow a few of the competitors away, too.

We've built a large AngularJS application and one of the requirements was screen reader usage and keyboard accessibility. It took some effort, but it works very well.

This answer convinces me to prefer jQuery for apps that aren't Facebook or Gmail.

It has an "architecture astronaut" feel (explicitly eschewing graceful degradation!), which most web pages don't need.

I'd be interested in "controller" plugins for jQuery, so I can opt into upgrading from trigger->DOM to trigger->controller->DOM as my app grows.

It shouldn't. AngularJS should work great in most situations, even for simpler pages. I'm a big fan of MVVM pattern as it lends itself to a hard separation between the nitty-gritty view details (e.g. effects, transitions, styles, etc.) and the rest of your business logic. Create your view, declare how it should behave based on view-model values and then hook it up to your core business logic that is now completely agnostic to your view details. jQuery, on the other hand, forces you down the path where your business logic needs to care about how the view should render the content, and those ugly view details are sprinkled all over the place.

Forces?

Angular is pretty cool, but it's hardly the only neat way of seperating and offloading view detail work.

And jQuery is just a (much) nicer-than-native DOM/browser API. It doesn't provide an application architecture or data bound view handling layer because that's not what it's for, and it no more forces an application style than your text editor does.

This isn't to say that Angular isn't nice for projects short of Gmail's scale (I would/am considering it for some small scale stuff), it just doesn't make much sense to say jQuery forces people a direction by not providing features that aren't really part of its purpose.

You can write maintainable code in any language, but certain languages, frameworks, and libraries lend themselves to certain patterns. It's very easy to do the wrong thing with jQuery.

I consider Separation of Concerns, Dependency Injection, and TDD to be basic software engineering principles. Sure if you have a mostly static page with a few dynamic components jQuery will work fine, but with a larger project that you really need to consider a more maintainable architecture.

"Separating configuration from use" is the principle, and dependency injection is one of many patterns used to aim for that... http://www.martinfowler.com/articles/injection.html#Separati...

Absolutely. Honestly it seems to fly really far with the node youngsters who want to code all night for some reason. What you're talking about is event delegation. It's a one liner practically, but shh, we're talking about "architecture" now.

AngularJS is an MVVM framework. It's fairly new to JS and front end web development, but not that new for UI development in general (it's been around since 2005 in WPF and used in Silverlight and Flex applications, and possibly others). It isn't just 'event delegation'.

'How do I "think in X" if I have a Y background" seems like an incredible programming blog/book idea.

I, for one, constantly find myself thinking along the same lines whenever I try out a new language.

Indeed. Rich Hickey's 2-part presentation on "Clojure for Java Programmers" was a really slick presentation of a Lisp. (Focusing on the 'code is data' aspect from the beginning (at least once he starts talking about the language specifics themselves, he does spend a while motivating dynamic languages) rather than talking a lot about just higher order functions and macros and so on. He goes over the evaluation model and its difference from a Java/C++ model, he shows how to interop with Java... It's just a great talk.)

Part 1: http://www.youtube.com/watch?v=P76Vbsk_3J0

Part 2: http://www.youtube.com/watch?v=hb3rurFxrZ8

Slides: http://www.slideshare.net/adorepump/clojure-an-introduction-...

I was lucky enough to read this when I first got started with angular. Huge help shifting your mindset to angular and seeing the advantages it provides.

I'd also recommend http://egghead.io for some in depth walk throughs.

This extensive list is still updated regularly: https://github.com/jmcunningham/AngularJS-Learning

I liked the egghead videos, but I don't think they really taught me the deeper conceptual Angular.

So far I've spent several weeks of my spare time forensically decomposing the documentation, nearly line by line. It's been very slow going.

The main thing I've learnt is that Angular is elaborate. Each time I get my head around something, I realise that my previous understanding was utterly wrong.

The docs are sufficiently vague that I spend a lot of time looking for secondary sources or just reading the code directly. Sometimes the code is self-documenting. And sometimes it's neutron-star dense.

But what I'm seeing, I really like. I think that directives are a big part of the magic -- building the HTML you wish existed and then writing your app in that domain-specific HTML.

A fellow HN'er posted a collection of all the best tutorials and docs into one cohesive training programme.

It's an excellent resource for those of us trying get our heads around Angular's woeful documentation:

Website: http://www.thinkster.io/

HN Submission: https://news.ycombinator.com/item?id=6072383

I tried to get into angular, but it seemed to hard beyond the tutorials. Aren't frameworks supposed to make things easier?

They're meant to make particular kinds of complex application easier. I think Angular's problems is that docs are frankly dreadful. They tell people to fork it and improve it, but go look at their github pull requests. There are hundreds.

The first answer should be part of the official documentation.

The first answer is really so well written it was worth yet another upvote.

It's answers like these that make SO an invaluable resource. They should award bonus points for stuff like that.

Looks like there's a bounty in place, so the best answer will get some bonus points :)

Does it matter? You can only get 200 reps (from upvotes) per day. And the 50 bonus is nothing in front of all the upvotes

You can get 500 for a bounty.

But the bounty in this case was 50.

Maybe it's because of my background with Backbone.js but Angular really doesn't feel right. Any way I look at it, it feels like HTML and JS is being miished mashed together all over again and I thought we were past this way of doing things.

Neither way (Angular or Backbone) is "right" or "wrong"...just different ways to solve the same problems.

Angular reduces the amount of boilerplate code you need to build nice applications immensely, but to get to that point (and beyond two way binding hello world demos) there's a nearly vertical learning curve.

Once you near the top of that curve though, apps just kind of come together like magic. It's really neat.

Javascript isn't being put into the HTML.

Angular expressions are. It's a big difference.

IMO, it makes writing javascript-only applications (like all the internal tools for my company) much easier. It bugged me to look at a given view and not know what happened when something was clicked, or what the class name for an element needed to be to get the right behavior. Angular apps feel like writing a desktop app, which is great.

Maybe it's because of my background in cartesian coordinate systems, but polar coordinate systems just don't feel right to me.

The web likes to retread old patterns. Shhh, the emperor has fine clothes indeed.

The cool thing about Angular is that it introduces a pretty unique way of building applications. What people don't seem to get is that it isn't mutually exclusive with jQuery. You can use Angular and still pull in the full jQuery library for your directives. What you'll find, however, is that you don't really need much more than the jqLite library that ships with Angular. The "Angular Way" alleviates the need for the more involved DOM functions in jQuery.

I'm curious if anyone could point me to a really simple application that shows how to use AngularJS and Firebase together?

I'm thinking it makes sense to do my next project in those technologies since that way I can avoid setting up a hosting platform entirely and not even pay for hosting? Does that seem like a good idea? (It's going to be a way people can pay bitcoins to other people to read books)

I actually do exactly this for a site I'm building. I use Firebase and Angular together and I host the site for next to nothing using Amazon's S3 static hosting option (costs me like $2 a month). I wrote a more robust angular firebase module than angular-fire, the one the Firebase guys wrote, and I also created a tiny framework/script-runner similar to Yeoman that automates a bunch of stuff including deploying to S3.

I'll message you when I make it all publicly available.

Would love to see your angular-firebase module (if you're willing to share it) - it would be great to integrate some of it back into the original module!

Yes, let me know when it's available.

I thought you could host your HTML file on firebase too? Why do you need S3?

Firebase only stores data at the moment, to store the static assets, you'll still need a service like S3, Github Pages, Site44, or Harp.IO.

Here is one that was posted to HN a little while ago:

Website: http://firereader.io/app/#/demo

HN Submission: https://news.ycombinator.com/item?id=6053901

There is this, if you haven't already seen it: https://www.firebase.com/blog/2013-03-29-firebase-bindings-f....

That's perfect thanks! But I feel dumb asking this, where is the source code for their todo demo app?

I want to get a feel for what a simple app looks like.

It's up at https://github.com/firebase/angularFire/tree/gh-pages/exampl...

Here's an hour long video about it: https://www.youtube.com/watch?v=C7ZI7z7qnHU

firebase has bindings for angular:

https://www.firebase.com/blog/2013-03-29-firebase-bindings-f...

and

https://github.com/firebase/angularFire

which make it relatively simple to wire up your angular model to firebase.

I've just started using angular.js lately.

One of the best advice I read was not to use jquery with angular.js, and I couldnt agree more.

My question now is, why would I ever want to use jquery and angular.js together? I can do everything I needed to do before in jquery with angular.js

Only time I've used jQuery with angular.js is when I've needed to use a jQuery/jQuery UI plugin that I didn't feel like rewriting.

There is a simple todo app example on the angularjs homepage. It's one of the first examples there.

Angular.js makes me hate Javascript.

Reply on news.ycombinator.com