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

[Daniel Narvaez]

Hey,

lots of interesting projects and good points. We already discussed a bit in
IRC, but reposting here for everyone.

The most important choice seems to be be about adopting a full toolkit or
stick to plain html/javascript. From your list it seems like we have at
least three that should be evaluated.

http://enyojs.com/about/
http://angularjs.org/
http://twitter.github.io/bootstrap/components.html

If someone has more ideas I think now it's the time to bring them up!

Something we obviously need to check is if they allow enough look & feel
customization to be able to match the HIG. Beyond that, I guess it's
important to give them a try and see how well they adapt to our use cases.
Some of them might be designed for served websites which can be quite a bit
different from a web application.

Reusing an existing toolkit would reduce the amount of work we need to do,
which would be great given the resource constraints. Though I see few
disadvantages with it

* The ecosystem is moving so fast that it's quite likely today toolkits
will be obsolete or abandoned pretty soon.
* People have generally strong feelings about their toolkit of choice. It
would be nice to allow them to use whatever they like in their activities.
* We probably raise the barrier to entry by adding stuff on top of
html5/javascript.

If we decide for a lightweight framework, we have a pretty wide choice too.
>From your list

https://github.com/component
https://github.com/mozilla/mortar
http://yeoman.io/
https://github.com/volojs

And I'm sure there are a lot more. I tend to think we should not spend too
much time evaluating these. volojs seems to pretty decent and the fact
mozilla uses it is reassuring. Most importantly it should be easy to
replace this part down the road if we want to.

The hard part is how to write html/javascript/css I think.

On 17 April 2013 15:43, Manuel Quiñones <manuq at laptop.org> wrote:

> 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 ..
> _______________________________________________
> Sugar-devel mailing list
> Sugar-devel at lists.sugarlabs.org
> http://lists.sugarlabs.org/listinfo/sugar-devel
>



-- 
Daniel Narvaez
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20130417/592afc38/attachment-0001.html>