Mejores prácticas de desarrollo de GWT y CSS

Question

Me pregunto cuáles son las mejores prácticas en el desarrollo de una aplicación en la que un desarrollador externo de CSS participa en el diseño de la apariencia del sitio.

Idealmente, crearían archivos CSS que podríamos integrar fácilmente en el sitio en múltiples iteraciones, y el equipo de desarrollo no tendría que manipular ninguno de estos archivos (obviamente habría cambios de HTML o plantilla para apuntar a las clases apropiadas).

documentación GWT (http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html) enumera cuatro enfoques:

1. uso de una etiqueta en la página HTML anfitrión.
2. Usando el elemento en el archivo XML del módulo.
3. Usando un recurso CSS contenido dentro de un paquete de cliente.
4. Uso de un elemento en línea en una plantilla de UiBinder.

La documentación sugiere que las aplicaciones modernas tienden a usar enfoques 3 y 4, sin embargo, estos parecen intrusiva para el proceso de desarrollo, ya que no quieren tener que actualizar constantemente las interfaces CssResource con cambios en el CSS cada iteración (en el enfoque 3) o tiene que cortar y dividir los archivos CSS para alinearlos en nuestros archivos ui.xml (en el enfoque 4).

Estamos pensando en utilizar el método 2, y codificar manualmente las clases de CSS. Esto nos permitiría incluir fácilmente las actualizaciones de archivos CSS y que los desarrolladores no tengan que tocarlas. Perderíamos la ofuscación y habría algún trabajo para gestionar los cambios a los nombres de CSS, aunque no más que los otros enfoques. ¿Hay alguna otra consideración que me falta?

¿Existe una mejor práctica para crear aplicaciones GWT en las que participen diseñadores externos de CSS?

Answer 1

Puede haber problemas si tiene un equipo que no está familiarizado con HTML/CSS/JS & GWT/Java. Supongamos que tienes comienzos de rock, que deberías esforzarte.Entonces usted quiere conseguir los siguientes CSS beneficios GWT:

• Sin cadena de nombre de la clase literal referencias
• No hay conflictos CSS espacio de nombres/contaminación
• Minimización de clases CSS (comprimir selectores y propiedades)
• compilador de optimización de reglas CSS (combinar reglas similares), la exclusión de las reglas utilizadas
• tiempo compilador de comprobación de validez CSS y faltar a clases
• Sin montón de archivos CSS externos
• No hay problemas cuando se ejecuta en modo remoto DEVMODE (de lo contrario el navegador tira CSS remoto, no es nuevo CSS que está trabajando)

Creo que la mejor manera de hacerlo es con la UiBinder & la clase Java para ese UiBinder, todo en un solo lugar. Vea el ejemplo a continuación. En mi experiencia, esto generará la aplicación más robusta, comprimida, rápida y confiable posible, y no agrega archivos adicionales.

Todo está en un solo lugar:

• CSS define en UiBinder, donde se utiliza
• interfaces de CSS definidas en el archivo de Java, donde se usan

Widget

class MyClass extends Widget { 
    ... // jave UI binder class 

    public interface MyStyle extends CSSBundle { 
     String someClassName(); 
    } 

    @UiField 
    MyStyle style; 

    ... 
    something.setClassName(style.someClassName()); 
    ... 
} 

UiBinder

<!-- UiBinder File --> 
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'> 

    <ui:style type='com.my.app.MyFoo.MyStyle'> 
     .someClassName { background-color:pink; } 
    </ui:style> 

    <div class='{style.someClassName}'>Sample text.</div> 

</ui:UiBinder> 

He hecho esta pregunta antes, compruébalo here.

Answer 2

Es muy difícil tener una "mejor práctica" aquí ya que los cuatro enfoques diferentes funcionan bien en diferentes situaciones. Dependiendo de cómo use GWT, determinará la mejor opción para usar.

Si su equipo está formado por A) sólo Java y B) solo CSS/HTML, las opciones 1 o 2 funcionarán. Sin embargo, si tiene un rol de UX que entienda el punto de integración de GWT y CSS/HTML/XML (léase: UiBinder). Esta persona puede comprender cómo configurar mejor un UiBinder para maximizar la funcionalidad otorgada al rol solo de Java.

UiBinder + ClientBundle agrega una capa adicional de complejidad a su proyecto. Con esto vienen muchas ventajas, pero si su equipo no es una buena opción, puede terminar causando demasiado daño.

Una "Mejor práctica" puede incluir la organización de un archivo CSS principal (ya sea mediante ClientBundle u opciones 1 o 2) organizado de forma que proporcione uniformidad general de la aplicación y al mismo tiempo utilice estilos específicos en UiBinders para cosas locales

Si quieres ir a por todas, creo que debería centrarse en el uso UiBinder y CssResource/ClientBundle al máximo (externs CssResource cosas/ClientBundel, así como dar acceso programático a los estilos UiBinder través

uso las cosas externas para reutilizar + consistencia agregada