
Brick – UI Components for Modern Web Apps - dkannan
http://mozilla.github.io/brick/
======
jwilliams
Interesting, although I think the "beta" is quite literal. Seems to lack a bit
of polish.

The one I was most interested in was the Date Picker, but locks up Chrome (28)
and Safari (6) on my machine.
[http://mozilla.github.io/brick/component/datepicker/demo/ind...](http://mozilla.github.io/brick/component/datepicker/demo/index.html)

~~~
moondowner
Locks FF Nightly too.

~~~
csuwldcat
Given that the errors and ability to reproduce are so erratic (to the extent
that people with the very same browser versions on the same platform are
seeing different behavior), I have a feeling the issue may be something like
this: [https://github.com/eternicode/bootstrap-
datepicker/issues/95...](https://github.com/eternicode/bootstrap-
datepicker/issues/95#issuecomment-6292057)

------
casual_slacker
Looks like these are built on Polymer. ([http://www.polymer-
project.org/](http://www.polymer-project.org/)).

~~~
potch
We're actually not using the Polymer Web Components shim- it attempts to
simulate Shadow DOM by overriding DOM Methods(!), which didn't seem necessary.

------
bpatrianakos
This is cool and certainly useful but I have concerns. Forgetting for a moment
that this is a shim and imagining that all browsers support this natively,
isn't this sort of thing outside the intended purpose of html. Html should
describe content not styling and this sort of thing seems ripe for abuse. I
thought XML was the markup language for describing custom data. Adding the
ability to create your own DOM elements for the purpose of using them as hooks
for interactivity and styling seems like something that should be avoided in
HTML.

Am I being a too much of a purist or overlooking something here?

~~~
csuwldcat
You're overlooking that the underlying technology - Web Components - is
landing as a standard as we speak in both Firefox and Chrome. The idea that
creating custom elements is inherently bad is an urban legend - there is no
empirical basis for such a claim. Additionally, you are mixing metaphors,
Custom Elements are not meant to describe data, they are meant to create new,
active UI components and other useful tags.

~~~
spankalee
Well, you could use such tags to describe data directly in the markup. I'll
think we'll see two definite camps on that issue. Of course, what's data?

------
OlavHN
These are UI elements built on top of (a shim for) the coming standard Web
Components.

For another Web Components shim check out polymer-project.org along with a
small, opinionated framework leveraging Web Components. Especially look at the
awesome Sandbox application allowing you to compose web components :)

------
rubyn00bie
I think it's fucking awesome and it works like a boss in FF 24 (beta) on OS X.
I'm very excited about this project only because standard UI elements are so
irritating to make (after having done it hundreds of times) and the
alternative libraries (in my opinion) all do too much and too little at the
same time.

For everyone complaining about Chrome, I would like to say this is "beta" and
"ahahahahaha."

Not to be malicious though! I just have a really shit experience on the web
with a lot developers only targeting Chrome/Webkit. Like ScalaTour for
instance-- a wretched experience if you're /not/ using Chrome (read unusable).

It's nice to see it go the other way for once! ;-)

------
itry
Calendar looks broken in FF and Chrome here. All I see is:

    
    
      21
      21
      21
      21
      21
      21
      21
      21
      21
      21
      21
    

According to Browsershots it looks like this on many browsers:

[http://browsershots.org/http://mozilla.github.io/brick/compo...](http://browsershots.org/http://mozilla.github.io/brick/component/calendar/demo/index.html)

Same with the datepicker.

Some other stuff also looks broken.

I would much prefer one piece of javascript per component. So if I liked one,
I could use it and improve it. Im not so much inclined to use a library of
tons of stuff I dont use.

~~~
csuwldcat
Each component is isolated in just the way you describe, the only requirement
is the base X-Tag Web Component library.

~~~
itry
Hmm.. looking around the github repo, I dont understand its structure. Where
is the source for the flipbox for example?

------
nrivadeneira
First thing I thought of when I read the name was Designmodo's UI kit "The
Bricks" \- [http://designmodo.com/the-bricks-
addons/](http://designmodo.com/the-bricks-addons/)

When it comes to search, their kit might eclipse yours...at least for the time
being.

------
nilsbunger
These are a big step forward compared to today's tangle of plugins! Much
smoother and nicer to code.

On IE10 this library has no animations. Is it possible to polyfill your way to
decent support with animations at least on IE10?

(I hate IE but a lot of our customers use it)

------
csuwldcat
The folks working on the components are going to be incorporating all this
feedback and reporting going forward. Everyone is encouraged to file bugs with
the repo here:
[https://github.com/mozilla/brick/issues](https://github.com/mozilla/brick/issues)

Just an FYI - Mozilla will be employing this highly technical problem
resolution strategy to ensure a high level of quality prior to official
release:
[http://www.youtube.com/watch?v=yo3uxqwTxk0](http://www.youtube.com/watch?v=yo3uxqwTxk0)

------
SchizoDuckie
The first example (flip widget) already does exactly nothing on Android.

~~~
unwind
Counterpoint: it works perfectly on my Android device (using the standard
awesomely-named "Internet" browser).

~~~
PommeDeTerre
It working for you doesn't change the fact that it's not working for somebody
else. It's still broken in at least that one case, and that's enough to raise
concern among those of us who want to avoid such failures.

------
potch
We've pushed a stopgap fix to the calendar code to stop it from hanging while
we investigate/repro the issue.

------
rafaelferreira
At first glance, the intent seems quite similar to Google's Polymer project.
Hopefully they will interoperate.

------
drudru11
With this and Polymer, I think the whole idea of software components might
actually happen. I cannot wait for this to happen. Having this stuff would be
great!

Thanks to the people behind HTML5 for kicking off the innovation.

Thanks to the team that put this together at Mozilla. I went to the demo page
and things _just worked_.

------
thousande
Ah! It continues Web Components are the most exciting thing on the Web at the
moment. I can not wait until this is fully supported in the browser.

There is a lot of great JS frameworks out there that projects DOM etc., but I
always fall back to markup as the best way to build a browser based app

------
cliveowen
The date picker actually froze Chrome and slowed everything to a crawl. Way to
go Mozilla.

~~~
epmatsw
Interesting. In Chrome Canary, the polyfilled text input is working fine, but
the native date input is freezing.

------
ldoubleuz
For those of you reporting crashes in calendar/datepicker, can you please
indicate what region you are in (UK, etc)? The issue is most likely caused by
non-American date formats, and we are working on a fix.

------
ebbv
While I understand the desire for custom HTML elements I'm also certain they
are going to result in monstrosities.

It's not the tool's fault, in the end. But it is opening up a basket of
horrors.

------
utopkara
Excellent! Didn't know about web components. Are there any big blockers that
would prevent libraries like jQuery Mobile moving into this?

------
phpnode
yeesh, I respect Mozilla for their true open-source-everything-all-the-time
philosophy but this is an example where I think it backfires - it's too early!
Even if these really are awesome components it's really hard to see past the
lack of polish. People are fickle and you only get one chance to make a first
impression, it's important that these things look good

~~~
daleharvey
I dont believe it backfires. People are fickle, you get lots of chances to
make a first impression.

I think the key is clarity in your communication, doing a lot of polish on top
of unstable software and advertising it as stable causes people to waste time
using it, advertising as beta / for early adopters lets the early adopters
pick it up and the people who just want it to 'just work' can wait. If you
lose a few people who dont understand the benefits still far outweight the
negatives.

This is mostly just a disclaimer for people who are waiting to open source
their software until 'its ready', its never ready, do it now.

------
dlsym
The Datepicker Demo bricked my Chrome :-/

------
madoublet
Unless I am missing it, I think the killer feature for a library like this
would be baked-in gesture support.

------
kclay
While this is great it doesn't work in Android Webview or "Browser", in chrome
its just fine.

------
Kiro
Doesn't work on my phone (Samsung Galaxy S3, Android Stock Browser).

~~~
riffraff
Neither in mine ( opera mini in an iPhone 3). then again, most new things do
not :(

------
varunkumar
What are the building blocks of Brick?? Does it use X-Tags?

~~~
varunkumar
From the code, I could see that they are built on top of X-Tags

------
aswanson
Doesnt render well on Opera mobile.

~~~
advicethrowaway
Does anything?

~~~
aswanson
touche.

------
detay
calendar crashes on Chrome 28.0.1500.95

------
pfisch
So does this work on ios or not?

