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

BUT! Придя сюда, обзор примерно такой:

Здесь нужно разобраться, что? Есть другие задачи? это ненормально;

приоритет? параллельно! Они очень важны.Параллелизм это нормально.У меня тут тоже несколько вещей параллельно.DeadLine это число ххх;

Вы почти закончили, видите? Организуйте документ с четким описанием осадков;

Есть ли у требования, которое вы сделали в прошлый раз, адрес, есть ли соответствующее введение, есть ли этапы реализации и где размещены компоненты? Непонятно, вы пишете документ;

Привет всем, здесь есть место, где я думаю, что это очень фрагментировано, это нехорошо... это нехорошо..., я думаю, это можно сделать! —— Хорошо, вы отвечаете за последующие действия и решаете их в соответствии со своими идеями.

Здесь я перестроил библиотеку, которая может единообразно обрабатывать эти коллекции.

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

Однако это не будет ...

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

Есть ли здесь новая технология? Вы тратите время на исследование, написание документа и подготовку к сеансу обмена;

Почему в последнее время вербовка молчит? Таким образом, все вместе будут собирать резюме с 21 до 21.30 вечера.

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

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

Великолепная линия разделения

Ну, изначально я хотел сделать несколько вступлений, но не ожидал, что напишу сразу так много. Уф~ Я вдруг чувствую, что я выбрасываю токсины по всему телу, так здорово! Хахаха

Я долго думал над тем, какая часть моей работы в этом году недостаточно хороша, или какую часть я сделал не так хорошо, как другие.

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

Воспользовавшись выходным и свободным временем, поговорим о технологиях!

задний план

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

Помню, когда я впервые поделился этим с коллегой, он сказал:

эмм, хотя вы так много сказали, я не думаю, что это так... чувство?

Чувствуете себя бесполезным?

Ах, эмм, раз ты это сказал, как ты это сказал. Я думаю, что если мы сейчас введем бит, это сильно нагрузит нашу повседневную работу.

Такая реакция нормальна Я видел бит на официальном сайте Vue в начале 2018. Тогда я кликнул по нему и просмотрел. В то время я чувствовал, что это бесполезно, не более чем «мерзавец в вертикальном поле внешнего интерфейса». Отечественная поддержка не очень, и даже приличного китайского документа не найти.

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

Тем не менее, методы и концепции бита очень ценны и могут быть использованы для справки!

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

Знакомство с компонентами

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

Тогда обслуживание компонентов будет становиться все более и более важным. Итак, давайте посмотрим, как большинство команд поддерживают компоненты в наши дни!

Большой тип библиотеки, Antd, Стандартный большой тип библиотеки Element
Одноразовые полные бизнес-компоненты, однажды использованные и никогда не обслуживаемые
Тип высокого повторного использования, он должен быть упакован отдельно и использоваться другими на первый взгляд, такими как: видеоплеер
Вторичный тип инкапсуляции, некоторые библиотеки написаны на нативном js, упакованы и импортированы напрямую как компоненты
Тип интеграции проекта, вместе с бизнес-проектами, смешанный магазин, независимо от вас и меня.

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

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

Удобный

组件嘛，当然是最快能跑起来，最方便能看到效果最好咯。就这点来讲，还有什么比直接在业务项目里撸组件更快的方式吗！ ?

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

данные? У вас нет магазина? Если вы импортируете его, вы получите данные!

Что видишь, то и получаешь, а эффект теперь можно увидеть на странице сразу после его изменения! С этим не поспоришь..

Таким образом, очень быстро разработать этот компонент, но с точки зрения реализации всех бизнес-требований, действительно ли он самый быстрый? Если этот подход самый быстрый, почему так много команд делают упор на преципитацию, инкапсуляцию и абстракцию?

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

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

ремонтопригодность

В результате все запустили огромный проект по абстрагированию и исправлению компонентов в полном разгаре.

В начале в команде обычно будет более надежный и способный парень (а? Почему я?), который поставит Webpack, Babel, TypeScript, Sass\Less, структуру каталогов, структуру модульного теста, спецификацию кода, спецификацию обзора, разбирается спецификация релиза, а затем пишется стандартный компонент.Напоследок подчеркну, что вы должны тщательно поддерживать компонент в соответствии со спецификацией, писать документацию и писать модульные тесты.

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

Просто когда все наслаждались этим, однажды они узнали, ах, как наша библиотека компонентов упаковала 10м 😱!

Потом я нашла надежного и способного молодого человека (да, это снова был я) и пошла его проверять.Кто представил эту библиотеку? Разве этот компонент уже не имеет его? Лодаш работает не так! Что делает этот компонент, почему нет документации?

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

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

Размер компонента, производительность загрузки

Свяжитесь с некоторыми периферийными инструментами webpack, такими какanalyzerНетрудно понять, какой пакет «забирает» столько трафика.

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

Поскольку этот тип компонента может привести к значительной зависимости от третьих сторон, таких как видеоплеер, Banner Swiper и т. д.

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

Но вы знаете, стоимость этого слишком высока, если у меня будет время, я уверен..... балабала... (Вообще, если вы скажете программисту лучшее решение, если только он не участвует в Дизайн решения, а то большинство ответов такие 🙄)

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

Описание компонентов и индексируемость

Босс, в этом году мы накопили более 200 компонентов, некоторые из которых хорошо написаны и поддерживают более 20 проектов.

Ух ты, здорово! Давай, покажи мне, как выглядят компоненты, которые ты написал? А, это, давайте посмотрим на эту страницу, которую мы сделали, эта страница использует эти компоненты, балабала...

Дизайн: Я слышал, что вы разместили более 200 компонентов, можете ли вы показать нам, какие компоненты там есть? Мы можем обратиться к этим компонентам для вывода в следующем проекте, чтобы снизить затраты на связь.

Интерфейс: @Everyone Этот компонент есть в нашей библиотеке? Да, КаскадСелект. О, как это работает? Документация есть? ...... Посмотрите на исходный код. хорошо..😅

Описание и индексируемость компонентов фактически уступают только доступности компонентов, а то и выше.

Представьте, если бы вы написали гигантский компонент сегодня, повторное использование, дизайн интерфейса и дизайн взаимодействия — все это очень хорошо, но есть ли у вас какой-то канал, чтобы все сразу узнали, хотите ли вы провести встречу для этой цели? Приходите сегодня, чтобы занять 1 час вашего драгоценного времени и представить гигантский компонент крупного рогатого скота, который я написал сегодня. 🤕

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

Компонент индекса, позвольте мне поделиться с вами картинкой:

Если однажды библиотека компонентов вашей команды станет такой, это будет счастливая и приятная вещь!

Я тоже знаю, что это хорошо! Кто не знает! Если бы у меня было время, я бы обязательно....балабалила...

То есть вы хотите сказать, что каждый раз, когда мы пишем компонент, нам нужно не только дополнять документацию, но и дополнять инструкции по использованию и скриншоты! ?

Да, вам нужно собрать библиотеку отдельно, а также рассмотреть возможность настройки Webpack, Babel, TypeScript, Sass\Less, структуры каталогов, структуры модульных тестов, спецификации кода, спецификации обзора, спецификации релиза и т. д. 😎

какие! Черт! ! ПРОЧЬ! ! 🤜

лучшая практика

Сказав так много, я в основном хочу, чтобы читатели думали вместе.Это также мой стиль письма (например, рассказывание историй).Большая часть контента на самом деле является проблемой, с которой столкнется пользователь интерфейса.

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

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

Для нашей команды используется React, поэтому начнем с скаффолда для компиляции React.

如果把每一个组件都作为单独的NPM项目发布，首先要考虑的是，前端一系列的编译环境。 If I have a front-end component N project, webpack each front-end component library, babel these need to repeat the configuration, then it is to be the first big thing, I just wanted to write a component of it, why should we подумай об этом.所以我们的脚手架首先要具备一些基础的编译命令。

Ну, нет имени, он временно называется: comp.

comp new обрабатывает создание нового стандартного компонента по шаблону
- Инициализировать структуру проекта стандартного компонента, все получают доступ ко всем командам comp
- Инициализировать репозиторий Git
- Инициализировать конфигурацию облачной сборки CI/CD
comp start управляет ежедневной разработкой, дополнительным отображением отдельных компонентов и возможностями отладки
comp watch обрабатывает компиляцию babel и scss watch для сценариев npm link
comp babel занимается компиляцией пакетов npm
comp dev занимается мониторингом и компиляцией пакетов umd для отладки прокси.
comp build обрабатывает окончательный процесс компиляции
- webpack компилирует пакеты UMD
- Вавилонская сумка
- Автоматически делать скриншоты компонентов в процессе CI\CD
- Автоматически генерировать README в процессе CI\CD
- Другие крючки
comp test обрабатывает модульные тесты jest

Тогда после инициализации компонента структура каталогов будет выглядеть так:

export default function(Component: typeof IComponent, mountNode) {
  /** DOCS_START 请将Demo生成方法都写在以下区块内，用于生成README及Riddle **/

  ReactDOM.render(
    <Component
      navigation={true}
      pagination={true}
      autoplay={true}
      dataSource={[
        {
          href: 'http://xxxxxxxx',
          image: 'https://xxxxxxx.cdn.com/tfs/TB1jHkBmNv1gK0jSZFFXXb0sXXa-1440-343.png',
        },
        {
          image: 'https://xxxxxxx.cdn.com/tfs/TB1Y_XacrY1gK0jSZTEXXXDQVXa-1416-813.png',
        },
      ]}
    />,
    mountNode,
  );

  /** DOCS_END **/
}

Конфигурации webpack\babel в структуре проекта нет, конечно, если у вас есть особые требования к конфигурации, вы можете создатьcomp.config.jsНастроить (здесь заимствует много существующих методов обработки cli).

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

Это какие-то очень базовые функции, конечно же, это неотъемлемая часть этих основных команд, подробно не буду, фокус сзади.

Представьте функцию с помощью следующих вопросов:

Каков ваш обычный процесс разработки компонентов?

Обычно он делится на компоненты в соответствии с проектным проектом.

Затем перейдите к созданию компонента и, наконец, внедрите его в проект и разработайте его во время просмотра.

Как вы проверяли реквизиты, которые вы предоставили при разработке компонента?

Самый простой — показать макет, чтобы увидеть эффект.

Или написать модульный тест?

Считается ли процесс написания Mock написанием Usage?

Это надо учитывать, но такие разбросаны по разным проектам, а некоторые моки удаляются после проверки.

Кто может свободно добавлять их в README во время разработки.

Почему не пишут документацию?

Разумеется? Из-за лени?

Тогда почему ты не пишешь? эмм, это потому, что... речь идет о написании документа. Его не обязательно кто-то читает, и это отнимает много времени! Так много потребностей бизнеса! Если бы у меня было время, я бы обязательно....балабалила...

Хорошо, давайте перейдем к следующему вопросу

Сколько частей нужно для хорошей документации компонента?

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

Вот некоторые из основных обязательных вводных:Применение,Входной параметр реквизита, лучше иметьснимок экрана!

Также есть инструкции по установке, разработке и компиляции.

Если глазурь на торте, лучше иметь несколько значков.Позвольте мне представить исходный код TypeScript и сколько загрузок.

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

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

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

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

Итак, если мы можем собрать все вышеперечисленные данные, можем ли мы использовать скрипт?Автоматически генерировать документацию READMEкакие?

Применение

На самом деле очень просто собрать данные об использовании.Если вы позволяете компонентам развиваться независимо, можете ли вы сохранить фиктивные данные об этих использованиях?

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

Так что в строительных лесах, покаdocs.tsЗапишите фиктивные данные, относящиеся к компоненту, который необходимо отладить на странице, страница может отображать внешний вид компонента, а фиктивные данные могут быть сохранены какREADMEданные документа.

Кроме того, если вывод интерфейса этой демонстрации гарантированно будет однородным, он также может поддерживать прямую генерацию вCodePen, Разгадывайте эти отредактированные онлайн-коды.

Только представьте, если в вашем README есть абзац: Нажмите, чтобы испытать его сейчас, после того, как вы перепрыгнете, вы сможете отредактировать его онлайн и увидеть эффект в реальном времени, это будет своего рода наслаждением для любого одноклассника, который увидит ваш компонент 😉

Параметры компонента / Реквизит

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

После некоторого github я наконец нашел нишевую библиотеку, которая может справиться с этим.react-docgen-typescript

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

Точно так же на основе этой возможности его можно расширить до плагина веб-пакета.react-docgen-typescript-loader, добавьте его в статическое свойство компонента__docInfoattribute для объявления содержимого его атрибута, поэтому процесс разработки компонента может достичь следующих эффектов:

Скриншот / предварительный просмотр

С компонентами и демками у вас до сих пор нет скринов?

непосредственно в процессе сборки сpuppeteer, читать бежатьdocs.tsВизуализируйте компонент, сделайте снимок экрана и отправьте его в CDN вместе с процессом создания компакт-диска в облаке, и все готово!

Наконец, в README добавлены некоторые специальные теги, и README может быть заменен и сгенерирован в процессе создания облака! Это не влияет на содержимое самого файла README.

Наконец, Дуанг! Получается полный, красивый и подробный документ, за весь процесс мы не писали никакого README-контента, все очень просто и стандартно выводится.

Эпилог

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

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

Затем вокруг этих данных и инструментов можно построить и расширить множество функций и платформ.

Вот несколько каштанов:

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

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

Посмотрите на эффект в сочетании с панелью настроек визуализации:

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

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

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

Я фронтенд-инженер, который любит жизнь,личный блог! Йоу! 🤠

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

Международный мидл-офис Ali набирает сотрудников! Front-end, Java требует P6 и выше! Заинтересованные студенты могут отправить свои резюме на

yee.wang@alibaba-inc.com

С нетерпением жду вашего присоединения~😻😻