В субботу я отправился на конференцию по передовым технологиям TWeb Tencent, чтобы подвести итоги.Чтобы более четко объяснить некоторые технические моменты, я добавлю свое собственное понимание, чтобы представить ключевое содержание конференции и результаты или прогресс связанных технологий.
Поделиться темой: Время узнать о Web IDL
Лектор: Ву Сяоцянь - генеральный менеджер W3C China
Что такое веб-IDL
Суть Web IDL заключается в том, чтобы определить, как DOM и связанные с ним веб-API отображаются на языки, особенно на ECMAScript. Предыдущие стандарты использовали OMG IDL, который формально не определял эти сопоставления, и разработчикам приходилось гадать между строк. --Мацей Стаховяк (Webkit), 28 сентября 2009 г.
4 августа 2015 года рабочая группа W3C по веб-приложениям выпустила стандартный рабочий проект языка определения веб-интерфейса (Web IDL Level 1). Этот документ определяет язык определения интерфейса, или Web IDL, который можно использовать для описания интерфейса, реализуемого в веб-браузере. Web IDL — это вариант IDL, который имеет ряд функций, упрощающих определение и определение поведения часто используемых объектов сценариев на веб-платформе.
Помимо описания интерфейса ECMAScript, Web IDL можно преобразовать в код браузера и тестовые примеры Web API.Если вы обнаружите, что браузер имеет проблемы со стандартной реализацией, вы можете попытаться отловить ошибки в Web IDL.
Если вы хотите прочитать определения DOM и веб-API, лучше написать свои предложения для Интернета и лучше понять браузеры и Интернет, вам необходимо понять веб-IDL.
Что касается связанного синтаксиса и инструментов Web IDL, поскольку введение длинное, вы можете прочитать презентацию лектора, чтобы понять
Ссылаться на:
W3C публикует рабочий проект стандарта языка определения веб-интерфейса (Web IDL Level 1)
Делюсь темой: Headless CMS — бизнес-мидл-офис для небольших и микропроектов
Лектор: Чжан Юньлун - основатель Qiaozi Technology
Чем сейчас занимается преподаватель
Все процессы, упомянутые на рисунке ниже, инкапсулированы и создана система
Во время обмена лектор сосредоточился на введенииstrapi, которая представляет собой платформу Node.js Headless CMS с открытым исходным кодом. Фреймворк может генерировать систему CMS с помощью нескольких простых строк команд npm. Система может создавать таблицы базы данных, добавлять узлы, удалять, изменять и проверять коды и связанные маршруты через интерфейсные операции. , Наггетс не знает, как размещать видео здесь, вы можете перейти на официальный сайт страпи, чтобы узнать больше, или связаться со мной, я пришлю вам видео~
Делимся темой: Практический путь Флаттера к репетиторству Tencent Penguin
Лектор: Ту Цзиньлин - глава Flutter, Tencent Education
Лектор сначала представил флаттер, а затем рассказал о практике репетиторства Tencent Penguin, в том числе о том, как встраивать флаттер в нативные приложения на Android, iOS и Pad, а также о практике микширования и переключения между нативными страницами и флаттер-страницами. также говорили об оптимизации производительности флаттера и Практике флаттера для Интернета в производственной среде.Технические детали здесь не будут расширены из-за ограниченного места.Если вам интересно, вы можете прочитать лекторскую презентацию, чтобы понять
Для того, чтобы лучше понять посадку флаттера в Tencent, вы можете прочитать этовидео
Общая тема: План оптимизации для повышения удобства использования крупномасштабных веб-проектов
Лектор: Го Линьшуо — старший инженер по интерфейсу, Tencent AlloyTeam
Проект, над которым работает лектор, называется Tencent Documentation, это большая команда. Многие люди разрабатывают страницу. При возникновении проблемы вы должны сначала назначить кого-то для расследования, выяснить проблему, а затем передать ее соответствующее лицо для ее решения, что относительно неэффективно. В этом обмене говорится о том, как решить эту проблему, в основном в следующих трех аспектах.
Мониторинг ошибок скриптов, оптимизация, постоянное отслеживание
Команда лектора находит конкретное местоположение файла ошибки с помощью мониторинга ошибок скрипта в сочетании с автоматическим sourceMap кода, с помощью автоматизированного скрипта и команды git fault, выясняет исторический отправитель текущей строки ошибки и автоматически поднимает ошибка через внутреннюю систему рабочих заданий.
На этапе разработки, если есть ошибка скрипта, автоматически всплывает окно, блокирующее разработку.
Величина ошибки отслеживается, и если она вдруг возрастет, будет соответствующий сигнал тревоги.
После вышеуказанных мер количество сообщений об ошибках в Интернете становится все меньше и меньше.
Построение, оптимизация и подключение внешней лог-системы
После вышеуказанного мониторинга ошибок, оптимизации и непрерывного контроля проблема ошибок скриптов была решена, но если есть какие-то логические проблемы, их трудно найти в больших проектах.В настоящее время мы должны полагаться на журналы.
Поскольку это крупномасштабный проект, внешний интерфейс также будет генерировать много журналов.Отчеты через внешний интерфейс ненадежны, и их легко потерять при загрузке.Давайте посмотрим, что делает Tencent Документы сделали, чтобы решить проблему журнала.
- Через интерфейс клиента (WeChat, QQ) сообщается во внутреннюю лог-систему через клиент
- Чтобы не блокировать взаимодействие с пользователем, используйте для отчетов рабочие потоки.
- Все асинхронные запросы перехватываются и контролируются, что эквивалентно удаленному захвату пакетов на внешнем интерфейсе, который можно найти по идентификатору.
- Подключив сервис «Тукао», вы легко сможете получать отзывы от реальных пользователей
- Превратите все возникшие проблемы в тест-кейсы, чтобы предотвратить их повторение в будущем.
Система мониторинга и оптимизации «белого экрана» документа Tencent
- Увеличьте нагрузку, уменьшите беспокойство пользователя
- Загрузите и повторите попытку статических файлов, которые не удалось загрузить, и объедините их с плагином wait-external-webpack-plugin, чтобы убедиться, что порядок зависимостей кода остается правильным после повторной попытки.
- После повторной попытки загрузки, если загрузка не удалась, всплывающее окно подскажет пользователю, что может быть проблема с сетью, и позволит пользователю обновить или оставить отзыв.
- Чтобы проверить, соответствует ли загруженный ресурс опубликованному ресурсу, значение sha1 файла js добавляется к целостности тега скрипта для проверки согласованности.
- Чтобы предотвратить перехват оператора, принята политика безопасности контента (CSP).
Тема обмена: «Tencent OMI+» — расширенные экологические возможности и инновационная практика OMI Framework
Лектор: Чжан Лей - Автор известного фреймворка с открытым исходным кодом OMI
PPT, которым нужно поделиться, содержит более 80 страниц, а обмен на месте когда-то был сверхурочным.Здесь я вкратце расскажу о некотором основном содержании.
Cross-Frameworks Framework
OMI — это кросс-платформенный фреймворк, то есть OMI можно использовать в сочетании с такими фреймворками, как react, vue, Web Component, Kbone, Preact, Three.js и т. д. Компоненты, написанные в OMI, также могут напрямую использоваться такими фреймворками, как как react, vue, preact и т. д. И наоборот, такие фреймворки, как react, vue, preact, также могут использовать компоненты, написанные на OMI.
OMI-THREE
Еще одна интересная вещь — OMI-THREE: если мы пишем игру или 3D-сцену исключительно на основе three.js, нам нужно создать множество экземпляров, таких как новая сцена, новый куб, световой эффект здесь и вращение здесь, для всего этого нужно написать некоторый императивный код, но OMI-THREE позволяет нам декларативно написать вышеприведенный контент, давайте посмотрим демо:
Код для достижения вышеуказанного эффекта является декларативным и очень понятным:
Есть и другой контент об OMI, такой как OMI + React, OMI + Vue, OMI + Kbone, OMIX, OMIM и философия дизайна OMI. Если вам интересно, вы можете прочитать презентацию лектора, чтобы понять
Общая тема: Extreme SSR: эффективное создание высокопроизводительных изоморфных веб-страниц
Лектор: Duan Longxian - Vue Syntax Compilation Engine ага Автор
Зачем вам ССР
- Лучшая поисковая оптимизация (SEO: поисковая оптимизация)
- Более быстрая первая значимая краска (FMP: первая значимая краска)
Государство ССР
- Как правило, SSR, первый экран (FMP) зависит от всех интерфейсов страницы, первый экран не обязательно быстрый, а передача блока имеет дополнительную нагрузку.
- Низкая эффективность разработки: традиционная SSR требует манипулирования DOM, низкой эффективности разработки, сложного обслуживания и длительного времени отклика (TTI) для изоморфных страниц.
- Переключение страниц SSR не может быть прогрессивно загружено, и анимация перехода не может быть определена при переключении страниц.
Что такое групповая передача
Нет необходимости ждать, пока все интерфейсы страницы вернутся, интерфейс заголовка страницы может реагировать на страницу, FP (первый рендеринг слова, первая отрисовка) и FCP (первый рендеринг контента: первая содержательная отрисовка) работают быстрее.
Например, для запроса от v.qq.com, используя блочную передачу, вы можете сначала вернуть содержимое первого экрана, а затем вернуть содержимое после извлечения данных.Обратите внимание, что это запрос
Практика команды лекторов
Когда Vue компилируется, синтаксис Vue компилируется в конкатенацию строк, и он передается автоматическими фрагментами, и достигается изоморфное развертывание.
Автоматизация передачи блоков
- Программа анализирует асинхронные данные шаблона и автоматически разбивает шаблон
- Автоматически собирать зависимости данных в соответствии с зависимостями вверх и вниз по шаблону
- Автоматически связывать локальные шаблоны с данными
Делюсь темой: Практика бессерверной SSR
Лектор: Шуй Лан - Эксперт по передовым технологиям Alibaba
Сделать SSR непросто, в первую очередь нужно обеспечить стабильность работы Node-сервиса, в этот период мы можем столкнуться со следующими проблемами:
- Слишком много использования диска
- высокая загрузка памяти
- переполнение памяти
- Произошла ошибка в службе Node.
- Узел вниз
- Расширение и усадка, упразднение машин
Кроме того, подумайте, как сделать набор кода общим для обоих концов:
- Различия в механизмах рендеринга
- Сквозные ограничения среды
- Как обрабатывать запросы данных
- Как избежать загрязнения штата
- Откройте среду разработки и отладки
В первой части практика лектора состоит в том, чтобы внедрить службу узла в безсерверную, которая имеет следующие преимущества.
- Функция как услуга (Faas, Функция как услуга), разработчики могут уделять больше внимания самой бизнес-логике
- Естественная изоляция, динамическое восстановление, функции не зависят друг от друга
- Отсутствие эксплуатации и обслуживания, полностью управляемое обслуживание, выполнение по запросу, гибкое масштабирование
Во второй части лектор использует Rax с открытым исходным кодом Али для решения проблемы набора кода, общего для обеих сторон.
Rax — это набор кросс-конечных решений, соответствующих стандарту React, и с помощью скаффолдинга Rax его можно развернуть на Fc Ali или иностранных бессерверных провайдерах, выполнив команду
Здесь стоит отметить, что в Rax сопоставление между инициацией запроса и маршрутизацией может быть достигнуто изоморфизмом внешнего и внутреннего интерфейса.Из-за нехватки места заинтересованные студенты могут просмотреть ppt или погуглить: Rax
Делимся темой: Tencent Education Serverless: практика и исследование
Лектор: Цзян Линьюань - Front-end Engineer Tencent IMWeb
Бессерверная логическая архитектура
Serverless = Faas + Baas
Первый взгляд на бессерверные
Как показано на рисунке выше, пользователь загружает код облачной функции на бессерверную платформу Tencent Cloud (или напрямую пишет его с помощью онлайн-редактора).
После сохранения мы можем установить триггер,
То есть указанный выше источник события, который может быть триггером API-шлюза, то есть запускаемым запросом, и другими триггерами: триггером времени, триггером COS (срабатывает, когда COS получает загрузку, например загрузку изображения, инициирование определенного Облачные функции для сжатия), запуск очереди сообщений и т. д.
Внутренняя BaaS, которая обеспечивает поддержку, предоставляет множество внутренних услуг, таких как ИИ, мы можем вызывать интерфейс распознавания голоса и изображений, и мы можем легко вызывать облачную БД, а облачная БД не требует нашего ручного обслуживания. , и есть объекты Хранилище, такие как изображения, загрузка видео, обратно в CDN и т. д., просто слишком удобно.
Холодный запуск
В настоящее время я убедился, что холодный запуск Tencent Cloud довольно хорош. Пока есть доступ в течение определенного временного порога, нет проблемы медленного холодного запуска. Однако, если облачная функция не использовалась в течение длительного времени , то первый доступ после этого будет сделан.Он будет медленнее.Это допустимо.
Посадка образовательного бизнеса Tencent
Лектор упомянул две компании, которые полностью используют Tencent Cloud без серверов, а именно:
Пингвин читает слова
Tencent Classroom — Эксклюзивный пакет для новичков
Бессерверные разработки Tencent Cloud
Во внутренней практике Tencent Education devOps тоже очень совершенен, весь процесс выглядит следующим образом:
После разработки отправляйте код в git, автоматически запускайте сборку кода (пряжа и сборка пряжи и т. д.), автоматически запускайте развертывание тестовой среды облачных функций, кроме того, предварительные и выпускные среды также могут быть беспрепятственно развернуты через внутреннюю систему доставки.
Делюсь темой: Как повысить эффективность консольной системы Ali
Лектор: Лянлян - технический эксперт Али.
Вышеупомянутая консольная система
Этот обмен резюмируется в одном предложении: с помощью внутренней системы материалов (которую можно понимать как накопление общедоступной библиотеки компонентов пользовательского интерфейса npm) Alibaba разработала набор систем Fusion, которые могут облегчить дизайнерам настройку эскизов дизайна. детализация системы почти соответствует требованиям дизайнера.Все требования и каждый параметр конфигурации будут записаны.Когда дизайнер представит черновик дизайна, будет сгенерирован пакет npm в соответствии с содержимым конфигурации, а интерфейсная разработка будет обновлена пакет npm для получения результатов дизайнера, которые основаны на материалах Systematic, то есть после того, как код сгенерирован, он читабелен на основе react (Али использует react единообразно), а потом уже на этой основе можно добавить front-end логику , и проблема общения с дизайнерами полностью решена.
Рабочий процесс
Вот пример конфигурации темы (динамический эффект теряется на ppt изображения других примеров):
Получить все ppt конференции
- Добро пожаловать в «Front-end Q», просто ответьте на твиттер или электронную книгу.
Наконец
- Добро пожаловать, чтобы добавить меня в WeChat (winty230), привлечь вас в техническую группу, долгосрочный обмен и обучение...
- Добро пожаловать, чтобы обратить внимание на «Front-end Q», серьезно изучить интерфейс и быть профессиональным техническим специалистом...