Recommendations for ember material design libs?

pabloklijnjan · 2015-07-25 07:10:16 UTC

Currently the fragmentation on ember addons supporting material design is significant:

ember-cli-materialize
ember-cli.material-lite
ember-paper
ember-material-design

Anyone has recommendation for/against any of those addons?

Been playing around will all of them, but it is hard to decide which one will be best in the long run

scandinave · 2015-07-26 18:38:28 UTC

I use materializecss at this moment. It’s a great Framework but style young. Version Alpha 0.97. It is well optimize and really fast (Compared to https://fezvrasta.github.io/bootstrap-material-design/) , but has lot of bug in the css rendering and the Javascript plugins. For example the Scrollfire plugin that comes with materializecss does not works for me and the documentation is so poor. So i had to use JQuery Waypoint instead.

jasonmit · 2015-07-26 20:55:00 UTC

There was talked to consolidate them, but not sure if any progress was made. Maybe reach out to the owners and figure out which one is likely to stick around.

PDog · 2015-07-26 23:12:00 UTC

I spent some time researching this since I am coming from Angular Material, which obviously isn’t available for use with Ember.

I tried ember-paper, but my main issues were long build times and lack of helpful documentation. The site’s source code itself doesn’t seem to be available anywhere, and the documents don’t even demonstrate how to create a toggleable sidenav.
Ember-material-design is new to me but the website is perfect - the Handlebars template source as well as any associated JavaScript actually reflect the examples on the page. It also looks like a very faithful recreation of Angular Material.
Materialize CSS/ember-cli-materialize is great and it has excellent documentation, but it sometimes felt like the developers took a different approach with the material design spec. There were some small details that I didn’t like, particularly with titlebar behavior, but it looks super simple to use.
I haven’t tried ember-material-lite but I have tried Google’s official Material Design Lite, and I discovered that it’s more useful for static content and not so much for webapps. It’s missing some of the modularity of Angular Material, but I can’t say if this applies to ember-material-lite since I haven’t tried it out.

I can’t recommend any of these over the others since I haven’t used all of them, but I just wanted to provide my take. My build time issues might be unique to me, especially since I have been having countless issues with ember-cli since day one. There is a reason for this fragmentation (at least between ember-paper and ember-cli-materialize), and I don’t think any of these addons are going anywhere any time soon, so you can’t really go wrong no matter what choice you make.

mike1234 · 2015-07-28 07:50:30 UTC

Both ember-paper and ember-material-design have the same goal, which is to be a direct and “native” port of the Angular material project. There is a lot of overlap between these projects, and work is underway to merge the two.

I think we’ll be able to merge the homepage from ember-material-design with the inline code samples to the ember-paper repo once the tab component gets merged into ember-paper. The preliminary plan right now is to merge EMD into ember-paper, since ember-paper has more traction with the community (based on Github stars/forks).

There is an #ember-paper room on the community slack channel for those interested in joining the discussion as we work on merging the two.

jjPlusPlus · 2015-07-30 04:45:05 UTC

@mike1234 I’m using your ember-material-design in a project right now, and it’s pretty great! I have ember-material-light in another project too just to check it out, and I think they’re both pretty sweet.

ecguo · 2015-08-04 15:08:20 UTC

Do hoping some of the project can combine, anyway, I also do some quick research today.

I decide using ember-cli-materialize, because it’s the only project not mention angular and having two project owner (ember-paper and ember-material-design only have one owner). Mike North is also the Wicked Good Ember 2015 - Compose All the Things speaker.

maiclein · 2015-10-10 14:39:40 UTC

Hey Mike, thanks for your work on material-design.

I’ve been trying to get the sidebar nav working, but haven’t been successful. The demo site won’t show the source when I click the little button.

Would you happen to have an example of the md-sidenav?

mike1234 · 2015-10-10 16:22:23 UTC

Sure - you can view the actual source file here.

github.com

mike1o1/ember-material-design/blob/ec4e58802ad87b982fa5a72eba5bb5dd950fc4dd/tests/dummy/app/templates/sidenav.hbs

<div class="doc-content" layout="column">
    <div flex layout="column">

        <section class="demo-container md-whiteframe-z1 {{showSourceClass}}">

            {{#md-toolbar classNames='demo-toolbar'}}
                <div class="md-toolbar-tools">
                    <span>Basic Usage</span>
                    <span flex></span>
                    {{#md-button action='showSource' layoutType="row" layout-align="center center" style='min-width: 72px;'}}
                        {{md-icon md-svg-src='images/icons/ic_visibility_24px.svg' style='margin: 0 4px 0 0;'}}
                        <span>Source</span>
                    {{/md-button}}
                </div>
            {{/md-toolbar}}

            {{code-content sourceFiles=sourceFiles showSource=showSource}}

This file has been truncated. show original

and

github.com

mike1o1/ember-material-design/blob/ec4e58802ad87b982fa5a72eba5bb5dd950fc4dd/tests/dummy/app/controllers/sidenav.js

import Ember from 'ember';

var SidenavController = Ember.Controller.extend({

  mediaQueries: Ember.inject.service('media-queries'),



  init: function() {
    this.get('mediaQueries').match('gt-md', '(min-width: 960px)');
    //this.set('sidebarLocked', this.get('mediaQueries.isGtSm'));
  },

  sidebarLeftVisible: false,
  sidebarRightVisible: false,

  sidebarLeftLocked: Ember.computed('mediaQueries.isGtMd', function() {
    return this.get('mediaQueries.isGtMd');
  }),

This file has been truncated. show original

for the controller.

Sorry that it doesn’t show up on the demo page. I’ll look into getting that fixed.

gtd887a · 2016-05-07 02:17:59 UTC

bump

It’s been a while, and hopefully there have been improvements in the last 209 days. Has anyone revisited this type of decision recently? Which options have matured, or gone dormant? Can anyone share their experience with any of these (or any other) options?

Thanks!

pabloklijnjan · 2016-05-08 07:01:33 UTC

I used ember-materialize and it was quite an enjoyable experience, but it was a really small project so I don’t know how it will hold up in a complex app. It was stalled for a time but is now receiving regular updates.

ember-paper seems to be the most popular and actively maintained, but I didn’t get to use it yet.

I’ve been using semantic UI I and love it. There is an addon (semantic-ui-ember), and there is where most of the usability problems reside

Not everything is supported
Most of the time I end up wrapping the behavior in components myself since the addon components either don’t work as expected or there are not flexible enough, since they don’t follow DDAU.

I mean, the addon is great for doing the simple stuff, but more complex behavior in my experience usually meant rolling my own.

They recently started working on a 2.0 version, so hopefully some of the issues are addressed.

Wrapping the library in components can be challenging some times (modal for example)

TripWar · 2016-05-19 19:23:53 UTC

Starting into a new project and we are wanting to use the Material Design style, but also work within the modularity of the new component style architecture (I come from React so I think this is awesome and can’t wait for routable components). Problem I have with all of the /ember-.material./ libraries is that none of them work in the DDAU way as you have stated. That means that we either have to skip using them or break the modularity of how components should be being built which may come back to haunt us in the long run.

They recently started working on a 2.0 version…

Who is the they?

miguelcobain · 2016-05-19 22:14:34 UTC

I suggest ember-paper http://miguelcobain.github.io/ember-paper/

We’ve just released some alpha versions and we’re preparing v1.0. IMO, things are getting pretty consistent and good looking. There are some advantages of ember-paper over other material design libraries.

Join us at #e-paper channel in ember slack. Many devs there everyday. We usually exchange ideas and work on ember-paper through the channel.