8 ms·
Stepping Backwards from AngularJS to JQuery – An Experiment
- carsongross 10y agoGiving 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. And that's why you should use http://intercoolerjs.org http://intercoolerjs.org for most of your stuff, and a bit of jQuery where necessary for more exotic UX needs. The people who got sick of a mess of jQuery code were right, but they went the wrong direction to fix it. We have to go back. I know people get tired of my shilling, but intercooler really is a better way for many, and maybe most, web apps to be developed.
- andybak 10y agoI am personally fully behind your shilling and try to shill on your behalf whenever possible. It's sad how little interest intercooler has managed to garner when it's a fantastic antidote to so many things that are wrong with client-side development. I recently used a touch of intercooler on a Django project and it just felt so right. Once I'd included intercooler.js itself, everything else was done via normal http attributes. It felt clean and lightweight.
- carsongross 10y agoThanks Andy!
- quantumhobbit 10y agoKeep shilling. I had never hard about it until now. I love the simplicity. We need more libraries that just do one thing well instead of kitchen sink frameworks like angular.
- asciihacker 10y agoIntercooler.js is quite cool.
- throwanem 10y agoWait a minute. So you've got a down on Angular for turning HTML elements and attributes into JS-driven behaviors, but you're fine with Intercooler, which does literally nothing but that thing? You confuse me, sir.
- Silhouette 10y agoPersonally I welcome useful mentions of relevant alternatives in HN discussions, even if it's someone's own project. I would encourage you to tone down your rhetoric a bit, though. Intercooler looks like a good lightweight tool for projects with lightweight requirements, but based on your own documentation, the claim that it covers most of what is needed for most modern web apps just hurts your credibility.
- andybak 10y agoCarson is in a bit of a bind in terms of marketing Intercooler. There is a huge mass of community support for frameworks that he feels are taking fundamentally the wrong approach. If he doesn't make a strong case for pushing the pendulum in the other direction then he'll just get drowned out by the echo chamber. Sometimes the plucky underdog has to shout a bit more loudly than is considered polite. Maybe one could argue that 'survival of the fittest' is working as intended here but perhaps the tipping point is occasionally in need of a nudge.
- Silhouette 10y agoWell, everyone's entitled to their opinion on the best way to do things, and in the right context it makes for interesting discussions. As I said before, I find the mention of a potentially useful alternative a valuable contribution to such discussion. However, frequent and obviously excessive claims about the merits someone's personal preferences tend to fall somewhere between noise and trolling, and IMHO they are much less welcome.
- pseudosavant 10y agoI hadn't heard of intercooler.js but that looks pretty awesome. Definitely going to check it out.
- jordanlev 10y agoFYI, none of the code on your site works for me, possibly because I have cookies and localStorage disabled in my browser. Not sure if this is specific to your framework or a quirk of the website itself (hopefully not the whole framework, as I don't understand why this requirement would be imposed if not actually needed by the app that's using it... since the fundamental premise of the framework seems to be "it's lightweight").
- carsongross 10y agoCan you give me your browser/OS combo?
- jordanlev 10y agoMac OSX El Capitan, Chrome 52
- carsongross 10y agoHeh, that's exactly what I'm using. It must be some settings. Do you see anything in the console?
- jordanlev 10y agoYes: "intercooler-0.9.7.js:1507 Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document." (As mentioned above, I have cookies and localStorage disabled via my browser settings.)
- carsongross 10y agoPerfect. I'll try to get that fixed for the next release. History support won't work, but there is no reason that the rest of the examples shouldn't.
- 10y ago
- jsmith0295 10y agoI was actually just about to use jQuery + PJAX on a new project, but this looks much better! Perfect timing.
- rowanseymour 10y agoAppreciate the shill. Hadn't heard of intercooler, but looks very interesting. At our company we've recently been pondering whether to fully embrace the client heavy approach of frameworks like Angular - which we've found frustrating in many ways (mixing server and client templating, localization, duplicated validation logic etc). We've used PJAX in the past and this looks like a suitably modern replacement.
- carsongross 10y agoIf you enjoy REST, intercooler dovetails really nicely with it: http://intercoolerjs.org/2016/05/08/hatoeas-is-for-humans.html http://intercoolerjs.org/2016/05/08/hatoeas-is-for-humans.ht... Happy to help you evaluate it for more advanced stuff (e.g. triggering client-side events from the server) just hit me up on the newsgroup.
- jasonkostempski 10y agoI think there's a better approach to handling the delete buttons that's pretty common when using jQuery. Instead of each button having it's own handler function I would specify an event handler on a single DOM element (e.g. a list container) with something like $('#itemlist').on('click', '.delete', deleteItem). When 'deleteItem' is called 'this' will be the clicked button element that could have an attribute like 'data-itemid=123' which you use to fill in the 'id' part of the service call. And from there, after a successful service call, you can usually get at the parent element you want to remove from the list and take just that out instead of refreshing the entire list. EDIT: Had the 'on' parameters mixed up. Here's the api doc: https://api.jquery.com/on/ https://api.jquery.com/on/
- nicolasMLV 10y agoyes, that is event delegation : https://learn.jquery.com/events/event-delegation/ https://learn.jquery.com/events/event-delegation/
- pcote 10y agoI almost went down the event delegation route. The only thing that stopped me was having stumbled upon a tactic that happened to work where I just attached individualized event handlers one at a time. I appreciate the input and will make sure to give event delegation a second look.
- impostervt 10y agoI found this interesting because it seems to have been written by a person who learned Angular before jQuery. I haven't run into that before. Maybe I'm getting old.
- niftich 10y agoThis is a very good point; I also found the submission enlightening for that reason -- because of the 'rediscovery' of jQuery, and how for simple use-cases, it's actually fairly palatable. All solutions go through a maturity cycle where we invent an ostensibly "better" way of doing it because we're frustrated with the old way -- jQuery came about because early DOM selectors were lacking, Angular came about because people built complicated client-side spaghetti code state machines with jQuery -- but eventually a new wave of people comes along and the 'new way' becomes the 'mainstream way', and the like. Like this author has done, it's interesting to go back and rediscover how things were done in the past, and in many cases you learn more about the problem domain or your stack of choice by doing so. My age is also showing that Angular no longer counts as cutting-edge, early-adopter tech, but firmly in the camp of mainstream ways of doing client-side code.
- andybak 10y agoI found that odd. I do worry that many people use technologies because other people working at a completely different scale or in a completely different domain have hit a ceiling which wouldn't really apply to most people. They are convinced to start with a more complex and more difficult technology that's solving problems they are unlikely to be facing any time soon. 1. NoSQL <> traditional RDMS because of scaling/sharding 2. Angular <> jQuery (or anything similarly lightweight) because of the issues around huge complex webapps 3. 'Fast' languages <> 'nice' languages ( ;-) ) because of performance concerns 4. Static typing <> Dynamic typing because of maintainability across large teams. 5. Docker/Microservices etc <> traditional architectures because of... I really have no idea... So I guess the degenerate case is some poor chap learning web development who decides to write their Pet Store as an angular app with a Scala API backed by Mongo and Solr deployed to a Kubernates cluster ;-)
- greenshackle 10y ago
- pbreit 10y agoCaveat: novice programmer here. Even Angular is still difficult for me to grok and sometimes I wonder if stuff that comes out of Google "suffers" (for me) from Google having unlimited resources and employing superior engineers? Would Google have a difficult time empathizing with "average" programmers with limited resources?
- quantumhobbit 10y agoIf angular were produced by superior engineers, it would be easier, not harder, for lesser engineers to grok it. The problem is not with you, but with a those that made angular more complicated than it could have been.
- bdcravens 10y agoFor Angular 1, I'd recommend sitting through Dan Wahlin's hour intro to Angular. Don't code, just watch. It really helped me get that initial chunk of knowledge in my head. https://www.youtube.com/watch?v=i9MHigUZKEM https://www.youtube.com/watch?v=i9MHigUZKEM
- ariabuckles 10y agoI've run into a lot of people who found angular hard to pick up; it's not just you. One of them now works on the React team, and I found it pretty easy to pick up from the official docs: https://facebook.github.io/react/ https://facebook.github.io/react/ . I recommend not bothering with stuff other than the base react library at first (although jsx/babel is nice); you can use react without it and potentially learn that later. It's also totally valid to just start with basic js/html/jquery. The Mozilla's MDN docs for most html/js things are decent, and jQuery's api docs are pretty good in my experience.
- asciihacker 10y agoAngular is difficult to grok because it makes computer programming second class and limited to what you can cram into HTML tags. Angular isnt really a Google product - Misko Hevery and another guy (both Google SW Engineers) developed in their free time. Dart is a Google product and I would say is much easier to grok than Angular.
- jnbiche 10y agoNext time, try dropping jQuery, too, and just using vanilla JavaScript. Just for fun. Simple DOM manipulation is now as simple in vanilla JavaScript as jQuery, with the only big advantage jQuery has now is if you're animating. You may find you're not missing much. You'd have to get used to slightly more involved Ajax syntax, unless you can target only new browsers, in which case the `fetch` API is just as convenient as jQuery's Ajax. Heck, if you can can transpile to ES6 or if you're only targeting new browsers, you could probably even drop the Handlebars in factor of template literals without losing too much convenience.
- talmand 10y agoWhat's the big advantage of jQuery with animating? Are you referring to the animation built into jQuery?
- jnbiche 10y agoActually, looking over the new Web Animation API, it looks like jQuery doesn't even offer much of an advantage for animations as long as you're targeting new browsers that have the Web Animation API (yes, I was referring to the animation support built into jQuery).
- talmand 10y agoAh, ok. Yes, there are much better options out there than using the animation jQuery offers. At minimum you can use CSS3 transitions and animations before even getting to the Web Animation API. They would likely serve most needs nicely for regular day-to-day sites. If one really wants to use the jQuery animation options, there are plugins that will try to shift them to CSS3 options instead, but keeping the same syntax.
- jnbiche 10y ago> Yes, there are much better options out there than using the animation jQuery offers. No doubt. I haven't used jQuery to speak of in the past 2 years, and the only time I've found myself missing it was when I needed to do some simple animation and wasn't using a library like d3 that could do it just as easily or easier. And yes, I mentioned CSS animations in this same thread. It's what I've been using in production for animation for the past 2+ years, although it sometimes feels wrong to animate things in JS by adding and removing classes from an element.
- nicolasMLV 10y agoYou can use event delegation for button handling : `$(document).on('click', '.button-list', my_function);` https://learn.jquery.com/events/event-delegation/ https://learn.jquery.com/events/event-delegation/
- tdubbs 10y agoThanks for posting this. It's sad how few people seem to know about event delegation...
- c-smile 10y agoJust in case. I've written these while ago: Routing, view, controllers in 60 lines of code + jQuery: https://github.com/c-smile/spapp https://github.com/c-smile/spapp Template-less repeatable sections / lists in 100 lines of code + jQuery: https://github.com/c-smile/repeatable https://github.com/c-smile/repeatable.
- matchagaucho 10y agoAmazed at how Angular has created a generation of programmers that accept 2-way data binding and MVC as "the only way" to develop web apps. JQuery encourages more fluent, purely functional reasoning, and one-way data binding of immutable data objects.
- pcote 10y agoFunctional, yes. I can't think of too many cases where JQuery has every prevented me from mutating anything.
- asciihacker 10y agoStep forward to ScalaJS and dont look back? https://www.scala-js.org/ https://www.scala-js.org/