Конференция раннего чата по интерфейсу, новая отправная точка для развития интерфейса, была проведена совместно с Nuggets. Добавьте WeChat codingdreamer в эксклюзивную внутреннюю группу поддержки конференции и выиграйте на новой стартовой линии.
14-я сессия Front-end Growth and Promotion, 8-29 будет в прямом эфире, 9 лекторов (Ant Financial Services / Tax Friends и т. д.),Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):
Текст выглядит следующим образом
Эта статья представляет собой раздел третьей сессии - специальный лектор по созданию передней страницы.
Всем привет.
Сегодня от имени группы строительных услуг Департамента Дао я поделюсь строительными услугами для экономики Али, созданными Департаментом Дао после более чем десяти лет визуального исследования строительства.Это также один из четырех основных направления передового комитета экономики в этом году. Он сосредоточится на некоторых из наиболее важных проектов, связанных со сборными модулями.
представление о себе
До официального начала, позвольте мне представить, что я в настоящее время отвечает за создание команды службы в Департаменте Tao. Меня зовут Бу Тянь. Я присоединился к Alibaba в 2011 году я был ответственным за вынос бизнеса Taobao Koubei. развитие облака применения Юнос пришло к Tmall и Taobao позже, ответственное за голова Tmall и хвост, домашнюю страницу и некоторых промышленных предприятия, а также сосредоточено на строительстве фронтальной модульной технологии система MAP TMALL, а также в переднем конце TMALL в прежде , чем я поделился ею на колонке Zhihu. Позже, в сочетании с бизнес-требованиями беспроводной и кросс-терминал в то время, вместе с товарищами по команде, мы разработали ряд конструктивных решений для решения маркетинговое продвижение Tmall. Это решение также началось с года он был запущен и поддерживается каждый последующий Двойная 11. Большого места продвижения. Из-за сложности Double 11 сцены и участие достаточно разработчиков и не-R & D студентов, здание платформа становится все более и более зрелой в непрерывной итерации, в том числе расщепления сценариев обслуживания. Ковчег, что Мо Мин сказал перед решения Tao Департамента. Строительство дизайна маркетинговой кампании. Поскольку все больше и больше предприятий Группы постепенно, чтобы использовать эту систему для того, чтобы обеспечить более и более подходящие возможности строительства для бизнеса-сценариев, единый комплекс строительных услуг отвлекаются, чтобы помочь компаниям быстро построить набор услуг, которые соответствуют их собственные бизнес - сценарии. Строительные решения.
определение сборки
Поскольку сегодняшняя тема — строительство, концепция строительства на самом деле довольно широка. Предыдущие темы включают в себя строительство, ориентированное на мидл и бэкенд, а также горизонтальное интеллектуальное строительство. Строительство, о котором я говорю здесь, относительно более ориентировано на потребителя. побочные продукты.Основными пользователями также являются студенты, не являющиеся техническими специалистами. Чтобы все чувствовали себя более физически, я показал некоторые страницы, созданные системой построения в PPT, включая Juhuasuan, Tmall Supermarket, Tmall International и другие предприятия с очевидными входами на Taobao, Фактически, потому что сам модуль Включенный контент определяется разработчиком, поэтому в сложных сценариях, включая интерактивную игру double 11, его также можно нести модулями.
какую проблему решила сборка?
По сути, конструкция все еще должна решить проблему эффективности, и часть первоначальной рабочей нагрузки разработчиков была относительно разумно переложена на студентов, не являющихся техническими специалистами. Прежде чем говорить о проектировании конструкции, мы можем вернуться к относительно примитивному вопросу.Как мы, как разработчики, можем повысить эффективность?Обсуждая эту проблему эффективности, давайте посмотрим, как мы должны проектировать систему строительства.
Конечно, это мои собственные выводы и могут быть не такими точными.Основных факторов 6:
- Правильные люди делают правильные вещи: как разработчик, вы, как правило, ожидаете, что будете выполнять некоторые технические направления, в которых вы хороши. Например, некоторые студенты хороши в оптимизации производительности, некоторые студенты хороши в удобстве использования, а некоторые студенты хороши в PM, общение и координация с бизнес-стороной. Правильный человек, делающий правильные вещи, — это не только гарантия для самого проекта, но и более подходящий выбор для разработчиков.
- Инструментарий разработки: фронтенд на самом деле очень тесно связан с инжинирингом, в частности, фронтенд фреймворк и технические решения очень быстро итерируются, да и требования к инженерной системе тоже очень высокие. От раннего компрессора YUI до uglifyjs и интеграции gulp и webpack в рабочий процесс. За проектом стоит больше аспектов, таких как развертывание, безопасность, тестирование, опыт и т. д., что не только повышает эффективность работы разработчиков, но и улучшает качество поставляемого извне кода.
- Качество кода. Качество кода по-прежнему является очень важным требованием, включая ручную проверку кода, проверку кода eslint и различные решения для модульного и интеграционного тестирования. С одной стороны, он позволяет не тратить время на многократное изменение кода из-за ошибок или по другим причинам, а с другой стороны, он может лучше поддерживать и понимать сам код при совместной работе нескольких человек.
- Экология компонентов: Излишне говорить, что хорошая экология компонентов может позволить разработчикам уделять больше внимания текущим бизнес-задачам и решать их, вместо того, чтобы требовать от всех создания каких-то низкоуровневых колес.
- Улучшение повторного использования. Большинство разработчиков знают, что компонентизация может улучшить повторное использование и повысить общую эффективность, но почему я упомянул вопрос улучшения повторного использования кода после того, как рассказал об экологии компонентов. Поскольку написать общую бизнес-компоненту действительно сложно, нужно учитывать, какие бизнесы я для этого использую, каковы различия в бэкенд-системах между этими бизнесами (как оформлять поля), каковы различия в стилях дизайна и нужны ли они для взаимодействия. Поддерживает несколько режимов и многое другое.
- Производительность, мониторинг и забвение: производительность и мониторинг подобны последней миле марафонского бега (обычно последняя миля марафона самая опасная), и часто на последней миле очень легко ошибиться. Я обнаружил, что коэффициент конверсии упал, потому что страница открывалась слишком медленно или я забыл опубликовать ее, когда вышел в интернет. Я не знаю, сколько людей испытали эту функцию, как она используется и т. д. Я думаю, что все имеет или часто сталкивается с такими случаями. Они также будут связаны с инженерией и экологией компонентов.
поменяться ролями
После того, как разработчик проделал все вышеперечисленное, следующая проблема в том, что людей не хватает, один фронтенд соответствует пяти разработчикам, а дальше соответствует более 20 операций, что относительно нормально. Чем больше людей не хватает, тем больше у них ресурсов. В это время мы подумаем о том, могут ли студенты, не являющиеся техническими специалистами, которые больше знают о пользователях, напрямую создавать необходимые страницы без необходимости для студентов, работающих с интерфейсом, отслеживать их от начала до конца.
Тогда, как было сказано выше, 6 способов решения КПД также будут иметь взаимно однозначно соответствующие средства, за которыми стоят некоторые идеи конструкции и дизайна:
- Нужна строительная платформа, рассчитанная на нетехнических студентов.В принципе, после документов, видео и обучения бизнес может работать самостоятельно.
- Несмотря на то, что студенты, не являющиеся техническими специалистами, находятся на рабочей странице, они должны обладать самыми базовыми возможностями отката и публикации в градациях серого, чтобы обеспечить определенные возможности экстренной и безопасной публикации.
- Материалы, на которые опираются при сборке студенты нетехнических специальностей, должны быть версионными, иначе, если разработчик представит модуль с ошибками, поток сборки студентов не технических специальностей, использующих этот модуль, будет заблокирован, что очень хлопотно.
- Для повышения производительности страницы требуется определенное количество модулей, например, для одного действия может потребоваться более 20 модулей. Благодаря упомянутому выше интеллекту мы также можем позволить студентам, не являющимся техническими специалистами, создавать больше материалов с помощью визуального черчения / перетаскивания.
- Между предприятиями должна быть функциональная совместимость и сотрудничество, поэтому эти материалы также должны распространяться и повторно использоваться в разных предприятиях.
- Концепции производительности, мониторинга и скрытых точек должны быть максимально автоматизированы.
Построение существительных и понятий
Я упомянул, что много думал о проектировании строительных систем. Чтобы помочь вам лучше понять следующее содержание, сначала выровняйте некоторые существительные:
- Модуль: наименьшая единица для нетехнических студентов для создания зависимостей страниц.
- Создание страницы: процесс сборки из модулей в страницы.
- Доставка данных: частота изменений данных намного выше, чем у страниц, поэтому понятие доставки данных извлекается отдельно.
- Большинство соответствующих возможностей доставки данных сервисов сборки Tianma очень сложны, включая синхронизацию проверки данных, персонализацию, адресную доставку и автоматическую настройку.Это не статический фрагмент данных, который можно упаковать со страницей. Вот почему данные могут быть скорректированы индивидуально.
встроенный дизайн
- С точки зрения нетехнических студентов как основных пользователей здания и характеристик экрана мобильного телефона в беспроводном сценарии список одномерных модулей хранения более удобен. Этот дизайн также значительно упрощает построение самого сервиса, вся структура страницы представляет собой одномерный массив, и каждая операция может быть преобразована в простую операцию с массивом. Конечно, одномерное хранилище не представляет собой одномерное отображение Разработчики все еще могут преобразовать одномерную структуру хранения в древовидную структуру через некоторые отношения родитель-потомок во время отображения. В настоящее время мы оцениваем, является ли это более подходящим способом предоставить сложность разработчикам и простой дизайн студентам, не являющимся техническими специалистами. И одномерная структура страницы также может лучше интегрировать внутренние данные, будь то интеллектуальная автоматизация построения или персонализация для конечной стороны, их можно лучше комбинировать.
- Межтерминальный доступ к результатам строительства также связан с некоторыми бизнес-характеристиками Alibaba.Из-за стратегии беспроводной связи, по крайней мере, со стороны потребителя, инвестиции компании в беспроводную связь намного больше, чем в сторону настольных компьютеров (в основном на стороне потребителя). Страница беспроводного доступа автоматически создается на стороне настольного компьютера или наоборот, что может сэкономить много времени пользователям. Особенно в текущих экстремальных сценариях, когда пользователи создают страницу беспроводного терминала, им необходимо одновременно создавать дополнительные версии программ для ПК, weex и небольших программ. Конечно, это только вариант по умолчанию, и пользователи могут использовать только беспроводную сеть, или только рабочий стол, или и то, и другое, но без автоматической синхронизации.
Строительная служба Тианма
Основываясь на приведенных выше определениях, мы, наконец, предоставили услугу построения Tianma, которая охватывает процесс от разработки модуля до хостинга и от создания пользователей до онлайна. В то же время, основываясь на этих услугах, Tao Department также предоставляет продукты для крупного рекламного маркетинга, продукты для общих сценариев и так далее.
С точки зрения данных, строительная служба Tianma в настоящее время поддерживает более десятка BU, в том числе те, которые были подключены и подключаются, охватывая внутренние и международные сценарии, а также разворачивая зарубежный бизнес во многих странах, охватывая Азию. Три основных сектора Европы и Америки. . Вышеупомянутый Ковчег является важным пользователем строительных услуг Тианмы.
В то же время благодаря применению этих более дюжины BU было обслужено почти 30% сотрудников в экономике Али, а соответствующее количество созданных страниц превысило один миллион. Приложение сборки, ориентированное на продавца, создает больше страниц.
Tianma также работала с этими BU верхнего уровня, чтобы сформулировать спецификацию внешнего модуля Alibaba и соответствующий модульный центр Alibaba.На основе более четких соглашений и консенсуса также возможна циркуляция модулей между BU.
Общая картина архитектуры
Возвращаясь к самой Tianma, ядро состоит из 3 слоев:
- Базовый сервисный уровень: отвечает за управление базовыми данными здания, такими как добавление, удаление, изменение и проверка моделей, таких как модули, страницы, пользователи и управление. Этот уровень спроектирован так, чтобы быть достаточно общим и достаточно простым, чтобы не воспринимать бизнес-логику, а также сводить к минимуму внешние зависимости, чтобы гарантировать, что каждая функциональная единица достаточно детализирована.
- Уровень возможностей: потому что, если мы предоставим только один базовый уровень обслуживания, мы столкнемся с проблемой. Очень сложно построить доступ к приложению на верхнем уровне. Для обработки операции пользователя может потребоваться вызов нескольких интерфейсов за ними базовый уровень обслуживания Комбинация операций по-прежнему относительно подвержена ошибкам, поэтому эти базовые услуги объединяются на уровне возможностей для снижения затрат на доступ. С другой стороны, на уровне возможностей здесь может быть завершено взаимодействие с большим количеством внешних систем, например, стыковка с такими платформами, как фон апплета и тестирование производительности. Продукты этого уровня включают интерфейс API, строительные леса, платформу управления модулями и так далее.
- Уровень службы исследований и разработок: возможности исследований и разработок в основном делятся на основные сборщики, визуальные подключаемые модули исследований и разработок для улучшения опыта исследований и разработок модулей, шаблоны инициализации для различных сценариев и вспомогательные документы исследований и разработок. Документация также является важной функцией как для разработчиков, так и для других нетехнических пользователей.
конструкция модуля
Определение сборных модулей
Как упоминалось ранее, модуль — это наименьшая доступная единица для строительства.На самом деле, конструкция середины и кулисы одинакова, но модуль, разработанный Тианмой, упрощает процесс строительства и защищает сложность от более технических аспектов.
Сам модуль, помимо определения, имеет несколько важных конструкций:
- Через терминалы: уменьшите дублирование работы
- Сглаживание: открытый интерфейс достаточно прост и понятен.
- НИОКР для стандартных данных: улучшение циркуляционной способности модулей
перекрестный терминал
Еще в 2012 году у Tmall уже была концепция кросс-терминала. Здесь нет строгого определения, чтобы различать терминалы, контейнеры и т. д., сначала используйте относительно простое понятие, называемое терминалом, то есть работающей средой цели. Терминалы включают настольный хром, мобильное сафари, браузер UC на ТВ-боксе, контейнер webview/weex на мобильном Taobao, контейнер апплета Alipay и даже механизм рендеринга ssr на стороне сервера и т. д.
Почему бы не использовать отзывчивый? Отзывчивость — это всего лишь кросс-терминальное решение, она не может решить проблему кода, работающего на стороне сервера, и сама по себе отзывчивость слишком много внимания уделяет эффективности, а не столкновению с существенными различиями.
Навигационный модуль настольного терминала, модуль навигации беспроводного терминала:
Например, в навигационном модуле на рисунке беспроводной терминал — это вкладка, а настольный терминал — это модуль, который прокручивается и плавает вместе с экраном.Это случай различий во взаимодействии.На самом деле различий в содержании больше и бизнес-логика. , поэтому вам не нужно придерживаться отзывчивости, просто напишите два набора логики.
Конечно, кросстерминальность - это способность модулей, если мой модуль только для одного терминала, я могу написать только один терминал.
Плоский
Поскольку есть кросс-терминалы, это означает, что модуль может иметь несколько выходов. Сведение может упростить экспорт. При построении системы файлы в соответствующем терминале можно получить с помощью простых соглашений. Нет необходимости иметь дополнительный файл конфигурации, чтобы указать, какой файл используется каким терминалом, и сложная конфигурация могут быть заменены стандартными соглашениями.
Например, ниже приведены некоторые примеры межтерминальных модулей. Сведение тоже легко понять. Это продукт после сборки. Нет вложенности каталогов, и он отображается непосредственно в корневом каталоге:
- index.js
- index-pc.js
- index-tv.js
- index-weex.js
- index-es6.js
- index-ssr.js
- index-miniapp.js
Простой уровень очень удобен для простоты использования модуля, а также удобен для реализации разовой схемы разработки и многотерминальной работы, как у Rax.
rax.js.org/
НИОКР для стандартных данных
Стандартизация данных является проблемным моментом среди трех дизайнов, но на самом деле все более или менее занимаются смежными вещами в повседневных исследованиях и разработках. Например, как проверить форму, как определить новый интерфейс данных с серверной частью, и более популярный TypeScript также определяет формат данных.
Мы извлекаем это понятие отдельно и формируем описание данных schema.json, которое соответствует спецификации схемы json, что позволяет судить о необходимости такого определения для описания того, какие параметры принимает модуль. Внутри этих входных параметров также было сделано больше соглашений, например, как сделать модуль скином (что сильно отличается от механизма среднего и фонового скина), как разрешить модулю принимать некоторые конфигурации и как передать ядро в модуль Данные, необходимые для рендеринга.
Эти поля также являются рекомендуемым соглашением, и они являются одними из лучших практик для построения. В принципе, как студенту, не являющемуся техническим специалистом, вам все равно нужно уделять больше внимания самим данным, а атрибуты пользовательского интерфейса, такие как конфигурация и тема, должны быть более интеллектуальными и автоматизированными.Например, площадка Double 11 будет иметь единую тему, поэтому нет необходимости управлять страницей для студентов.
За этими проектами стоит то, что мы ожидаем, что модуль разработчика будет максимально отделен от бизнес-сценария, как можно меньше связан с конкретным внутренним интерфейсом, и модуль будет написан как чистый компонент рендеринга, поэтому что циркуляционная способность модуля может быть гарантирована. В то же время также ожидается, что студенты, работающие в сфере эксплуатации, должны будут уделять внимание только тем частям, на которые им действительно нужно обратить внимание, вместо того, чтобы брать на себя некоторую нагрузку для студентов, занимающихся исследованиями и разработками.
{
"type": "object",
"properties": {
"$attr": {
"type": "object",
"properties": {
"hidden": {
"type": "boolean"
}
}
},
"$theme": {
"type": "object",
"properties": {
"themeColor": {
"type": "string"
}
}
},
"items": {
"type": "array",
"items": {
"type": "object",
"properties": {
“itemId”: {
"type": "string"
}
}
}
}
}
}
Тем не менее, такой дизайн разработчика по-прежнему идеален. Схема может охватывать только данные, зависящие от первого рендеринга, дополнительных запросов после взаимодействия и логики, связанной с конкретными сценариями. В зависимости от объема модулей, которые необходимо повторно использовать, вы Можно поместить эту часть логики во внешнюю, например, ее можно извлечь и поместить в общий компонент, а можно разместить на уровне страницы.Разные страницы могут иметь общий набор логики инициализации страницы, и страница также может передать много общих методов модулю.
нормализация данных
Продолжать говорить о разработке стандартных данных, в силу особенности самой конструкции, а данные соответствующие модулю не будут просто занесены в форму, особенно в условиях сегодняшней популяризации персонализации, за большинством модулей стоят не только статические данные , но это некие службы динамических данных, и эти интерфейсы могут исходить из различных систем больших и малых компаний. Для разработчика модуля, какой интерфейс должен отображать описание данных, которое я определяю? То же самое и с товарными интерфейсами.Поля, возвращаемые приложением A и интерфейсом приложения B, одно — стиль подчеркивания, а другое — горб.
Стандартизация данных решает эту проблему, и мы должны проводить исследования и разработки для стандартных данных. Эти стандартные данные являются результатом унифицированных соглашений об именах, основанных на текущих системах самого низкого уровня, товарных библиотеках, пользовательских библиотеках и т. д. Все соблюдают эту спецификацию для передачи данных в модуль.
Но на самом деле ситуация сложнее, например, есть модуль со строкой текстового описания, в некоторых сценариях отображается название товара, а в некоторых сценариях отображается рекламный текст, написанный продавцом. Сам интерфейс неоднозначен. Сейчас мы определим в описании данных поле под названием title. Конкретное название соответствует itemTitle или itemDescription, в зависимости от фактической сцены.
Наконец, интерфейс данных, перед рендерингом во внешнем интерфейсе, может фактически пройти две стандартизации, одна — это стандартизация модели предметной области, чтобы гарантировать, что поля не являются двусмысленными, а затем — стандартизация VO, а затем на основе потребности представления. , который отображает потенциально неоднозначные представления модуля.
Обычно мы просим внутренних студентов стандартизировать модель предметной области с помощью SDK или унифицированной службы экспорта данных, а затем внешний интерфейс стандартизирует модель представления в FaaS или поддерживает приложение, подобное шлюзу.
Другое использование схемы
Помимо построения системы, очень важной операцией является доставка данных. Операция доставки данных может состоять в том, чтобы заполнить форму вручную, или это могут быть некоторые селекторы продуктов и так далее. Эти формы могут быть созданы по схеме, аналогичной форме схемы json, то есть разработчикам нужно только написать описание такой схемы. Сопутствующее содержание, Луо Чен также имеет более подробное введение ранее, и общие идеи похожи. Ali также предоставил набор готовых решений с открытым исходным кодом.
GitHub.com/Alibaba/Фуру…
Как написать код модуля
Как упоминалось ранее, мы по-прежнему рекомендуем использовать модуль только для рендеринга и как можно меньше привязывать к конкретной сцене. Тогда упростите разработку модуля, это:
- Определите, какой формат данных мне нужен
- Подготовьте фиктивные данные, соответствующие описанию формата.
- Напишите часть логики, введите фиктивные данные и верните результат рендеринга.
Этот процесс на самом деле очень похож на начало повседневного бизнеса: вам нужно согласовать поля с бэкенд-одноклассниками, сначала смоделировать разработку, а затем совместно отладить с бэкенд-интерфейсом.
Ниже приведен пример модуля rax:
import { createElement } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
export default function Mod(props) {
let defaultTheme = {
themeColor: '#fff'
};
let defaultAttr = {
hidden: false
};
let {
items = [],
$theme: {themeColor} = defaultTheme,
$attr: {hidden} = defaultAttr,
} = props;
return (
<View className="mod" style={{
backgroundColor: themeColor
}}>
{
hidden !== 'true' ? <Text>欢迎使用天马模块！</Text> : null
}
<View className="keys">
{
items.map(element => {
return (<Text>{element.key}</Text>);
})
}
</View>
</View>
);
}
Конечно, должны быть и какие-то модули посложнее, типа немного похожего, внимания и т. д., которые не просто решаются одним рендерингом, с одной стороны, эта часть может быть составной, а разработчику, который пишет модуль, не нужно заботиться об этой части логики или просто передать компоненту некоторую информацию о пользователе. С другой точки зрения, если есть N копий одного и того же интерфейса, это может быть сглажено шлюзом или SDK, или в измерении компании, есть ли проблема с back-end дизайном сервиса, лучше ли продвигать единый сервис?
Как разрабатывать модули
Ссылка на разработку модуля на самом деле не сильно отличается от обычной разработки пакета npm.Основываясь на многих соглашениях, мы предоставляем несколько удобных каркасов и сборщиков, поддерживающих подключаемые модули, которые могут быть предоставлены различным, но ограниченным модулям DSL для построения. , действовать.
В то же время, поскольку у разработчиков есть ISV, аутсорсинг и внутренние сотрудники, визуальный R&D по-прежнему остается очень важным звеном.Попробуйте сгладить те моменты, которые отличаются от разработки npm-модуля, посредством визуального R&D. Мы также предоставляем возможности, включая локальное управление модулями, отладку, предварительный просмотр, редактор схемы и т. д., а также гарантии для процессов выпуска, таких как сканирование кода и хранение ресурсов.
Как управлять модулями
Каждый модуль является независимым продуктом с точки зрения студентов, не являющихся техническими специалистами, и законченным приложением с точки зрения технических студентов.
После того, как разработчик отправляет модуль, разработчик или продукт модуля может просмотреть и просмотреть соответствующую версию модуля, чтобы убедиться, что качество модуля соответствует ожиданиям.Во время проверки некоторые решения для автоматизированного тестирования и тестирования производительности также могут использоваться в качестве ссылка на отзыв. .
Затем бизнес-администратор может обвести модули, чтобы определить, какие модули можно использовать в бизнес-домене.С одной стороны, он также может изолировать те модули, которые не являются технологическим стеком или имеют несовместимые основные версии основных компонентов, чтобы избежать несовместимости. -студенты технических специальностей столкнулись с недоступностью.
Затем операция может выбрать эти обведенные модули, выполнить построение модуля и доставку данных и, наконец, отобразить их на терминале.
Как запустить модуль
Сервер
Поскольку сервер также является целевой операционной средой для модулей, текущие методы запуска модулей на сервере в основном включают в себя старомодный метод рендеринга чистого шаблона (который требует от разработчиков написания отдельного файла шаблона для генерации html) и все более популярный Схема ССР. Первый достаточно прост и детерминирован, а второй ориентирован на будущее, но требует достаточных гарантий стабильности.
клиент
Как упоминалось ранее, чтобы сделать разработку модуля достаточно простой и обеспечить ликвидность, уровень страницы должен выполнять больше операций, включая запрос данных, инициализацию контейнера страницы и т. д.
Логика запроса данных является очень важной частью логики страницы.Теперь будут некоторые концепции отображения пользовательского интерфейса на основе данных, особенно очень важные функции слияния интерфейсов, подкачки и разделения экрана, а также аварийного восстановления. Пейджинг и разбиение определяют, какой контент нужно отображать на первом экране и какие данные запрашиваются, а затем слияние интерфейсов отвечает за уменьшение количества запросов, ускорение отображения на первом экране, а затем выполнение аварийного восстановления для обеспечения Контент может отображаться для пользователей в конце концов, даже если есть различные сети, проблемы с обслуживанием.
Рендеринг контейнера страницы в основном включает инициализацию контейнера прокрутки и рендеринг многомерного списка модулей. Например, рендеринг одномерного списка модулей в отношения родитель-потомок с несколькими вкладками, и, наконец, необходимо инициализировать каждый модуль по отдельности.
Здесь много деталей и технических моментов, особенно оптимизация для взаимодействия с пользователем, о которой упоминалось в предыдущем сообщении Мо Мина, поэтому я не буду здесь вдаваться в подробности.
Зависимости модулей и анализ
Пока что большая часть вышеперечисленного контента похожа на конструкцию середины и бэкстейджа. Далее идет то, где потребительская сторона более характерна. Для создания среднего и внутреннего интерфейса обычно требуется только добавить описание схемы на основе компонента пакета npm, которое можно использовать для создания соответствующей конфигурации формы в системе построения.
Но не со стороны потребителя.Каждый модуль нужно упаковывать отдельно.Предыстория такова:
- В одном случае было использовано около 100+ модулей и построено 1000+ страниц. Затем есть функция, которая должна выполнять операции обновления версии для определенных модулей за короткий промежуток времени. Если для вступления в силу необходимо построить каждую страницу, работоспособность большого количества сборок за короткий период времени будет относительно низкой.
- После персонализации и популяризации перед тысячами людей отображение страницы управляется данными.Если используется традиционная схема построения, невозможно точно загрузить только первый экранный модуль на первом экране, потому что какой модуль первый сам экран содержит не определяется комплектом. , а определяется данными.
Поскольку наименьшая единица построения — это модуль, а в бизнесе много динамических требований, например, в 10 часов в определенный день, необходимо обновить версию из 5 модулей по 1000 страниц, поэтому процесс сборки модулей реализуется путем вычисления комбо-URI ресурсов через службу онлайн-рендеринга.Пока вы нажимаете обновление модуля в фоновом режиме, эти 1000 страниц автоматически обновляют версию модуля без необходимости повторного прохождения логики построения . Это также означает, что каждый модуль необходимо упаковывать отдельно, чтобы получить веб-версию, готовую для работы в браузере.
Однако, поскольку каждый модуль упакован отдельно, если ничего не сделать, это вызовет проблему повторной загрузки зависимостей. Затем необходимо экстернализовать все зависимости модуля (он также поддерживает активный выбор частичной упаковки).Чтобы убедиться, что зависимые модули не загружаются повторно, что приводит к неконтролируемому объему скрипта страницы, механизм описания семян Этот файл будет аналогичен файлу в SystemJs.importMap — это то, что SystemJs динамически получает зависимости, и поскольку в начальном описании есть требуемое описание зависимости, вы можете использовать комбинацию CDN для объединения компонентов, от которых зависит запрос. Причина выбора этого формата заключается в том, что, с одной стороны, способность к описанию относительно сильна, а с другой стороны, это также причина исторической прямой совместимости.Учащиеся, которые использовали KISSY, обнаружат, что это описание похоже на описание семян KISSY.
Что касается дедупликации зависимостей, веб-пакет также предоставляет аналогичные решения, такие как внешние, DLL и т. д., но этого недостаточно для возможностей обработки вложения зависимостей.
{
"modules": {
"@ali/pmod-ark-butian-test/index": {
"requires": [
"@ali/rax-pkg-rax/index",
"@ali/rax-pkg-rax-view/index",
"@ali/rax-pkg-rax-text/index"
]
}
},
"packages": {
"@ali/rax-pkg-rax": {
"path": "//g.alicdn.com/rax-pkg/rax/1.0.15/",
},
"@ali/rax-pkg-rax-view": {
"path": "//g.alicdn.com/rax-pkg/rax-view/1.0.1/",
},
"@ali/rax-pkg-rax-text": {
"path": "//g.alicdn.com/rax-pkg/rax-text/1.0.2/",
},
"@ali/pmod-module-test": {
"path": "//g.alicdn.com/pmod/module-test/0.0.9/",
}
}
}
Такие описания будут иметь некоторые ограничения на использование компонентов с открытым исходным кодом.Например, готовые компоненты в npm должны быть отправлены в систему Tianma через процесс, чтобы гарантировать, что соответствующие начальные описания могут быть сгенерированы, а ресурсы опубликованы в CDN, что может ссылаться нормально. Конечно, вы можете пропустить этот процесс, тогда зависимые компоненты npm будут упакованы в бандл модуля сборки, потому что нет процесса сборки на уровне страницы, нет возможности дедупликации зависимостей.
Одного описания точно недостаточно.Ядро также должно определить стратегию.Как выбрать модуль, который зависит от разных версий одного и того же пакета npm. Способ установки npm состоит в том, чтобы взять самую большую совместимую версию и установить несколько копий, если версия несовместима или указана. Стратегия в Интернете аналогична, но внутренние исследования и разработки более контролируемы, поэтому эта стратегия была более упрощена (в качестве примера возьмем версию x, y, z):
- Основная версия x-bit может сосуществовать (или не сосуществовать)
- Все изменения версии y и z-бита совместимы с предыдущими версиями и автоматически примут последнюю совместимую версию, даже если версия указана.
С точки зрения Интернета и пользователя, загрузка большого количества разных версий одного и того же компонента приведет только к увеличению объема страницы, потере пропускной способности, трафика и плохому взаимодействию с пользователем.
По сути, это извлечение внутреннего управления зависимостями, которое webpack делает для разработчиков, построение его на уровне модуля и управление им единообразно на уровне страницы.
приложение модуля
После выпуска модуля он будет синхронизирован с CDN и npm одновременно. Версия CDN используется чистыми браузерами и серверами, а часть tnpm используется в других сценариях с возможностями построения на уровне страницы, таких как апплеты и исходные страницы.
В настоящее время отдел Сямэнь выбрал Rax в качестве унифицированного DSL.Основываясь на приведенной выше конструкции и способности самого Rax развивать многотерминальную работу одновременно, я могу понять, что мне нужно только написать код беспроводной web терминала, и перенести версию weex и апплета соответственно, так что мой модуль помещается в webview, это веб-режим, помещается в апплет, это нативный апплет, и помещается в weex, его можно отобразить в виде Weex.
Различия в общественных программах
Из-за специфики решения задач между этим решением и сообществом есть некоторые отличия.
Проще говоря, некоторые соглашения и документы добавляются на основе сообщества.Хотя есть различия в анализе и обработке зависимостей, идеи, стоящие за ними, на самом деле одни и те же.
| Строительный модуль Тианма | Программа компонента сообщества | |
|---|---|---|
| спецификация сборки | cmd/umd/незастроенная версия (опубликована в npm) | Упаковка на уровне страницы, компоненты не нужно создавать |
| объявление зависимости | package.json dependecies | package.json dependencies |
| Анализ зависимостей | seed.json | webpack dependecy |
| Время выполнения | Загрузчик js собственной разработки | автоматически генерируется веб-пакетом |
| Схема динамической загрузки | require(dependencies, Callback?) require.async(dependencies, Callback?) |
require.ensure(dependencies, Callback?) require(dependencies, Callback?) dynamic import |
| имя экспорта | @ali/{gitName}/index | автоматически сгенерированный идентификатор веб-пакета |
| формат схемы | json-schema, постоянно сохраняйте и группируйте схему формы | неограниченный |
| mock | Данные макета Tianma хранятся в src/mock.json. Соответствует фиктивным данным реквизита, от которых зависит компонент. |
неограниченный |
Схема межтерминального кэширования
Модуль поддерживает кросстерминал, и страница тоже должна быть кросстерминальной. За этим стоит потребность в поддержке унифицированной архитектуры идентификации терминала. В настоящее время страницы для создания продуктов размещаются в рамках архитектуры кеш + исходный сайт, и разные терминалы будут иметь соответствующую копию кеша, чтобы избежать необходимости повторного рендеринга при каждом доступе к ним. Конечно, поскольку необходимо контролировать количество кэшированных копий, не все приложения или браузеры будут распознаваться, и здесь придется идти на некоторые компромиссы.
Чтобы обеспечить согласованность логики идентификации терминала, правила анализа UA CDN согласуются с компонентами среды выполнения.
Основываясь на таком наборе архитектуры, мы также можем понять, что для операции нужно только ввести адрес или QR-код, и на разных концах существуют разные методы отображения.
перспективы на будущее
webpack 5
На самом деле, я все еще чувствую, что этот сид-механизм, поскольку он не скрывает зависимости, такие как веб-пакет, по-прежнему требует определенных затрат на обучение и легко может вызвать некоторые проблемы (конечно, веб-пакет также имеет свою сложность и стоимость обучения). У меня иногда все еще есть некоторые сомнения в жизни, следует ли мне постепенно переходить на схему построения на уровне страниц, поэтому эти страницы невелики по объему, и нет относительно экстремального спроса на пакетное обновление, такого как даосизм, служба построения Tianma также поддерживает автономная конструкция.Это решение ближе к разработке приложения с исходным кодом реакции и может сделать большую оптимизацию конструкции.
Webpack 5 также предлагает еще несколько идей, добавляя плагин «Module Federation», который позволяет создавать на уровне исходной страницы внутренние и внешние зависимости (внешние), внутренние зависимости (DLL) и раздельные фрагменты. добавляется для ссылки на результаты сборки другого репозитория по запросу. Конкретный метод использования заключается в добавлении подключаемого модуля. Конфигурация подключаемого модуля описывает, какие пространства имен (то есть соответствующий зависимый проект, соответствующий исходный пакет), какие внутренние модули и конкретные расположения файлов, а также общие внешние зависимости. повторная упаковка (соответствует конфигурации модуля).
На основе такой модели упаковка на уровне модулей является более естественной вещью.Конечно, упаковка нескольких модулей в одном проекте по-прежнему по существу является упаковкой на уровне модулей, потому что экспорт независим. В то же время, если он действительно используется в бизнесе, он все равно будет сталкиваться с подобными проблемами инженерной сложности, упомянутыми ранее.
- Для общих зависимостей, если есть конфликт версий, как с ним справиться, особенно для практики сосуществования больших версий в веб-среде выполнения и совместимости других версий с последней версией, по-прежнему требуется много соглашений и ограничений. Если большие версии должны сосуществовать, два разных идентификатора могут быть сопоставлены в веб-пакете, что также должно быть решено.
- Динамическое решение SSR не рассматривалось внимательно. Я чувствую, что его будет сложнее реализовать. Это может потребовать нескольких конфигураций веб-пакетов и пакетов нескольких версий. В конце концов, дедупликация не так важна для работы на стороне сервера, а динамическая зависимость слишком глубокая.повысит сложность. В настоящее время каждый конец модуля Tianma также независимо выполняет логику упаковки, и решение аналогично.
- Как генерировать подходящие HTML-файлы более автоматически, эта часть нуждается в большем изучении. Может возникнуть необходимость разместить на странице входные файлы всех проектов, независимо от того, используется она или нет.
сборка браузера
Для самого отдела Дао динамизм является важным требованием.Мое собственное предположение состоит в том, что если сегодня мы можем напрямую публиковать исходные файлы в CDN без модулей упаковки, рассматривать CDN как каталог и запускать файл непосредственно в браузере. к возможностям вебпака он может удерживать динамичных студентов, не внося дополнительной сложности (сложность вся в самом решении, разработчикам особо много знать не надо).
SystemJs уже выполняет аналогичную работу. Почему это всего лишь прогноз? Для этого необходимо решить некоторые проблемы:
- Хватит ли производительности браузера для такой компиляции, тем более в настоящее время компиляция самого вебпака дело трудоёмкое, немного страшно перекидывать эту часть времени на пользователя. Разработчики также могут быть ограничены компиляцией как можно меньшего количества кода, занимающего много времени, и функций, которые используются только для компиляции, по-прежнему необходимо взвешивать между пользовательским опытом и эффективностью исследований и разработок.
- Затраты времени на удаленную файловую систему в сети слишком велики без комбо CDN, и трудно разделить страницы с комбо CDN. Несмотря на то, что многие механизмы кэширования могут быть разработаны, это все еще проблема в первый раз, и, обходя механизм кэширования самого браузера, по-прежнему будет много других проблем для выполнения набора кэширования файлов, особенно в веб-просмотре беспроводного приложения, пространство кеша очень ограничено, а также разработать набор механизмов кеша с полной стратегией приоритетов.
- Сложность управления пакетами, текущий начальный механизм сделал то же самое и не принесет слишком много изменений в методы управления пакетами. Причина, по которой SystemJs в настоящее время не используется, заключается в том, что сложность зависимостей слишком высока, и SystemJs не может ее решить.В будущем мы увидим, можно ли ее расширить и решить с помощью плагинов SystemJs.
Глядя в будущее, для разработчиков написанный код может работать более естественно и просто, а стоимость понимания и обслуживания будет значительно снижена.
Добро пожаловать в интерфейс Amoy
- Ключевые слова для найма: визуальная конструкция / гик / фронтенд-инжиниринг / Node.js / веб-стандарты / производительность / эффективность
- Отправьте свое резюме:butian.wth@alibaba-inc.com
- Или добавьте WeChat
Конечно, есть еще идеи по построению и модуляризации фронтенда, и мы тоже можем общаться вместе.
Давайте создадим двойное 11 вместе
использованная литература
- Ракс:rax.js.org/
- imgCook:imgcook.taobao.org/
- формальный раствор:GitHub.com/Alibaba/Фуру…
- Официальный блог Taobao:fed.taobao.org/
- Колонка знаний о внешнем интерфейсе Taobao:zhuanlan.zhihu.com/tmallf2e