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!

111 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. Very Interesting information shared than other blogs
    Thanks for Sharing and Keep updating us

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

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

    ReplyDelete
  12. 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
  13. 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
  14. 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
  15. 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
  16. Wonderful article, very useful and well explanation. Your post is extremely incredible. I will refer this to my candidates...
    Click here:
    angularjs training in bangalore
    Click here:
    angularjs training in pune

    ReplyDelete
  17. Your blog is very useful for me, Thanks for your sharing.

    ReplyDelete
  18. hi, nice information is given in this blog. Thanks for sharing this type of information, it is so useful for me. nice work keep it up. best sap simple finance online training institute in hyderabad

    ReplyDelete
  19. Really you have done great job,There are may person searching about that now they will find enough resources by your post
    Blue Prism Training in Pune

    Blueprism training in tambaram

    Blueprism training in annanagar

    ReplyDelete
  20. Thank you for providing useful information and this is the best blog for the students to make good career.learn Python training course.
    Python Training in Hyderabad

    ReplyDelete
  21. Thank you for sharing valuable article with good information in this blog.learn Data science course and make good career.
    Data Science Training in Hyderabad

    ReplyDelete
  22. Thanks you for sharing this unique useful information content with us. Really awesome work. keep on blogging

    DevOps online Training|DevOps Training in USA

    ReplyDelete
  23. Wonderful article, very useful and well explained.


    MSBI Training in Hyderabad


    ReplyDelete
  24. When cooking with oil, you will see the fact that smoke usually receives emitted in case you often uses the identical oil. Typically, these form of eating places have today's hoods as well as exhaust fans.
    Visit here
    Kitchen Chimney Repair Service in Noida
    Kitchen Kitchen Chimney Repair Service in Vaishali
    Kitchen Kitchen Chimney Repair Service in indirapuram
    Kitchen Kitchen Chimney Repair Service in vasundhra
    Kitchen Kitchen Chimney Repair Service in faridabad

    ReplyDelete
  25. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.
    java training in chennai | java training in bangalore

    java online training | java training in pune

    ReplyDelete
  26. I am a regular reader of your blog and being students it is great to read that your responsibilities have not prevented you from continuing your study and other activities. Love
    Data Science training in Chennai | Data science training in bangalore
    Data science training in pune | Data science online training
    Data Science Interview questions and answers

    ReplyDelete
  27. Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.

    angularjs Training in chennai
    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    angularjs-Training in velachery

    ReplyDelete

  28. Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.


    AWS Training in BTM Layout |Best AWS Training in BTM Layout

    AWS Training in Marathahalli | Best AWS Training in Marathahalli


    ReplyDelete

  29. Thank you for giving the information and it is useful for me. training with placement company in Hyderabad

    ReplyDelete
  30. Thank For Sharing Your Information The Information Shared Is Very Valuable Please Keep Updating Us Time Went On Just Reading The Article Python Online Course<\a> DataScience Online Course<\a> Hadoop Online Course<\a> AWSOnline Course<\a>

    ReplyDelete
  31. Thank For Sharing Your Information The Information Shared Is Very Valuable Please Keep Updating Us Time Went On Just Reading The Article Python Online Course

    ReplyDelete

  32. Thank you so much for posting this. I really appreciate your work. Keep it up. Great work!
    best courier service in India

    ReplyDelete
  33. Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
    SEO company in coimbatore
    SEO Service in Coimbatore
    web design company in coimbatore

    ReplyDelete
  34. Thanks for posting this very useful info
    Unic Sol is the best Best java training in hyderabad with job placements. Along with java training full stack, mean stack, angular & testing tools training is provided by industry experts. We are the best java training in Hyderabad.

    ReplyDelete
  35. Hey That was a great read, very informative, though native java debugging is not something I am good at i really liked this article, Check this out for a little more info.
    Angular JS

    ReplyDelete
  36. Very informative, liked it, though the going back to jquery is absurd, I am a ReactJS Guy, there are many ReactJS Development Companies which develop Awesome apps for their clients.

    ReplyDelete
  37. 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.Here also you can check for more information reactjs services

    ReplyDelete
  38. Given article is useful and informative.The article shared more informations about AngularJs training for further reference refer Angular training in kochi and Angular course in kochi

    ReplyDelete
  39. Today Telugu news updates provide us the information of breaking news and live updates. we get live news, political, education, technology, etc. Today Telugu news gives the best news updates. It also keeps its readers informed about the latest happenings in the world with instant updates.

    ReplyDelete
  40. Thank you for sharing such a nice and interesting blog with us...
    AngularJS Training in Bangalore | AngularJS Course Fees | AngularJS 6 - i Digital Academy - AngularJS Training in Bangalore - Learn AngularJS 6 from Expert Real-time Trainers
    at i Digital Academy with Live Projects and Placement Assistance. Book a Free Demo Today.

    ReplyDelete
  41. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it.

    Digital marketing course

    ReplyDelete
  42. Attend The Data Science Courses Bangalore From ExcelR. Practical Data Science Courses Bangalore Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Science Courses Bangalore.
    ExcelR Data Science Courses Bangalore
    Data Science Interview Questions

    ReplyDelete
  43. Study Machine Learning Course Bangalore with ExcelR where you get a great experience and better knowledge. Machine Learning Course Bangalore 

    ReplyDelete
  44. Have any concern like Which is the Best AngularJS Development Company? And perplexed over choosing a development framework for your web application. Then we suggest you go with the AngularJS framework for web development and hire Angular JS developer for your web app development project. There are several prominent names among the AngularJS development companies, you can consider for your web application requirement.

    ReplyDelete
  45. Hello, I have browsed most of your posts. This post is probably where I got the most useful information for my research. Thanks for posting, maybe we can see more on this.
    I also would like to share some Custom COVID-19 Advisory and Safety Posters Printing.

    ReplyDelete
  46. A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article. I am learning a lot from you.I would like to thank you for your nicely written post, its informative and your writing style encouraged me to read it till end. Thanks.
    DevOps Training in Chennai

    DevOps Online Training in Chennai

    DevOps Training in Bangalore

    DevOps Training in Hyderabad

    DevOps Training in Coimbatore

    DevOps Training

    DevOps Online Training

    ReplyDelete
  47. Use your Java skills to build an application that solves a problem. Then you should be able to get a job based on the experience you got from that project. ... If you are getting into web development, build web apps. If you are getting into mobile app development, build mobile apps.
    Java Training in Chennai

    Java Training in Bangalore

    Java Training in Hyderabad

    Java Training in Coimbatore

    Java Training

    ReplyDelete
  48. 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.


    AWS Course in Chennai

    AWS Course in Bangalore

    AWS Course in Hyderabad

    AWS Course in Coimbatore

    AWS Course

    AWS Certification Course

    AWS Certification Training

    AWS Online Training

    AWS Training

    ReplyDelete
  49. very nice blogs!!! i have to learning for lot of information for this sites...Sharing for wonderful information.Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.

    python training in chennai

    python course in chennai

    python online training in chennai

    python training in bangalore

    python training in hyderabad

    python online training

    python training

    python flask training

    python flask online training

    python training in coimbatore

    ReplyDelete
  50. React JS is an open-source, flexible, and declarative library consisting of JavaScript. These libraries are used in the construction of friendly and efficient user interfaces and help in the process of developing mobile or single-page applications. For the increasing popularity and need for the react JS services, we are a top reactjs development company that outsources the services for your benefit.

    React JS development services can be used for developing web applications, websites, and hybrid mobile applications. It allows you to split pages or properties into small sections of reclaimable components, producing interactive elements and effects on screen. The demand for React JS is increasing because of its extremely adaptable nature and is the first choice for web and mobile app development services

    ReplyDelete
  51. Truly a very good article on how to handle the future technology. After reading your post, thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic

    Angularjs Training in Gurgaon
    Nodejs Training in Gurgaon
    React Training in Gurgaon

    ReplyDelete
  52. The blog was absolutely fantastic! Thank you for sharing this.It is worth reading for everyone. Very informative article. Keep it up
    DevOps Training in Chennai

    DevOps Course in Chennai

    ReplyDelete
  53. Great, thank you so much for sharing such amazing information with us. Visit OGEN Infosystem for professional Website Designing and UI/UX Designing Services at an affordable price in Delhi, India.
    UI/UX Designing Services in Delhi

    ReplyDelete
  54. Thank you for sharing. It will surely be an experience to someone.
    nice content provided good one to visit this site. Big Data Hadoop Training in Gurgaon

    ReplyDelete
  55. Thanks for sharing this article. Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced React developers for your esteemed project today.

    ReactJS Development Services

    ReplyDelete
  56. Thanks for sharing the beautiful informationpython class

    ReplyDelete

  57. Angular JS / Node JS Tutor In Gurgaon find best tutor and institute on bestforlearners https://www.bestforlearners.com/course/gurgaon/aws-training-institute-in-gurgaon

    ReplyDelete
  58. This is a great article thanks for sharing this informative information. I will visit your blog regularly for some latest posts. I will visit your blog regularly for Some latest posts.
    aws online training in hyderabad

    ReplyDelete
  59. You completely match our expectation and the variety of our information. data analytics course in kanpur

    ReplyDelete
  60. I’m excited to uncover this page. I need to to thank you for ones time for this particularly fantastic read !! I definitely really liked every part of it and i also have you saved to fav to look at new information in your site. data scientist course in kanpur

    ReplyDelete
  61. I'm hoping you keep writing like this. I love how careful and in depth you go on this topic. Keep up the great work data science training in mysore

    ReplyDelete
  62. cool stuff you have and you keep overhaul every one of us data science training in mysore

    ReplyDelete
  63. It's late finding this act. At least, it's a thing to be familiar with that such events exist. I agree with your Blog and I will be back to inspect it more in the future so please keep up your act.
    data analytics course in hyderabad

    ReplyDelete
  64. The process of hiring solidity developers is more than just scanning resumes and profiles. These resources can assist you if you have no previous experience in hiring Solidity Developers.

    ReplyDelete
  65. Thanks for sharing, its very informative.react agency

    ReplyDelete
  66. This is a really very nice post you shared, i like the post, thanks for sharing..
    data scientist course

    ReplyDelete
  67. Hey! This blog is more informative and user friendly
    Thank you so much for giving this information to me..

    Herbal skin care products
    organic skin care products

    ReplyDelete
  68. Excellent post. Thank you for providing such an informative blog.
    SkillUp Online provides Courses like Artificial Intelligence CoursesPython for Data Science CourseCloud Computing CoursesIBM coursesCybersecurity ProgramPower BI CertificationMicrosoft Azure Architect DesignGoogle Cloud Architect Certification and so on. To learn more about SkillUp Online IT certifications online Courses visit our website.  

    ReplyDelete
  69. Ignite your web development skills with the ultimate AngularJS training experience at Infycle Technologies! Elevate your career prospects and stand out with our comprehensive AngularJS Training In Chennai. Become a coding maestro and unleash the full potential of this dynamic JavaScript framework. Our industry-expert instructors will take you on an immersive learning journey, equipping you with the tools and knowledge to craft stunning, interactive web applications. For details, call us at +91-750263363 or +91-7504633633.

    ReplyDelete
  70. Dr. Faheem Usman Sulehri , Best Nephrologist in Lahore
    Dr Faheem Usman Sulehri is a Consultant Nephrologist in Lahore with 12 years’ experience.He is an expert in dealing with patients of kidney diseases especially Patients of Hemodialysis, Renal Transplant and Peritoneal Dialysis.He is also Expert in other kidney disease like Diabetic Nephropathy, Hypertensive Nephropathy, Renal Stone Disease, Chronic Glomerulonephritis, Nephrotic and Nephritic Syndromes, Interstitial Nephritis, Acute Kidney Injury, Chronic Kidney Disease, Obstructive Nephropathy. He is also expert in following procedures 1) Temporary Dialysis Catheter 2) Perma catheter of Dialysis 3) Renal biopsy .

    Phone: 0333 4976126
    Address: 154 CAA, Sector DD DHA Phase 3, Lahore, 54792
    Nephrologist in Lahore

    ReplyDelete
  71. Your blog stands out as a beacon of authenticity in the digital landscape. Thank you for sharing your genuine thoughts and experiences with your readers.

    Black Marble

    ReplyDelete

  72. Excel in Azure projects Job Support! Get on-demand assistance for troubleshooting, optimizing, and implementing features. Ensure success in your Azure endeavors with personalized guidance

    ReplyDelete