[Sugar-devel] Web activities: widgets, UI, layout

[Manuel Quiñones]

Hi,

For our web activities, we need to code our widgets or components.
Example of widgets are: the activity toolbar and subtoolbars, a slider
control, a palette.

There are different approaches to this.  Yesterday I discussed some
with C. Scott by IRC.  Here is the wrap up, IRC log at the bottom.
I'm still researching each option so there are no conclussions in this
email yet.

In general, a widget is constructed with bits of reusable html, css
and javascript.  A nice project that defines this is Components.  Here
is an article from the author and the github site:

http://tjholowaychuk.com/post/27984551477/components
https://github.com/component

Another approach is what Twitter Bootstrap framework does.  Here its components:

http://twitter.github.io/bootstrap/components.html

Mozilla has its building blocks too, using the mortar tool:

https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks
https://github.com/mozilla/mortar

Then there are more invasive options like Enyo or the recent Google's AngularJS:

http://enyojs.com/about/
http://angularjs.org/

Also:

http://yeoman.io/ is a new google/twitter-backed alternative to the
mortar/volo stack.  Looks too new, no users, but may have more
momentum behind or more funding.  Uses bootstrap too.

I hope to come with pros and cons for the Monday meeting.  I need to
test each option.

IRC log follows...

manuq:  cscott: UI specific, what do you think about growing something
like twitter's bootstrap for layout/styling?
manuq:  I see you used sass for neil-colors
https://github.com/cscott/nell-colors/blob/master/sass/index.scss
cscott:  i think something like mozilla's UI framework is better (I
don't have link handy at the moment)
manuq:  cscott: will investigate, thanks
cscott:  basically you want something you can drop in to your app in
one piece, then use sass or less to pull in styles
cscott:  practical frameworks have JS chunks as well as HTML and CSS chunks.
manuq:  yeah
cscott:  i've used twitter bootstrap, and it's very cumbersome, hard
to restyle and with lots of bogus classes cluttering your HTML
cscott:  i'd start minimal, rather than trying to do everything, focus
on a simple sugar stylesheet (something like the 'reset' stylesheets)
that defines the proper colors and styles text and form elements
cscott:  then the next thing i'd suggest is doing a minimal "sugar
toolbar" component
cscott:  another useful component would be an "icons" component, which
just made all the standard sugar icons available
manuq:  cscott: yes bootstrap needs many nested divs
cscott:  see http://dailyjs.com/2012/10/22/components/ which talks
about component architectures
cscott:  i'm not sure TJ's framework is the best one, but he outlines
the issues pretty well.  you've got a bunch of stuff you want to wrap
together into a reusable library
cscott:  i'm working with http://volojs.org/ for nell-wikipedia, but I
haven't gotten far enough to say whether it's good or not
manuq:  cscott: nice link
cscott:  if you search dailyjs.com, i think there's one or two
additional posts on 'components'
cscott:  https://github.com/mozilla/mortar is a mozilla tool that uses
volo, and https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks is
their work on a UI framework
cscott:  https://hacks.mozilla.org/2013/01/writing-web-apps-quickly-with-mortar/
discusses this more
manuq:  cscott: yes, in the mozilla based sugar experiment we started
using volo https://github.com/ayopa/agora-thoughts/blob/master/about.md
cscott:  https://github.com/mozilla/mortar-layouts is related, it uses
bootstrap.js -- although i wasn't thrilled with bootstrap although i'm
trying to use it for nell-wikipedia; it seems like bootstrap is just
too server-oriented and i'm fighting it all the time
cscott:  cjb might find http://dailyjs.com/2013/04/16/jquery-roundup/
interesting
cscott:  http://yeoman.io/ seems to be a google/twitter-backed
alternative to the mortar/volo stack.  it might have more momentum
behind it?  or at least more funding?  but it was released after I
started hacking on nell-wikipedia, so I haven't really tried to use it
yet.
cscott:  it's probably worth trying to use it for something, but it
seems to be obsessed with "build process", and I've been trying to
write sugar apps that don't need to be minified/processed/"built" in
order to run.
cscott:  it's just that much harder to develop web apps on-device if
there's some external build process involved.  and there's really no
compelling need for it, IMO.
cscott:  anyway, you might want to cut-and-paste from the irc above
and paste it in an email to the list as my contribution to the
discussion.  maybe other folks on-list have tried some of these tools
and have experience to relate.
manuq:  cscott: yes yeoman can be considered now that we are
investigating the chrome path
manuq:  cscott: copy/paste to the ML, exactly, will do
manuq:  I'm reading about Bower, is new to me
cscott:  i recommend reading dailyjs.com, it's a good way to keep on
track of the latest libraries & packages
manuq:  cscott: yeah I noticed
manuq:  cscott: do you know google's AngularJS?
cscott:  i looked at it briefly.  it seemed invasive.
cjb:  it's a little Meteor-like
cscott:  well, except meteor has the traditional template/model division.
cjb:  yeah
cscott:  angularjs seemed to mutate the html itself to give it semantics
manuq:  hehe, I'm going through the tutorial now, everything sounds
nice in their about page, but yes I can imagine how invasive can be
cscott:  and it didn't seem like it would play nicely with other libraries
manuq:  yes, I'm curious about the extensibility feature
cscott:  if you like angularjs, you might also like http://enyojs.com/
manuq:  but maybe is not worth investigating
cscott:  well, everything's worth investigating at this point
cscott:  it's probably worth trying to write a simple sugar app using
the framework, something like a simple calculator
manuq:  cscott: yeah I know enyo already, and yes angular looks something alike
manuq:  cscott: good point
cscott:  i like enyo, i'm just worried it's doomed.  angularjs at
least has google backing it, but google doesn't seem to have built
anything significant with it itself (other than maybe the "youtube app
for ps3", http://builtwith.angularjs.org/ )
cscott:  i guess i trust mainstream JS solutions like volo better
because you could replace volo with bower pretty easily if it came to
it
cscott:  if you build everything around enyo (or angular), you're pretty stuck
cscott:  which isn't to say it might not be a good idea
cscott:  especially if angular lets you write libraries/components in
a nice way, it might be worth it.
cscott:  just remember that every piece of infrastructure increases
the barrier to entry.  instead of "every developer who knows HTML + JS
can write apps for sugar" now they have to go off and learn angularjs
as well
manuq:  exactly, is not good to be too much dependent, the thinner and
less invasive the deps, the better
cscott:  everything's a trade-off.  it might be worth it, it might
not.  that's why I suggest trying to write a small "hello, world" type
sugar app.
cscott:  think about teaching a new developer how to use
sugar/angularjs, and look at how easy the resulting app is to read and
modify
cscott:  compare it to writing the same app in pure HTML/JS, which
isn't always easy either
manuq:  yes
cscott:  i will say that i really like the 'edit me' buttons on the
angularjs page, and then mention using view-source to look around.
that's a good sign.


--
.. manuq ..