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. <a href="http://enyojs.com/about/" target="_blank">http://enyojs.com/about/</a> <a href="http://angularjs.org/" target="_blank">http://angularjs.org/</a> <a href="http://twitter.github.io/bootstrap/components.html" target="_blank">http://twitter.github.io/bootstrap/components.html</a> 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 <a href="https://github.com/component" target="_blank">https://github.com/component</a> <a href="https://github.com/mozilla/mortar" target="_blank">https://github.com/mozilla/mortar</a> <a href="http://yeoman.io/" target="_blank">http://yeoman.io/</a> <a href="https://github.com/volojs">https://github.com/volojs</a> 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. <div class="gmail_quote">On 17 April 2013 15:43, Manuel Quiñones <<a href="mailto:manuq@laptop.org" target="_blank">manuq@laptop.org</a>> wrote: <blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">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: <a href="http://tjholowaychuk.com/post/27984551477/components" target="_blank">http://tjholowaychuk.com/post/27984551477/components</a> <a href="https://github.com/component" target="_blank">https://github.com/component</a> Another approach is what Twitter Bootstrap framework does. Here its components: <a href="http://twitter.github.io/bootstrap/components.html" target="_blank">http://twitter.github.io/bootstrap/components.html</a> Mozilla has its building blocks too, using the mortar tool: <a href="https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks" target="_blank">https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks</a> <a href="https://github.com/mozilla/mortar" target="_blank">https://github.com/mozilla/mortar</a> Then there are more invasive options like Enyo or the recent Google's AngularJS: <a href="http://enyojs.com/about/" target="_blank">http://enyojs.com/about/</a> <a href="http://angularjs.org/" target="_blank">http://angularjs.org/</a> Also: <a href="http://yeoman.io/" target="_blank">http://yeoman.io/</a> 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 <a href="https://github.com/cscott/nell-colors/blob/master/sass/index.scss" target="_blank">https://github.com/cscott/nell-colors/blob/master/sass/index.scss</a> 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 <a href="http://dailyjs.com/2012/10/22/components/" target="_blank">http://dailyjs.com/2012/10/22/components/</a> 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 <a href="http://volojs.org/" target="_blank">http://volojs.org/</a> 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 <a href="http://dailyjs.com" target="_blank">dailyjs.com</a>, i think there's one or two additional posts on 'components' cscott: <a href="https://github.com/mozilla/mortar" target="_blank">https://github.com/mozilla/mortar</a> is a mozilla tool that uses volo, and <a href="https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks" target="_blank">https://github.com/mozilla-b2g/Gaia-UI-Building-Blocks</a> is their work on a UI framework cscott: <a href="https://hacks.mozilla.org/2013/01/writing-web-apps-quickly-with-mortar/" target="_blank">https://hacks.mozilla.org/2013/01/writing-web-apps-quickly-with-mortar/</a> discusses this more manuq: cscott: yes, in the mozilla based sugar experiment we started using volo <a href="https://github.com/ayopa/agora-thoughts/blob/master/about.md" target="_blank">https://github.com/ayopa/agora-thoughts/blob/master/about.md</a> cscott: <a href="https://github.com/mozilla/mortar-layouts" target="_blank">https://github.com/mozilla/mortar-layouts</a> 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 <a href="http://dailyjs.com/2013/04/16/jquery-roundup/" target="_blank">http://dailyjs.com/2013/04/16/jquery-roundup/</a> interesting cscott: <a href="http://yeoman.io/" target="_blank">http://yeoman.io/</a> 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 <a href="http://dailyjs.com" target="_blank">dailyjs.com</a>, 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 <a href="http://enyojs.com/" target="_blank">http://enyojs.com/</a> 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", <a href="http://builtwith.angularjs.org/" target="_blank">http://builtwith.angularjs.org/</a> ) 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 <a href="mailto:Sugar-devel@lists.sugarlabs.org">Sugar-devel@lists.sugarlabs.org</a> <a href="http://lists.sugarlabs.org/listinfo/sugar-devel" target="_blank">http://lists.sugarlabs.org/listinfo/sugar-devel</a> </blockquote></div> -- Daniel Narvaez