Планирование CSS для веб-сайта JQuery UI (как виджеты и страницы работают вместе) - PullRequest
2 голосов
/ 07 июня 2011

Мы создали веб-сайт AJAX, который широко использует пользовательский интерфейс JQuery.У нас есть более 30 самодельных виджетов JQuery UI (которые загружаются динамически).мы используем нативные виджеты JQuery повсюду: диалог, слайдер, указатель даты.мы используем JQGrid - последнюю версию, которая построена на основе CSS поверх JQuery.Наш веб-сайт состоит из скелета и примерно 20 страниц.

Я подумал о нескольких проблемах, которые могут привести к будущей неразберихе, и, так как у нас есть время на уборку, я хотел бы попросить совета.

  1. Имена классов CSS: На данный момент наименование CSS наших виджетов отделено от темы пользовательского интерфейса jquery (мы не используем классы пользовательского интерфейса jquery для заголовков / заголовков и т. Д.).Каковы плюсы и минусы этого подхода?
  2. Включить У нас много много CSS и JS включает (есть ли рекомендуемый плагин для внедрения зависимости?)
  3. Меньше CSS Я читал об этом скриптовом подходе CSS.наша система среднего размера, но растет день ото дня, что может быть невероятно сложным.мы должны мигрировать?
  4. Пользовательские виджеты CSS: Допустим, у нас есть 4 различных диалога на нашем сайте.Каков наилучший подход для создания 4-х различных диалоговых окон интерфейса пользователя jquery?

Большое спасибо,

1 Ответ

2 голосов
/ 07 июня 2011

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

Мое приложение (для автоматизации маркетинга) настроено с помощью вкладок пользовательского интерфейса Jquery, поэтому я смог создать главную страницу индекса, используя то, что я называю файлом инициализации, который включает в себя. Одно место для управления, одно место для изменений, которые значительно упрощают работу. Я обсуждал вопрос о том, чтобы делать какие-то автозагрузчики или условные загрузки в зависимости от того, какие элементы мне нужны, но я пришел к выводу, что кэширование - это мой друг, и для этого мне просто нужно выполнить «загрузку» загрузки всех файлов заранее. При этом, я сделал некоторое объединение меньших скриптов в один больший файл JS, чтобы уменьшить количество обращений HTTP. Это большое приложение, которое использует тонну jquery и CSS, но загружается не медленнее, чем другие крупные сайты, такие как CNN или ESPN .... на самом деле, я думаю, что это быстрее, чем сайты, использующие тонну глупой флэш-памяти и видео.

Я решил широко использовать Themeroller (и связанную схему именования пользовательского интерфейса Jquery) и фактически использовать стили themeroller для своих пользовательских элементов. Недостатком является то, что он фиксирует вас в очень последовательном стиле, который может быть проблематичным, если у вас есть клиент, который хочет элементы всех разных цветов (да, я имею дело с этим прямо сейчас, на самом деле) Но, опять же, в CSS все можно переопределить, и есть невероятная сила, зная, что я могу переименовать все приложение для своего клиента, просто загрузив другую тему themeroller. Это то, что помогает моему приложению выделиться в отрасли, и это позволило мне сделать процесс ребрендинга невероятно прибыльным.

Я решил не сокращать или делать что-то вроде меньшего CSS, основываясь на моем опыте работы в крупном международном банке. Там я работал над сайтом, который посещался около 2 миллионов раз в день, и я действительно рекомендовал идти по этому пути. Эта просьба переместилась вверх по цепочке командования, и некоторые люди, которые намного опытнее, чем я, решили отказаться от нее. Зачем? Простота. В то время как они могли потерять более чем тербайт передачи данных в день, просто выполнив минимизацию, они решили, что в схеме SVN они использовали минификацию, и тогда быстрые обновления могут вызвать замешательство в команде. Кроме того, при таком количестве аппаратного обеспечения, которое мы все добавляем в наши приложения, очень немногие сайты (даже большие) действительно выигрывают от выполнения дополнительной работы. Конечно, мы все хотим, чтобы наше приложение было самым привлекательным. Но аналитики полагали, что дополнительное время, затрачиваемое на переход на новую схему и минимизацию, было бы лучше потратить на другие функции. Я согласен. Итак, просто включите сжатие gzip, убедитесь, что ваш CSS оптимизирован (, это отличный сайт для этого ) и продолжайте. Задача решена. Не забывайте, что кеширование снова поможет после начальной загрузки.

Я нарушил свое собственное правило, пытаясь полностью использовать ядро ​​Jquery UI, и пошел с Qtip для диалогов. Они более мощные, более зрелые и могут быть индивидуально оформлены по желанию. Пока пользовательский интерфейс Jquery не продвинется немного дальше по их схеме диалога, я лично сдерживаюсь. Я настоятельно рекомендую проверить это.

Наконец, одна вещь, которая действительно помогла моему приложению, это широкое использование DataTables в качестве сетки. Я имею дело с кучей данных в моем приложении - с одним клиентом, более 5 миллионов возможных записей. DataTables не только упрощает представление данных, но и позволяет «конвейерно» загружать данные через Ajax, чтобы предоставить пользователю невероятно быстрый запрос. Как и в большинстве сеток, он дает мне сортировку, разбиение на страницы, фильтрацию и упорядочение всего за несколько строк кода. И, больше всего на свете я сделал, DataTables выделил мое приложение из толпы. Я определенно рекомендую взглянуть на это.

Удачи.

...