Possible sources

[miguelcobain]

Possible sources

From what I could find out, there are 3 main sources for Material Design using web technologies:

• Material design for Angular - https://github.com/angular/material
• Polymer Paper Elements - https://www.polymer-project.org/docs/elements/paper-elements.html
• Google Web Starter Kit (material-sprint branch) - https://github.com/google/web-starter-kit/tree/material-sprint

Google is porting material design to Google WSK, but it is in an early stage, and it is built with simplicity in mind (vanilla javascript). That's not bad, but right now it seems like it is missing some features that are present in the other options and it is in an early stage.

Polymer Paper Elements is more mature, but really hard to port from (at least for me). I can't fully get my head get around these Polymer components yet. I often found unnecessary styles and/or behavior for an Ember port/app.

Material design for Angular seems like the most decent source for us. Partly because it is the most similar to Ember from these options. I feel like this should be our main source for this project.

What are your thoughts on this?

[sivakumar-kailasam]

awesome start @miguelcobain

Angular Material seems to be doing a good job at implementing the principles from the design site. That's definitely a great place to port from.

[mgenev]

I also want to commend you on the great idea and work. I'm watching the project for now and would be happy to adopt and contribute in the near future.

[miguelcobain]

@sivakumar-kailasam and @mgenev, thank you!

I believe Material Design solves many many problems. I can imagine myself not using Bootstrap, Ratchet or Ionic, for example. Material Design is thoroughly well thought out and it embraces very well (at least my POV) of web development.

The thing is, the more I look at the specs, the more I feel this is a big difficult project. Without many contributors, it will be difficult to drive this to a usable state.

I would also like to add an obvious source, which is the material design spec itself: http://www.google.com/design/spec/material-design/introduction.html

[bbaaxx]

Here is another effort based on React components, not really sure how helpful it may be but probabaly we could borrow some ideas from it.
https://github.com/callemall/material-ui

[miguelcobain]

I don't how I missed a project with over 4000 stars. Their website seems to be down ATM, but thanks for pointing this out!

[miguelcobain]

Website is up now. Some interesting ideas there!

[fouad]

https://github.com/Dogfalo/materialize looks promising!

[miguelcobain]

Yes, indeed.
Also, someone already did an ember addon: https://github.com/sgasser/ember-cli-materialize

[mansona]

Re: these possible sources... what consideration has been done regarding licences? I can see that ember-paper is MIT and so is https://github.com/angular/material but https://www.polymer-project.org/docs/elements/paper-elements.html is BSD (which is similar to MIT but i'm not sure if it can be redistributed under MIT) and https://github.com/google/web-starter-kit/tree/material-sprint is Apache which is more restrictive than MIT.

If we are "borrowing" stuff from other libraries maybe it would be good sticking to just angular/material unless we ask someone who knows anything about licences... which sadly isn't me 😢

[addyosmani]

Hey folks. We've been heavily working on the WSK material-sprint branch for the last couple of months and actively try to keep it up to date with specs. WSK's implementation should be mostly ready in about a month and we don't mind if you end up borrowing stuff from there :) It'll be available via a completely separate CSS/JS library repository which we've moved to working from as we prepare to release.

Please keep in mind that all of the non-Google implementations referenced above don't go through reviews with our Material UX teams and as such, generally deviate from the spec quite often (WSK, Polymer and Angular Material do). I'd be careful about using them.

It does look like you're using our navigation patterns at the moment over in http://miguelcobain.github.io/ember-paper/. Want to drop a link referencing back the original project so folks can keep track of work being done there too?

Nice work on this otherwise!

[miguelcobain]

@addyosmani Thank you for your input!

WSK being validated by the Material UX team is really a huge plus.
However, what would be the consequences for ember-paper if we base our work on WSK?
I think keeping this MIT licensed is a must.

Regarding the navigation pattern we're currently using, yes, I borrowed that from WSK when this project started. What kind of reference is needed? In the source code? Docs?

[addyosmani]

Regarding the navigation pattern we're currently using, yes, I borrowed that from WSK when this project started. What kind of reference is needed? In the source code? Docs?

Just a link should be fine really. Perhaps in the contribution section just mention you're looking at WSK and Angular Material for inspiration?

However, what would be the consequences for ember-paper if we base our work on WSK?
I think keeping this MIT licensed is a must.

I'll speak to our OSS licensing folks. I personally don't mind either way (most personal projects are MIT) but the Google default is Apache-2. Unsure how this works for projects using MIT licensing but will report back once they've had some input. I'd love to see other projects reusing our styles. That makes it easier to keep spec changes propagating through derivative implementations.

[miguelcobain]

Just a link should be fine really. Perhaps in the contribution section just mention you're looking at WSK and Angular Material for inspiration?

It's perfect.

I'd love to see other projects reusing our styles. That makes it easier to keep spec changes propagating through derivative implementations.

This is the key point. I'm sure that "derivative implementations" would also love to see their work always being compliant with material design specs. :)
Let's make this happen, please.

[locks]

💃 🎸

[miguelcobain]

Just a link should be fine really. Perhaps in the contribution section just mention you're looking at WSK and Angular Material for inspiration?

@addyosmani Done in c5ae395

[peec]

+1 for WSK implementation:

Why:

• Validated from Google material UX team
• Officially from Google

[miguelcobain]

Quoting from angular material website:

Similar to the Polymer project's Paper elements collection, Angular Material is supported internally at Google by the Angular.js, Material Design UX and other product teams.

[razor-x]

Just trying to wrap my head around the scope and general approach of this project. Maybe someone can clarify some things for myself and anyone else. Here is what I keep coming back to in my mind:

Polymer 1.0 was recently released during i/o. Is this project making a custom set of elements based on the paper elements? It seems like the mantra for web components is "reusable and encapsulated". With that in mind, I imagine a world where I can just use Polymer (and other components) with Ember. If I need an addon to use the Polymer elements, then I would expect to require the elements I want to use in my bower.json file. The addon would not supply the elements directly, but just take care of whatever details are needed to get those elements usable in the Ember app.

[miguelcobain]

Is this project making a custom set of elements based on the paper elements?

This project is doing exactly the same as the Angular Material project, but for Ember. Nothing is taken from Polymer.

With that in mind, I imagine a world where I can just use Polymer (and other components) with Ember. If I need an addon to use the Polymer elements, then I would expect to require the elements I want to use in my bower.json file. The addon would not supply the elements directly, but just take care of whatever details are needed to get those elements usable in the Ember app.

I think that is possible and possibly a good idea, but I'm not really an expert in WebComponents. Googling "ember polymer" leads to some things.

I don't know exactly how Polymer 1.0 is yet, but one of the reasons that approach wasn't used some time ago was because Polymer didn't even respect the material design specs.
This ember-cli add-on is about implementing material design with Ember. And that's it.

An addon like you proposed could make ember-paper and others useless, but that will depend on performance (polymer's), and how close it is integrated with Ember specifics.

If you ever decide to give that addon a try, let me know. :D

[mansona]

I could be completely wrong with this but it's my understanding that Ember are trying to make components inter-operate between things like Ember, Polymer and Angular. The "angle bracket component" feature was removed from the Ember 2.0 line up because of time constraints but I think it is due to land in 2.1 or 2.2. When it does I think there will be work done on the interoperability.

I don't know if interoperability is a requirement for the feature that they have in mind or if it will happen after the angle bracket components feature lands.

Just my 2c 👍

[peec]

On the polymer side,

Implementation:
peec/ember-cli-polymer@e24e257

But, polymer 1.0 does not work with ember currently.
emberjs/ember.js#11361

I do think however, ember paper is better then then using polymer as polymer also comes with a layer of JS. Not even angular 2.0 will support polymer out of the box (they have angular material) just like we have ember paper :)

[miguelcobain]

I do think however, ember paper is better then then using polymer as polymer also comes with a layer of JS.

That is one of the reasons behind ember-paper, and also angular material, I assume.
However, many ember addons are just wrappers of other libraries. An "ember-polymer" addon would fall into such category. If the Polymer JS is self contained to each element (which I believe it is), then it shouldn't be a problem. Can you elaborate on why you consider "polymer having a layer of JS" a problem?

Not even angular 2.0 will support polymer

Is there any source/reason for this?

[miguelcobain]

Now that we're more and more in line with Angular Material, this doesn't make that much sense anymore, but here's another possible source via @locks: http://www.material-design-lite.pub/

That project doesn't follow the specs in a shocking way.

[ghost]

Personally my vote goes to https://github.com/angular/material. It is extremely well built and apparently is "supported internally at Google by the Angular.js, Material Design UX and other product teams.". It would be great if we could follow them exactly since as you said before, the codebase is similar.

[DanChadwick]

Angular Material has been chosen as the resource for what will become version 1.0. I think this issue can be closed now.

[miguelcobain]

👍

On 15 Apr 2016, at 15:53, Dan Chadwick notifications@github.com wrote:

Angular Material has been chosen as the resource for what will become version 1.0. I think this issue can be closed now.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub #2 (comment)