Best Practices for Developing GWT and CSS

Question

Best Practices for Developing GWT and CSS

How can we effectively develop an application with the involvement of an external CSS developer in designing the site's look and feel?

Our goal is to seamlessly integrate CSS files created by the external developer into our site over multiple iterations without requiring the development team to manipulate the files directly. The GWT documentation presents four potential approaches:

Using a tag in the host HTML page.
Utilizing the element in the module XML file.
Incorporating a CssResource within a ClientBundle.
Using an inline element in a UiBinder template.

While the documentation recommends approaches 3 and 4 for modern applications, we find them to be somewhat intrusive to the development process. We are considering approach 2, where we hand code the CSS classes to easily update CSS files without developer intervention. Although this approach may sacrifice obfuscation and require some management of CSS name changes, it seems like the most practical option for us. Are there any other factors we should consider?

What is the best practice for developing GWT applications with external CSS designers involved?

java css gwt

Answer 1

Answer №1

One potential challenge arises when you are working with a team that lacks proficiency in both HTML/CSS/JS and GWT/Java. Ideally, you should aim for a team of experts. In that scenario, you can benefit from the CSS GWT advantages, such as:

Avoiding string literal class name references
Preventing CSS namespace conflicts/pollution
Minimizing CSS classes (by compressing selectors and properties)
Optimizing CSS rules through compiler optimization (combining similar rules, excluding unused ones)
Performing compiler time checks for CSS validity and missing classes
Avoiding a heap of external CSS files
Avoiding issues when running DevMode in remote mode (preventing the browser from fetching remote CSS instead of the new CSS being worked on)

In my opinion, the most effective approach to achieve these benefits is by using UiBinder along with the corresponding Java class, both consolidated in one place. Refer to the example below. This method, in my experience, results in a robust, compressed, efficient, reliable application without adding extra files.

Consolidation in one place facilitates:

Defining CSS within UiBinder where it is utilized
Defining CSS interfaces in the Java file where they are used

Widget

class MyClass extends Widget {
    ... // Java 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>

If you're interested, I have previously addressed a similar question here.

Answer 2

One potential challenge arises when you are working with a team that lacks proficiency in both HTML/CSS/JS and GWT/Java. Ideally, you should aim for a team of experts. In that scenario, you can benefit from the CSS GWT advantages, such as:

Avoiding string literal class name references
Preventing CSS namespace conflicts/pollution
Minimizing CSS classes (by compressing selectors and properties)
Optimizing CSS rules through compiler optimization (combining similar rules, excluding unused ones)
Performing compiler time checks for CSS validity and missing classes
Avoiding a heap of external CSS files
Avoiding issues when running DevMode in remote mode (preventing the browser from fetching remote CSS instead of the new CSS being worked on)

In my opinion, the most effective approach to achieve these benefits is by using UiBinder along with the corresponding Java class, both consolidated in one place. Refer to the example below. This method, in my experience, results in a robust, compressed, efficient, reliable application without adding extra files.

Consolidation in one place facilitates:

Defining CSS within UiBinder where it is utilized
Defining CSS interfaces in the Java file where they are used

Widget

class MyClass extends Widget {
    ... // Java 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>

If you're interested, I have previously addressed a similar question here.

Answer 3

Answer №2

Finding the ideal approach can be quite challenging as each of the four different methods have their strengths in various scenarios. Your usage of GWT will ultimately dictate which option is the most suitable.

If your team consists of individuals proficient in A) Java and B) CSS/HTML exclusively, options 1 or 2 would be a good fit. However, if there is a UX expert who grasps the connection between GWT and CSS/HTML/XML (i.e. UiBinder), they may know how to optimize UiBinder setup to enhance the capabilities available to the Java specialists.

The combination of UiBinder and ClientBundle introduces an added layer of complexity to the project. While this brings about numerous benefits, if your team is not well-aligned, it could potentially lead to more harm than good.

A "Best Practice" might involve structuring a primary CSS file (utilized through ClientBundle or options 1 or 2) in a manner that ensures consistency across the entire application, alongside incorporating specific styling in UiBinders for localized elements.

For comprehensive utilization, focusing on leveraging UiBinder and CssResource/ClientBundle to the fullest extent can be beneficial (including utilizing external CssResource/ClientBundle assets and granting programmatic access to UiBinder styles).

External resources can be utilized for increased reusability and enhanced consistency.

Answer 4

Finding the ideal approach can be quite challenging as each of the four different methods have their strengths in various scenarios. Your usage of GWT will ultimately dictate which option is the most suitable.

If your team consists of individuals proficient in A) Java and B) CSS/HTML exclusively, options 1 or 2 would be a good fit. However, if there is a UX expert who grasps the connection between GWT and CSS/HTML/XML (i.e. UiBinder), they may know how to optimize UiBinder setup to enhance the capabilities available to the Java specialists.

The combination of UiBinder and ClientBundle introduces an added layer of complexity to the project. While this brings about numerous benefits, if your team is not well-aligned, it could potentially lead to more harm than good.

A "Best Practice" might involve structuring a primary CSS file (utilized through ClientBundle or options 1 or 2) in a manner that ensures consistency across the entire application, alongside incorporating specific styling in UiBinders for localized elements.

For comprehensive utilization, focusing on leveraging UiBinder and CssResource/ClientBundle to the fullest extent can be beneficial (including utilizing external CssResource/ClientBundle assets and granting programmatic access to UiBinder styles).

External resources can be utilized for increased reusability and enhanced consistency.

Best Practices for Developing GWT and CSS

Answer №1

Answer №2

Similar questions

Sending a list of custom objects including images via AJAX to a REST API in a Spring Boot application

What's the process for browsers to render the 'span' element?

What is the most effective approach to seamlessly conceal and reveal a button with the assistance

Implement CSS Hover functionality even when the element is concealed through JavaScript

I am having difficulty retrieving all the cssRules for certain pages

The Distinction between withArray and putArray in Jackson JSON

Adjusting the size of tables in raw JavaScript without altering their positioning

Determine the difference between a CSS selector string and an XPath string

Utilize CSS to style Hover effects

Creating a responsive HTML5 webpage that adjusts seamlessly to all screen sizes without the need for scrolling

Using the max-width property with Semantic UI Dropdown in ReactJS

Exploring the world of sass with compound mathematical statements

Is there a way to move the bootstrap carousel item captions outside of the image without having to set a specific height for the carousel manually?

Encasing words within a cell of a table

The wrapper is failing to extend the full height of the entire page

Issue with fixed positioning not behaving as intended while scrolling downwards

Is there a way to customize Firefox's default styles similar to Chrome's?

Interacting with an image icon using Selenium WebDriver

Is there a way to deactivate specific options within the "Select" component on Material-UI, similar to how it is done in the "Autocomplete" feature?

Is there a way to prevent Mac users from using the back and refresh buttons on their browser?