Проведя в течение двух лет, что делает его, мы просто нажал кнопку “судно” на новом

Hawaiian Airlines website¹,Это был Самый большой проект в моей career, И я работал с самого талантливого команды я когда-либо работал.Все было восстановлен с нуля до: оборудование, оснащение, фоновых API, передний конец, и UX и дизайна.Это было поездка на американских горках, как ни other, Но мы преобладали и построили то, что я считаю одним из лучших авиакомпаний-бронирования опытом в Интернете.Да, скромный, я знаю,

Присоединяйтесь ко мне в то время как я размышляю о некоторых из ошибки, которые мы made, Инструменты, которые мы использовали, рабочие процессы и принципы, которые мы затем, и даже некоторые из пользовательских инструментов, которые мы построили, все время растет команду разработчиков пользовательского интерфейса от одного (ваш покорный слуга) в более чем десяти людей, чтобы получить работу .

Полное раскрытие: Наша компания, Kind, Является поставщиком для Hawaiian Airlines, и все мнения, высказанные здесь мое собственное.Эта статья и информация, содержащаяся в уже поделился с явного разрешения и щедрости Hawaiian Airlines .

Скромного Link

Когда я пришел на борту этого проекта в качестве разработчика пользовательского интерфейса, Hawaiian Airlines уже нанял другого agency²переосмыслить UX и дизайн существующей 10-летний веб-сайте.Это агентство выступил с 500 страниц каркасный document, Несколько красивых макетов аннотированные Photoshop и руководство по стилю переднего конца.Видя эти сразу РЕЗУЛЬТАТЫ получил меня взволнованный о проекте, а некоторые из забавных проблем развития пользовательского интерфейса, которые лежат впереди .

Полет хоп Link

³

Путешествия ЦелиLink

⁵

Цена График Link

⁷

Фронтальный Песочница Link

Примерно в то время я был Приступаем большой фоновый команда из 40 или около того разработчиков были наращивает на восстановление всех своих интерфейсов услуг.Зная, что было цунами работы пользовательского интерфейса, чтобы сделать, не фонами API, для переднего конца, чтобы потреблять еще и жесткий срок поставил в земле, мы должны работать .

Потому что обратно-конец стека был еще определен и построен за частной сети, мы начали с легкий передний конец sandboxначать строительство компоненты пользовательского интерфейса .

Вот то, что стек инструментов и процесса выглядел:

⁹

Динамический Шаблоны ФРС по Статические данные Link

Во время работы в изолированной среде, мы использовали AngularJS для создания динамических шаблонов на основе статических JSON, который в конечном итоге будет заменен с живыми конечных точек, когда мы поставили код.Иногда фоновых ребята бы отправить нам файл JSON сгенерированный из данных реальных полетов, и другие времена, мы бы просто определить его сами, если данные не существуют еще .

Использование статических данных JSON работал ОК на некоторое время, но как только мы начали строить некоторые из более сложных компонентов пользовательского интерфейса, мы быстро столкнулся с проблемой: несколько states.

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

Учитывая тысяч строк JSON файлы, ручной настройки на JSON, чтобы проверить другие государства был тяжкий и склонны к человеческой ошибки .

Нам нужен лучший способ для создания и проверки всех этих различных государств в песочнице.Так, Nathan²²¹¹изложены решить эту проблему и пришли к тому, что мы называем “инспектор данных”:

¹²

¹⁴

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

Отбросив код через забор Link

Спойлер предупреждение: Не когда-нибудь сделать это

Когда пришло время, чтобы интегрировать переднего плана код с серверными услуг, мы должны были бросить его через забор к людям, которые были интеграции его в совершенно иной среде (.NET) с совершенно разными инструментами (Visual Studio Team иFoundation Server), заправленные надежно за частной сети на Гавайях .

В то время как это работало ОК изначально, она быстро превратилась в кошмар.Люди продукта будет просить изменения в пользовательском интерфейсе;мы хотели бы сделать эти изменения в песочнице, а затем бросить его обратно старше.Изменения кода затем должны быть ручной mergedпотому что у нас Git на одной стороне и Team Foundation Server на другой.С различными файлов и папок структур, эти два хранилища не играйте вместе .

Мы быстро положить этому конец и работал с ИТ-команды, чтобы получить доступ в рай стеной.Тем не менее, этот процесс устанавливается нас monthsпроизводительности, как мы перешли на совершенно иной стек развития, получили доступ VPN, узнал другую набор инструментов и настроить наши виртуальные машины, чтобы соответствовать, что фоновый команда с помощью .

С тех пор мы работали непосредственно с серверными командами, чтобы создавать и интегрировать код пользовательского интерфейса, с помощью процесса схватки в две недели спринт, и все пошли значительно легче, так как .

В краткосрочной перспективе, песочница дал нам огромное преимущество.Мы должны использовать кучу современных инструментов и технологий, что мы были все знакомы.Это заставило нас действительно эффективным.Учитывая обстоятельства, это, возможно, было правильным шагом, но мы ждали слишком долго, чтобы сорвать повязку и прыгать через забор, когда он был готов .

Песочница Уроки Link

• Если вы используете Git, выбрать модель ветвления тщательно в один день, и убедитесь, что он подходит вашей команды, проекта и рабочего процесса .
• Если ваш Git ветвления стратегию сделано правильно, то возвращаясь или вишневого выбора возможностей по сравнению с шкале вашего проекта должны быть дешевой и простой задачей .
• Если строительство передний конец приложение с реальными данными и конечными точками не представляется возможным,затем выяснить способ сделать это возможным.(Конечные точки Передразнивало-до было бы лучше).
• Избегайте несколько команд работает в нескольких средах на всех расходов, даже если это приводит к задержкам фронт .
• Установите свои инструменты, процессы и окружающую среду на ранней стадии, и убедиться, что все в команде использует их .
• Если бы мы приняли подход более дальновидными, это дало бы нам большой ногу в долгосрочной перспективе, и мы бы избежали середине проекта спад вообще .

CSS и менее Link

В начале этого проекта, мы приняли methodology¹⁶что сохранение HTML свет, с очень немногими классов CSS, используя при этом меньше “:extendсильно был путь .

Это приятно, потому что, когда ваш дизайн изменения в будущем, ваш HTML-не будет полон много классов CSS, и вы не должны его трогать.Просто обновите КОЛИЧЕСТВО стили, и изменить свой :extendс .

Большинство элементов HTML в не было либо не класс или один класс определяющую:

<section class="my-section">
   <h1>Title</h1>
   <p>Some Text</p>
</section>

Затем, в нашем не менее, мы должны были бы стилями, как это:

.my-section {
   h1:extend(.header-uppercase-1){};
   p:extend(.bodycopy-sans-3){};
}

Конечным результатом этого метода является lotселекторов в CSS выходе.Через год кодирования, наш выход CSS получил громоздким, с тысячами строк так:

.ha-modal .help-template h2,
.ha-modal .help-template h3,
.ha-modal .help-template h3:first-child,
.ha-help.collapsable-block h4,
.tooltip-block h4,
.traveler-lg .name,
address h4,
.ha-cms-teaser-sidebar .heading,
[ha-calendar] .ha-calendar-month,
.ha-modal#locationModal .destinations-container .standard-location .heading,
[ha-alert] .alert .alert-content .alert-content-primary,
[ha-avatar] .avatar .name,
[ha-avatar] .avatar.small .name,
[ha-tooltip] .ha-tooltip h4,
[ha-global-alert] .global-alert .alert-content .alert-content-primary,
[ha-promo-tile-other-small] .promo-tile.tile-small .headline,
[ha-promo-tile-other-large] .promo-tile .headline,
[ha-child-nav-tile] .child-nav-tile .page-title,
.navtray-content-inner--stackedlistwrap .stackedlist-li-title,
.lte-ie7 .navtray-content-inner--stackedlistwrap .stackedlist-li-title,
.ha-flight-hop .departure-city,
.ha-flight-hop .arrival-city,
.ha-receipt .trip,
.ha-my-trip-itinerary .trip-header span.segment-city,
.ha-my-trip-itinerary .segment .check-in .status,
.ha-my-trip-itinerary .segment .check-in .status:before,
.ha-my-trip-itinerary .segment .check-in .status.green:before,
.ha-my-trip-itinerary .segment .check-in .status.red:before,
.ha-my-trip-itinerary .segment .check-in .status.yellow:before,
.ha-flight-status .flight-info .flight-number,
.ha-flight-status .flight-info .flight-route,
.ha-print-confirmation .reservation-code-title,
.ha-my-trips-itinerary-details .trip-header span.segment-city,
.ha-my-trips-eticket-receipt .trip-header span.segment-city,
.ha-my-trips-itinerary-details .segment .segment-header .col,
.ha-my-trips-eticket-receipt .segment .segment-header .col,
.ha-my-trips-itinerary-details .segment .leg .leg-details .status,
.ha-my-trips-eticket-receipt .segment .leg .leg-details .status,
.ha-my-trips-itinerary-details .segment .leg .leg-details .status:before,
.ha-my-trips-eticket-receipt .segment .leg .leg-details .status:before,
.ha-my-trips-itinerary-details .left-heading .trip-locations,
.ha-my-trips-eticket-receipt .left-heading .trip-locations,
.ha-book-flight-results .segment .selected-flight-info,
.select-class-wrapper a,
.ha-book-flight-results .discount-applied .credit-applied {
  font-style: normal;
  font-size: 0.9375em;
  font-family: "helvetica-neue", "HelveticaNeueLT Std", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-transform: none;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

Забавный факт: Знаете ли вы, что в Internet Explorer 9 и ниже будет прекратить обработку данного CSS файл, как только он достигает 4095 селекторы?Интенсивное использование :extendположил нам путь в течение этого предела на ранней стадии.Выяснение того, почему сайт выглядел совершенно перепутались в Internet Explorer 8 и 9 взял немного отладки и исследования.Мы закончили с помощью задачи глоток, чтобы разбить файлы CSS для старых версий браузера .

Это закончилось тем, что на самом деле плохо.Это раздутой наш CSS с выходом, что затрудняет для отладки стилей инспектор .

Примеси против Продлить Link

Когда наш выход CSS начал более 100 КБ, возник вопрос.Что бы вывести меньше стилей: стили (больше, используя @mixin) или более селекторов (с помощью :extend) .

Я дам Jake¹⁷Объясняю:

“После тестирования его, мы обнаружили, что, несмотря на :extendвывода значительно меньше CSS, Gzip сжатие резервных стилей подмешать может на самом деле перевести в подобной если не меньший размер файла.Что ставит эту идею сверху, что переход на Mixins бы инспектор CSS-DOM гораздо более разборчивыми.Мы больше не будет иметь 200 несвязанные селекторы серым для этого h1Вы пытаетесь отлаживать (которыйможет сделать инспектор отставание и уменьшить разборчивость).Мы сделали небольшой тест Gzip сравнения мелкого примесь-е изд стилей против ап :extendРед лист стиль, и примесь версия на самом деле вышла на первое место “

Таким образом, мы сделали большой ремонт, чтобы изменить все :extendс до @mixins,(Мы рассмотрели 80% с простого скрипта, остальные вручную.)

Таким образом, эта …

.my-section {
   h1:extend(.header-uppercase-1){};
   p:extend(.bodycopy-sans-3){};
}

… Стал это:

.my-section {
   h1 {.header-uppercase-1}
   p {.bodycopy-sans-3}
}

Это открытие было улучшение, но раздутый CSS можно было бы избежать, если бы мы вообще приняли совершенно иной рамки …

OOCSS и BEM Link

Оглядываясь назад, на все это, наш CSS бы уменьшается в размерах, и наша производительность разработки увеличилась бы, если бы мы установили шаблон с нескольких классов определяющих в разметке ( OOCSS ¹⁸ и / или BEM ¹⁹ ) .

Вот профи OOCSS и BEM:

• Таблицы стилей меньше, плоский и легче поддерживать .
• Поиск и устранение неисправностей и развитие стилей являются более эффективными:
  • Источник карты могу сказать вам, где найти источник меньше кода .
  • Изменение стилей в браузере (для экспериментов) легче, потому что они будут выглядеть как различные syles .
  • DOM-скажу вам, что обычай класс против того, что глобальные классы .
  • Вы можете легко сломать конкретные таблицы стилей, чтобы служить только то, что страница или раздел нуждается в (а не много классов загружается, что страница не относится к) .

А вот минусы OOCSS и BEM:

• HTML-более послушный, с большим количеством классов CSS .
• Вы будете иметь меньше гибкости в принятии CSS-только изменения по дороге .
• При изменении дизайна, вы, скорее всего, необходимо изменить HTML-классы .

Оглядываясь назад, OOCSS и BEM четко было бы идеальные рамки подходить проект такого размера .

CSS Уроки Link

• Согласитесь на общем подходе через команды, или принять OOCSS-эск подход, как BEM .
• Используйте СУБД ЛИНТЕР, как __65 Якоба Гейбла |МЕНЬШЕ Lint Грунт plugin²⁰чтобы сохранить ваш меньше и CSS в линию с узорами .
• Держитесь подальше от использования :extendS, насколько это возможно на большом проекте.Как это работает умный, но вывод запутанным и трудным для отладки .
• Используйте классы, которые являются плоскими и многоразовые на протяжении всейПроект, и постоянно анализировать существующие классы при создании новых .

AngularJS Link

Когда я пришел на борту этого проекта, у меня было много опыта с JQuery, JQuery Mobile и ванильным JavaScript, но я не прикасался AngularJS или аналогичных структур JavaScript.парадигма shift²¹чтобы AngularJS была борьба за меня сначала;но, как и многие другие испытали, когда я получил по кривой обучения, я влюбился в .

Пользовательские компоненты пользовательского интерфейса Link

Что делает AngularJS отличное решение для большого проекта, как на веб-сайте Hawaiian Airlines является степень гибкости это дает возможность создавать пользовательские компоненты пользовательского интерфейса .

Все, что гибкость означает, что есть много способов кожи кошки AngularJS.В начале, мы кожурой его таким образом, что из наш код трудно проверить и трудно повторно в разных контекстах.Мы бы директиву, который зависит от некоторой переменной родительской области, и когда это не существует, директива будет разорвать.Мы узнали довольно быстро, что, если вы не имеете изолят область в вашей директиве, вы на рожон .

В т� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров