Introducing Brick: Minimal-markup Web Components for Faster App Development | Hacker News Reader

Introducing Brick: Minimal-markup Web Components for Faster App Development

hacks.mozilla.org

207 pointsrnyman86 comments

Why are there always so many negative comments? Does everyone open a new tab, quickly find something to complain about, and then comment here?

Just because you begin a comment with "I don't want to sound negative" does not make your comment any less negative.

If HN is passionate about anything lately, it's been negativity.

Rant aside, Brick is now an option for rapid HTML5 development. Why is this a bad thing? Oh right, it's not.

Maybe because we'll have to switch to new GUI model n-th time without any significant pay-rise?

I guess the problem most people see is, why are we making brand new HTML elements for things that are part of HTML5 and or can be done with a simple javascript file.

<x-slider></x-slider> can be replaced by <input type="range"> <x-layout> can be replaced with CSS <x-datepicker> can be replaced with <input type="date">

etc etc...

I just don't see any reason why we need to create a whole new set of HTML elements that are not part of any HTML spec just so you don't need to add a few more characters. And 90% of these are just polyfills which already exist.

If you want a rapid HTML5 development look up Emmet and add bootstrap or some other giant framework. Don't start making brand new HTML elements that have absolutely no meaning unless there is 150kb's of JS to read them.

Me thinks that is what people don't like.

Actually custom html elements are part of a spec: http://www.w3.org/TR/2013/WD-custom-elements-20130514/ This method is a much cleaner approach, separating the declaration of functionality from the declaration of style. Your <input> example is convenient but does not apply to divs or other elements that could be used.

What if I wanted to just display a calendar and not a date picker?

I see the reason why we would need such things, and I am a massive fan of web components and frameworks like Montage. But I also see the other side, where realistically we are just trying to reinvent a more low level language on the web browser.

In that case an x-calendar element is conceivable. In fact, the date picker could use that as its content.

Luckily, Brick is open source, so you can file an Issue about it, and if you're interested, even submit a pull request yourself.

'etc etc...'

The problem is that you run out of built-in components really quick. Not sure why Mozilla chose to start with existing controls, but the point here is that it's an easy way to introduce new controls.

'look up Emmet and add bootstrap or some other giant framework. Don't start making brand new HTML elements that have absolutely no meaning unless there is 150kb's of JS to read them.'

The problem is that every framework has a different way of writing controls. This is a standardization of the control model with built-in support in the browsers (FF and Chrome at least). Doesn't take 150kb's of JS at all, or even a framework.

>why are we making brand new HTML elements for things[?]

    <div class="Foo">...</div>

    <x-foo>...</x-foo>

Semantically, as far as machines are concerned, there is no difference between these two. For humans, however, the latter is way easier to read if there are some lines between the opening and the closing tag.

Custom elements also allow you to create your own shadow DOM, you can have your own "native" functions, and there is also some scoping for CSS.

Maybe use an html -> html translator? I agree. Modern html and css seem like one of the most confusing things I have ever tried to do, I find it analogous to doing taxes.

> <x-slider></x-slider> can be replaced by <input type="range"> <x-layout> can be replaced with CSS <x-datepicker> can be replaced with <input type="date">

Did you miss the post specifically calling them

> cross-browser polyfill implementations of existing native not-yet-globally-supported elements

I know exactly what it does. It's not a polyfill though as it supports IE9+... A polyfill is support for old browsers that don't have native support.

> It's not a polyfill though as it supports IE9+... A polyfill is support for old browsers that don't have native support.

And thus it is a polyfill indeed, since IE9 does not support HTML5 input types (and more generally HTML5 form extensions).

Polyfill != works back to the stone age, it just means providing backwards compatible functionality. Aside from that, there are some polyfills that aren't even technically possible, or would destroy performance, in older browsers

Do you not consider anything a polyfill if it doesn't support IE 1.0?

Your comment is misguided for a few reasons:

Under your logic, any compilation of functionality can be reduced to vanilla, long-hand, zero-abstraction, blocks of HTML, CSS, and JS functions --> Ok everyone, dubcanada has figured out that all the packages on NPM, Bower, and Component, and all the frameworks for UI and CSS, etc, along with many of the other APIs in the DOM, are not reeeeally necessary technically speaking - why did we all waste our time on all that?!?...ugg, what a ridiculous argument.

"If you want a rapid HTML5 development look up Emmet and add bootstrap or some other giant framework" - <x-massive-sarcasm> Oh yeah, duh, why didn't I think of that - wait, there are already giant frameworks that try to provide similar functionality, with less ergonomic interfaces, that are more of a management hassle, all for the low low price of 10x the wire size! Gosh, I love things that provide less utility and weight exponentially more, sign me up! </x-massive-sarcasm>

"I just don't see any reason why we need to create a whole new set of HTML elements that are not part of any HTML" - yeah, you're right, because lord knows we have this fantastic solution right now: <div><div><div><span></span><span></span></div></div></div> - who in their right mind would ever see value in lightweight, tightly encapsulated, auto-instantiating, semantically inferred, components like this: <x-switch role="input"></x-switch>, le sigh.

"Me thinks that is what people don't like." - me thinks you're going to be eating those words by the beginning of 2015.

You seem to have this strange idea that I don't like web components. But I do. In your words, your comment is misguided for a few reasons:

A. I am all for web components, if you read the parent I was replying too. I answered his question.

B. They aren't "technically speaking"... you don't need a calendar. You can create 3 dropdowns with every date. You don't need a slider you can create a dropdown with 1 to 100. I could go on and on. The reason we do this is so it is easier to use. But "technically speaking" it is not a requirement.

Any ways you seem to be a little angry at the moment, I was never attacking the product lol. I actually like the idea, and I'm a contributor/have used extensively to Montage and Broadway. I was just answering the question that the parent asked.

<x-slider> and <x-datepicker> are sorta unique amongst the components in that they are polyfill components- they do things that some browsers already do, but many don't do yet. They're also some of the most popular UI widgets from jQuery UI. We decided to do them because we thought we could make using them much easier than most existing widgets libraries. Most components are novel functionality not found in HTML5 specifications.

>they do things that some browsers already do, but many don't do yet.

So since their browser happens to be one that doesn't do those things, why don't they fix their browser?

"They" is a funny word. It can easily include disparate groups of people while making them sound like they're the same.

Support is already under way for slider in Firefox, and the rest of the input elements are in development. Why don't you contribute to the project instead of shooting off crass remarks about what "other people", "those people", or "they", need to do.

Because I have no interest in contributing to a terrible software project just because it also happens to be a terribly outdated browser. People are in fact allowed to criticize bad decisions without being obligated to fix other people's code for them.

I don't really see negativity. I see people (including me) not quite getting it and asking for clarification.

I like progress but I think this deserves all the criticism it gets. Okay, so it may be a cleaner way to markup richer controls on a page but it's essentially $('.some-class').controlPlugin({ opt: ... }); (I'm not saying that's how it works).

Not to mention you still have to deal with the css and js files that the control needs. Personally I would have liked to see a better way to manage assets that these plugins (and now controls) depend on. Like some kind of way to bundle everything. Then again this whole custom html tags thing wreaks of Asp.NET WebForms.

Edit: spelling

"wreaks of Asp.NET WebForms." Sorry, it's "reeks".

Thanks, that's the reeking I was referring to :)

From the article: " Web Components promise to open up a new realm of development by letting web developers write custom, reusable HTML tags. Think of them as JavaScript plugins without the need for additional code initialization or boilerplate markup/styling. "

So it sounds to me that is solves for use of jQuery datepicker plugins in a framework agnostic way. I for one would like to move away from using javascript, which depends on a framework, to create styled interactions on my web pages.

Me too, I would like to move away from needing to depend on things like jquery ui, but let's not forget how we got here. It might eventually get to live up to its promises, but until all browsers are at the same place in terms of compatibility anything can happen.

I honestly think WebForms had some great ideas, it was just marred by a catastrophically ugly and leaky implementation. It's easily the most painful platform I've ever worked with, but there are some things in it that were clever and worth revisiting.

I truly hate to pile on a "meta-comment", but this is already top-of-the-page and off-topic, so: I'm getting sick of comments about "why are there always so many negative comments?". There's nothing wrong with negative comments. Constructive criticism can be negative. This is the real-world, not high-self-esteem fairyland. Negative feedback/reactions are often the most useful kind.

But comments complaining about negativity are not helping anyone. Stop complaining, just use the upvote buttons to help determine what comments you like to see rise to the top.

Commenters are partially motivated by the upvotes they receive for astute observations, which is a good thing. But this also encourages critics to compete for that "score: 5, Insightful" by finding the first chink in the armor.

I also prefer to leave it up the voters to reward/discourage behavior, rather than content campaigning.

It is like doing a mini-qual every time a new story makes it above the fold. And it is great, because the page just sits there and I get to attack it with deep nuanced arguments about stuff it didn't think about, stupid web page.

So yes, the astute observations of which the negative ones are usually the easiest to come up with (humans are choice rankers first, creators a distant n-th) get us points, and those points give us dopamine.

Remember when EVERYONE could see the points? The problem was even worse. Really, the points should go away or be delayed.

Middlebrow dismissals are pretty much the worst. Comments complaining about them may be off-topic, but at least they have some positive purpose, unlike "I don't mean to be negative, but this is totally pointless since there is something else that's kinda similar."

Actually I would find it very informative to know if there is something similar. It puts things into perspective, says something about the novelty and gives a lead to a similar tool. I will then decide what's useful an what isn't.

The problem is, there isn't anything else kinda similar - Web Components will enable things that are impossible for libs like jQuery Mobile and jQuery UI to do presenting (with any degree of sanity). The Web Component APIs will also allow us to optimize the code paths most important to component development, again, something that will never happen for random UI framework X, Y, or Z.

One concern of mine is there are so many comments about "I'm sick of comments about 'why are there so many negative comments?'" In my view, we should be very careful not to criticize people who criticize people for leaving negative comments, as non-negative comments about leaving negative comments are crucial, as are negative comments about not leaving non-negative comments.

This is the single best comment I have ever read anywhere, ever.

>Why are there always so many negative comments?

Here's what happens to me, and I'll bet it happens to other commenters too: I read a post, and when I come to a point that seems problematic, I scan the rest of the post to see if it is addressed, then come to the comments to see if it's addressed, and if it's not, I post a comment about it.

Since no post is going to be perfect, this algorithm leads to a lot of negative comments. But they do tend to be constructive.

In addition to what others have said, I think software engineering tends to attract people prone to criticize imperfect works.

(1) I was on a bus in Manhattan a few years ago, commenting to a friend that at least 10% of software engineers must show significant symptoms of OCD. Some random woman said "It's much higher. I'm a psychologist. 10% of the general population shows OCD symptoms. The incidence much is higher in software engineers." Terrible citation, but...

(2) All engineering fields are largely about quickly finding and identifying the biggest flaw in some work. If you're positively rewarded for this behavior 50+ hours per week, it's tough to unlearn this behavior outside of the office.

Edit: changed to describe engineers rather than engineering.

For those who are wondering why this even exists, it is part of what is being called Web Components. Currently we use libraries and semi-hacky techniques to handle templating and creating private scopes for javascript. Some of the many things web components will let us do is have a true private scope for a component, have built in browser-supported templating, and allow us to separate presentation details from data. Separation of concerns ftw!

The value, to me, is that I can create true modules with html, css, and js that are scoped to ONLY inside the <x-whatever> tag I design (finally my css won't step on other css and I won't have to use unnecessary selectors to ensure that), and it will all be handled by the browser; no libraries needed (if web components becomes standardized of course).

For now, google and mozilla are creating polyfills to add this functionality because they want people to get onboard with the web component thing so that it will drive adoption and a consensus on how it should work in the final spec. I definitely recommend doing some research on the pieces and how they fit together because they are, at the least, intriguing and possibly the somewhat distant future of web application development.

http://www.polymer-project.org/faq.html

http://www.w3.org/TR/2013/WD-components-intro-20130606/

http://www.html5rocks.com/en/tutorials/webcomponents/shadowd...

http://www.html5rocks.com/en/tutorials/webcomponents/templat...

Great explanation of why this is exciting. Separation of js/css/html is great for the top down structure of a project, but a major pain from the bottom up. I can see myself making heavy use of web components to fix that.

Also it will be interesting to see how this shakes up the templating/data binding framework ecosystem.

One main benefit I can see from Web Components is that it allows you to front-load the implementation code for common components to the browser, which can hypothetically be far better for performance than including custom, non-standard javascript libraries on every website you visit. Since browsers are either bundled with mobile OSs (or they are a big, one-time download), users don't have to deal with the performance cost of rendering Your Custom Component Script for every website they visit. Conceivably we can move towards a mobile web that is highly interactive with very little payload cost in terms of loaded javascript and CSS.

That said, the obvious downside is how customizable and cross-browser these components will eventually be. As your components get more complicated, adding more html attributes to customize your element becomes prohibitively harder. I'm interested to see how they tackle this problem.

This is exactly what I believed web/html should have. I know how to simulate this (re: other comments), this is better imho.

Thank you Mozilla.

BTW, this time next year you will all be use this in Chrome and bitch how IE is not following trends or something :)

no, what web/html should be is xml and xslt

> Thank you Mozilla.

Don't forget Google either. The Web Components spec [1] was created by Googlers (along with contributions from lots of other people, of course).

[1]: http://www.w3.org/TR/2013/WD-components-intro-20130606/

My XML kung-fu is weak... is there a reason that nobody uses a second namespace/schema for this kind of thing (well, other than ASP.Net web forms and we all loved those)? I mean, XML has a painful list of features created to allow for extensibility, seems funny that we don't use them.

Because everyone else's kung-fu is weaker and they don't grok xmlns's. The HTML5 WG is anti xml namespaces- too confusing.

Really? I picked up xmlns when trying to figure out Microsoft's .NET1.1 XML serializer. In addition to your object's schema, it imports a few extra namespaces for the schema definition language (xsd) and schema instance (xsi) features... in particular you need a schema instance attribute "xsi:type" to resolve type names for polymorphic things.

Used like that, it feels just like importing a library in a programming language - I have a reference up top on the root element saying "this schema has this namespace and this prefix" and then I have attributes and tags with that prefix peppered through my document in addition to my own object schema tags and attributes. I can see how a lot of xmlns features could be really opaque (I don't understand any of them) but in this use case it was pretty straightforward.

Yeah, isn't this what "the future" was going to look like back when xhtml was a thing? I guess there were some missing building blocks on the dom/scripting side, but what's the syntax story.

edit: found a clue here, about abandonment of xhtml2 etc: http://tantek.com/2010/302/b1/xhtml-dead-long-live-xml-valid...

"We" don't use these XML features because "we" (in the general sense) aren't using XML.

I actually like this part of WebForms :(

The event model, no, but the templating and compositing absolutely.

One of the more recent discussions on Brick here:

https://news.ycombinator.com/item?id=6223313

I am sure I have seen this before on HN, but I thought there was a good amount of criticism regarding Angular.js and making customized HTML tags. I am sure it is not a new invention in Brick, but is this so different? (I do not know what I am talking about; please feel free to correct if I am wrong).

Negativity aside, thanks to Mozilla for more cool code. You guys support stuff all over the place web-wise, and whether or not I use it, I appreciate the hell out of your efforts.

I think I get the overall idea, but why are we encouraged to write <x-slider> instead of <input type="range">? I know that most of JS ninjas go bezerk at the mere mention of progressive enhancement these days, but in this case it seems the most sensible thing to do, regardless of ideological affiliation. We already have a standard element that is supposed to render a slider, why not just use it and add things to it?

It's like ASP.NET's template processor is coming to the rest of the world.

Web Component is at the same time a bless and a curse for the web. On the blessing way, it will finally allow to build some concise tags without waiting proper standardisation and implementation by the browsers (with various level of success). On the curse side, it's the false promise that those components will be reusable. They are not. Nothing prevent clashes in the names, so you cannot blindly import two different component libraries and use them. There is neither extension points to extend or augment existing component.

Again we are re-inventing the wheel (xml) with some quirks. It looks like people never tried to fix the root cause of the VHS vs BetaMax battle .

I don't want to sound negative, but how is that any better than using jQuery UI and similar tools? In other words, what are the advantages of web components over traditional JS+HTML+CSS?

1) Declarative 2) Someone could _finally_ implement something like <grid> to be used instead of hacky <div>s or old-school <table>s to get a proper grid layout _quickly_ as it should be. Something that you get in WPF/Silverlight for free.

Encapsulation: the HTML, JS and CSS that comprise a web component are encapsulated as and within said component.

See also Google Polymer and its <polymer-element> "sugar" for building web components:

http://www.polymer-project.org/polymer.html

We for starters, this entire component package is lighter than some single jQuery UI plugins. It is declarative, something jQuery UI simply cannot do as it is designed. Web Components APIs are landing in browsers, so these code paths will be highly optimized as time goes on - jQuery's plugin code path will not be.

What's so new and great about it? I built something pretty much exactly like that way back in 2002 (when jQuery et al. weren't invented yet). Heck, I even got a patent for that (my bad; I now firmly believe that software patents are evil).

2004: http://www.patentgenius.com/patent/7458019.html ... 2013: http://mozilla.github.io/brick/

Is that progress?

It's interesting that you link to your patent but not to the "something pretty much exactly like that". If I am correct in assuming that what you built is a) obsolete now and/or b) proprietary, then the answer to your (rhetorical?) question is: yes, a highly respected open-source organization working on a modern and freely available project (even if it is nearly identical to one of yours from a decade ago) is progress.

The concrete implementation of it is contained as open source (not free, but as in "you can look at the source and change it") in a commercial offering, which was the 'normal' back in these days. Yes, it is great that it is made freely available and is backed by an open source organization, no doubt. However, given the amount of time in-between, on a fundamental technical level though it seems slow progress at best.

I guess my rebuttal is very schoolyard...so what? I don't really understand the goal of meta-discussions about the speed of progress or lack thereof. This project seems potentially useful in the here and now, which is where we are living.

I didn't mean to imply judgment of the licensing of your software - I think everyone should license whatever they make however they wish - a fully free version of anything is simply more useful to me personally, as someone who isn't a deep-pocketed business, and who enjoys reading code.

I'm in full agreement with you and yes, it's a silly discussion. I guess I just wanted to point out that the idea behind it isn't all that original and actually pretty old, it's just that it's now made widely accessible, which IS great. Maybe I should've just kept the whole thing to myself ;)

I think that is the definition of progress. Something first exists as an idea no one could use, and now it exists as a practical and useful implementation.

How is that not progress?

It is a progress, but not an advancing-the-state-of-the-art progress. Often "progress" is used to mean an advancing-the-state-of-the-art kind in some context. I believe this is the case here.

So you are just disagreeing on the definition.

A pleasant scenario for web components would be replacing the social media button's script/html injection with a link to the component and a <x-tweet-this>.

I want this now: <fluid-grid>...</fluid-grid>.

how about: <bootstrap-website linkedin-id=XXXX twitter-id=XXXX facebook-id=XXXX github-id=XXXX> </bootstrap-website>

Take a look at <polymer-grid> and <polymer-flex-layout>

https://github.com/Polymer/polymer-elements/tree/stable/poly...

seems doable :)

I'm not sure I get it.. There are already several two way DOM <-> data binding frameworks, e.g. Angular, knockout, ember. What does this do differently? It reads more as a presentation layer thing, but presumably you could do this with one of the above frameworks right now...

Perhaps a walk though of how to build a complete brick would be useful in demonstrating to differences and uses. Does anyone know of one - I couldn't find such a thing in the docs?

Hey there! Brick developer here. You can use Brick along side another framework. Because the interface for Brick components is the DOM, they work out-of-the-box with template systems in existing frameworks. We're not trying to replace or re-invent DOM-data binding, in fact, explicitly not doing that.

I remember early in my HTML writing experience searching high and low for a way to define new elements with behavior defined by CSS and JS, and coming up dry. I could never articulate why I wanted it so badly, but it just felt like the way things should be done.

It's incredible to see that it's finally becoming a reality, and other people are starting to flesh out the justification I never managed.

Interesting. How does one begin to integrate this type of markup with something like Ember or Angular?

That was the first thing I thought about (and came to the HN comments for). I like this conceptually, just want to know how I can meld it with my Angular Directives. They would seem to overlap no?

See my post [1] on SO on "Polymer elements (e.g. web components) vs. Angular directives". Essentially, Angular directives allow you to create new elements in HTML. That's done through JavaScript because the proper API primitives haven't existed in the web platform to create components. Now they're getting built in via Custom Elements, Shadow DOM, etc. Frameworks also win because they can leverage these new APIs.

[1]: http://stackoverflow.com/questions/18089075/what-is-the-diff...

Very nice. This works on my iphone4s. My question is how heavy this is compared to Bootstrap. It looks a little larger: Brick 134K vs. 88K for Bootstrap 2.3.2

This feels like JSF Tags all over again.

What about the "Don't re-invent the wheel" thingy ?

The funny thing about that analogy to me has always been that throughout history we have constantly improved the wheel through reinvention. Software wheel-reinvention is similarly reasonable.

The old wagon wheels don't work so well with the new cars.

I think you are referring to "re-make". Re-invent is not re-make. You can re-make, but you shouldn't re-invent.

Microsoft had this back in IE 5.5. They were called "behaviors" and you could basically bundle HTML, CSS and JS into one file with a .htc file extension and then use it as a new tag in your document.

http://msdn.microsoft.com/en-us/library/ff626304(v=vs.85).as...

http://msdn.microsoft.com/en-us/magazine/cc301531.aspx

Microsoft even ported DirectX to dHTML in IE4~IE6

Reply on news.ycombinator.com