Getting Started guide should include a step on how to build assets to serve statically

jalfcolombia commented 6 years ago

Hola a todos Espero esto en realidad sirva de algo, pero con la ayuda que dan es totalmente imposible hacer algo productivo. Se pierde mucho tiempo tratando de hacer correr algo, por qué no hacen las cosas fáciles como las ayudas de bootstrap 3 o 4, eso si funciona con solo pegar el código. Solo pude hacer andar el textfield despues de 30 minutos de lectura y el ripple del botón despues de 2 horas de lectura no logré nada.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="stylesheet" href="node_modules/material-components-web/dist/material-components-web.min.css" />
  <link rel="stylesheet" href="node_modules/@material/ripple/dist/mdc.ripple.min.css" />
</head>

<body>
  <div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
    <input class="mdc-text-field__input" type="text" id="input">
    <label for="input" class="mdc-floating-label">Input Label</label>
    <div class="mdc-line-ripple"></div>
  </div>
  <br>
  <div class="mdc-button mdc-ripple-surface">Button</div>
  <script src="node_modules/material-components-web/dist/material-components-web.min.js"></script>
  <script src="node_modules/@material/ripple/dist/mdc.ripple.min.js"></script>
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    $(document).ready(() => {
      window.mdc.autoInit(document, () => {});
      MDCRipple.attachTo(document.querySelector('.mdc-button'));
    });
  </script>
</body>

</html>

kennylevinsen commented 6 years ago

This project is not a UI framework like Bootstrap. It is a library to manage Material UI components. It could be used to create a Bootstrap theme, or components for something like React.

There are "wrapper" projects listed in the readme, such as React Material Web Components (react, preact, angular, vue and vanilla JS is covered), which handles things like installing ripples on buttons for you. There are also Bootstrap themes implementing Material UI out there.

jalfcolombia commented 6 years ago

@kennylevinsen Gracias por responder y comprendo tu respuesta. Pero entonces para qué está esta web? https://material.io/develop/web/

Leyendo un poco más y después de más de 3 días de estar intentando hacer algo, me he dado cuenta que parece ser que hay que usar webpack, algo que no lo dicen en la documentación.

A lo que me refiero exactamente es que los documentos que ponen no sirven de nada si no dicen cómo puedo implementar esos componentes nativamente así como se explica en https://getmdl.io/

Seguiré tratando de hacer correr esos componentes... pero en serio, que poco profesionalismo no ofrecer un documentación completa y efectiva para simplemente hacer un "hola mundo" con esos componentes.

kennylevinsen commented 6 years ago

That website is presenting tools to create Material UI components, such as this library. It also contains an easy guide including how to make a button with ripple as the very first example: https://material.io/develop/web/docs/getting-started/.

Each of the "packages" (one for each UI component, https://github.com/material-components/material-components-web/tree/master/packages) has a README that contains example use and API documentation. Most of them are as easy to work with as the button example in the "getting started" section on material.io.

The differences between MDC and MDL are explained here: https://github.com/material-components/material-components-web/blob/master/docs/migrating-from-mdl.md. Specifically, this library is meant to be much less "magic". "Magic" is never good in the long run.

Compared to a bootstrap theme, this library can be considered a lower-level framework. If you do not want to create Material UI components yourself, you should use one of the wrappers in the readme or similar solutions that hide the actual UI away.

Also, I believe English is the preferred language here. I personally do not speak Spanish, and have to copy paste back and forth between Google Translate and here.

jalfcolombia commented 6 years ago

@kennylevinsen Hello again, thank you very much for your answer and I will keep trying.

I apologize for the language, but in fact I did it in a moment of desperation, when I saw no way out and even no quality documentation.

I will try to do what this link says https://material.io/develop/web/docs/getting-started/

I only have the doubt of how I take that to production because I see that everything starts there with a test server. But from what I have read from webpack, I will try to do it without the test server but with something more real.

Thank you in advance for your time and your help, if something happens I will scream, that is, I will ask for help.

kfranqueiro commented 6 years ago

That's a really good point RE the getting started guide not including an explicit step on how to produce built results that can be served statically. I think that's definitely something that we should cover in there; I suspect others have also been confused into thinking that it's impossible to statically serve customized MDC Web styles.

I'm going to re-title this issue and track it so we can improve the guide with a section on building it.

material-components / material-components-web

Getting Started guide should include a step on how to build assets to serve statically #3062