Хорошая интерфейсная архитектура

Настройка хорошей архитектуры интерфейса является фундаментальным шагом для начала разработки веб-приложения или веб-сайта. Надлежащая практика и соглашения по кодированию необходимы, но как насчет структуры? Как мы можем создать хорошую архитектуру, которую можно поддерживать во времени? Но больше всего, с чего нам начать?

Когда я начал думать о проблеме, я понял, что мне нужно несколько вещей:

1. Я хотел многостраничный проект (веб-приложение или веб-сайт).
2. Я хотел, чтобы мой проект поддерживал экран разных размеров и разрешений, другими словами: я хотел, чтобы он был отзывчивым.
3. Я хотел, чтобы конечный продукт был ремонтопригодным.
4. Я хотел, чтобы конечный продукт был производительным.
5. Я хотел повторно использовать этот шаблон для любого будущего проекта.

Правильные инструменты

В настоящее время у нас есть много интересных инструментов, которые могут помочь нам в современном рабочем процессе разработки интерфейса. Итак, в отношении точек 1 и 2 я сказал себе, что мне нужна архитектура CSS на основе точек останова, которая могла бы помочь мне поддерживать различные устройства и размеры рабочего стола. С другой стороны, я также знал, что такое огромное количество CSS и файлов может быть немного грязным (и несовместимым с пунктом 3.), поэтому я решил начать использовать препроцессор CSS (в моем случае это был Sass с Compass) ).

А как насчет пункта 4? Ответ был прост: я решил использовать Gruntjs. Наконец, как насчет пункта 5? Даже в этом случае ответ был: Yeoman, лучшее решение на мой взгляд.

Организация рабочего процесса

Каждый интерфейсный проект всегда включает библиотеки, плагины jQuery и множество файлов JavaScript и CSS (или файлов SCSS в данном случае) для различных целей и задач. Смешивание всех этих элементов означает работу с различными технологиями, а объединение их означает создание хорошего рабочего процесса на стороне клиента. Нам бы пришлось управлять огромным рабочим процессом, который включает в себя различные технологии. Вот почему все организовано по папкам, следуя шаблону или соглашению, чтобы сохранить ясность и аккуратность, действительно важно.

Мы можем выбрать разделение всех основных компонентов переднего плана на макрогруппы, например:

• Файлы SCSS
• скрипты
• взгляды

Можем ли мы разделить их на более мелкие группы? Конечно можем:

• SCSS
  • переменные
  • Примеси
  • общие части для каждого макета
  • отдельные макеты
• JS
  • библиотеки (такие как jquery, angularjs, gAnalytics и т. д.)
  • плагины (обычно плагины jquery)
  • контроллеры (я имею в виду контроллеры, такие как контроллеры angularjs)

В архитектуре на основе шаблонов (например, с использованием blade.php или jade с nodejs) мы также можем разделить представления следующим образом:

• взгляды
  • общие части для каждого вида
  • одиночные просмотры

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

Исходя из всех этих предварительных соображений, вот как я решил организовать архитектуру, вот мое дерево папок:

project \css \imgs \js \controllers pageOne.js pageTwo.js \libs angular.js jquery.js analytics.js \plugins jquery.tooltip.js textResize.js formValidation.js \views pageOne.js pageTwo.js \scss \framework _core.scss _forms.scss _input.scss _mixins.scss _variables.scss \layouts _all.scss _phablets.scss _tablets.scss _desktop.scss _desktop-large.scss _retina.scss \pageOne _all.scss _phablets.scss _tablets.scss _desktop.scss _desktop-large.scss _retina.scss \pageTwo _all.scss _phablets.scss _tablets.scss _desktop.scss _desktop-large.scss _retina.scss \libs _animate.scss _normalize.scss _reset.scss \plugins _jquery.tooltip.scss _jquery.fancyInput.scss 

Папки объяснения

ГИМ

Я решил разместить все файлы изображений здесь: .png , .jpg , .jpeg , обои и т. Д.

Примеры: icon.png , home-background.jpeg , userAvatar.jpg

JS (основная папка)

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

\ контроллеры (подпапка)

Это папка для angular controllers , каждый с тем же именем соответствующего вида. Например, если ваш home.html нуждается в угловом контроллере, вы должны создать такой файл: project\js\controllers\home.js