Brick – UI Components for Modern Web Apps | Hacker News Reader

Brick – UI Components for Modern Web Apps

mozilla.github.io

214 pointsdkannan72 comments

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...

Hi! I work on Brick. Yes, there are still rough edges on these components, and we're putting them out there in the hopes of getting feedback and bug reports- a traditional beta.

Cool. I see the date picker has been fixed - thanks muchly & thanks for putting this out there.

In terms of feedback :) I gave it a shot. The only one that had a native date picker component (on my setup) was Chrome. The polyfill version didn't seem fully operational (just an overflow list of the same date?).

The Chrome native suffers from the same UX snafu that so many Date Pickers do - it's fine for relative dates, but terrible for absolute ones. If you want to schedule an event in a week it's great. Or of you want to search for flights.

However, if you want to enter a Date of Birth, it's terrible. You have to scroll through hundreds of months to get to the year you want.

So maybe you fall back to typing? In the native picker in Chrome, you can muddle through the day/month piece, but you can't type a straight year. e.g. start by typing "19" for "1975" and it'll match "1909". This also makes it impossible to enter a date in the 2000's!

You do get a "spinner" that might let you set the year, but the buttons are so small I think it defies practical usability.

Bah! Interestingly the iOS version does not suffer from this gripe as has a slot-machine three drum date selector. It does default to today, but it's pretty easy to move +/-50 years in either direction.

Sorry, that was a genuine rant. I know this is not intrinsic to Brick, but for me a universal Date Picker is #1 bugbear that I'd like it to solve.

(* The Chrome one also defaulted to the wrong timezone. Clicking "today" selected the wrong date.)

Hi, Is there any documentation to read about the implementation of these components? Does it use x-tags??

Yes, Brick is a set of components developed with X-Tag (the web components sugar library)

It slowed firefox-23.0-1.fc19.x86_64 so much, that I thought it froze too.

I'm not having the freezing issue with Chrome (28). But I think there're some major usability issues. I cannot figure out how to input a date. If I input "8" then "16" it's current value is 08/16/yyyy with the "yyyy" part selected. If I continue to input "2" for the year part it changes to 1902. Inputting "20" will reset the date picker back to mm/dd/yyyy.

I believe you are describing the native datepicker, I am seeing the same weirdness. Be advised, the calendar polyfilled calendar is only active when a native implementation is not detected, or you force it to be used. This may be a bug in Chrome itself.

Yes you're correct. It's neat that it uses the native datepicker if available, but one area of concern is they use different date input formats. Native forces mm/dd/yyyy while the polyfill suggests yyyy-mm-dd (though it accepts the former format as well).

If you wouldn't mind, could you file this (and other problems you run into) as issues? https://github.com/mozilla/brick/issues

Locks FF Nightly too.

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...

Clearly I need to restart my browser more often....But it works fine in both 25.0a1 (2013-07-26) and the latest Nightly under OSX 10.8 and 10.9

Really? I'm running the UX nightly and it seems fine

Another thing about the date picker that was at least happening on my desktop: when it expands, it expands well beyond the bounds of the mobile phone container they're using in their example:

http://i.imgur.com/oOQFBs4.png

That likely won't happen on your real phone :) Thanks though! I'll file an issue for that if one hasn't already been.

Yup, has been a while since I've had to fire up IE to view something that doesn't work in chrome :P

While the page does load, it has a long running script that dies :P

I can confirm this on OSX - Chrome 28.

The issue might be locality dependent, we have several people where who are running the exact same version and platform that cannot reproduce - could be an issue like this: https://github.com/eternicode/bootstrap-datepicker/issues/95...

I'm also running Chrome 28 (Version 28.0.1500.95) on Windows, but everything is running fine. I'm wondering if Chrome itself is locking up, because the calendar demo is has only one demo of the polyfill picker, the rest are the native calendar that it uses when it detects it is available.

Seems fine on an older webkit nightly (the newest one, on another machine, crashes after five mins)

Sounds like the "brick" is quite literal too in this case! :)

Works fine in ChromeOS 28.0.1500.95

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

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.

Yep. The web components aspect is the most interesting aspect of this. It would have been useful to put that in the post title (until a mod reverts it).

Underlying Polymer's opinionated framework, there is a set of polyfills for the emerging Web Components standards - both Mozilla's X-Tag library and Polymer use these polyfills as the basis of their offerings.

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?

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.

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?

Web Components is an active W3 spec. http://www.w3.org/TR/2013/WD-components-intro-20130606/

All browsers are going to support Web Components eventually and it is going to greatly expand what we thought HTML should or shouldn't do.

I think Chrome Chrome Canary has an implementation behind a flag and FF is actively working on it as well.

Isn't that pretty much the M.O. of Angular?

Not that it makes it right or wrong, but this just seems like a different take on the same (or similar) concepts.

The web components spec is precisely what AngularJS has been anticipating since Angular's inception. I believe the idea was (and still may be) to integrate web components once they are officially adopted by the major browsers.

I'd rather say <x-calendar/> than <div><div><div></div></div></div>.

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 :)

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! ;-)

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

According to Browsershots it looks like this on many browsers:

http://browsershots.org/http://mozilla.github.io/brick/compo...

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.

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

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

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

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

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)

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

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

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

Oddly enough in Chrome Stable the front face is not visible. Combined with the browser-crashing calendar demo it's got some way to go.

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

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.

Works for me in chrome as well.

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

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

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.

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

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

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

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.

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.

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

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

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.

We were torn whether to call the current state of things alpha or beta, but yes, these are not ready for prime time. Where we and some other orgs disagree is that things should be kept secret until they're 'ready', when outside contributions could help you get them ready!

It's never too early. Develop in the open. Make an official release when it's ready. The site makes it perfectly clear that it's in a Beta state.

The Datepicker Demo bricked my Chrome :-/

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

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

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

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

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

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

Doesnt render well on Opera mobile.

Does anything?

touche.

calendar crashes on Chrome 28.0.1500.95

So does this work on ios or not?

Reply on news.ycombinator.com