7 ms·
Mozilla Brick
- bdcravens 12y agoDesignmodo has their own UI framework, The Bricks: http://designmodo.com/the-bricks/ http://designmodo.com/the-bricks/ Seems a bit close for comfort
- deleted 12y ago[deleted]
- SmeelBe 12y agoYou're right.
- mrweasel 12y agoIt seems a little incomplete, or am I just missing the point?
- ngokevin 12y agoThe things that deters me about Brick are that there aren't very many components yet, they aren't very styled or pretty, and the site doesn't show me what the components look like on one page (I have to click through to a demo for each component). It's only been around for a year, though honestly with the support it has gotten, I'd need to see more before I'm able to imagine developers using it. Obviously, it's a beautiful concept. I like Ionic's, which is the most fully fleshed out set of UI components I've seen. Though it's not as modular as Brick, I'd rather have a complete monolithic set of components rather than sparse modular ones: http://ionicframework.com/docs/components/ http://ionicframework.com/docs/components/ The site does throw some errors, which leads me to believe this wasn't meant to be shared yet. Although, Brick has done the "HN launch" already in the past.
- spankalee 12y agoIonic's widgets aren't web components and aren't usable outside of Ionic/AngularJS. This means they're not recognized as custom elements by the browser (no future dev tools support). They leak DOM and CSS internals into the page. Worse, they require the host application to be Angular based. Brick components are encapsulated, both with shadow DOM and scoped CSS, and usable in any web page and with any or no framework. You can freely mix Brick, Polymer, Bosonic, or "raw" custom elements in a single page. edit: It looks like Mozilla is dropping X-Tag in favor of "vanilla" (what I called "raw") standard web components APIs. This would make Brick a collection of components, rather than a web component helper library like Polymer, and more akin the to Polymer project's Paper Elements.
- ngokevin 12y agoDefinitely, though when it comes to UI frameworks, many developers want a complete (and styled) solution, and usually stick to a cohesive framework. Brick is obviously more modular, but that's not enough yet. It still needs more components and perhaps themes in order to be looked up, but I recognize it's a new project. Hopefully, the exposure today gets it some contributors.
- csuwldcat 12y agoNot sure Brick is now "more modular" and "lighter", without X-Tag - in fact, it's quite the opposite. They've dramatically increased the weight of each component, and constantly repeat the same code over and over, much of which is derived from X-Tag's internal methods: Brick Flipbox: https://github.com/mozbrick/brick-flipbox/blob/master/src/brick-flipbox.js https://github.com/mozbrick/brick-flipbox/blob/master/src/br... vs X-Tag Flipbox: https://github.com/x-tag/flipbox/blob/master/src/flipbox.js https://github.com/x-tag/flipbox/blob/master/src/flipbox.js ----- Brick Deck: https://github.com/mozbrick/brick-deck/blob/master/src/deck.js https://github.com/mozbrick/brick-deck/blob/master/src/deck.... AND https://github.com/mozbrick/brick-deck/blob/master/src/card.js https://github.com/mozbrick/brick-deck/blob/master/src/card.... vs X-Tag Deck: https://github.com/x-tag/deck/blob/master/src/deck.js https://github.com/x-tag/deck/blob/master/src/deck.js ----- The above examples call into question the claim that the move was to increase modularity and decrease weight - clearly that isn't the case when you actually look at the code.
- yesimahuman 12y agoWe (Ionic) don't use web components because they aren't widely supported on mobile (yet) and the polyfills have pretty hefty perf impacts. When that changes we definitely will.
- general_failure 12y agoThe demos seems very unpolished but I hope they keep working on it. Does anyone know what framework is used to 'generate' such doc websites? http://brick.mozilla.io/v2.0/docs http://brick.mozilla.io/v2.0/docs
- damian2000 12y agoThis page is throwing an exception for me... http://brick.readme.io/v1.0/blog/welcome-to-mozilla-brick http://brick.readme.io/v1.0/blog/welcome-to-mozilla-brick looks like the link should be v2.0 instead of v1.0
- gkoberger 12y agoLink fixed!
- dylz 12y agohttps://readme.io/ https://readme.io/ <meta name="description" content="Mozilla Brick was created using readme.io"> edit: damn, "Normally $99/month | $79/mo" for documentation
- gkoberger 12y agoIt's currently only $39/mo. There's also a free tier that does the three column layout, which is targeted at projects and single developers (rather than actual startups or companies).
- wudf 12y agoIt's so bare, I love it. Just add more components and we might have something usable for front end developers.
- tkubacki 12y agoFirefox still does not seem to support fully web components (html templates, custom elements, shadowdom see http://caniuse.com/#search=shadowdom http://caniuse.com/#search=shadowdom ) I hope they will get there fast - this will put pressure on dinosaurs like IE or Safari
- pjmlp 12y agoI hope the apps market keeps recovering. This will put pressure on dinosaurs like browsers pretending to be an OS.
- tkubacki 12y agoyea because it's much better to have closed, restricted app markets (like Apple, Google, Microsoft ones) than web standards.
- CmonDev 12y agoIt's a choice between restricted standards that hinder technology innovation and restricted markets that hinder business. As a technologist I hope that de-facto monopolic legacy poorly-designed technologies (JS and HTML) will give way to new better technologies. I am very happy that at least mobile still gives developers many options - mostly without lame transpilation.
- tkubacki 12y agoRestricted App Store rules eg. disallowing external web browsers or interpreters hinder technology much more than web standards. Talk is cheap - would love to see some of yours "not lame" piece of work.
- CmonDev 12y agoE.g. iOS lets me use: Objective C, Swift, C#, F#, Java, Scala. All compiling to lower-level code that is either native to platform or native to the language. Web lets me use: only JavaScript (that is written manually or transpiled). Yes I will have to pay extra for some solutions, but I don't mind doing this as opposed to using language that I hate. http://en.wikipedia.org/wiki/Ad_hominem http://en.wikipedia.org/wiki/Ad_hominem
- moondowner 12y agoThere are some invalid links on the page: - 'Fork me on Github' points to https://github.com/gkoberger/test https://github.com/gkoberger/test instead of https://github.com/mozbrick/brick https://github.com/mozbrick/brick - The Github link at the 'Keep Up To Date' section points to http://twitter.com/mozbrick http://twitter.com/mozbrick Update: Nice to see that the links are fixed.
- giancarlostoro 12y agoI wonder when we'll have projects like this targeting all browsers, and specialized functionalities for projects like Node-Webkit, maybe a fork of Bootstrap tailored towards total customization of Node-Webkit, or even a PureCSS fork as well. After using applications like Atraci, SickBeard, and others I've really come to enjoy desktop applications with web based UI's more. On another note, as someone else mentioned, there's too many package managers, a package manager that detects when you try to use a package manager you don't have installed, and installs it for you would be a neat project to have, although talk about dependency hell.
- drinchev 12y agoYeah, I was looking for browser support in the documentation, but couldn't find any.
- guidopallemans 12y agoif you include the platform.js file, everything should be supported in the last versions of every browser
- drinchev 12y agoHmm. Something more specific? I assume evergreen browser support means - Chrome, Firefox, Safari, Opera, IE, but which versions. What about mobile OS ?
- quarterto 12y agoThe whole point of "evergreen browsers" is that the version number doesn't matter.
- drinchev 12y agoI totally agree for Chrome, Safari ..., but IE isn't one of those. At least I think it's a little bit disturbing if I can't find browser support list on any new frontend framework that pops out, even if Mozilla is behind it.
- jiyinyiyong 12y agoSince Pete Hunt said Web Components might be bad idea, I become less enthusiastic about those things. But they look really powerful.
- CmonDev 12y agoSome dude said they are bad?
- suyash 12y agoI like how the documentation and example area laid out side by side, anyone cares to describe how they accomplished that? Thanks aot.
- aeiopossum 12y agoYeah, looks like it's modeled after the Stripe API reference docs: https://stripe.com/docs/api https://stripe.com/docs/api The doc generator used for this, readme.io, generates this three column layout automatically, so no fancy coding required. The three column layout is nice for being able to scan back and forth between code and instruction. I like how it blends the purpose of the docs with the implementation.
- moondowner 12y agoThey are using https://readme.io/ https://readme.io/
- stellar2014 12y agoAnother stripe inspired documentation made easy @ http://ricostacruz.com/flatdoc/ http://ricostacruz.com/flatdoc/
- qewrffewqwfqew 12y agowth is going on at mozilla? There seems to be a lot of excitement to create stuff, without much attention to whether it's needed .. or where the lifecycle goes beyond creation. http://www.ianbicking.org/blog/2014/09/professional-transitions.html http://www.ianbicking.org/blog/2014/09/professional-transiti...
- hmsimha 12y agoIt looks like their following the Google model, except without needlessly pulling projects that don't gain enough traction yet serve a niche market.
- qewrffewqwfqew 12y agohaha - thanks for the laugh
- leonsp 12y agoFor an example of a pulled Mozilla project, see Skywriter/Bespin: https://mozillalabs.com/en-US/skywriter/ https://mozillalabs.com/en-US/skywriter/
- kbrosnan 12y agoWhich lives on as part of Cloud 9. https://github.com/ajaxorg/cloud9 https://github.com/ajaxorg/cloud9
- jeffreyrogers 12y agoThat's just good business. Google is a company that's run for profit and is ultimately answerable to its shareholders. Google's job isn't to perform a social good, it's to continue making money. If it has areas of its business that are net losers (with no hope of eventually performing) then it has an obligation to do something about this. For a good example of a business that divested its underperforming businesses to the great benefit of its shareholders, look at General Dynamics beginning around 1994.
- libria 12y ago
- itry 12y agoCan I use this client-side? From what I read on the page this seems to be only geared towards a certain server-side-setup with node.js, brewer and stuff.
- moondowner 12y agoYes you can. If you check out http://brick.mozilla.io/v2.0/docs/getting-started http://brick.mozilla.io/v2.0/docs/getting-started - Node and bower are used in order to install the library locally. You can also download the project from Github (https://github.com/mozbrick/brick https://github.com/mozbrick/brick) and just copy-paste the needed files in your project. You can search for them in the 'dist' sub-directory.
- itry 12y agoThanks. That might work. But it feels a bit unaccessible. Looking through the code also gives me a strange feeling. Too many dependencies. They should just give you a .js that enables certain functionality and thats it. Like "include brick-flipbox.js and you have flipbox functionality". Plus most of the demos do not wort (tried in chromium). I don't believe in this thing.
- niutech 12y agoSure, these are custom elements, which are just HTML/JS/CSS files. What's more, they are interchangeable with other ones found at http://customelements.io/ http://customelements.io/
- antocv 12y agoCan we get a package manager for package managers? There is so many already, its hard to keep track what names come from what repositories of what package managers. It used to be so simple, yourDistroPackageManager install whatever, now there is x2000 versions of packageManager.
- scrollaway 12y agoReposting an old comment of mine on the subject:: The path to a standard package manager starts with a standardized protocol for package management. A service protocol that is able to serve a repository of packages over http and ftp. A client protocol that can keep track of installed packages and can index, search and look for updates on installed packages. Split package management into layers and only try to standardize bit by bit. People will never agree on deb vs rpm. People will never agree on using json vs python vs Makefile vs ruby vs shell vs whatever else - they'll always want their most familiar language for their package manager, which in domain-specific packaging means the domain-specific language. So don't try to standardize those. Standardize the rest. Give us the protocol that can power all of this and increase interoperability. Separate the repository layer, the package format (deb, rpm), the packagefile format (setup.py, Makefile, PKGBUILD) and the package manager (interface: yum, apt-get, aptitude, pip, npm) from the rest of the protocol. Make this potentially usable for things such as browser extension repositories, android package management, vim bundles and what not. Someone please work on this. I'd do it but it just occured to me I have to clean my oven.
- k_ 12y agoWell, since it's an old comment your oven should be clean by now :)
- grosskur 12y agoI'm working on something along these lines: https://www.packagelab.com/ https://www.packagelab.com/ The idea is to have a common UI and REST API for building packages and managing repositories across packaging toolchains. Right now it supports rpm+yum and deb+apt. Packages are built in isolated Linux containers using Heroku's buildpack interface. (Would love feedback from anyone who's interested in beta testing.) Also, have you seen the Omaha protocol? https://code.google.com/p/omaha/wiki/ServerProtocol https://code.google.com/p/omaha/wiki/ServerProtocol It's used by a lot software, including Chrome and ChromeOS. Recently, CoreOS has built infrastructure with it and they offer a SaaS product for rolling updates. I think they're planning on using it to update Docker containers, too: https://coreos.com/products/coreupdate/ https://coreos.com/products/coreupdate/
- aaronbrethorst 12y agoThe first two demos aren't styled, and don't work in Safari 8, and the third one says "coming soon." C'mon, guys...I understand I'm in the minority for using Safari, but you really need to think about the demo'ability of what you build.
- bshimmin 12y agoI looked at this in Chrome and honestly couldn't figure out if the examples were actually working. Also, Stylus seems a curious choice (not because it's bad, just that it's not exactly the frontrunner in the CSS preprocessor race). I'm not even sure why a CSS preprocessor is even necessary, to be honest.
- Yuioup 12y ago"Brick" has a negative connotation in the tech world.
- neurobro 12y agoMy first impression from the title was some kind of Firefox phone debacle.
- rsl7 12y agoexcept for LEGO
- cryowaffle 12y agoYes LEGO can be used with technology it's not a thing typically associated with "tech".
- rsl7 12y agomost tech people I know are aware of or have used LEGO bricks, and 'brick' as a negative tech term is recent afaik.
- jeffreyrogers 12y agoAnd "Pad" has a negative connotation in the rest of the world... Didn't stop Apple though.
- tonyplee 12y agoI got the same impression of Mozilla locks up base on the title. :-)
- maga 12y agoHm... am I correct that the brick-action component is actually their way of setting up a listener, like Backbone's obj.listenTo(anotherObj, 'event', callback)? Well, in that case it's one hell of an overhead, imagine creating an actual DOM element for every single event listener.
- dkyc 12y agoFor me personally, the challenge UI frameworks like Bootstrap solve is the pure UI. That is, which borders, shadows and spacings to use and such stuff. A thin layer on top of the actual APIs like Mozilla Brick does not seem too useful to me - why bother adding a third party component if it merely wraps the functionality of HTML/CSS? (Although I must admit I haven't used Brick yet.)
- nanoscopic 12y agoI clicked through all of the examples, and I would never use any of these components. They are very plain, they don't provide much functionality, and the functionality they provide is lackluster ( unappealing ). As others here have stated, I also couldn't tell if some of the examples are even working or not; they are that bad. If you are looking for a fine set of interworking components that provide a refined look and feel along with nice examples of the options provided; then you'll probably want to look at one of the other 30 or so UI widget sets.
- api 12y agoGood. Its not just me. I almost wonder if this was a draft site never intended for release and someone mistakenly or prematurely posted it.
- potch 12y agoHey, Brick project member here. Completely agreed, the styling for these components is not where it needs to be. We're a small team that works in the open, and like to ship.
- wpietri 12y agoI'm a big fan of "ship early, ship often", but you have to set expectations properly. If something is not ready for prime time, you should signal that. Call it v 0.7, say it's a beta, label it as a "labs" product. Say up front where the known weaknesses are, and say what audience you want. I also strongly recommend working with a small, carefully selected audience to begin with. Typically only a small percentage of your eventual audience will put up with the rough edges of a work in progress. Getting the average audience member involved early on is frustrating for both sides. You get a lot of feedback on things you a) already know about, and b) are intentionally avoiding for now. And they waste a bunch of time on stuff that wasn't intended for them.
- arenaninja 12y agoHonestly, I thought it was obvious that the entire thing is probably alpha or thereabout
- cdnsteve 12y agoSo web components. Haven't used them yet. What's the selling point on this vs Google's Polymer?
- jo_ 12y agoI've shuffled through all of them and, near as I can tell, there really isn't one. They're very early in development, not aesthetically pleasing, and offer limited functionality.
- spankalee 12y agoThey're not directly comparable. One is a collection of components, the other is a helper library. Polymer is a library that helps you write web components with some sugar around data-binding, templating, attribute handling, mutation observers and such. Brick is a set of concrete components written against the raw web component APIs.
- ble 12y agoBrick is for reusable UI elements; unlike Polymer, it doesn't use custom elements to solve non-UI problems. Brick uses vanilla syntax for the creation of custom elements, where "vanilla" means "as defined in the relevant standards." Brick uses the platform.js polyfill from the polymer project. From http://brick.readme.io/v2.0/blog/welcome-to-mozilla-brick http://brick.readme.io/v2.0/blog/welcome-to-mozilla-brick We have very specific goals for Brick- to make building webapp interfaces easier. There are other projects that use the same technologies (like Google's excellent Polymer) that provide a more complete web application development solution. The motto on the Brick project is "strong opinions, tightly scoped"- meaning we don't intend to solve the problems of code stucture, module loading, data binding, or really any other problem other than webapp interfaces. ... the rising popularity of Google's Polymer and its syntax for describing Custom Elements grew, and when users came to contribute to Brick and x-tag, they found themselves facing an unfamiliar syntax and an underlying library that was frequently not well documented. The decision was made that if users encounter Custom Element registration syntax, it should be the standards-based syntax. Brick components are now written in a 'vanilla' style, using the standards-based APIs directly.
- BinaryIdiot 12y agoI don't see a reference to Mozilla's X-Tags. X-Tags already links to listings of web components so why is this so different than that listing but also similar?
- spankalee 12y agoIt looks like Mozilla is moving away from X-Tags in favor of directly using the web component APIs.
- csuwldcat 12y agoX-Tag author here. A big part of their switch seems to be a result of interpersonal issues with the X-Tag creators. After I left on less-than-good-terms with a handful of folks at Mozilla, they decided to ditch a library that makes components small, modular, and DRY, for what appears to be spite. The new Brick code base is over 2x heavier (despite being billed as a "lightening" move), each component is 40-60% larger (with a ton of repetition and use of X-Tag code), and the browser compat range has been reduced greatly. They never reached out to the X-Tag team before posting this - it contains glaring inaccuracies and negative sentiment toward X-Tag. I'm deeply disappointed by their poor open source behavior, and general lack of courtesy.
- csuwldcat 12y agoIt's not a lot different, in fact, they've just remade our X-Tag components into heavier, less DRY, less modular copies that range from 40-60% larger than their equivalent X-Tag originals, while at the same time managing to reduce browser compat and feature coverage (for ex: Brick Deck lacks the transition support X-Tag's provides, and it's actually larger!) Compare it for yourself: Brick Flipbox: https://github.com/mozbrick/brick-flipbox/blob/master/src/br.. https://github.com/mozbrick/brick-flipbox/blob/master/src/br.... vs X-Tag Flipbox: https://github.com/x-tag/flipbox/blob/master/src/flipbox.js https://github.com/x-tag/flipbox/blob/master/src/flipbox.js ----- Brick Deck: https://github.com/mozbrick/brick-deck/blob/master/src/deck... https://github.com/mozbrick/brick-deck/blob/master/src/deck..... AND https://github.com/mozbrick/brick-deck/blob/master/src/card... https://github.com/mozbrick/brick-deck/blob/master/src/card..... vs X-Tag Deck: https://github.com/x-tag/deck/blob/master/src/deck.js https://github.com/x-tag/deck/blob/master/src/deck.js
- serve_yay 12y agoI tried to look at the "tab bar" on my iPad, it just looked like a regular unstyled document, didn't seem to respond to any taps. Guess I just don't get it!
- potch 12y agoI will interpret this as a bug report. What browser are you testing in?
- deleted 12y ago[deleted]