Сводка по интерфейсной группе

Фронтенд группа

На самом деле, мы называем это большим внешним интерфейсом внутри компании, и название компании больше не сообщается.Моя мама сказала держаться в тени, ммм!

система

Разные компании определяют границы по-разному. Наше разделение границ в основном разделено на то, влияет ли оно на интерактивный и операционный опыт пользователя, и эффективность должна быть высокой (ps: плохо!)

По нашему определению лицевая сторона — это создание высокоэффективных и качественных интерактивных продуктов. Итак, наша общая система поддержки выглядит следующим образом:

заявление
Технические характеристики
инструмент
команда

заявление

Последний интерфейс в основном отвечает за разработку интерфейса (их работа) и разработку на стороне сервера (логика приложения).

Чтобы обеспечить высокую доступность сервиса и обеспечить надежный пользовательский интерфейс, мы в основном делаем 4 вещи во всем приложении:

опыт.

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

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

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

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

Пространства имен управляются через папки, и каждый компонент используется как вход и выход через index.js.

Каждый компонент существует в группе состояний для управления внутренней логикой.

Переднее и заднее разделение

Внешняя и внутренняя части разделены на две части. Из-за большого объема бизнес-данных скорость единого интерфейса будет очень низкой. Если для рендеринга страницы используется прямолинейное внутреннее решение, время, пока страница будет пустой, будет очень долгим. Таким образом, мы используем внешний спа-центр и внутренний сервис собственной разработки (на основе Node.js).

spa
- Для выбора фреймворка я в основном провожу исследования по нескольким аспектам, сообществу, независимо от того, управляется ли оно данными, производится ли оно крупным производителем, поддерживает ли оно ie8 (или его можно легко адаптировать путем трансформации), общее обучение и начальные затраты команды (некоторые студенты относительно слабы), очерченная область на самом деле относительно очевидна angular1.x, реагировать, и товарищи по команде единодушно заинтересованы в большом и всеобъемлющем фреймворке.React нужно ввести слишком много сторонних пакеты для управления состоянием при создании крупномасштабных приложений, поэтому окончательное решение Это angular1.4.7 (минимальная стоимость изменения)
- Vue - это предпочтительная структура в команде (не совместима с IE8 / (ㄒ o ㄒ) / ~~), поэтому мы пытаемся использовать его в ходе движения. По сравнению с j jsx, мы предпочитаем простоту vue
- Что касается ПК, наши продукты содержат очень много данных, поэтому один файл во внешнем интерфейсе будет относительно большим, а файлы будут очень большими после объединения с помощью инструмента сборки. Поэтому мы ввели метод разделения кода для разделения файлов с помощью маршрутизации и предварительной загрузки некоторых скриптов (js и css сжаты в один файл) после рендеринга главной страницы для оптимизации общего опыта.
Сервер
- Сервис в основном основан на Node.js.Некоторые старые системы имеют python и php.Почему стоит выбрать Node.js?
  1. Команда в целом фронтенд-команда, общий стек технологий в основном js, а на python и php всего 1-2 студента
  2. Бизнес относительно не сложный, и часть логики фронтенда и бэкенда можно разделить
  3. После того, как фреймворк упакован, начать работу относительно легко.
  4. Все с большим энтузиазмом относятся к этому
  5. Одностороннее общение относительно проще и эффективнее, пс: основная зарплата выше
- Бизнес разделен на 2 части
  1. В основном отвечает за прикладные исследования и разработку 2 линеек продуктов компании.
  2. Продукты собственной разработки (раннее предупреждение WeChat, ежедневный отчет WeChat, служба электронной почты, создание внутренней платформы управления проектами, внешний мониторинг и т. д.)

монитор

Мониторинг делится на 3 части:

Интерфейсный мониторинг
- Так как нашими основными клиентами являются отели, им трудно проводить внутреннюю удаленную отладку после возникновения проблем. Однако иногда у пользователей возникают проблемы. Нам сложно воспроизвести проблемы через учетную запись. Согласно приведенной выше ситуации, мы внедрили интерфейсная система мониторинга для захвата пути пользователя и исключений на уровне js.
- В основном он реализует 2 части функций:
  1. Захват рабочего пути, каждый щелчок пользователя записывается после входа каждого пользователя, и процесс работы пользователя оценивается в зависимости от времени и элементов.
  2. Перехватить метод window.error и перехватить метод handleerror в ng и vue
сервисный мониторинг
- Мониторинг процессов и оборудования относительно прост
  1. Демон процесса pm2
  2. сканирование портов
  3. Процессор, память, мониторинг жесткого диска После возникновения вышеуказанного исключения вызовите службу раннего предупреждения и отправьте его соответствующему пользователю.
- Разверните специальные скрытые точки в бизнес-коде для мониторинга некоторых особых сценариев.
раннее предупреждение
- Сервис промежуточного ПО, на данный момент реализовано только 2 части:
  1. Предупреждение WeChat
  2. Оповещение по электронной почте
Получать информацию раннего предупреждения пользователя через API, которая в настоящее время используется для отправки соответствующих отчетов клиентам.

проект

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

рассмотрение. Включает обзор требований, обзор дизайна и обзор тестов.
разработка. Включая проверку стиля, интерфейсную отладку и отладку на стороне сервера.
Совместная отладка. Автоматически генерировать фиктивные данные на основе API.
тестовое задание. Обеспечивает компиляцию кода, развертывание и моделирование (оттенки серого) среды моделирования.
онлайн. То же

Технические характеристики

Стандартизация — это в основном такие инструменты, как eslint и csslint, для обеспечения стиля кода.В сочетании с характеристиками нашей команды мы также разработали собственные спецификации кода (каждая команда должна быть другой, так что не стыдно). Общая гарантия качества заключается в том, что лидеры каждой группы будут регулярно проверять код проекта (в основном заняты, повторяются раз в 2 недели, и на это может уйти только время).

инструмент

Фреймворки инкапсулированы известными в отрасли фреймворками (front-end angular, back-end express),

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

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

команда

доля
- Внутри команды
  - Сеанс обмена проводится раз в неделю, и тот, кто делится, сам устанавливает тему, а тот, кто делится, решает путем опроса.
  - Контентом, которым можно поделиться, может быть опыт проекта, личные эмоции, новые технологии и т. д.
- уровень компании
  - Сессия обмена на уровне компании была организована между бизнес-подразделениями, и эффект был неплохим.Он позаимствовал название FEDAY (хи хи) и также имел свою футболку с логотипом.Конечно, я хотел бы поблагодарить босса за поддержку и энтузиазм друзей.
Исследование/Самоисследование
- Все полагаются на беспилотное вождение для создания колес или исследований и разработки новых вещей.
- Новые технологии, на которые обращают внимание в последнее время
  1. Глядя на graphql, я чувствую, что API — это следующий переломный момент, и я готов представить его в следующем проекте.
  2. Говорят, что элементы приложений должны быть возвращены в наши руки, посмотрите на недавний RN, конечно, а также узнают немного OC Java
  3. Другие немного поймут, но посмотрите на сцену, вы можете забыть ее через несколько дней. .
Суммировать
- проект. В конце каждого проекта участники поделятся своими мыслями о текущем проекте.
- конец года. Каждый год каждый человек анализирует прибыли и убытки предыдущего года.

p.s. Вы набираете?liuqing@liluo.meВнешний интерфейс, большие данные, поисковый робот~~