Posted 20 days ago. Visible to the public.

Some hints on upgrading to Unpoly 0.60.0

Unpoly 0.60.0 removed the jQuery dependency to improve performance (see Hennings talk about Javascript without jQuery). I upgraded one of our applications which used a lot of JavaScript with Unpoly compilers and jQuery and want to mention some aspects I had trouble with:

Use up.$compiler as a first step

up.compiler now yields a native DOM element instead of jQuery element. In order to get the old behavior, use up.$compiler. This is useful to make most of your JavaScript work which is very useful when migrating a big project. In a second step you could rewrite compilers to handle native elements (especially when a compiler could have a huge impact on performance).

Expose window.jQuery

A lot of Unpoly methods (e.g. up.replace, up.animate) can handle jQuery elements as arguments. However, window.jQuery has to be defined during Unpoly boot. This card shows how to expose window.jQuery when using webpacker (prepend in environment.js).

Trigger native change/click events

As native event listeners cannot observe events triggered by jQuery, Unpoly markup like up-follow, up-switch, up-validate etc. will only be triggered by native events. Transform all jQuery trigger or change invocations to emit native events:

Copy
// Example 1 $input.val(value).trigger('change') // will not trigger up-validate on the input $input.val(value) up.emit($input, 'change') // will trigger up-validate // Example 2 $inventory.val('').change() $inventory.val('') if ($inventory.length > 0) { // cannot emit change on an empty collection up.emit($inventory, 'change') }

up.reveal crashes on a collection

up.reveal($element) used to take the first element if $element was a jQuery collection, but now it doesn't. Change your code to:

Copy
up.reveal($element.first())

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Daniel Straßner
Last edit:
4 days ago
by Daniel Straßner
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Daniel Straßner to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more