Comparison to other PJAX libs about swup

[gmrchk]

@jcklpe @23d1 Thanks for your input. As I'm not fully aware how the other solutions are designed, and any decision made in the development of swup were made by me, I can't objectively compare simple advantages/disadvantages, so this is really helpful and will be reflected in the readme.

@Panayotov If there is something unclear in the docs, please create an issue here, or on swupjs repo, if it's rather related to the JS version.

In the meanwhile, here's a basic example using swupjs/GSAP combo I dug up from one of my projects.

const animations = {
    '*': {
        in: function(next){
            document.querySelector('#fade').style.opacity = 0;
            TweenLite.to(document.querySelector('#fade'), .5, {
                opacity: 1,
                onComplete: next
            });
        },
        out: function(next){
            document.querySelector('#fade').style.opacity = 1;
            TweenLite.to(document.querySelector('#fade'), .5, {
                opacity: 0,
                onComplete: next
            });
        }
    },
}

const options = {
    debugMode: true,
    animations: animations,
    preload: true,
}

const swupjs = new Swupjs(options);

[gmrchk]

This is not a priority for me at this time, but if anyone would like to go through the docs of each of mentioned tools and create some comparison for others, feel free to contact me with any questions.

[phiwut]

+1 Would be nice to see something like a comparison table in the readme.

[23d1]

One relatively small thing that stands out to me at first glance, which dramatically helps in some cases is the fact that you can define multiple containers to swap content within. Barba for example, only lets you use the #barba-wrapper ID and .barba-container class. That means in order to replace other content on the page you need to add some custom code, which is tricky if you're not used to the pitfalls and workarounds in JavaScript. I'm probably going to switch over to SWUP from Barba for future projects. It has the same essential callbacks and hooks and many more, but even things like the nomenclature is more straight forward, which I think greatly helps people not fully comfortable in JavaScript get a head start on PJAXing their sites. Excellently executed stuff.

One huge reason to use SWUP is that it's actively maintained. Just take a look at the different repos out there with similar functionality and when anything relevant was last updated.

Edit: I actually just switched to Swup on a current project. It was a breeze, and much less code now.

[jcklpe]

@gmrchk I guess my core question would be: why use this over turbolinks or barba.js?

This looks by far the easiest to use. I'm a designer learning to dev. So easy to use a is a big plus for me. But I don't know much else from readinging the docs on any of the other libraries.

[panayotoff]

@23d1 Anders, can you provide some example of pages controller management with swup? I'm ditching Barbajs and looking for new pjax framework ( swup and @dogstudio/Highway are the candidates ), but the problem with both is no repos with examples ( for example simple GSAP page transition with swupjs, or page controller lifecycle and component registration ... )
If you make the switch from barba successfully some small code example ( or codesandbox.io project ) will be greatly appreciated

[gmrchk]

I have reflected the things mentioned in this thread in some summary in the readme. Closing for now.