I'm currently developing a typical CRUD app with bootstrap and various jquery libraries (datatables, select2...). My backend is ASP.Net MVC, which I love, and my frontend is pure jquery, which i don't. I'm using the revealing module pattern to organise the jquery and i'm following best practices, so the code is fairly clean. The only issue i'm having is maintaining a list of cached selectors and binding them all, creating lots of boilerplate, which is messy to modify.<p>I've worked with angular and i really like the data-driven approach, though angular doesn't play nice with jquery and you need another library on top of it to work with bootstrap, which is apparently feature incomplete. I've looked at vuejs, and because of the virtual DOM, it doesn't go well with libraries that manipulate the real DOM directly. The solution to this is to get modified vue-friendly versions of libraries, which is a road im not keen to go down. React seems like it has similar problems.<p>Is there any js framework that plays nice with bootstrap and jquery and would be better to work with than pure jquery?
I have had success combining old jQuery based components with a Mithril based UI (Mithril is similar to Vue, but simpler). But this only worked because I defined clear boundaries between areas managed by Mithril and areas managed by jQuery. Nesting such areas was possible. It was possible to make them both notify the other when they were about to remove a nested area.<p>Deleting an element created by the other framework however is never a good idea. They can manage their own event handlers and metadata only themselves. Instead, you need to ask the other framework to detach itself. You can use jQuery's special events to detect elements about to be removed from the DOM [0]. Mithril lets you define an onremove lifecycle callback on any component. From there, it is cakewalk.<p>[0] <a href="https://stackoverflow.com/a/10172676/2492826" rel="nofollow">https://stackoverflow.com/a/10172676/2492826</a>