jQuery: Explore replacing effects with CSS transitions

[dmsnell]

Note: This is an experimental PR, not meant for inclusion or merging. Also it's barely a draft; the code is here so far to share and discuss.

Status

It's plausible that we could use the existing framework and reinterpret #jquery_effect. The stateless CSS transitions are relatively straightforward (fade/appear), while the stateful ones require more thought (toggle).

Benefits

• the CSS transitions are smooth and power-efficient, and interuptable
• no jQuery required
• does not pollute style attribute from jQuery's timer-based callbacks
• no if_visible() checks necessary, when looking at CSS vs. JS for effects

Drawbacks

• pollutes element class namespace with Nitrogen class names, may not be a problem, especially if we generate these classnames with a configurable prefix

[choptastic]

I like where you're going with this!

I agree that the drawbacks are hardly drawbacks.

One thing that I'm not opposed to is integrating with some lighter-weight jquery-like libraries that abstract some of the manual work away.

Like https://github.com/fabiospampinato/cash or https://github.com/kylebarrow/chibi for example.

Maybe it's just my jquery-reliant-old-man-mind-who-doesn't-like-change, but the idea of having to foreach over each item to do the same thing irks me.

Then again, maybe I should just get over it. Do you have an opinions on this? I've never used modern frontend frameworks like angular and react so I don't know how the kids do things these days with JS, so I'm open to ideas.

[dmsnell]

the idea of having to foreach over each item to do the same thing irks me.

well this is literally changing this.each to this.forEach so I don't see it as a big change.

Do you have an opinions on this…modern frontend frameworks like angular and react…kids do things these days?

in short there's a tendency to move things out of heavy frameworks like jQuery. jQuery will always hold a special place in web dev because it covered all sorts of browser inconsistencies and deficiencies in the JavaScript standard library.

for the most part, all of that has been resolved, whereas browsers provide a fairly universal interface for operating on Nodes (which $() mainly handles) and the standard library now does most of what we needed with jQuery's helper functions.

for things like animations and effects jQuery is again just a really heavy framework that didn't keep up with needs, especially for mobile devices where power efficiency is more important. the move to CSS can offload most of the visual effects onto a GPU and can be significantly easier on a battery, even to the point where similar pages with jQuery might warm up a phone.

so overall the move is towards efficiency and and embracing the platform, which has improved greatly since jQuery became dominant. the use of Angular and React are addressing a much different part of the process, which is more like what nitrogen is doing -> they lower the development overhead of building highly interactive pages. in fact, when it comes to effects, animations, and visuals, some of the same questions arise in Angular/React apps as we are discussing here.