Monday, August 29, 2016

Stepping Backwards From AngularJS to jQuery - An Experiment

Do Javascript frameworks like AngularJS matter that much when it comes to single page applications?  After more than a year of ups and downs with Angular, it was time for me to explore this question.  To do so, I wrote a little note application.  This was going to be done with just jQuery with Handlebars.js being added in later.  Here are some thoughts about that experience.

The Ajax Aspect

Ajax is important to much of what I do in my projects.  Headers and JSON get sent back and forth a lot.  Also, there are plenty of callbacks for dealing with stuff from the server.

So how do Angular and jQuery compare in that department?  To be honest, you don't lose much.  You go without Angular's $http service but you still have jQuery's ajax function to work with.  Here's what a json-in-json-out scenario looks like in AngularJS.



Here's the same thing but done with jQuery.


Overall, the only significant feature here is that $http has to be dependency injected.  I don't know that I gain anything from grabbing a service from out of whatever container it happens to comes from.  It feels vaguely like working with a Spring container in an enterprise Java project.  But that's about it for me.


Know Thy DOM

Giving up Angular did force me to think more about the DOM.  Vanilla jQuery doesn't insert itself as readily into HTML code as an Angular directive can.  That fact made direct DOM dealings more important.  For examples, here's how you generate bullet point list in Angular.





Doing the same thing in jQuery, you get something that looks like this.

While trivial in this example, string concatenation can gets messy as the HTML gets more involved.  However, you do get that upshot in jQuery of having debugger features more conveniently available.  Setting a breakpoint in straight Javascript is easy.  I have no idea how to do that with an ng-repeat loop.

Filling The Template Void with Handlebars.js

The good news is that living without Angular doesn't mean giving up on client-side templates entirely.  It turns out that Handlebars.js fills that void nicely.  Drop a template between script tags.  Load it up.  Insert the data.  All is well.


Yes, there is DOM dirty work to do but that's okay.  At least there isn't that error-prone process of piecing strings together so much.  That's actually pretty nice.


My Dynamic Button Trip Up

One area that tripped me up with Handlebars was button handling.  Buttons for deleting and changing notes are specific to each note.  The event handlers for those buttons need to reflect that.

Handlebars is really good at taking data text and plugging it into template text.  Where it gets weird is when events come into the picture.

The thing is this.  You generally don't attach event handlers directly to the text that Handlebars generates.  You attach them to some kind of DOM object like this...

$("#myButton").click(function(e){})

Okay, so what to do?

Here was my solution.  Let Handlebars do the whole template thing.  Have jQuery wrap the text up as a DOM element.  Then, just let jQuery attach event handlers to that.  Here is what that code ended up looking like.




So that gets the job done.  Once the DOM is created, we can attach a DOM button to that structure.  And that's it.  In case you're curious, you can find the full js file where this is set up over here.  And if I'm "doing it wrong", feel free to yell at me in the comments section.

Final Thoughts

Going without Angular was nowhere near as hard as I thought it would be.  The Ajax parts are reasonable thanks to the core jQuery libraries.  The DOM aspects I found myself needing to handle really weren't that burdensome.  And thanks to Handlebars, I didn't even have to give up templates.

What Angular is good for is catering to my enterprise and Java background.  I've done my share of mixing logic and HTML together from my experiences in JSP and ColdFusion.  The dependency injection that happens in Angular feels like a simplified version of what happens in a lot of Spring projects.

All being said, I don't think I'm going to disavow AngularJS entirely because I'm still not convinced that it's a "bad" framework.  For bigger web applications, it might well be ideal for all I know.  It's just that I now know that the set of problems Angular fits for isn't as big as I thought.  And that's an okay thing to come to terms with.  Here's to the programmer's journey!

21 comments:

  1. For the buttons just use onClick="delete({{id}});" or onClick="delete(this);" right in the HTML.

    ReplyDelete
  2. Hmmm, I usually attach a single handler to the parent of all the elements with a css filter (using $.on() ) and jQuery passes the appropiate item to the handler, where I can navigate the DOM to do whatever. If there's a ton of buttons, it's much lighter.

    ReplyDelete
    Replies
    1. Sounds like "event delegation", right? I'm counting that one on my "things to learn" list. Thanks for bringing it up.

      Delete
  3. What are your thoughts on Angular 2?

    ReplyDelete
  4. Of course AngularJS is not a "bad" Framework. It had its uses. It did its Job. It was kinda overengineered but it fit very good in a Enterprise context where developers change a lot. Also I found JAVA people pretty comfortable using it.

    (Is there really such a thing as a "bad" framework? Everything has its bad and good parts right? There are always compromises in Software Engineering) :)

    Thx for the Article

    ReplyDelete
  5. Thank you for sharing the information here. Its much informative and really i got some valid information. You had posted the amazing article.Thank you for sharing the information here. Its much informative and really i got some valid information. You had posted the amazing article.

    ReplyDelete

  6. Just wish to say your article is as astounding. The clearness in your
    submit is just excellent and i can suppose you’re knowledgeable in this subject.
    Well along with your permission allow me to take hold of your RSS feed to stay up
    to date with drawing close post. Thanks a million and
    please carry on the rewarding work.

    ReplyDelete

  7. Come and read us!! We are moving our blog into a new site with a much more pretentious goal. We are going to teach how to be AngularJS Ninjas!!! That's right! We have taken a couple of weeks to prepare our first workshop, absolutely free!!!!
    AngularJS Training in Chennai

    ReplyDelete
  8. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in ANGULAR JS, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on ANGULAR JS. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us.
    Nitesh Kumar
    MaxMunus
    E-mail: nitesh@maxmunus.com
    Skype id: nitesh_maxmunus
    Ph:(+91) 8553912023
    http://www.maxmunus.com/




    ReplyDelete
  9. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in JQUERY
    , kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on JQUERY. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us:
    Name : Arunkumar U
    Email : arun@maxmunus.com
    Skype id: training_maxmunus
    Contact No.-+91-9738507310
    Company Website –http://www.maxmunus.com



    ReplyDelete
  10. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in JQUERY
    , kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on JQUERY. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us:
    Name : Arunkumar U
    Email : arun@maxmunus.com
    Skype id: training_maxmunus
    Contact No.-+91-9738507310
    Company Website –http://www.maxmunus.com



    ReplyDelete
  11. AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

    AngularJS Training in Chennai

    ReplyDelete

  12. Very Interesting information shared than other blogs
    Thanks for Sharing and Keep updating us

    ReplyDelete
  13. Hai Author Good Information that i found here,do not stop sharing and Please keep updating us..... Thanks.............Angularjs Development services

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Hire Android Developers
    As a dedicated and innovative Offshore Android Application Development company, we at Inwizards blend our skills with the latest mobile technology to come up with state-of-the-art mobile software for almost all platforms. Given that android is a leading platform of the market thus our skilled and professional android developers have to offer you the android applications which are just a guarantee of best place in the market.
    Angularjs Development Services
    Nodejs Development Company

    ReplyDelete
  16. Stepping Backwards From AngularJS to jQuery - An Experiment, Considering it as an experiment is well good but we face lots of challenges while implementing, We get different modules in each and every frame of things which should be having some specific set of things to be noted and Well As I completed my PMP Certification in Kuwait, I have enough knowledge on AnjularJS Anywayz Thank you for providing the information

    ReplyDelete
  17. It's very nice blog. I'm so happy to gain some knowledge from here. Thank you for valuable information on
    AngularJS Training in Chennai.
    Hoping to get more info...

    ReplyDelete
  18. Australia Best Tutor is one of the best Online Assignment Help providers at an affordable price. Here All Learners or Students are getting best quality assignment help with reference and styles formatting.

    Visit us for more Information

    Australia Best Tutor
    Sydney, NSW, Australia
    Call @ +61-730-407-305
    Live Chat @ https://www.australiabesttutor.com




    Our Services

    Online assignment help Australia
    my assignment help Australia
    assignment help
    help with assignment
    Online instant assignment help
    Online Assignment help Services

    ReplyDelete
  19. Nice article. I have suggested to my friends to go through this blog. Really impressive. Thank you for sharing this useful information.If you want to learn Angular js course in online, please visit below site.
    angular js Online Training
    angular js course
    angular js online training in kurnool
    angular js online training in hyderabad
    angular js online training in bangalore
    online courses
    online learning
    online education
    trending courses
    best career courses

    ReplyDelete
  20. Great efforts put it to find the list of articles. thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
    Angular JS Training in Chennai | Angular JS Training in Velachery

    ReplyDelete