Какие передовые технологические точки будут популярны в 2022 году?

внешний интерфейс JavaScript
Какие передовые технологические точки будут популярны в 2022 году?

"Что загорится в 2022 году? Чему научиться? Эта статья участвует«Поговорим о технологических тенденциях 2022 года»Требуют документов"

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

Передовые строительные инструменты, представленные Vite, выходят на путь ускорения

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

Основной код:

<script type="module">
  import lodash from 'https://cdn.skypack.dev/lodash';
</script>

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

image-20220111113300855

благодаряESMСамый быстрорастущий фреймворк сборкиVite, новый инструмент построения в интернет-концерте. Вы можете подумать об этом как об этом сервере разработки + комбинацию инструментов для упаковки, но более легкий и быстрее. От руки вас да, текущий ежемесячный объем загрузки NPM превышает130万Второсортный.

来自尤大的预测

основной принцип

  • В среде разработки модули загружаются браузером в виде собственного esm.

  • В производстве модули традиционно упаковываются Rollup со многими оптимизациями по умолчанию.

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

基于打包器的开发服务器

基于 ESM 的开发服务器

Преимущество фреймворка

  • Быстро, очень быстро, с использованием собственных файлов ESM
  • Сверхбыстрая HMR (горячая перезагрузка)
  • Механизм плагина Rollup
  • Естественная приоритетная поддержка Vue3
  • .....вы приходите, чтобы испытать майнинг

богатая экология

image-20220110114546258

Введение в дополнительные инструменты сборки:CSS-tricks.com/comparing — Он…

Эффективный комплект для разработки с комбинацией Vue3+Ts+Vite+Pinia

Выше упоминалось, что Vite основан на синтаксисе Ts и имеет естественную поддержку Vue3, а также, в частности, основной толчок.PiniaКак лучшая альтернатива vuex. Этот набор комбинаций может стать лучшим выбором за 22 года разработки Vue. я построил одинБазовый шаблон Vue3+Vite+PiniaДля справки, в будущем будут добавлены некоторые наборы инструментов (самоупаковываемые). Это только основа, вы можете добавить Volar / Vue Router / Vue Devtools / в соответствии с вашими потребностями проекта.VueUse/ Элемент Плюс / NutUI и т. д.

Наша команда начала использовать Vue3 для разработки проектов в марте 2021 года, и это также была первая партия проектов, для сборки которых использовался vite. Высшая вершина беспроводного бизнесаPV30万+, проект в целом работает стабильно, и на стороне Android больше проблем с совместимостью (исторические проблемы). Общие преимущества этой комбинации:

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

Совместное использование инструментария

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

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

    image-20220110125758056

  • tailwindcss, беспорядок Эммы Сян, не написав ни строчки CSS, 3 минуты на странице. Не подходит для младшего и среднего уровня фронтенда, рекомендуется сначала изучить основы, а затем использовать фреймворк.

    tailwindcss-1

    tailwindcss-2

  • Vue I18nЭто плагин интернационализации для Vue.js, Если вы хотите создать фреймворк с открытым исходным кодом, предпочтительный плагин для интернационализации.

  • ViteSSG, SEO-оптимизация, этот проект немного интересен, вы можете поиграть с этим решением, раньше я занимался SEO через рендеринг на стороне сервера, а позже узнал, что это можно сгенерировать прямо на сервере Vue3.

  • Vitest, Инструмент модульного тестирования на основе Vite, итерация в настоящее время происходит относительно быстро, особенно спонсорство золотой медали. Вы можете продолжать обращать внимание, и не рекомендуется использовать его в небольших проектах.

    image-20220110125605172

Исследование графической технологии Web3D

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

фон спроса

Где-то в октябре мы делали веб3D-проект, главной целью было построить небольшой город, чтобы каждый мог выполнять какие-то офлайн-задачи, основанные на корпоративной культуре, и получать вознаграждение, которое можно использовать для украшения города или обмена подарками. Например: вовремя писать ежедневные газеты, читать последние кадровые объявления, активно участвовать в культурных мероприятиях и т. д. Это уже не холодное push-уведомление или внутреннее письмо, мобилизующее всех на активную рабочую атмосферу.

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

Тогда заданное направление такое (заниматься полным стеком, back-end интерфейс произвольный, поэтому больше говорить не буду):

  • 3D-класс, легкий игровой симулятор города (базовый игровой процесс)
  • Весело держать пользователей в курсе (система скинов)
  • Достаточно легкий, чтобы играть, когда вы открываете Интернет

выход

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

小镇建筑-介绍new

доля

В рамках этого проекта наша команда также попробовала Three.js,PlayCanvas.jsВ ожидании фреймворка я немного разбираюсь в графических технологиях. Лично не рекомендуется слепо следовать таким популярным точкам, как VR, AR и Metaverse, чтобы войти в определенный сегмент. В конце концов, в хирургии есть специальности, поэтому сохраняйте чувствительность передовых технологий и делайте выводы на основе развития бизнеса компании. Если он может стимулировать развитие бизнеса, большинство компаний будут его энергично поддерживать.При итерации проекта у вас будет возможность по-настоящему углубиться в определенную технологию. Поскольку простое обучение и понимание — это не введение, очень вероятно, что какой-то навык (торможение) вы забудете после определенной вечерней гимнастики.

Попытка технологии low-code, чтобы помочь переднему концу войти в глубоководную зону

Возможность low-code решает не только проблему ускорения в 10-20 раз, но и является передовой практикой технологического развития для повышения эффективности работы предприятий. Интегрируя интерфейсные и серверные технологические приложения (здесь уровень приложений, а не технический уровень), он может решать различные сложные проблемы, с которыми сталкиваются предприятия.

принцип

проход переднего конца可视化拖拽式Интерактивная работа, бэкэнд через动态表单技术выполнить. Конечно, low-code платформы не так просты, как я сказал, и технологии, интегрированные каждой платформой, имеют свои особенности. Ниже анализируются несколько ключевых показателей.

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

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

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

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

Form技术原型

кейс

Используйте Schema для быстрого создания регистрационной формы на основе Vue3+antdv:адрес

image-20220110180918452

shcema-xrender

Его преимущество заключается в том, что он позволяет полностью отделить передовой персонал НИОКР от механической повторяющейся работы, и у него достаточно времени.划水Исследуйте новые технологии и решайте более сложные и сложные задачи.

Наша команда забрасывала этот аспект лет 17. Сначала решала только сборку статической страницы, а потом уже визуальное оформление бизнес-страницы. Однако из-за недостаточной энергии персонала, отсутствия итераций и обновлений он остался внутри компании и не смог запустить бизнес. Однако можно считать, что она заложила основу, в прошлом году я снова взялся за нее, ссылаясь на спецификацию схемы Json, основанную на业务Компания разработала собственную платформу инструментов повышения эффективности для удовлетворения потребностей мидл- и бэк-офиса, маркетинговых мероприятий для отдельных предприятий, официального веб-сайта, экрана данных и других потребностей.

lowcode

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

DevOps полностью реструктурировал все аспекты НИОКР.

Познакомьтесь с DevOps

За 21 год появилась еще одна технология, которая меняет процесс разработчика, как рисование со дна бочки, — это DevOps. Начиная с самой ранней одиночной архитектуры + каскадный режим,全栈Он очень популярен, вы можете сами разработать демо, найти сервер для установки окружения, разархивировать проект и запустить сервис. Режим одиночный, дергайте лог при возникновении проблемы, и пишите какие-нибудь скрипты для мониторинга лога, автоматического резервного копирования и т.д., чтобы развязать себе руки.

Devops

С увеличением объема бизнеса одна машина не может его нести, добавляя машины, одна машина становится многомашинной, и архитектура тоже начинает объединятьсяNginx,Redis,CDN,Natи другие общие базовые услуги. С развитием нескольких машин (тысячи крупных компаний) и моделей совместной работы с несколькими людьми выявляется все больше и больше проблем.全栈На этом этапе роль ослаблена, а аватарам не хватает навыков, развитие сосредоточено на бизнесе, а эксплуатация и обслуживание выходят на рынок. В настоящее время основными обязанностями оператора являются: техническое обслуживание оборудования, техническое обслуживание сетевого оборудования, администрирование баз данных, базовое техническое обслуживание, мониторинг данных и т. д. Персонал по эксплуатации и техническому обслуживанию умеет писать различные развертывания, отслеживать сценарии и сокращать механическое дублирование работы. . Порог требований к эксплуатации и техническому обслуживанию стал выше, качество отраслевых разработчиков эксплуатации и обслуживания неравномерно, а проблема объема не может быть решена людьми за короткое время. По мере того, как архитектура становится все больше и больше, стоимость взаимодействия процессов становится выше, процесс выпуска становится длиннее, а тесты планируются на неопределенный срок, а выполнение требований становится уткой.

交付过程

После выхода в интернет периодически появляются результаты

上线以后

Микросервисы + DevOps, основная архитектура, чтобы иметь дело с развитием технологий и доставкой объема BAT-уровня. Все аспекты проекта от НИОКР до поставки эффективно управлялись, и全栈Это также играет свою роль, больше не отвлекая от обучения эксплуатации и обслуживанию, а отвлекает от клиентской и конечной стороны бизнеса.

wiki定义微服务:Микросервисы (английский язык: Microservices) — это стиль архитектуры программного обеспечения, основанный на небольших строительных блоках (Small Building Blocks), сосредоточенных на одной ответственности и функции, и использующий модульный способ составления сложных крупномасштабных приложений.Функциональные блоки взаимодействуют друг с другом. другой, использующий набор API, не зависящий от языка/языка.

devops-marketplace-infinity-loop

DevOps平台常用工具

Платформа DevOps

Таких платформ много, поэтому я не буду перечислять их по отдельности, все зависит от того, какую из них покупает ваша компания. Поделитесь DevOps, которые в настоящее время используются в некоторых инновационных проектах нашей команды -Облачный эффект Alibaba, в настоящее время новые предприятия бесплатны, но количество транзакций ограничено. Для гибкой команды R&D нам не обязательно понимать принципы каждого процесса.Если мы сможем лучше выполнять свою работу и начать работу с низким порогом, то это будет лучше всего.

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

image-20220111134115788

  • совместная работа над проектом, чтобы решить проблему управления требованиями PM, встроенные мощные возможности управления процессами.
  • управление кодом, нижний слой эквивалентен gitlab, но здесь интегрирована экология и можно делать контекстные системные вызовы.
  • сборочная линия, это очень D, поддерживает богатый механизм подключаемых модулей, пользовательские сценарии и т. д., интеграцию CICD.
  • Склад продукции, является зеркальным складом, поддерживает Maven, Npm, общие продукты и т. д.
  • Статистика производительности, можно понимать как средний уровень BI с множеством таблиц измерений для отчетов об измерениях, отправки кода, количества дефектов, количества задач и т. д.
  • доставка приложений, APPStack, используемый для управления кластерами контейнеров, кластерами K8S, развертыванием приложений, развертыванием среды и т. д.
  • облачная разработка, редактор облачного кода DevStudio, разработанный Alibaba самостоятельно, был загруженOffer, Опыт очень хороший.Самое быстрое развертывание составляет 10 секунд, а временное доменное имя автоматически выделяется для отладки.
  • ..... испытайте это на себе

конвейер опыта

кVVT WarehouseДля этого случая разработайте процесс.Если есть основное действие отправки или слияния, будут запущены проверка кода и модульное тестирование, и робот DingTalk будет уведомлен, а затем код будет создан и, наконец, опубликован в указанном каталоге. сервера Alibaba Cloud.

Сначала создайте конвейер, привяжите репозитории и ветки github, настройте веб-перехватчики репозитория и прослушайте события фиксации.

流水线配置

webhook监听

Во-вторых, настроить сканирование кода, опционально использовать локальную конфигурацию ESLint, добавить плагин робота DingTalk (механизм плагина может многое)

配置代码扫描和

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

执行代码扫描

image-20220111160502464

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

5G ускоряет совершенствование веб-коммуникаций

WebRTC

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

  • 2012:Google интегрировал это ПО в браузер Chrome, а Opera изначально интегрировала WebRTC.
  • Июнь 2013:Mozilla Firefox[5] выпустила версию 22.0 для официальной интеграции и поддержки WebRTC.
  • ноябрь 2017 г.:Проект W3C WebRTC 1.0 официально завершен.
  • Январь 2021:WebRTC опубликован как официальный стандарт W3C и IETF (см.WebRTC 1.0: Real-Time Communication Between Browsers").

浏览器支持

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

Еще статьи о WebRTC

"Статус аудио- и видеотехнологии реального времени с открытым исходным кодом WebRTC》 "Кратко опишите преимущества и недостатки аудио- и видеотехнологии реального времени WebRTC с открытым исходным кодом.
"Интервью с отцом стандарта WebRTC: прошлое, настоящее и будущее WebRTC
"[Обмен совестью: Учебное пособие для разработчиков WebRTC Zero Basic (китайский)скачать вложение]
"Введение в общую архитектуру аудио- и видеотехнологии WebRTC в реальном времени
"Начало работы: что такое сервер WebRTC и как он подключается к звонкам?
"Основа технологии аудио и видео WebRTC в реальном времени: базовая архитектура и стек протоколов
"Говоря о технических моментах разработки платформы видеотрансляций в реальном времени

Выпущен Chrome97, появился протокол QUIC

Неделю назад был выпущен Chrome 97. Самым ярким событием является WebTransport.Благодаря мощному протоколу QUIC, WebTranport может обеспечить более сильные и быстрые возможности двусторонней связи и, как ожидается, будет использоваться в сценариях с низкой задержкой, таких как игры, живые трансляции и видеоконференции.

протокол двусторонней связи базовый протокол преимущество недостаток
WebSocket TCP/TLS Зрелая технология, простая в использовании Блокировка заголовка TCP, не поддерживает ненадежную связь вне очереди, не подходит для сценариев с малой задержкой.
WebRTC data channels SCTP/DTLS/ICE/UDP Может использоваться для сценариев P2P Сложный в использовании, не подходит для связи клиент/сервер
WebTransport HTTP/3 (QUIC/UDP) или HTTP/2 (TLS/TCP) Меньшая задержка, отсутствие проблем с блокировкой головы, больше применимых сценариев Еще не официальный стандарт

WebTransport использует HTTP/3 по умолчанию, а HTTP/2 используется в качестве резервной копии.

新一代协议

  • Обеспечьте надежную связь, аналогичную TCP, и обработайте сетевые аномалии, такие как потеря пакетов и перегрузка;
  • Шифрование на основе TLS/1.3 обеспечивает безопасность связи и позволяет избежать жесткости протокола, вызванной помехами промежуточных узлов;
  • Предоставляет возможности мультиплексирования, аналогичные HTTP/2, добавляет концепцию потока к сетевому транспортному уровню и решает проблему блокировки заголовков протокола TCP;

Литературный адрес

Популярность совместных демистифицированных алгоритмов OT

Я разработал полную систему документации стека в 2016 году, она разрабатывалась внутри компании в течение 5 лет и стала системой базы знаний вики по умолчанию. Однако, поскольку это любительское техническое обслуживание, первоначальный режим блокировки Websocket не был изменен, и также планируется, что версия должна быть реконструирована через 22 года, чтобы обеспечить возможность совместной работы в реальном времени. Конечно, текущая коллаборация устарела и уже не нова, а алгоритм ОТ, стоящий за ней, незаметно ожил и был применен к различным сценариям. Совместная работа над онлайн-изображениями в режиме реального времени, совместная работа над проектами в реальном времени и даже редактирование видео.OT.

Ключевые технические моменты алгоритма OT: определение атомарных операций, механизм подтверждения версии, преобразование операций и передача состояния клиента. Немного запутался, да? Дабы всем было понятно, тоже ломал голову.Далее наглядная демонстрация прелести ОТ.

ot可视化原理

Адрес литературы:

наконец

В последние годы бизнес завяз, мучаюсь от учебы, с 17 лет前端网После того, как я вышел из сети, я больше никогда не вел блог. В последние годы в связи с изменением должностных обязанностей необходимо уделять больше внимания направлению развития технологий, моделям управления командой и процессам совместной работы. Так что я снова взялся за Блог, и я тоже надеюсь, что я такой一看就懂,一学就会Обмен может принести вам некоторое вдохновение. Я слепой монах, пожалуйста, обратите внимание, если вам интересно, ваша поддержка является движущей силой для моей следующей статьи.

22 года флага:

  • Q1, напишите книгу «JS Grammar of Advanced Front-end» и опубликуйте PR-кейс для вклада Oasis в открытый исходный код.
  • Q2, выпустить проект с открытым исходным кодом "Low Code FormSchema Middle Stage"
  • Q3, чтобы создать технический блог с определенным влиянием, с более чем 5000 поклонников
  • Q4, подать заявку на все виды технических конференций, чтобы поделиться гостями, построить индустрию IP, расширенное влияние

Группа друзей воды

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