

Material design with Polymer - miralabs
http://www.polymer-project.org/docs/elements/material.html

======
sedachv
"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
When they use an unqualified, lower-case 'material design' they are referring
to the thing that Google announced at I/O yesterday, are they?

------
malandrew
Despite 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-f...](http://alistapart.com/article/the-z-axis-designing-for-the-future)

[disclaimer: I work at famo.us)

------
regularfry
Not encouraging: [http://imgur.com/riycCA1](http://imgur.com/riycCA1)

~~~
timdorr
What OS/Browser combo?

~~~
evilduck
I'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.

------
malandrew
I 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?

------
crdblb
It'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.

------
lebek
In Polymer ajax is an element: [https://github.com/PolymerLabs/polymer-
ajax/blob/master/test...](https://github.com/PolymerLabs/polymer-
ajax/blob/master/test/html/polymer-ajax.html)

~~~
malandrew
What 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
I'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
Totally 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.

------
zghst
On 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
I 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)

------
Kiro
What is Polymer? I thought it was a polyfill for Web Components but this seems
like a UI library or something.

~~~
cletusw
It's both. This is a slightly outdated image, but it describes it pretty well:
[http://4.bp.blogspot.com/-rPbEdmEpHWA/UeW4Xqmg0oI/AAAAAAAAAx...](http://4.bp.blogspot.com/-rPbEdmEpHWA/UeW4Xqmg0oI/AAAAAAAAAx0/33O2gWoYMgI/s1600/polymer-
architecture.jpg)

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.

------
kyriakos
Looks good but runs extremely slow on my phone (LG G2)

~~~
programminggeek
Clearly you need a more modern phone.

~~~
malandrew
Clearly 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
I suppose the comment before yours is sarcastic, but yeah you are talking
about the real issue here.

------
wildpeaks
I like that they keep developing Polymer, but the IE10+ requirement makes it a
hard sell for customer projects :/

~~~
ryanSrich
Considering that this is mostly aimed at creating mobile sites and apps I
don't see that requirement as a deterrent.

------
SneakerXZ
So Polymer is like Bootstrap with Angular? How is Polymer related to Angular
or React?

~~~
Inufu
Angular can use Polymer components.

------
sahat
Where does Polymer stand in relation to React.js from Facebook?

~~~
grayrest
They'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
Is 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...)

~~~
grayrest
Haven't tried it but you can integrate React with pretty much anything.
Looking at the Polymer lifecycle methods[1], I'd start by trying a
`React.renderComponent` in Polymer's `domReady` callback for an element and
then setState/setProps/forceUpdate in the `attributeChanged` callback.

[1] [http://www.polymer-
project.org/docs/polymer/polymer.html#lif...](http://www.polymer-
project.org/docs/polymer/polymer.html#lifecyclemethods)

That said, I don't expect it to be common since you'd basically be building a
React component with a Polymer shim and getting almost no leverage out of
Polymer. I suppose you could write some code to parse out the html template
and turn it into React.DOM equivalents but that seems like a lot of effort.

All React integrations I've seen are the result of introducing React into a
legacy codebase or they're using React on a component that's rendering a very
large DOM subtree and taking advantage of React's O(N_view) instead of
O(N_model) scaling and batched updates for perf wins over current KVO
techniques.

~~~
drcode
Yeah, what I'd want is the polymer "look and feel" and the react update
model... doesn't seem like that's possible.

~~~
malandrew
Completely agree that the Polymer Material "look and feel" is really nice and
well thought out. The WebComponents ideas it is based on gives me the jibblies
though.

You could do the polymer look and feel with the react update model via famo.us
(disclaimer: I work for famo.us). Famo.us also plays pretty nicely with
Ember.js (tutorials coming soon) and React.js.

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

