Bootstrap4Xpages vs. plain Bootstrap

Monday, April 14, 2014 at 4:17 PM UTC

A few days ago Petter Kjeilen posted a question on Twitter with that headline. I don't know if anyone replied directly but until now I cannot see any conversation on this tweet - which is (to be honest) very surprising to me.

I decided to compare both strategies on my own in this post now as a Twitter conversation (especially when there is none) maybe to short to discuss the facets of this question. With today's possibilities you also may come to that question - what should I use, what is better, what is more straight forward etc.

The following is only my point of view to that question and you are invited to comment on that (despite the message you'll receive this post auto-approves every comment, just reload this page after you posted your comment).

So here we go:

Usage of Bootstrap4XPages plugin

pros:

  • easy to install
  • a ready-to-go environment with predefined widgets and layout parts for almost every kind of application
  • full Domino Designer integration (if you install the plugin here, too)
  • agile open source project that you are able to join and contribute
  • capable of runtime optimized usage of resources (aggregation)

cons:

  • you have to install the plugin on the server and in DDE
  • the plugin follows the guidelines of the Application Layout control for the general look & feel of your application
  • loads both CSS and Javascript (even if you only want to use the CSS)
  • not well documented yet

Usage of the "vanilla" Bootstrap framework

pros:

  • no plugin needed (essential in "restricted" environments)
  • you (have to) learn Bootstrap from the scratch
  • better understanding of what's happening
  • full source control of your components (as you have to design them on your own, might be also a con?)
  • you can always use the latest version
  • you can choose if you want the Javascript components, too (besides the mandatory CSS)

cons:

  • you are responsible for ALL of your doings (defining resources, code patterns and program controls)
  • no DDE integration (YOU code your widgets & stuff)
  • resource aggregation is a bit "tricky" but possible
  • same with custom themes e.g. from Bootswatch

Resumé

As always: there is no right or wrong, both ways are great and very useful for your Domino development. And there is also room for a combination: I am using the plugin as it allows me to use resource aggregation and binding the libraries without a hassle (I am using Bootstrap 3.1.1 at the moment from the plugin) AND customizations like themes or my own CSS tweaks. My advice is: play around with both ways but start w/o the plugin as you learn how Bootstrap works and which components you want to choose.

On your marks, ready, ... comment! Yes






Latest comments to this post

Fredrik Norling wrote on 11.06.2014, 14:36

The big problems for all of us developers that isn't inhouse developers. Is that when working with customers big corporate environments and just suppling a little bit of the large infrastruture. Getting the big Corporate IT department to install a OSGI plugin on 100+ servers is almost impossible that's the fact I've been facing. So therefor we implement everything into each application not the best approach but the only one I've found possible.

 Reply to this comment
 Link to this comment
Mark Leusink wrote on 18.04.2014, 09:45

I just had to respond on this one... Smile

I started using Bootstrap by adding it manually to every database. As David mentioned: a real pain for things like dialogs. That was also why I started writing up everything I learned at bootstrap4xpages.com. The plugin makes my life a lot easier. With the custom renderers it's simply much easier to work with in an XPages environment. My advice would definitely be: go with the plugin. Besides the built-in integration with XPages that gives you benefits like an easy install in every application, shared resources, built-in resource aggregation and more. Although you could use it without much knowledge of Bootstrap, I'd still recommend to go to getbootstrap.com and read the documentation (the same goes if you're using OneUI): if you're building web apps you'll need to know what's going on under the hood. Oh, and if you don't want to use the Application Layout you can always create your own layout control.
 
About keeping current: the plugin currently contains the latest Bootstrap release (v3.1.1). My plan is for the foreseeable future to keep embedding updates. I heard from 2 (new) people in the past two weeks that they want to contribute, so I'm hoping we'll get more help. Setting up a good dev environment is complex, I agree with that, but that's not specific to the Bootstrap4XPages plugin: it goes for all OSGi plugin development for Domino. There are excellent resources available to help you with that (like this slidedeck by David Taieb http://www.slideshare.net/fiorep/domino-osgi-development and this webcast by Phil Riand https://www.youtube.com/watch?v=uAff5uNwhn0).
 
I agree that the documentation is limited. Unfortunately I haven't been able to contribute much on that part. Would love to have people help us out. That doesn't mean there isn't anything available: the webcast above, the slidedeck from our session at Connect and the session I did at Engage 2014. On June 17th I will also do a webcast (together with TLCC/ Teamstudio) on Bootstrap4XPages. For the next release of the plugin we've also planned to include a demo database. 
 
(BTW: I stopped adding Bootstrap to every application and now use the Bootstrap4XPages plugin in all new projects. The bootstrap4xpages.com site has also been converted)
 Reply to this comment
 Link to this comment
Jesse Gallagher wrote on 17.04.2014, 22:57

Bootstrap4XPages is also an EXCELLENT reference for learning custom renderers. For my project-tracking app, I didn't use it directly, but I used much of the code either to save time or as a reference point for how I wanted to implement the Bootstrap theme I bought. Really helps you learn the platform all the more thoroughly.
 

 Reply to this comment
 Link to this comment
Oliver Busse wrote on 17.04.2014, 22:45

David, there are currently 6 contributors to this project: https://github.com/OpenNTF/Bootstrap4XPages/graphs/contributors

But I share the same problem with you: I didn't even manage to setup the project in my Eclipse environment though I wanted to contribute from the beginning as Phil Riand started this great thing as Bootstrap is one of my hobbyhorses. So I am always delighted with every new version that is published. And if there is a problem I/you can propose it directly to e.g. Mark Leusink who fiddles even at the darkest night time to solve it. That's why I love this community and the people who keep it alive!

 Reply to this comment
 Link to this comment
David Leedy wrote on 17.04.2014, 21:54

Yeah... this is a scary one...  On the surface the Bootstrap4Xpages project is the clear winner.  The resource aggregation..  It uses build in renderes... so it performs much better overall then if you did it manually.

The problem is there's one 1-2 people working on it that I know of.  So I worry about it keeping up with newer versions and everything. I'd love to help that project but don't have those skills.

If you use pure bootstrap.. then things like dialogboxes...  and re-styling things like pagers become a much bigger chore to deal with.  

Nothings ever easy...

 Reply to this comment
 Link to this comment

Leave a comment right here