Unbundle GMD assets

[hrstoyanov]

Currently, the only way to use GMD is via the client bundles - JS, CSS, image assets are injected with GWT scrip injector. This creates 2 major issues:

1. A user may want to download the asset from a dedicated CDN
2. For a web designer, there is no way to preview the HTML without running the project through gwt compilation (and develop templates in the *.ui.xml GWT format without being able to preview in Chrome)

To mitigate this, can we add one more base module class that does not do any resource injections in the module. For example:

public class MaterialDesignBare implements EntryPoint{

   @Override
    public void onModuleLoad() {
        //do nothing
    }
}

Same goes for the addins module. It will become responsibility of the developer/designer to incorporate the necessary assets (js,css,images,fonts.). Further, can we document and prepare, as part of the distribution one compressed/minified JS and CSS files, just like the materializecsss.com and getmdl.io and many others package their deliverables? This will allow developers who do not want to deal with legacy GWT UI binder to still use this project.

As GMD uses Maven, take a look at this plug-in for minifying js and css: http://stackoverflow.com/questions/12458017/how-to-compress-js-and-css-in-java-at-build-time-using-maven-minify-plugin-with

[hrstoyanov]

... well ... that may be not possible . I just realized that that the UI Binder stuff is everywhere

[hrstoyanov]

are there any plans to contribute back addins to the materializecss.com project? I really like materializecss, but it is lacking the new addins in GMD.

[kevzlou7979]

As of now we don't have plans into it.

[gilberto-torrezan]

As long as the option to have the scripts injected continues on the project out-of-the-box as it is today, I'm fine with options.

I say that because on my application, the injected resources improved a lot the startup time. I don't know if it would be even better on a dedicated CDN, but for sure it's better than self-serving the resources outside the GWT application.

[hrstoyanov]

Gilberto, What I am suggesting is to add the option of non-injecting resources with a new base module class, in addition to the current injection. This would give you a choice.

Here are the benefits of unbundling the assets:

1. You leverage free and very fast CDN servers.
2. Your browser downloads the assets in parallel to your app.
3. You minimize the costs for network traffic coming out of your hosted app.

Here are the problems in GDM 1.5-SNAPSHOT I noticed:

1. Fonts are bundled rather than the recommended approach of downloading them from Google:

<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,100,100italic,300italic,400italic,500italic,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

1. CSS files are not minimized and aggregated, each little one causing a HTTP roundtrip:

<link rel="stylesheet" href="css/overridecss.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/material-icons.css">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="css/autocomplete.css">
<link rel="stylesheet" href="css/bubble.css">
<link rel="stylesheet" href="css/sideprofile.css">
<link rel="stylesheet" href="css/subheader.css">
<link rel="stylesheet" href="css/treeitem.css">
<link rel="stylesheet" href="css/timepicker.css">
<link rel="stylesheet" href="css/window.css">
<link rel="stylesheet" href="css/stepper.css">
<link rel="stylesheet" href="css/swipeable.css">
<link rel="stylesheet" href="css/morph.css">
<link rel="stylesheet" href="css/overlay.css">
<link rel="stylesheet" href="css/menubar.css">
<link rel="stylesheet" href="css/waterfall.css">

1. Well know JS libraries are not fetched from CDNs:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

My suggestions are:

1. Add module classes that do not force injection.
2. Consider the Maven plugin above to compact CSS and JS files, similar to what materializecss and many others are doing it. Publish them as jars in the maven repo.
3. Document the assets used with each release
4. [Optional] Publish the web assets as webjars: http://www.webjars.org/

I am currently trying to rewrite the template app without UI Binder, in pure HTML, will let you know if this is possible at all.

[gilberto-torrezan]

The main reason of why the resources are bundled inside the application are on this issue: https://github.com/GwtMaterialDesign/gwt-material/issues/149

Of course an option to the setup is always welcome, as long as it doesn't break existing use cases.

[kevzlou7979]

@gilberto-torrezan I agree because we want to easily handle our resources that's why we put it internally to the project resource

[BenDol]

@hrstoyanov Were you going to progress this? A pull request would be welcomed.

[hrstoyanov]

Ben, This particular issues was a secondary to me. I really wanted the Material widgets, but nothing else...

I failed to get rid of the UIBinder stuff, the raw html/css turned out to be too messy.

Therefore I abandoned GMD. The project is on the wrong track being heavily dependent on Widget/UIBinder/MVP all of which are no longer recommended. I would love if it was based on the new GWT 2.8/Errai 4 stack, but that is too much to ask, I guess.

I currently work with Errai 4/GWT 2.8 and Semantic UI. This combo seems a lot more future-proof to me.

[dlaunen]

Of perhaps interest to you, the GMD roadmap is actually already on route to support an Errai+GMD+GWT2.8 stack. We're in the middle of an in-depth PoC using Errai and GMD, which is progressing nicely.

Additionally, we're also reviewing and prototyping how we will eventually move away from the dependency on GWT Widget's. However the fact is that GWT 2.8 is not even released yet and there is no release date for GWT 3.0, so worrying that the "sky is falling" and the immediate doom of Widgets and UiBinder is not really a concern of ours. We plan on using Errai HTML templates instead of UiBinder and a future pivot of GMD to a non-Widget reliance will not be an issue, perhaps a little more work for us, but we're more than happy to invest in it.

I personally would be more concerned if Material Design will still be the style of choice in 3 years than anything else. All the best with your new stack, Errai I also agree is a way to future-proof your GWT stack.

[pedjapesic]

@dlaunen It would be really nice if you share with others GMD roadmap like Errai integration, new Grid component progress etc. I am sure that there are many people that would like to know about this. Btw, I think that Errai is the best choice in this moment. I agree with you, "sky is not falling" in this moment, there will be more than a year before GWT 3.0 release and for that time anything can be done.

[hrstoyanov]

@dlaunen I never said the "sky is falling" regarding Widegt/UIBinder. I can only assert that working directly with HTML elements and Errai Templates+Data binding+CDI+JAX-RS appears to be a much better approach, especially for a project that you want to support for the next few years. The fact that GWT 2.8 and Errai 4 are not release yet is not a problem for me as I am happy with their current state.

I am also concerned with Material Design :

1. Google's Web Components initiative has been a disaster. Ditto for Polymer. For 3 years now and so much development resources they have convinced so few ...
2. No one knows if Material Deisgn will be relevant in the future. remember Microsoft's Flat Design?
3. If too many web apps implement Material Design, it risks to become "boring"

I did try to use materializacss.com and Google Material Design Light (getmdl.io) with Errai. But the scope, components and speed of development of both did not impress me.

I settled for Semantic UI. It is not ideal (the author had to get a job and slowed down development), but with 24k stars on github, it appears much better than anything else I investigated, including Bootstrap.

Should you decide to publish anything with GMD+Errai 4, I'd be happy to take a look and contribute!

Thanks.

[dlaunen]

@remarkNS good point, we should be more transparent with the roadmap and progress of these sub projects of GMD. Of note, over the past 5 months @kevzlou7979 main focus has been to provide support to the GMD community and develop a stable and feature rich version of GMD, which he has done a fantastic job doing.

The idea behind this was to demonstrate to the GMD community that this was not just a "hobby" project, this has proven to be a good course as we have attracted some amazing community members who now actively participate in the development and progress of GMD. So now that we've reached a level of stability and introduced some relatively cool add-in widgets in v1.5, we're moving to evolve GMD to play well with Errai, migrate to GWT 2.8 and JsInterop and introduce the Material DataTable widget. After that we will continue to introduce more improvements to GMD (feature requests are more than welcome) and focus on addressing the pending doom of GWT Widgets.

[ks280first]

Is there any update on this issue. There is an issue with the current version of material-icons.css included with GMD and I would like to use a newer version to fix it.