Barba: Barba js v2 full example?

[omarel1]

Is there not a single complete example of using Barba js v2 on a webpage linking between 2 pages? Not a single full example on the entire internet?

[xavierfoucrier]

Hi @omarel1,

Sorry for the late reply.
Yes, there is two full BarbaJS v2 examples right here:

• https://codepen.io/thierrymichel/project/full/XkkWWv
• https://codepen.io/thierrymichel/project/full/ZrzBBK

For now, the "demo" site is still under construction.
Thanks for your patience :wink:

[oueryemchi]

Thanks for the demos.

I am not advanced in JS, could you please clarify how did you process the main.js?

I was hoping there is a more simple/basic demo of the plugin without other tools..I want to use it on my website for simple page fade in/out. Thanks

[xavierfoucrier]

Hi @oueryemchi,

The main.js file is processed through webpack, https://github.com/webpack/webpack.

As define in the Barba documentation:

Notice: this guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. It is worth mentioning that all the code examples use ES6+ syntax. If you are not comfortable with, we encourage you to grasp the basics then come back.

:wink:

[oueryemchi]

Thanks Xavier! will do the necessary. Regards.

[hdodov]

Currently, it's very hard to get started with Barba. The user guide should be changed in my opinion. It shouldn't demonstrate configuration with empty functions that you have no idea how they're connected to the rest of the stuff.

User guide should contain a simple and minimal example. Those two are not:

Yes, there is two full BarbaJS v2 examples right here:

• https://codepen.io/thierrymichel/project/full/XkkWWv
• https://codepen.io/thierrymichel/project/full/ZrzBBK

Using Anime.js is nice to demonstrate what cool effects can be achieved with Barba, but adds complexity and makes it harder for people in the onboarding phase.

A good metric for whether the "Getting started" is enough is whether you can copy-paste code from it and reproduce the minimal example. Currently, you can't. I copied it and I got the error:

Uncaught Error: [@barba/core] No Barba wrapper found

This wrapper is not mentioned in the entire user guide page. Where do I search for it? What does it do? Why do I need it? How to implement it? A minimal example in the user guide should answer that.

In my opinion, you should have:

• A link to very minimal example in the user guide with everything needed to reproduce it.
• A brief description of what each of the Barba components do - core does this and that, router is used for A and B, prefetch does X and Y, etc.
• An examples page where you demonstrate each of Barba's core features in separate examples. This would make things much easier to grasp.

You don't need something fancy. Just some raw text with useful information to get people actually started. Hope you consider my advice!

_Disclaimer: I'm not ranting, just wanting to help out._

[xavierfoucrier]

@hdodov keep calm... and read the doc :wink: !

Here is the wrapper documentation you didn't found: https://barba.js.org/docs/v2/user/core.html#wrapper

Of course, we have a menu in the head section of the website, and an entry for each Barba component that details what core/router/prefetch/css do:

In addition there is a legacy code sample right here to get started with ease: https://barba.js.org/docs/v2/user/legacy.html

We are currently working on another website and take every advice to make BarbaJS documentation and code better.

Regards.

[hdodov]

@xavierfoucrier thanks. I read all of the documentation before posting my comment.

I'm not saying there's missing information. It just needs to be organized better in the home page so you can have a good starting point. A minimal example of how everything fits together would be very helpful.

[oueryemchi]

The plugin is powerful, but honestly, I agree with @hdodov
I spent long hours trying to reproduce a simple animation and now I removed the plugin and not using it because I had no success.

Thanks for the hard work anyway and will probably check the demo website when it is released if I need this library for my next project.

Thanks guys.

[xavierfoucrier]

Hi everyone,

Diving into BarbaJS is hard anyway for developers that are not familiar with Barba core behavior and modern JS development.

Don't forget that the project is still in beta for the v2 because the API/doc/site continue to move forward, therefore as the documentation are saying:

This is beta version, use it at your own risks!

Thanks again for your feedback, we really appreciate it, and we will take your remarks in consideration to make the BarbaJS ecosystem even better! :wink: :beers:

[hdodov]

@xavierfoucrier well, then I'm confused.

Version 2 says:

This is beta version, use it at your own risks!

Version 1 says:

This version is deprecated, look at v2.

Is there any stable Barba version that I could use?

[xavierfoucrier]

@hdodov,

No problem :wink:

For Barba v1, deprecated mean unsupported, not unstable: so you can use this version for the starting point of your project if you are new to Barba, then switch to the v2 when you are more confortable.

Note that the API between the v1 and v2 is quite different, there is more features, but it keep the most behaviors/notions/ideas/concepts of how the v1 work

[hdodov]

@xavierfoucrier perhaps you should change the word in the V1 site. Deprecated is used when you want to discourage people who want to use something. If it'is not supported, it's clearer to say "unsupported".

[xavierfoucrier]

@hdodov,

Sorry for the confusion. I will update this shortly with appropriate explanation... anyway, we encourage users to migrate and use the v2 of course, it's better for new projects, but if you are not confortable with, try to use the v1 instead.

Thanks again :wink:

[thierrymichel]

• Disclaimer updated: https://github.com/barbajs/barba/commit/5ac0fc6688b493d5e9fb5cfd67f2f171ceaf1e3d
• v1 examples migrated to v2: https://github.com/barbajs/barba/tree/v2-examples

[xavierfoucrier]

@Ezra-Siton-UIX,

Thanks for this non-constructive comment on a closed issue...

If you are not comfortable with the official documentation and examples, there are many useful links that talk about how to start using BarbaJS here: https://barba.js.org/docs/getstarted/useful-links/#Learn.

In addition, we are working on new video tutorials with a new contributor to make this step even better/easier for everyone.

If you had like to tell us about something, please use the Slack workspace. Join using the invite link here: https://barba.js.org/docs/getstarted/useful-links/#Developer

Kind regards :eyes: