top | item 10976266

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

66 points| gandalfar | 10 years ago |blog.isleofcode.com

39 comments

order

unit91|10 years ago

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, ...).

runspired|10 years ago

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.

jonesb6|10 years ago

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 what JQuery didn't make you do it! It's just a library.

There is no real reason to avoid JQuery. Sure you should, as a good developer, explore alternative solutions for different problem sets. Maybe those alternatives become the standard for your team, maybe they don't. But unless you made a meaningful discovery that can add to the conversation, you don't need to make another blog post about it. Ugh.

unit91|10 years ago

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

runspired|10 years ago

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 is a problem for code that wasn't designed to clean up.

There is a real reason to avoid jQuery, that reason is that you want your app to work well. Blindly reaching for a tool from the static age will bite you.

> But unless you made a meaningful discovery that can add to the conversation, you don't need to make another blog post about it. Ugh.

Guessing this is yours ;)

Bahamut|10 years ago

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

runspired|10 years ago

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.

GavinMcG|10 years ago

What was the fake reason to avoid jQuery?

wernercd|10 years ago

What was the fake reason for not reading-the-freaking-article yourself?

untog|10 years ago

"libraries are bad"

SimeVidas|10 years ago

Some people write crappy jQuery code → jQuery is bad for you.” Never gets old :P

EugeneOZ|10 years ago

jQuery is not jQuery plugins. It's ... not smart to write about them like it is one monolith thing.

runspired|10 years ago

... this is about both. And for most devs, they are the same thing. The difference is poorly understood.

WA|10 years ago

tl;dr: Use jQuery + plugins, if you want to do some small UI improvements in JavaScript and don't make it too complicated.

Learn a lot more about jQuery, if you write complex JS applications (like single-page apps) with the help of jQuery.

blhack|10 years ago

<offtopic>

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.

ars|10 years ago

None of this is about jQuery - you can have the exact same problems in native JavaScript.

This page should be titled: "Don't forget to delete unused JavaScript things (nodes, events, etc)".

Khao|10 years ago

The real reason to avoid single page apps.

lolc|10 years ago

"The real reason to avoid JavaScript"

Ooops, wrong decade