Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to avoid common SPA pitfalls when using third-party plugins

blog.isleofcode.com

Post reply on HN
Print view View original

21–30 of 41 posts

Re: How to avoid common SPA pitfalls when using third-party plugins

#21

Post by unit91 »

jonesb6 wrote: post #5

Most of OP's complaints come from the misuse of JQuery, including compounded performance issues when paired with a SPA framework (in this case Ember, which IIRC has a dependency on JQuery either way). Slow + Slow = More slow. Honestly it's a library. Use it, don't use it, replace it, it honestly isn't worth a million identical arguments. People like to use JQuery as a microcosm for bad javascript practices but guess…

> But unless you made a meaningful discovery that can add to the conversation...

I don't think this applies here. Personally, I learned something from two of his examples, bookmarked the page, and will refactor accordingly. I'll hazard a guess that a few others are in the same boat -- by that standard, the article seems pretty meaningful to me.

Re: How to avoid common SPA pitfalls when using third-party plugins

#23

Post by jonesb6 »

runspired wrote: post #10
jonesb6 wrote: post #5

Most of OP's complaints come from the misuse of JQuery, including compounded performance issues when paired with a SPA framework (in this case Ember, which IIRC has a dependency on JQuery either way). Slow + Slow = More slow. Honestly it's a library. Use it, don't use it, replace it, it honestly isn't worth a million identical arguments. People like to use JQuery as a microcosm for bad javascript practices but guess…

Yes, some of this is from the misuse of jQuery. But I fix that misuse a lot, so I felt it needed explicitly pointed out. But many of these complaints have nothing to do with misuse and everything to do with either a lack of awareness about selector consequences, or a decade of built up code debt in the jQuery plugin ecosystem. All of these examples are true for all JS frameworks, even non-SPA frameworks. Dynamic DOM…

My reply was a little rough. I just get frustrated because I remember when I was 'new' and would've taken articles such as this as sacrosanct.

I just think we have to be careful whenever we say "this is bad, do this instead" because people will often inherently believe you and pass it on.

Re: How to avoid common SPA pitfalls when using third-party plugins

#24

Post by fweespeech »

samizdatum wrote: post #16
blhack wrote: post #12

Earlier quoted context omitted.

I feel like SPAs are one of the most abused concepts on the internet right now. A cloud-based 3D modeling software? Yeah, that definitely needs to be some form of SPA. Your twitter clone, blogging engine, etc. not only doesn't have to be an SPA, but shouldn't be one because it creates horrendous UX.

SPAs don't need to have horrendous UX?

SPAs for situations where they are not needed are horrendous UX in and of themselves due to the usability issues for power users that manage JS execution via browser plugins. [e.g. uBlock]

Re: How to avoid common SPA pitfalls when using third-party plugins

#26

Post by sotojuan »

runspired wrote: post #20
Bahamut wrote: post #14

Most of the advice sound like basic JavaScript - avoid things that prevent the interpreter from garbage collecting.

A lot of it is, but I spend so much time teaching people how to CPU Profile, take heap snapshots, diagnose leaks.. Things that ought to be fundamental, but which were left unlearned while the web was allowed to be lazy. With static pages, GC concerns weren't very large, because soon enough the user is going to click ahead to a new page and wipe the slate anyway.

I'm coming up on a year of knowing JS and none of the recommended beginner resources or books ever mention performance or profiling. It seems to just not be taught. On /r/javascript and other forums I do not see it mentioned often as it's assumed the library or framework takes care of it.

I'll take the opportunity now and ask for good resources on JS performance, garbage collection, and profiling. I realize I know the syntax and semantics well (and a framework or two), but not enough about optimization and related stuff (like ServiceWorker).

Re: How to avoid common SPA pitfalls when using third-party plugins

#27

Post by samizdatum »

fweespeech wrote: post #24
samizdatum wrote: post #16

Earlier quoted context omitted.

SPAs don't need to have horrendous UX?

SPAs for situations where they are not needed are horrendous UX in and of themselves due to the usability issues for power users that manage JS execution via browser plugins. [e.g. uBlock]

Saying an application has a "horrendous UX" because you refuse to run its code seems strange to me.

You could disable CSS and images and call the result ugly, but I don't think that entitles you to call the website ugly?

Re: How to avoid common SPA pitfalls when using third-party plugins

#28

Post by runspired »

sotojuan wrote: post #26
runspired wrote: post #20

Earlier quoted context omitted.

A lot of it is, but I spend so much time teaching people how to CPU Profile, take heap snapshots, diagnose leaks.. Things that ought to be fundamental, but which were left unlearned while the web was allowed to be lazy. With static pages, GC concerns weren't very large, because soon enough the user is going to click ahead to a new page and wipe the slate anyway.

I'm coming up on a year of knowing JS and none of the recommended beginner resources or books ever mention performance or profiling. It seems to just not be taught. On /r/javascript and other forums I do not see it mentioned often as it's assumed the library or framework takes care of it. I'll take the opportunity now and ask for good resources on JS performance, garbage collection, and profiling. I realize I know th…

This is the place to start: https://developer.chrome.com/devtools/docs/javascript-memory...

Re: How to avoid common SPA pitfalls when using third-party plugins

#29

Post by runspired »

dang wrote: post #25
frandroid wrote: post #17

I think the title is a bit short. It should have been "The real reason to avoid jQuery with SPA frameworks".

It's a bit baity, so we changed it to the subtitle. https://news.ycombinator.com/newsguidelines.html

I wasn't expecting this to be a "thing", I wrote it for people I help out in the Ember community that struggle because of their jQuery background. I may update the title now that this is more widespread.

Re: How to avoid common SPA pitfalls when using third-party plugins

#30

Post by dsp1234 »

runspired wrote: post #6
unit91 wrote: post #3

I liked his examples, though I disagree with his conclusion (don't use jQuery). It seems like the real conclusions are: 1. understand the language you're using (this would solve the `bind` examples); and 2. learn how to use your libraries properly. Otherwise, the "don't use $TOOL, because misuse can cause $BAD_THINGS" line of thinking is nearly limitless in its application (jQuery, cars, circular saws, ...).

Author here: I whole heartedly agree, which is why with each point I made I did more than just list what was bad, but how to do better, even with jQuery. The real reason not to use jQuery isn't because jQuery is bad, it is because as a tool it / it's ecosystem is poorly prepared for dynamic html, so if you are going to use it, you need to know the limitations and challenges it brings.

It's certainly nice to see the rationale behind your decisions. However, most of them just turn out to be something along the lines of "understand javascript and the DOM", and not really about jquery at all.

For example:

"To be fair, this is no different than cacheing an element or array of elements on your own, and forgetting to de-reference it later when you are done"

or the examples about attaching/detaching event listeners where the hypothetical developer is gathering elements by the equivalent of document.getElementsByClassName. If a developer is going to make that kind of mistake, then that's an error that's going to occur regardless of the framework.

There are certainly reasons to not use jquery in some cases, but this article seems a bit too much like "Do good development, don't do bad development". Drop jquery from the body of the content and the title, and the lesson will still be the same.

Post reply on HN