Weblocks with jQuery and Bootstrap

[Scott L. Burson]

Hi all,

I was getting ready to announce this anyway when Brian asked about it.

I have converted Weblocks to work with jQuery and Bootstrap.  Well, there's quite a bit of work left to do, but I've done enough on it to convert my site, BountyOSS (https://bountyoss.com/).  Have a look!  I think it's a clear improvement, though there's still a lot that could, and eventually should, be done to it.  But, I think a lot of those things will be a lot easier now.

(Note that the color scheme on my site is not the Bootstrap default.)

So while it has to be considered work in progress, I think it's to the point that others could give it a try.  Things to be aware of:

() I started with Olexiy's jQuery patches, but forms didn't work.  I have fixed them.  For reasons I don't recall at the moment, this involved adding in the jQuery-Seq and jQuery-BBQ libraries.

() The amount of jQuery functionality actually being used at the moment is just the bare minimum I needed to get my site working.  There are lots and lots of jQuery and jQuery-BBQ features that are not being used and which Weblocks has as yet no interface to invoke.  I'm not very familiar with jQuery, and haven't even started to explore the possibilities here.

() Bootstrap uses the Less CSS compiler.  This had to be integrated into Weblocks somehow.  At first I thought I could use the Weblocks dependency system, which loads selected script files based on what widgets are currently on the page.  This doesn't work well for Less, though, because Less uses the C compilation model: top-level files are independent and must import all the other files they refer to.  If it had used the Lisp compilation model, where top-level files are loaded into a shared session, it would have been easy.  Perhaps I could have hacked Less into doing what I wanted, but I went in another direction.  I noted that the full compiled CSS file produced by Bootstrap is quite large -- some 200k -- and that large CSS files compress very well, and better than small ones.  So I decided to give up on the dependency system, and just compile all the Less source into a single CSS file, which is then referenced by every page.  This required installing Node.js to run the Less compiler, and the creation of a small makefile.  So, when developing an app, when you change the Less sources, you just have to run 'make' in that directory to get the CSS updated.

() As with jQuery, there are also lots of Bootstrap features that don't yet have a Weblocks interface.

() I did all this work on my Weblocks fork, which has a few incompatible changes from the official version.  The one you're most likely to run into is that function-widget functions are invoked with the widget as the first argument.

Despite all these caveats, I recommend it for new projects.  You can find it here, in the "bootstrap" branch: https://github.com/slburson/weblocks

-- Scott

[Leslie P. Polzer]

Your site looks much better!

  Leslie

[Willem Rein Oudshoorn]

"Scott L. Burson" <Sc...@ergy.com> writes:

>
> I have converted Weblocks to work with jQuery and Bootstrap. Well, there's
> quite a bit of work left to do, but I've done enough on it to convert my
> site, BountyOSS (https://bountyoss.com/). Have a look! I think it's a
> clear improvement, though there's still a lot that could, and eventually
> should, be done to it. But, I think a lot of those things will be a lot
> easier now.

Looks nice.
There is one thing I noticed. On the main page when I click
the link "Developer Guide" in the main text (in the section "For
Developers") it brings me to:

https://bountyoss.com/devguide

While clicking on "Developer Guide" in the right hand menu
brings me to:

https://bountyoss.com/developer-guide

Both generate the same text, so you don't really notice, except
that the selection in the right hand menu is not updated in the first
scenario.

Kind regards,
Wim Oudshoorn.

[Brian O'Reilly]

Ah! This is great news! :) Can you offer any advice about working in weblocks with the jquery/bootstrap features?

B

[Scott L. Burson]

On Wed, Nov 7, 2012 at 12:55 PM, Brian O'Reilly <blind...@gmail.com> wrote:

Ah! This is great news! :) Can you offer any advice about working in weblocks with the jquery/bootstrap features?

It's not very different at all.  Most Weblocks code should work unchanged (except, as I mentioned, for the handful of incompatible changes unrelated to Bootstrap that I had already made in my fork).

There are some new features you might want to use, though.  There's a new ':form-style' parameter for specifying horizontal, inline, or stacked form layout (see src/views/formview/formview.lisp).  'render-button' has new ':kind' and ':size' parameters that let you control the color and size of a button.  Navigations now have a ':menu-style' parameter that give you a choice of a sidebar or tabs (I was about to add navbars, but haven't done so yet).

Again, many more such features could be added.  Feel free :-)

-- Scott

[Brian O'Reilly]

I'm willing to throw some effort into the pot. Do you think you could provide a TODO list for outstanding features in order of importance?

-- Scott

[Scott L. Burson]

On Thu, Nov 8, 2012 at 10:18 AM, Brian O'Reilly <blind...@gmail.com> wrote:

I'm willing to throw some effort into the pot. Do you think you could provide a TODO list for outstanding features in order of importance?

The only two things I recall offhand are: () implement the navbar option for navigations; () convert 'checkboxes-presentation'.

Beyond that, I think there are two ways to go at it.  You could go systematically through the Weblocks sources looking for things that still need conversion.  Or, you could just start building your own app, and convert things as the need arises.

There's something to be said for both of these.  On the one hand, it would be nice if we could reach a point where we could announce that Weblocks/Bootstrap is complete (in a 1.0 sense).  A systematic pass will be needed for that.  On the other hand, all that's going to accomplish is to re-implement functionality already anticipated in Weblocks.  There's a whole bunch of new and cool stuff that could be added, and as someone who already has jQuery and Bootstrap experience, you probably have a much better feel than I would as to which potential new features are most desirable.

I would say, do whichever of these most appeals to you.

-- Scott

[Brian O'Reilly]

Okay, well, let me just say that I'm a weblocks novice, and my bootstrap/jquery experience is limited to having read the bootstrap website and having come to the conclusion that the designers working on bootstrap have much better visual design sense than I do. I was fooling around with your tree yesterday, and I noticed that (wop:make-app ...) produced a standard weblocks application with prototype includes. Do you have to make manual changes to the defwebapp form to override the defaults? I realise that by going the way of bootstrap/jquery I now have two moving pieces in my stack which obviously makes it a little more challenging... but I've been treating html as a textual presentation format since 1995, and have no personal opinnion of the graphical quality of the webified common lisp hyperspec, so it's probably a pill I should swallow. :)

-B