Unpoly - a framework like Turbolinks

General Prog (Archived)
,
41

That would be awesome. ^.^

Unsure, but I don’t really use animations (I’m tempted on fades though…)… ^.^;

42

Just for note, my and coworkers phones on wifi operates the work site about instant, so it’s not unpoly being slow in this case (though optimizations are always welcome).

43

being unpolite does not help in a discussion. btw… that person was me and I now how network works and also how DOM works.

Have you actually read what you are commenting on?

the site is faster on my mobile devices when not using unpoly. but it is faster on my notebook. so it has obviously nothing to do with having a slow network.

you are totally wrong and repeating this does not make it correct. unpoly is slow on its own site even when making not any network connection at all, because the content is already cached from unpoly.

maybe it is hearsay for you, but not for me, as I am experiencing the delay and I am the one who wrote the message on the google group.

Only because something it outside of your experience does not mean that the persons that are experiencing this are dumb.

44

Sorry about that! But still it would only display that when the server responds yes?

Do you have an example?

Both my work site and the unpoly site itself are pretty instant on my phone so I’m unable to replicate the issue and there was no replication shown in the github issue (always good to show how to replicate)? Without a way to replicate the issue it is difficult to tell precisely where the problem lies.

I’d love to see a replicated testcase! What is a url? :slight_smile:

45

I have even optimized some results for using together with unpoly. so actually the response time for the unpoly result is faster than the normaler result. nevertheless the page load is faster when not using unpoly.

maybe you cant replicate it with you phones. but on my phone and on my tablet the site is beeing slow. I could make a screencast to show it, but that does not mean, that you are able to replicate it.

I could post here my website, where this is happening, but it has nothing to do with my site, as I am experiencing some delay on https://unpoly.com/ when using it on my mobile devices, when opening the menu. and not only the first time, but also the second time, where to page should come directly from the unpoly cache – not using the network at all.

All this is happening only on my mobile devices. on my notebook unpoly is really really fast.

46

I did a quick test here (excuse the low quality, the original recording was 60 megs, 8megs is much better and the quality is not too much worse at this less resolution) on my phone:

It seems to be the same speed as using Chrome on the desktop in touch mode (remembering that touches have ~200ms latency as it it making sure it is not a double tap or so, this is fixable with the right meta elements though) and I can’t tell a difference? I can hook up my bluetooth keyboard when I get home and test that way without incurring the touch latency but I still think it will be about instant too? And I have a ton of things loaded on my phone currently as you can tell by my poor notification bar (which is showing only about 20% of the overall notifications, I’ll go through them after work… >.>).

47

Unpoly just had a major update, bit of a breaking change in a couple of the smaller API’s to be aware of, great new feature fixes though!

Copied from the announcement (EDIT: Removed the blockquote as it made the colors vanish…):

This is a major rewrite with many bugfixes, performance improvements and some minor breaking API changes.

Request parameters

To prevent confusion with [up-data] , Unpoly now uses the word “params” when talking about form values or request parameters:

Parameters may be passed in one of the following types:

  1. an object like { email: 'f...@bar.com' }
  2. a FormData object
  3. a query string like email=foo%40bar.com
  4. an array of { name, value } objects like [{ name: 'email', value: 'f...@bar.com' }]

To help working with form values and request parameters, an experimental module up.params has been added. It offers a consistent API to manipulate request parameters independent of their type.

Application layout

  • When Unpoly cannot find the viewport of an element, it now uses the scrolling root element. This is either <body> or <html> , depending on the browser.
  • Fix a bug where linking back and forth between multiple #anchor hashes of the same URL would always reveal the first anchor.
  • Revealing elements below fixed navigation bars now honors the navigation bar’s padding , border , margin , top and bottom properties.
  • Fix a bug where revealing elements fixed navigation bars would scroll 1 pixel too short.
  • up.layout.revealHash() no longer retrieves the hash anchor from the current URL. You need to pass in a #hash value as a first argument.
  • Fix a bug where a #hash anchor would not be revealed if it included non-word characters like spaces or dots.

Compilers

  • To improve performance, Unpoly no longer parses [up-data] attributes when a compiler function does not require a second data argument.
  • Compilers that return destructor functions now run slightly faster.
  • Compilers with { batch: true } now receive an array of [up-data] objects as their second data argument.
  • Compilers with { batch: true } can no longer return destructor functions. Previously the behavior of batch destructors was undefined, now it throws an error.
  • Returning an array of destructor functions from up.compiler() is now deprecated. Please return a single destructor function instead.
  • up.syntax.data() now returns undefined if the given object has no (or an empty) [up-data] attribute. It previously returned an empty object.

Event listeners

  • To improve performance, Unpoly no longer parses [up-data] attributes when an up.on() listener does not require a third data argument.
  • up.on() now throws an error when the same callback function is registered multiple times.

Fragment update API

Various

4 Likes
48

The fact that this depends on jQuery “does” make my eye twitch slightly…

That being said, this looks pretty amazing. I wonder if Unpoly and Phoenix Live View would ever converge (or it not, which you would use in what scenario). But yeah… I’m not sure if I saw this in this thread or another, but stuff like this is what you’d hope to see as the precursor to HTML6.

49

JQuery is on the way out… according to unpoly author

2 Likes
50

Unpoly tests have been passing without jQuery for some weeks now.

I’m currently working on a smooth migration path for existing code. I don’t want to break everyone’s stuff :slight_smile:

13 Likes
51

waiting…

52

Please have a little more respect for maintainers of open source projects you use. I don’t think the fact that you are “waiting…” for it will help get it released faster. Instead, perhaps try and provide more useful ways to help the maintainers.

You could for example have asked if there was anything you could do to help. The https://github.com/unpoly/unpoly/tree/hk/kill-jquery branch is under heavy development, why not see if there is a way you could contribute there? Maybe you could try out that branch, see how it works for you and open issues for anything that isn’t working?

There will probably some documentation changes required if JQuery is no longer a dependency. Maybe have a look around to see if you can help there?

Remember that the people providing their libraries for you often are contributing their own free time to develop and maintain them, and that they owe you nothing.

14 Likes
53

Hi @pillaiindu. I’m not sure if you’re aware, but single-word replies, especially those relating to something you want from someone else, can be interpreted as “rude” or similar. This may not be how you intended it, and in case you weren’t aware, it explains the reply you received. :slight_smile:

2 Likes
54

@Gazler @BrightEyesDavid

Well, I’m really sorry if my reply meant something I didn’t intend to say. It was like I was appreciating the author and telling him that the library he wrote was so great that I’ll wait for it to use it in the next project, even if the kill-jquery branch takes some time. I’m not a native speaker, so at times I say something and I may mean something completely different. :slight_smile:

Also I wished that I could contribute to the project, but I’m not yet so good in JavaScript to be able to contribute to it.

5 Likes
55

Today Unpoly 0.60 was released. jQuery is no longer required! Unpoly now has zero dependencies.

Read about all changes here: https://unpoly.com/changes/0.60.0

If you’re interested in benchmarks, here are some flame graphs chronicling performance improvements from version 0.37.0 to 0.60.0: https://blog.makandra.com/2019/01/performance-impact-of-removing-jquery/

19 Likes
56

Ooooo awesome!!

Due to its use of native DOM APIs, Unpoly is now a lot faster. Like, a lot . Ditching jQuery also saves you 30 KB of gzipped bundle size and speeds up your own code.

Lol, I knew jQuery had overhead but didn’t know it was quite that much, nice. ^.^

Finally, all Unpoly events ( up:* ) are now triggered as native events that can be received with Element#addEventListener() .

So much nicer!!

Are they non-bubbling or do they bubble? Is that configureable?

The up.compiler() callback now receives a native element instead of a jQuery collection.

A Native Element (singular) or an HTMLCollection (more-efficient than an array DOM structure that emulates a tree that just returns the actual native Elements that are queried)? Any chance of using an HTMLCollection or native array so a compiler can run over it itself more efficiently than each element individually?

  • [up-preload] and [up-instant] links no longer bind to the touchstart event, increasing frame rate while scrolling.

True it would, but do preload/instant still work on touchscreen interfaces then?

Wrap any type of parameter representation into up.Params to get consistent API for reading and manipulation.

Oh that’s cool!

The HTML markup for a popup has been changed to make it easier to style with CSS.

A simple change, cool.

<Flamegraphs>

Nice flamegraphs, such a huge change there!!

Wooo!

2 Likes
57

Are they non-bubbling or do they bubble?

All events bubble because event delegation is such a useful pattern for users.

A Native Element (singular) or an HTMLCollection (more-efficient than an array DOM structure that emulates a tree that just returns the actual native Elements that are queried)? Any chance of using an HTMLCollection or native array so a compiler can run over it itself more efficiently than each element individually?

You can use the { batch: true } option to receive the entire list of matching elements at once:

up.compiler('.selector', { batch: true }, (elements) => { ... })

True it would, but do preload/instant still work on touchscreen interfaces then?

Yes, to the extent that they always worked. The effect of [up-instant] and [up-preload] has always been limited on touch devices, since they have no hover state.

4 Likes
58

However it is also a source of significant performance degredation if they are fired too often. Most frameworks anymore turn off bubbling, which is not really an issue because it is trivial to listen to the events on the specific element that is firing it (even easier with an up.compiler since you can ‘register’ on their creation and so forth). I’d say it would be good to start moving the library into a non-bubbling style. :slight_smile:

Ah perfect!

Quite true, though on-touch is still good to preload on, it’s usually not good to ‘go’ on since the user might just be scrolling up/down afterwards. I need to test that…

1 Like
59

Great! I am commited to learn Unpoly. I will try to use it instead of Ember.

3 Likes
60

Some people in the thread commented that Unpoly was slow when they tested the official website on mobile phones.

I have a very old Huawei Y530-U00, which is not just an old model but also very heavily used and only to open the browser you have to wait from few to several seconds, and it often freezes in the process.

Whenever I want to test a website for performance, I serve it from my localhost to my wifi network and I check it on this phone and other phones. If it manages to run (slower) on this phone, it can run faster on other phones. Websites based on Vue and React often struggle to respond on this phone.

I downloaded the complete website of Unpoly (unpoly.com) with wget and then served it to this phone through wifi network (to remove the network latency). The performance was amazing! Everything was instant.

Thank you @triskweline !

6 Likes