8 ms·
Material design with Polymer
- regularfry 12y agoNot encouraging: http://imgur.com/riycCA1 http://imgur.com/riycCA1
- rtkwe 12y agoAlso the elements themselves don't render properly in FF24 (work mandated): http://imgur.com/AyactvC http://imgur.com/AyactvC
- lomnakkus 12y agoDoesn't work properly in FF30 either.
- eob 12y agoWebComponent support seems to be super spotty across browsers. But that being said, it's an incredibly exciting extension to HTML so really cool that Google's invested the time to flesh out what a WC-based widget library might look like.
- timdorr 12y agoWhat OS/Browser combo?
- evilduck 12y agoI'm getting that and other various quirks with 10.9.3 running Safari 7.0.4, FF 29.0.1 and FF 30.0. Chrome 35 works though.
- r00fus 12y agoOSX 10.9.2/Safari 7.0.3 reproduces this as well.
- regularfry 12y agoChromium Version 34.0.1847.137 Debian 7.5 (268882)
- riffraff 12y agoon first load, chrome 35, snow leopard (yeah I should update) also broen https://www.dropbox.com/s/qiqbrs0d55qgf6e/Screenshot%202014-06-26%2000.01.33.png https://www.dropbox.com/s/qiqbrs0d55qgf6e/Screenshot%202014-...
- kyriakos 12y agoLooks good but runs extremely slow on my phone (LG G2)
- programminggeek 12y agoClearly you need a more modern phone.
- malandrew 12y agoClearly software should be written more efficiently so that his phone is still capable. The LG G2 is a two year old smartphone. It's pretty unacceptable that something doesn't run well on it, so long as the underlying software (operating system and browsers) are up to date.
- 0day 12y agoI suppose the comment before yours is sarcastic, but yeah you are talking about the real issue here.
- k__ 12y agoI liked the idea of polymer much more than the stuff react and angular did. But the boilerplate of this system is just too much for me.
- Kiro 12y agoWhat is Polymer? I thought it was a polyfill for Web Components but this seems like a UI library or something.
- cletusw 12y agoIt's both. This is a slightly outdated image, but it describes it pretty well: http://4.bp.blogspot.com/-rPbEdmEpHWA/UeW4Xqmg0oI/AAAAAAAAAx0/33O2gWoYMgI/s1600/polymer-architecture.jpg http://4.bp.blogspot.com/-rPbEdmEpHWA/UeW4Xqmg0oI/AAAAAAAAAx... Basically, there's a layer of polyfills called the Platform that will disappear as browsers implement key web platform features natively. On top of that is the main Polymer library, which is a small sugaring library that makes using the individual Platform polyfills together a lot easier. On top of that are a couple different sets of both UI and non-UI web components built using Polymer, namely core-elements and paper-elements.
- wildpeaks 12y agoI like that they keep developing Polymer, but the IE10+ requirement makes it a hard sell for customer projects :/
- ryanSrich 12y agoConsidering that this is mostly aimed at creating mobile sites and apps I don't see that requirement as a deterrent.
- sahat 12y agoWhere does Polymer stand in relation to React.js from Facebook?
- drcode 12y agoTrying to figure this out, too.
- grayrest 12y agoThey're only similar in that they're both for building component based DOM UI. Polymer is tied into the WebComponents standardization effort (also driven by google-related people). Pieces of the DOM are managed by relatively small, contained objects that maintain their own internal state and keep the DOM in sync. It achieves component state synchronization via data binding like Angular or Ember and some sort of KVO mechanism (eventually Object.observe if they're not using that already, I haven't looked at their code in a couple months). When you write code for React, on the other hand, you basically pretend the DOM is stateless and write your code as if you're writing server side templating code and rendering the entire page from scratch. The framework takes the data structure that the render process builds and efficiently forces the DOM to match what was rendered. At least that's the central concept. There are plenty of caveats. If anybody has more specific questions, I'm happy to answer them.
- drcode 12y agoIs it feasible to use react.js and polymer together in an app? I mean, is it possible to do this without sacrificing the benefits of reactjs by simply writing state-ish code in reactjs? (At first blush, I can't think of a sensible way of doing this...)
- malandrew 12y agoI was kind of confused as to the organization of the repos and how this is all brought together. Is there a document somewhere explaining the relationship (hierarchy) of all the repos and what role each plays in the larger polymer material project? Specifically, where is the code that does the layout for this? I want to see how they are doing the positioning of elements in space. Is it all CSS classes or do they do positioning with javascript?
- zghst 12y agoOn one hand, I worry that Google is monopolizing the future of the web, but on another, I'm glad because they are effective at producing the features that us developers want. I have mixed feelings about Polymer, currently its high browser requirements make it too radical to use at work (IE, Firefox & Safari be broken yo), but forward enough to get me experimenting with it on my personal projects. At the workplace, I'll continue to stick to React.
- malandrew 12y agoI love the look and feel that went into the design of Material here, but with respect to web components, we should be worried that Google is monopolizing the future of the web. See my comment below: https://news.ycombinator.com/item?id=7947119 https://news.ycombinator.com/item?id=7947119 It bugs me that Polymer is being marketed as "polyfills", since the term polyfill generally tends to connote something that fills in for an already agreed upon w3c standard that will appear in all user agents eventually. Whereas web components and shadow dom is still very much in the proposal/experimentation stage and has a ways to go before reaching standardization. There are still some disagreements to be resolved by all those that contribute code to the major user agents. Calling polymer a polyfills library is misleading and an abuse of the intent of the term polyfill [0]. Also related: "Apple Removes Shadow DOM from Safari"[1][2] [0] http://remysharp.com/2010/10/08/what-is-a-polyfill/ http://remysharp.com/2010/10/08/what-is-a-polyfill/ [1] http://trac.webkit.org/changeset/164131 http://trac.webkit.org/changeset/164131 [2] https://news.ycombinator.com/item?id=7243122 https://news.ycombinator.com/item?id=7243122
- SneakerXZ 12y agoSo Polymer is like Bootstrap with Angular? How is Polymer related to Angular or React?
- Inufu 12y agoAngular can use Polymer components.
- lebek 12y agoIn Polymer ajax is an element: https://github.com/PolymerLabs/polymer-ajax/blob/master/test/html/polymer-ajax.html https://github.com/PolymerLabs/polymer-ajax/blob/master/test...
- malandrew 12y agoWhat a strange strange choice. Instead of moving responsibilities to a imperfect but very flexible turing-complete language (javascript), they are trying to shoehorn everything into a markup language originally designed as an abstraction for documents (html). I liked a lot of what I saw in the project, but this "ajax as an element" makes me want to facepalm, or at least scratch my head and wonder "why?!?" Can someone from the polymer team elaborate the reasoning behind this?
- andybak 12y agoI'm sure I want to defend this particular implementation without looking at it more but 'declarative' is quite a nice programming style as long as you can easily override it with 'proper' code when you hit it's limits - see Django's models, forms, admin etc.
- malandrew 12y agoTotally agree with declarative code that can be overridden with "proper" code. However in this particular instance, the declarative API in HTML for getting a resource at a particular URI already exists in the form of the "href" property. I don't understand what AJAX here adds at all, since it's not congruous with the semantics of the term AJAX -> "Asynchronous Javascript and XML". There is no javascript there. There's no notion of "asynchronicity" in a declarative interface since async connotes flow control. And the XML (part) used to refer to the original data structure format that was retrieved, whereas most people these days use JSON and even this example uses JSON. It's not even clear from this example, what is done with the JSON data fetched here. It's not assigned to a variable or returned by a callback. The script below the element in fact uses globals to access the code, since that is basically what `document.querySelector` does. Putting stuff in the DOM is the equivalent of saving all your variables on the window object and then accessing them with `window.myDomElement`, but in a more verbose, indirect and non-performant way. var ajax = document.querySelector('polymer-ajax'); ajax.addEventListener("polymer-response", function(event) { assert.isTrue(event.detail.response.feed.entry.length > 0); done(); }); Furthermore, I noticed in some of the markup elements, the addition of a "url" property. How does "url" differ from "href", especially, when all the examples I saw had URIs pointing to *.html hypertext documents. Is "url" a new property that exists in a standard somewhere? If not, I was under the impression that non-standard HTML properties are supposed to be prefixed.
- sedachv 12y ago"Material design with Polymer" I thought the headline was about a materials design startup, not a UI library. Can you please add more unrelated jargon and nonsensical analogies from random fields to your documentation?
- pedrow 12y agoWhen they use an unqualified, lower-case 'material design' they are referring to the thing that Google announced at I/O yesterday, are they?
- crdblb 12y agoIt's very strange that when you click or touch down on a button, the shadow spreads out more, as though the button got further away from the underlying surface. It seems like any "press down" sort of action should, well, make it appear to move down, not up.
- malandrew 12y agoDespite all my comments disagreeing strongly with WebComponents and the direction of putting everything in the DOM, I will say that you all did an excellent job with the design aspects of designing for the Z-plane. That's solid stuff and everyone who reads this thread should definitely take the time to read through all the design guidelines for Material, because even if you don't use Material, those ideas are really valuable and can be explored in other frameworks like Famo.us, Ember.js, Velocity.js, React.js. The web is definitely moving in the direction where designing for the Z-plane and subtle animation affordances will matter, and this is great exploration of where things can go. For those whose experience, is mainly on the web, these are also good resources: Meaningful Transitions: http://www.ui-transitions.com/ http://www.ui-transitions.com/ Capptivate: http://capptivate.co/ http://capptivate.co/ The Z-Axis - Designing for the Future: http://alistapart.com/article/the-z-axis-designing-for-the-future http://alistapart.com/article/the-z-axis-designing-for-the-f... [disclaimer: I work at famo.us)