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
> 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:
On Wed, Nov 7, 2012 at 12:55 PM, Brian O'Reilly <blindjes...@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 :-)
On Wednesday, November 7, 2012 8:22:23 PM UTC-5, Scott L. Burson wrote:
> On Wed, Nov 7, 2012 at 12:55 PM, Brian O'Reilly <blind...@gmail.com<javascript:> > > 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 :-)
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?
On Thu, Nov 8, 2012 at 10:18 AM, Brian O'Reilly <blindjes...@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.
On Thursday, November 8, 2012 3:34:32 PM UTC-5, Scott L. Burson wrote:
> On Thu, Nov 8, 2012 at 10:18 AM, Brian O'Reilly <blind...@gmail.com<javascript:> > > 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.
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. :)
