GWT и CSS Разработка Best Practices

Question

Мне интересно, каковы лучшие практики при разработке приложения, когда внешний CSS-разработчик участвует в разработке внешнего вида сайта?

В идеале, они должны были бы создавать CSS-файлы, которые мы могли бы легко интегрировать в сайт за несколько итераций, и команде разработчиков не пришлось бы манипулировать этими файлами (очевидно, были бы изменения HTML или шаблона, чтобы указать на соответствующие классы).

Документация GWT (http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html) перечисляет четыре подхода:

1. Использование тега на HTML-странице хоста.
2. Использование элемента в XML-файле модуля.
3. Использование CssResource, содержащегося в ClientBundle.
4. Использование встроенного элемента в шаблоне UiBinder.

Документация предполагает, что современные приложения будут склонны использовать подходы 3 и 4, однако они кажутся навязчивыми для процесса разработки, поскольку нам не нужно постоянно обновлять интерфейсы CssResource с изменениями CSS на каждой итерации (в подходе 3 ) или придется нарезать и разделять файлы CSS, чтобы встроить их в наши файлы ui.xml (в подходе 4).

Мы думаем об использовании подхода 2 и ручного кодирования классов CSS. Это позволило бы нам легко добавлять обновления файлов CSS, и разработчикам не нужно было их трогать. Мы потеряли бы запутанность, и была бы некоторая работа, чтобы управлять изменениями имен CSS, хотя не больше, чем другие подходы Есть ли другие соображения, которые я пропускаю?

Есть ли лучшая практика для создания приложений GWT, в которых участвуют внешние дизайнеры CSS?

Answer 1

Могут возникнуть проблемы, если у вас есть команда, которая не знает как HTML / CSS / JS & GWT / Java. Предположим, у вас есть рок-старты, к которым вы должны стремиться. Затем вы хотите получить следующие преимущества CSS GWT:

• Нет ссылок на строковые литералы в именах классов
• Нет конфликтов имен CSS / загрязнение
• Минимизация CSS-классов (селекторы и свойства сжатия)
• Оптимизация компилятором правил CSS (объединение похожих правил), исключение неиспользуемых правил
• Проверка правильности CSS и отсутствующих классов во время компиляции
• Нет кучи внешних CSS-файлов
• Нет проблем при запуске DevMode в удаленном режиме (в противном случае браузер извлекает удаленный CSS, а не новый CSS, над которым вы работаете)

Я считаю, что лучший способ сделать это - использовать UiBinder и класс Java для этого UiBinder, все в одном месте. Смотрите ниже пример. По моему опыту, это создаст самое надежное, сжатое, самое быстрое и надежное приложение из возможных и не добавляет никаких дополнительных файлов.

Все в одном месте:

• CSS, определенный в UiBinder, где он используется
• CSS-интерфейсы, определенные в Java-файле, где они используются

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>

Я задавал этот вопрос раньше, посмотрите здесь .

Answer 2

Очень сложно иметь здесь «лучшую практику», поскольку четыре разных подхода хорошо работают в разных ситуациях. В зависимости от того, как вы используете GWT, будет определяться лучший вариант для использования.

Если ваша команда состоит из A) только Java и B) только CSS / HTML, варианты 1 или 2 будут работать. Однако, если у вас есть роль UX, которая понимает точку интеграции GWT и CSS / HTML / XML (читай: UiBinder). Этот человек может понять, как лучше всего настроить порядок UiBinder для максимизации функциональности, предоставляемой роли только для Java.

UiBinder + ClientBundle добавить дополнительный уровень сложности для вашего проекта. Это дает много преимуществ, но если ваша команда не в хорошей форме, вы можете нанести слишком много вреда.

«Наилучшая практика» может включать организацию основного файла CSS (используемого через ClientBundle или опции 1 или 2), который организован таким образом, чтобы обеспечить общую согласованность приложения и в то же время использовать особые стили в UiBinders для локальных материал

Если вы хотите сделать все возможное, я думаю, вам следует сосредоточиться на максимальном использовании UiBinder и CssResource / ClientBundle (материал Externs CssResource / ClientBundel, а также предоставление программного доступа к стилям UiBinder с помощью

Использовать внешний материал для повторного использования + добавленная согласованность