"Что загорится в 2022 году? Чему научиться? Эта статья участвует«Поговорим о технологических тенденциях 2022 года»Требуют документов"
Некоторое время назад я писал о«Тенденции развития технологий фронтенд-индустрии в 2022 году»Статья, которая знакомит с направлением всей тенденции фронтенд-технологий. В этой статье в качестве отправной точки будет взято фактическое техническое решение, и мы поделимся с вами технологическим стеком нашей команды и направлением будущей деятельности.
Передовые строительные инструменты, представленные Vite, выходят на путь ускорения
ESM
Общая тенденция подобна сломанному бамбуку, потому чтоESM
Популярность упаковки произвела революцию в упаковочных инструментах, а также в пригодности дляESM
следующее поколениеCDN
разработка, бизнес-проекты начинают использовать нативнуюESM
заменить предыдущийBundle
решение, что привело к существенному улучшению опыта разработки и скорости веб-сайта.
Основной код:
<script type="module">
import lodash from 'https://cdn.skypack.dev/lodash';
</script>
Я до сих пор помню, когда мне было 20 лет, я жаловался на проблему со скоростью строительства, которая серьезно сказывалась на эффективности нашей разработки.
благодаряESM
Самый быстрорастущий фреймворк сборкиVite
, новый инструмент построения в интернет-концерте. Вы можете подумать об этом как об этом сервере разработки + комбинацию инструментов для упаковки, но более легкий и быстрее. От руки вас да, текущий ежемесячный объем загрузки NPM превышает130万
Второсортный.
основной принцип
-
В среде разработки модули загружаются браузером в виде собственного esm.
-
В производстве модули традиционно упаковываются Rollup со многими оптимизациями по умолчанию.
-
Среда разработки и рабочая среда используют один и тот же механизм плагинов Rollup, поэтому компиляция одного модуля совместима в среде разработки и рабочей среде.
Преимущество фреймворка
- Быстро, очень быстро, с использованием собственных файлов ESM
- Сверхбыстрая HMR (горячая перезагрузка)
- Механизм плагина Rollup
- Естественная приоритетная поддержка Vue3
- .....вы приходите, чтобы испытать майнинг
богатая экология
Введение в дополнительные инструменты сборки: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.
-
tailwindcss, беспорядок Эммы Сян, не написав ни строчки CSS, 3 минуты на странице. Не подходит для младшего и среднего уровня фронтенда, рекомендуется сначала изучить основы, а затем использовать фреймворк.
-
Vue I18nЭто плагин интернационализации для Vue.js, Если вы хотите создать фреймворк с открытым исходным кодом, предпочтительный плагин для интернационализации.
-
ViteSSG, SEO-оптимизация, этот проект немного интересен, вы можете поиграть с этим решением, раньше я занимался SEO через рендеринг на стороне сервера, а позже узнал, что это можно сгенерировать прямо на сервере Vue3.
-
Vitest, Инструмент модульного тестирования на основе Vite, итерация в настоящее время происходит относительно быстро, особенно спонсорство золотой медали. Вы можете продолжать обращать внимание, и не рекомендуется использовать его в небольших проектах.
Исследование графической технологии Web3D
В предыдущем обмене я уже написал некоторые, и мне не нужно делать больше направления развития тренда.В основном в нашем актуальном случае, развитие этой технологии в основном.
фон спроса
Где-то в октябре мы делали веб3D-проект, главной целью было построить небольшой город, чтобы каждый мог выполнять какие-то офлайн-задачи, основанные на корпоративной культуре, и получать вознаграждение, которое можно использовать для украшения города или обмена подарками. Например: вовремя писать ежедневные газеты, читать последние кадровые объявления, активно участвовать в культурных мероприятиях и т. д. Это уже не холодное push-уведомление или внутреннее письмо, мобилизующее всех на активную рабочую атмосферу.
О чем должен думать этот проект, так это о том, как разыгрывать трюки? Подавляющий механизм задач можно увидеть повсюду в основных приложениях, и пользователи уже устали играть. Моделирование грандиозного города требует установки приложения или большого человеческого участия. Облегченные приложения для геймификации действительно стали мейнстримом в последние годы, и популярность C4D Vision также соответствует ожиданиям пользователей в отношении свежести.
Тогда заданное направление такое (заниматься полным стеком, back-end интерфейс произвольный, поэтому больше говорить не буду):
- 3D-класс, легкий игровой симулятор города (базовый игровой процесс)
- Весело держать пользователей в курсе (система скинов)
- Достаточно легкий, чтобы играть, когда вы открываете Интернет
выход
выбор кадраOasis Engine, Чтобы повысить степень художественной реставрации, мы предоставляем набор стандартизированных процессов выпечки Blender. В процессе мы столкнулись с проблемой слишком большого количества моделей и недостаточного количества художников, поэтому мы разработали набор рабочих мест для рендеринга моделей (в будущем мы планируем внести свой вклад в сообщество, следите за обновлениями), которые могут быстро экспортировать коды моделей и рендеры. . Изображение для предварительного просмотра очень большое, я не знаю, можно ли его отобразитьИсходный адрес изображения
доля
В рамках этого проекта наша команда также попробовала Three.js,PlayCanvas.jsВ ожидании фреймворка я немного разбираюсь в графических технологиях. Лично не рекомендуется слепо следовать таким популярным точкам, как VR, AR и Metaverse, чтобы войти в определенный сегмент. В конце концов, в хирургии есть специальности, поэтому сохраняйте чувствительность передовых технологий и делайте выводы на основе развития бизнеса компании. Если он может стимулировать развитие бизнеса, большинство компаний будут его энергично поддерживать.При итерации проекта у вас будет возможность по-настоящему углубиться в определенную технологию. Поскольку простое обучение и понимание — это не введение, очень вероятно, что какой-то навык (торможение) вы забудете после определенной вечерней гимнастики.
Попытка технологии low-code, чтобы помочь переднему концу войти в глубоководную зону
Возможность low-code решает не только проблему ускорения в 10-20 раз, но и является передовой практикой технологического развития для повышения эффективности работы предприятий. Интегрируя интерфейсные и серверные технологические приложения (здесь уровень приложений, а не технический уровень), он может решать различные сложные проблемы, с которыми сталкиваются предприятия.
принцип
проход переднего конца可视化拖拽式
Интерактивная работа, бэкэнд через动态表单技术
выполнить. Конечно, low-code платформы не так просты, как я сказал, и технологии, интегрированные каждой платформой, имеют свои особенности. Ниже анализируются несколько ключевых показателей.
первый,структура данных, Структура данных низкокодового программирования полностью управляема, и пользователи могут создавать любые таблицы данных и выбирать различные типы полей. В дополнение к типам полей, общим для базы данных, программирование с низким кодом обычно инкапсулирует дополнительные типы полей.
Второй,ассоциация данных, может ли код многоуровневого перекрестного вызова быть автоматически сгенерирован в соответствии с моделью, стал ключевым показателем инструментов с низким кодом.
Более того,конфигурация страницы, текущее основное решение состоит в том, чтобыJson Schema, международный канонический словарь, который позволяет комментировать и проверять. В настоящее время существует множество фреймворков с низким кодом, использующих этот режим, например:XRender,vjsfПредставить позже.
Наконец, на основе механизма событий Seveless более сложные бизнес-процессы могут выполняться за счет гибкого определения функций и событий.
кейс
Используйте Schema для быстрого создания регистрационной формы на основе Vue3+antdv:адрес
Его преимущество заключается в том, что он позволяет полностью отделить передовой персонал НИОКР от механической повторяющейся работы, и у него достаточно времени.划水
Исследуйте новые технологии и решайте более сложные и сложные задачи.
Наша команда забрасывала этот аспект лет 17. Сначала решала только сборку статической страницы, а потом уже визуальное оформление бизнес-страницы. Однако из-за недостаточной энергии персонала, отсутствия итераций и обновлений он остался внутри компании и не смог запустить бизнес. Однако можно считать, что она заложила основу, в прошлом году я снова взялся за нее, ссылаясь на спецификацию схемы Json, основанную на业务
Компания разработала собственную платформу инструментов повышения эффективности для удовлетворения потребностей мидл- и бэк-офиса, маркетинговых мероприятий для отдельных предприятий, официального веб-сайта, экрана данных и других потребностей.
На самом деле, мы также думали о том, как сделать больше общих компонентов. По мере обогащения сценариев с низким кодом будут разрабатываться все более и более сложные компоненты. Это может стать еще одним порочным кругом, если каждая команда будет строить колеса за закрытыми дверями. Если, я говорю, если может существовать набор спецификаций, подобных схемам, для определения различных компонентов, даже сложных бизнес-компонентов, для формирования унифицированного и стандартизированного склада. Тогда учащиеся переднего плана смогут легко приобретать компоненты и повторно использовать их, а эффективность исследований и разработок снова повысится.
DevOps полностью реструктурировал все аспекты НИОКР.
Познакомьтесь с DevOps
За 21 год появилась еще одна технология, которая меняет процесс разработчика, как рисование со дна бочки, — это DevOps. Начиная с самой ранней одиночной архитектуры + каскадный режим,全栈
Он очень популярен, вы можете сами разработать демо, найти сервер для установки окружения, разархивировать проект и запустить сервис. Режим одиночный, дергайте лог при возникновении проблемы, и пишите какие-нибудь скрипты для мониторинга лога, автоматического резервного копирования и т.д., чтобы развязать себе руки.
С увеличением объема бизнеса одна машина не может его нести, добавляя машины, одна машина становится многомашинной, и архитектура тоже начинает объединятьсяNginx
,Redis
,CDN
,Nat
и другие общие базовые услуги. С развитием нескольких машин (тысячи крупных компаний) и моделей совместной работы с несколькими людьми выявляется все больше и больше проблем.全栈
На этом этапе роль ослаблена, а аватарам не хватает навыков, развитие сосредоточено на бизнесе, а эксплуатация и обслуживание выходят на рынок. В настоящее время основными обязанностями оператора являются: техническое обслуживание оборудования, техническое обслуживание сетевого оборудования, администрирование баз данных, базовое техническое обслуживание, мониторинг данных и т. д. Персонал по эксплуатации и техническому обслуживанию умеет писать различные развертывания, отслеживать сценарии и сокращать механическое дублирование работы. . Порог требований к эксплуатации и техническому обслуживанию стал выше, качество отраслевых разработчиков эксплуатации и обслуживания неравномерно, а проблема объема не может быть решена людьми за короткое время. По мере того, как архитектура становится все больше и больше, стоимость взаимодействия процессов становится выше, процесс выпуска становится длиннее, а тесты планируются на неопределенный срок, а выполнение требований становится уткой.
После выхода в интернет периодически появляются результаты
Микросервисы + DevOps, основная архитектура, чтобы иметь дело с развитием технологий и доставкой объема BAT-уровня. Все аспекты проекта от НИОКР до поставки эффективно управлялись, и全栈
Это также играет свою роль, больше не отвлекая от обучения эксплуатации и обслуживанию, а отвлекает от клиентской и конечной стороны бизнеса.
wiki定义微服务:
Микросервисы (английский язык: Microservices) — это стиль архитектуры программного обеспечения, основанный на небольших строительных блоках (Small Building Blocks), сосредоточенных на одной ответственности и функции, и использующий модульный способ составления сложных крупномасштабных приложений.Функциональные блоки взаимодействуют друг с другом. другой, использующий набор API, не зависящий от языка/языка.
Платформа DevOps
Таких платформ много, поэтому я не буду перечислять их по отдельности, все зависит от того, какую из них покупает ваша компания. Поделитесь DevOps, которые в настоящее время используются в некоторых инновационных проектах нашей команды -Облачный эффект Alibaba, в настоящее время новые предприятия бесплатны, но количество транзакций ограничено. Для гибкой команды R&D нам не обязательно понимать принципы каждого процесса.Если мы сможем лучше выполнять свою работу и начать работу с низким порогом, то это будет лучше всего.
Я думаю, что преимущество Alibaba Cloud Effect в том, что после интеграции различных инструментов на этой основе были созданы относительно дружественные приложения верхнего уровня. Связывая различные Saas- и Paas-сервисы с помощью приложений верхнего уровня, вам не нужно обращать внимание на базовую техническую конфигурацию, а нужно только хорошо управлять своим бизнесом.
- совместная работа над проектом, чтобы решить проблему управления требованиями PM, встроенные мощные возможности управления процессами.
- управление кодом, нижний слой эквивалентен gitlab, но здесь интегрирована экология и можно делать контекстные системные вызовы.
- сборочная линия, это очень D, поддерживает богатый механизм подключаемых модулей, пользовательские сценарии и т. д., интеграцию CICD.
- Склад продукции, является зеркальным складом, поддерживает Maven, Npm, общие продукты и т. д.
- Статистика производительности, можно понимать как средний уровень BI с множеством таблиц измерений для отчетов об измерениях, отправки кода, количества дефектов, количества задач и т. д.
- доставка приложений, APPStack, используемый для управления кластерами контейнеров, кластерами K8S, развертыванием приложений, развертыванием среды и т. д.
-
облачная разработка, редактор облачного кода DevStudio, разработанный Alibaba самостоятельно, был загружен
Offer
, Опыт очень хороший.Самое быстрое развертывание составляет 10 секунд, а временное доменное имя автоматически выделяется для отладки. - ..... испытайте это на себе
конвейер опыта
кVVT WarehouseДля этого случая разработайте процесс.Если есть основное действие отправки или слияния, будут запущены проверка кода и модульное тестирование, и робот DingTalk будет уведомлен, а затем код будет создан и, наконец, опубликован в указанном каталоге. сервера Alibaba Cloud.
Сначала создайте конвейер, привяжите репозитории и ветки github, настройте веб-перехватчики репозитория и прослушайте события фиксации.
Во-вторых, настроить сканирование кода, опционально использовать локальную конфигурацию ESLint, добавить плагин робота DingTalk (механизм плагина может многое)
Наконец, как только операция выполнения конвейера Cole увидит конкретный журнал, он выведет результат сканирования кода, а также модульного теста и т. д.
Также есть много операций: производственная среда, переключение формальной среды в один клик, бесплатное монтирование сервера, развертывание кластера, автоматическое расширение, резервное копирование, мониторинг журналов, 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: определение атомарных операций, механизм подтверждения версии, преобразование операций и передача состояния клиента. Немного запутался, да? Дабы всем было понятно, тоже ломал голову.Далее наглядная демонстрация прелести ОТ.
Адрес литературы:
наконец
В последние годы бизнес завяз, мучаюсь от учебы, с 17 лет前端网
После того, как я вышел из сети, я больше никогда не вел блог. В последние годы в связи с изменением должностных обязанностей необходимо уделять больше внимания направлению развития технологий, моделям управления командой и процессам совместной работы. Так что я снова взялся за Блог, и я тоже надеюсь, что я такой一看就懂,一学就会
Обмен может принести вам некоторое вдохновение. Я слепой монах, пожалуйста, обратите внимание, если вам интересно, ваша поддержка является движущей силой для моей следующей статьи.
22 года флага:
- Q1, напишите книгу «JS Grammar of Advanced Front-end» и опубликуйте PR-кейс для вклада Oasis в открытый исходный код.
- Q2, выпустить проект с открытым исходным кодом "Low Code FormSchema Middle Stage"
- Q3, чтобы создать технический блог с определенным влиянием, с более чем 5000 поклонников
- Q4, подать заявку на все виды технических конференций, чтобы поделиться гостями, построить индустрию IP, расширенное влияние
Группа друзей воды
- Добро пожаловать в группуГруппа друзей-водников, гребли, гребли все вместе, сейчас фанаты редко обсуждают технологии, так что давайте грести вместе. Добро пожаловать, чтобы обратить внимание на мой общедоступный номерПодметающий слепой монах.
- Передовые технологии, технологии, связанные с различным опытом и взаимодействиями, а также передовые перспективы различных переводов и исследовательских отчетов.
- Блудница бесплатно, все платные ресурсы обещали выпустить, все фан-группы бесплатны для блудницы, иначе кто бы с тобой успел поиграть, хе-хе.
- Планирование с открытым исходным кодом, играйте вместе в проект с открытым исходным кодом, подумайте о разработке проекта с зависимостями, написанными вами, вы можете быть взволнованы, чтобы мочиться в постель ночью