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

1. Инструменты

1.1.1. yarn/npm

npm.taobao.org/), в противном случае очень медленно.

1.1.2. npm-check-update(ncu)

GitHub.com/T Jun нет / даже ...Для проверки обновления библиотек зависимостей скорость разработки интерфейса слишком высока, и необходимо часто отслеживать важные сторонние версии зависимостей.Одним из них является устранение скрытых ошибок, а другим - предотвращение несовместимости API и трудностей с обновлением. вызвано длительным отсутствием отслеживания.

1.1.3. lerna/yarn workspace

lernajs.io/ пряжа pk more.com/ru/docs/ Я делаю…Альтернатива. Крупномасштабный проект или организационная структура проекта библиотеки классов, lerna в настоящее время используется во многих известных проектах. Это не согласуется с идеей архитектуры микроинтерфейса, которую мы в настоящее время изучаем, и может использоваться в небольшой области.

1.1.4. create-react-app

GitHub.com/Facebook/взрослый…create-react-app становится все более популярным в отрасли, в конце концов, это официальная функция Facebook.

1.2. Развитие

1.2.1 IDE — webStrom/vscode

VSCode, бесплатный и с открытым исходным кодом, богатый плагинами, широкими возможностями настройки и хорошей динамикой развития. Наиболее часто используемыми плагинами являются EditorConfig, Prettier, TODO Highlight, Trailing Spaces, ESlint, Jest, Node.js Extension Pack, Debugger for Chrome, Git Extension Pack и т. д., вы можете обратиться сюда:Уууууу. Вернуться cool.com/articles/F V…WebStorm интеллектуален, отличается высокой эффективностью разработки, относительно большим количеством подключаемых модулей и высоким качеством. Кроме того, VSCode также хорош для разработки Java, а также для поддержки Flutter.

1.2.2. Компилировать пакет --webpack

Выбор вебпака бесспорен, комьюнити активное, а обновления быстрые. Vue, angular и react — все это используемые веб-пакеты.

1.2.3 Проверка кода — eslint/editorconfig/prettier/husky/tslint

Используйте eslint и взаимодействуйте с подключаемым модулем VSCode для проверки в режиме реального времени.Что касается стиля кодирования, используйте editorconfig и prettier для совместной работы с подключаемым модулем VSCode для стандартизации. В прошлом база правил eslint в основном использовала правила компании airbnb и Google. Позже я почувствовал, что многие правила были слишком строгими, и мне пришлось написать много игнорируемых правил. В конце концов, я напрямую использовал тот, который поставляется с create- react-app или рекомендация красивее.Правила проще. В качестве альтернативы используйте хаски (GitHub.com/та же партия о/ху…Проверяйте lint перед фиксацией, чтобы избежать внесения плохого кода в кодовую базу. Те, кто использует ts, могут использовать tslint

1.3 Отладка

使用webpack提供的hot-reload开发服务和source-map，利用chrome浏览器自带的调试能力，同时结合相关开发工具插件： (GitHub.com/Facebook/Горячие…) (GitHub.com/Горячее цинкование/Горячее…) (GitHub.com/Не дайте себя обмануть деталями/Поклонение…) 如需与后台api服务联调，可以通过react-app-rewired配置webpack的devServer做反向代理实现。Веб-пакет Просто .org/config как у ATI...

1.4 Тестирование

TODO: отсутствие интеграционного тестирования, e2e-тестирования и других сопутствующих инструментов.

1.4.1. Установка тестирования

Существует много фреймворков для внешнего тестирования, в настоящее время основным направлением должно быть jest и jest-dom, в основном потому, что оно поставляется с приложением create-react-app, а также facebook и вспомогательной библиотекой react-testing-library. Другими распространенными являются mocha, jasmine, ava и т. д., а также библиотеки утверждений, такие как chai/sinon, которые в основном одинаковы.

1.4.2 Проверка компонентов

Стоит упомянуть два высокоуровневых фреймворка для тестирования, разработанных для компонентов React:airbnb.io/enzyme/ storybook.js.org/В настоящее время мы его не использовали, в основном потому, что юнит-тестов было написано меньше, а разработка отставала.

1.4.3. Инструменты передачи данных

Также есть разные mock-библиотеки, которые мало используются, в основном достаточно тех, что идут в комплекте с jest, и есть mock-библиотека ajax:GitHub.com/CTI ММ и М/Ашин…Это используется в сочетании с тестом библиотеки axios. Существуют также инструменты для создания вспомогательных тестов, зависящие от данных, такие как:GitHub.com/Мар АК/faker…

1.5. Развертывание

2. Компоненты

2.1.2 Управление состоянием

MobX (mobx.js.org/).

2.1.3. Внешняя маршрутизация

В настоящее время реактивный маршрутизатор (реагировать-обучение.com/реагировать-маршрут…) является почти стандартом де-факто, но направление его улучшения версии 4–3 не очень разумно, потому что интерфейсная маршрутизация также по сути является категорией управления состоянием, но она изменяет такие события, как onEnter и onLeave, чтобы использовать жизненный цикл компонента. Приносит связь, которая является шагом назад. На самом деле идея маршрутизации типа https://github.com/nareshbhatia/mobx-state-router правильная, но она не такая мощная, как react-router, и самое главное отсутствие вложенности. Поэтому пока однозначно будет использоваться react-router, но если найдется более качественный, то можно подумать о его замене в будущем.

2.2 Интерфейс

2.2.1 Базовый комплект

Прежде чем у нас будет достаточно рабочей силы для разработки собственной библиотеки компонентов, использование некоторых крупных сторонних наборов поможет быстро запустить продукт и поддерживать интерфейс. В настоящее время и(ant.design/index-cn)是我们的主UI库，其自带的组件可以解决80%到90%多的原型实现问题，还可以通过修改less变量实现一定程度的界面风格定制。在antd之前也验证过一些其它的套件，其中有一套也是阿里系的（具体名字和地址忘了，两年前antd的table不支持多级表头的时候考虑过它），还有http://amazeui.org/等，最终从组件的完整性和易用性方面看，还是antd胜出。 Вот некоторые ссылки:Билеты микро письмо .QQ.com / есть / JF я могу 64E1 R ...

Вы также можете использовать слияние (fusion.design/) Основное различие между этим набором фреймворков пользовательского интерфейса и antd заключается в возможности настройки компонентов, таких как настройка текста, границ, размеров, закругленных углов, теней и т. д. каждого компонента пользовательского интерфейса, а затем ввод файлов стилей для разработки и использования , нет необходимости в разработке Измените стиль компонента, и дизайнер визуального взаимодействия сможет его разработать напрямую.

2.2.2. CSS in JS

В дополнение к непосредственному внедрению файлов css/less самим webpack, есть несколько инструментов, которые могут повысить эффективность написания css: стиль шрифта и csstipstypestyle.github.io/), особенно полезно для элементов управления гибкой компоновкой. Рекомендуется использовать jss, но не рекомендуется использовать jss напрямую. Рекомендуется использовать отличный фреймворк пользовательского интерфейса с открытым исходным кодом для инкапсуляции jss, @material-ui/styles и @material-ui/system могут сократить объем написания CSS.

2.2.3 Библиотека карт

百度的ECharts及其React封装 (echarts.baidu.com/) (GitHub.com/сопроводить его из города/плохие поручения…) Рекомендуется использовать antV, ведь это решение для визуализации производства крупной компании.Рекомендуется использовать пакетную версию bizCharts (bizcharts.net/products/bi…) Есть несколько ссылок:Билеты Micro Channel .QQ.com / IS / PG WW S EV ... помните

2.2.4 Библиотека иконок

Antd поставляется с небольшим количеством иконок, большинство из которых по-прежнему используют библиотеку иконок Ali (www.iconfont.cn/), но использовать его все равно неудобно. В большинстве случаев значки реакции (react-icons.netlify.com/) достаточно, он содержит Шрифт классный(fontawesome.com/) И значки Material Design (Google.GitHub.IO/material-the…Иконка с открытым исходным кодом.

2.3. Окружение

2.3.1 Доступ к данным

В настоящее время мы используем fetch(github.github.io/fetch/), готовый к замене на axios (github.com/axios/axios), последний проще в использовании и имеет более простую макетную схему для легкого тестирования.

2.3.2. Интернационализация

Есть также много вариантов в программах интернационализации.GitHub.com/Yahoo/реагировать…Это также рекомендуется приложением creatre-react-app по умолчанию, но оно не кажется особенно гибким. Подготовьтесь к принятию решений, связанных с i18next: (GitHub.com/i18next/i18…) (GitHub.com/Multimedia RK OVA имеет н…) 这个方案还可以同时用于node端，使得前后台统一使用同一套locale映射文件。

整个前端包括node代码里用的最多的小工具就是lodash了，取代了更早的underscore，不过现在要被ramda取代了。 ramda的知名度不如lodash，但起点高，相当于lodash/fp。在前端函数式编程中使得代码非常简洁，也可以在命令式下直接使用，只需要多写一个参数而已，完胜lodash。 (lodash.com/) (ramdajs.com/)
另外一个比较重要的常用工具库就是moment了，不过间接使用的多些（日期控件），直接用主要是做日期格式化和计算等。 (momentjs.com/)
还有一类工具是数据校验工具，目前直接用的也不多，主要用了antd封装的form校验，不过其内部库的校验规则还是值得了解一下： (GitHub.com/один и/как…) (GitHub.com/skater Большой V85…) Последний — это инструмент проверки, используемый другим набором механизмов проверки формы в mobx, который можно использовать для замены antd.

3. Другое

3.1. WebSocket

(socket.io/), (GitHub.com/socketIO/so…) В настоящее время наиболее часто используемым является socket.io.

3.2. JWT

(jwt.io/), (GitHub.com/AU TH0/Прослушивание — ...) Во внешней аутентификации используется схема JWT в сочетании с коммуникационной библиотекой (fetch/axios) для передачи информации аутентификации через заголовок протокола HTTP и выполнения анализа полезной нагрузки на стороне клиента.

3.3. Service Worker

В настоящее время это пассивно используется через структуру create-react-app, которая относится к оптимизации производительности и тщательно не изучалась.

3.4. GraphQL

(facebook.github.io/relay/), (www.apollographql.com/) Я провел техническую проверку этих двух решений и чувствую, что еще не время запускать их в производство, поэтому я не знаю, как обстоят дела сейчас.

3.5. NodeJS

Роль NodeJS во фронтенд-разработке в основном заключается в передаче API и обработке конвертации форматов данных, а реальный бэкэнд-сервис по-прежнему находится на Java. Раньше NodeJS активно использовался, включая большое количество функций, таких как доступ к базе данных, запланированные задачи, отправка сообщений и аудио- и видеоинтерфейсы. Позже выяснилось, что эффект был не очень хорошим. Основная причина заключалась в том, что нехватка человеческих ресурсов и плохая гарантия качества кода. Если в будущем останется небольшое количество кода узла, подготовьтесь к использованию каркаса яйца Али:eggjs.org/

3.6 Архитектура микроинтерфейса

Является ли внешний микросервис, который в настоящее время находится в центре внимания исследований в этой области, все еще находится на стадии прототипа, готов к запуску на основе одного спа, это наиболее близкое к нашей фактической текущей программе можно найти: (single-spa.js.org/), (alili.tech/tags/микрофронтенды/) В связи с этим, если у вас есть хорошая информация или идеи, мы можем изучить их вместе.Это наиболее благоприятная техническая основа для унификации продуктовой линейки.