Requirment for bootstrap

[Serhioromano]

The angular UI bootstrap works without bootstrap.js and jQuery.js

How possible it is to use this wrapper without bootstrap.js and jQuery.js? Can we use only CSS to style popups and angular to show them? Just like dropdowns in angular-ui-bootstrap?

[benmarch]

Currently, it would not be possible to use this without bootstrap.js and jQuery.js because it is dependent on bootstrap-tour, which is dependent on bootstrap.js, which is dependent on jQuery.js. Angular UI bootstrap was basically a rewrite of Twitter Bootstrap that eliminated the need for jQuery, and just uses jqLite. I have no plans of making this independent of jQuery because that would involve rewriting bootstrap tour, and that is not purpose of this plugin. However, I can create a standalone distro that will include everything except jQuery and angular. Unfortunately, if you are using UI Bootstrap then I think bootstrap-tour will clash.

If there is significant demand for a standalone plugin (or one that integrates with UI Bootstrap instead of the original bootstrap) then perhaps I will revisit this.

[Serhioromano]

If there is significant demand for a standalone plugin (or one that integrates with UI Bootstrap instead of the original bootstrap) then perhaps I will revisit this.

Not really crucial for me right now. We are only developing prototype right now. Sow we can allow ourself some additional stuff. But when we develop production, we have to seriously think about every script we load for performance issue.

I like jQuery and I used it a lot. And I know that there are a lot of ready to use solutions. But somehow in my mind is sounds wrong to start develop application with angular that depends on jQuery. May be I am simply wrong.

[benmarch]

But somehow in my mind is sounds wrong to start develop application with angular that depends on jQuery. May be I am simply wrong.

Absolutely not, it is considered a good practice when writing angular apps to avoid using jquery, and there are a few reasons for it. My company just released the MVP of a very large application. When we started the project last year, we were very strict about not using jquery. We had two reasons for that: 1) jquery makes it too easy to write messy and scattered code, and 2) because it is an extra 32kB that can (with some effort) be avoided. We were using Bootstrap 3 just for the CSS, so we didn't need the javascript that depends on jquery. Eventually, we wanted to use bootstrap's Affix plugin, so we needed the bootstrap JS and jquery. When considering performance, we found that our own javascript, minified and concatenated to one file, was about 600kB (including angular and angular packages) so 32kB extra seemed manageable. (Benchmarking showed almost no difference in load time.)

It very much depends on what kind of app you are writing, how large it is, how much the UI deviates from what is available with bootstrap out-of-the-box, and your current stack. In this case, it sounds like this plugin might not be right for you. I looked into angular-tour and intro.js but they did not work in my case. They are fantastic plugins, and one of them might work well for you. If not, and you really want this one, I will have time in a few weeks to consider removing the dependency. I certainly appreciate your interest, and I am sure there are others who are looking for the same solution.

[Serhioromano]

angular-tour depends on jQuery again :)

Thank you for your very preciousopinionn.

[jscti]

Just here to +1 this issue :)

I created the exact same issue for http://abhikmitra.github.io/ng-joyride-demo too

[Serhioromano]

@Bixibu - good. I am still waiting the day this plugin become jQuery free.

[benmarch]

The only roadblock here is that Bootstrap Tour uses jQuery--technically this plugin doesn't use it at all. There are a few ways around this:

• Move this issue to Bootstrap Tour and ask them to rewrite without jQuery
• I could encapsulate jQuery in this plugin and pass it to Bootstrap Tour (would make this plugin HUGE!)
• I could extract all the pieces of jQuery that BT is using and pass them into BT (but would need to reevaluate every time BT is updated.)

I have no intention of forking BT, but if someone does do that and removes jQuery from it, I will use that fork instead of the master. I will keep this open for now, any suggestions are welcome. Thanks!

[benmarch]

I haven't forgotten about this issue, I'm just trying to determine a good approach to solving the problem :)

[Serhioromano]

I am also not forgotten it and still waiting for a solution.

[benmarch]

Ok, I think I'm going to create a new plugin that is built specifically for Angular UI Bootstrap instead of the original jQuery-based Bootstrap. I'll keep the interface the same, but it won't require bootstrap.js or jquery; however, it will require angular-ui-bootstrap.js because I'm not going to redo some the fantastic work that they have done. I'm not sure what the timeframe will be, but I'll try to get it done in the next 6-8 weeks or so.

[Serhioromano]

however, it will require angular-ui-bootstrap.js

That is ok. Anyone who use twitter bootstrap with angular use angular-ui-bootstrap anyway.

[no-more]

Hello,

Great job, is the jquery free release already available ?

[benmarch]

Unfortunately it is not; I have been slammed with other projects for months and it doesn't look like I will be able to really get it going until after July 7th.

[cklemming]

+1 for requesting the JQuery-free version.

[wald-tq]

are there any news?

[benmarch]

Yes, I have tried a couple different approaches including rewriting Bootstrap Tour entirely, but because they keep coming out with new features I decided it wasn't work trying to keep up. So ultimately, I have to find a way to do this while still using the existing Bootstrap Tour. The only way that I can think of is to replace jQuery with a stub that only implements the features that they use. I have started working on this recently, and it turns out not to be as difficult or awkward as I thought it would be, there have only been a few speed bumps so far. Bootstrap Tour only uses a handful of features from jQuery, so I am partially cherry picking from the jQuery repo, and partially implementing the features myself (to make them much smaller.) The reason this is taking so long is because I have other projects that take priority, and since my employer doesn't need this to be jQuery-free, I can only work on this in my free time. Thank you for inquiring though, I hope to roll this out by the end of the year.

[wald-tq]

Thanks for the response.

My app is a angular app. And we are looking to integrate a kind of a tour / onboarding experience. I think a valid option would be to just have the tour part separately from the core application.

So we could also use vanilla bootstrap tour (One teammember has already experience with it).

Do you see any downside to this other than loading time / size?

[benmarch]

The loading time is definitely a downside, especially if you aren't using jQuery in your core app. But if you can bundle up all the code into one dependency then at least it will be easy to swap out when there is a better option available (hopefully this plugin). I think that's probably a decent interim solution.

[benmarch]

Hey everyone, I am very excited to show you the jQuery-free version of the tour! Check it out: https://github.com/benmarch/angular-ui-tour

It is a work in progress, and the only release is a dev release so that I can get some feedback from all of you. I intentionally created a new repo so that I can continue to support the jQuery version.

Thank you all for your patience and supporting this plugin!