1. Болевые точки клиентов и ценность предварительной работы

1. Кто является внешними клиентами?

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

К внешним пользователям относятся:

Онлайн-пользователи, будь то малые b, большие b, малые c или бизнес-пользователи, те, кто использует интерфейсную платформу и функции клиентской системы, являются пользователями службы первой линии.
Внутренние пользователи, в том числе внутренние вторичные службы нашей компании, служба поддержки клиентов, связи с общественностью, продукты, дизайн и т. д., удовлетворяют различные потребности бизнес-продуктов, обеспечивают быстрое реагирование и стабильную работу после выхода в Интернет. Во-вторых, для эффективности работы внутренних пользователей фронтенд-технология также должна брать на себя ответственность.
Технические специалисты, в том числе передовые, внутренние, мобильные, тестирующие, эксплуатирующие и обслуживающие и т. д., все, кто занимается исследованиями и разработками, включая эффективность и стоимость исследований и разработок, могут нуждаться в использовании соответствующих передовых технологий для решить

2. В чем проблема клиента?

Для онлайн-пользователей одной из проблем, наиболее тесно связанных с интерфейсными технологиями, является производительность.Они хотят быстрее открывать наши приложения, более плавно переключаться между страницами и хотят, чтобы наши страницы были более красивыми, а также некоторые «ага-моменты». " время от времени " удивлять
Для внутренних пользователей их самая большая привлекательность - просто быстро и стабильно запустить проект. Во-первых, чтобы избежать несвоевременной реакции бизнеса, вызванной техническими ресурсами и упущенными бизнес-возможностями. Во-вторых, работа онлайн-приложений должна быть стабильной. , чтобы избежать крупных сбоев. , или трудно быстро восстановиться в случае сбоя. С точки зрения эффективности, хороший интерактивный метод также может эффективно повысить эффективность работы и снизить затраты.
Для разработчиков эффективность НИОКР и опыт, безусловно, являются самыми большими требованиями пользователей. Каждый хочет инвестировать с наименьшими затратами и получить максимальную отдачу. Любая простая и повторяющаяся операция может нуждаться в оптимизации с помощью проектирования и автоматизации. Только так, в напряженном деловом ритме, у нас будет возможность посвятить немного энергии, улучшить техническую глубину и обратить внимание на последние тенденции в сфере бизнеса.

3. Что может интерфейс?

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

Резюме ключевых слов

Опыт производительности, повышение эффективности, снижение затрат, стабильность

2. Итоги 2021 года

1. Главные дела в первом полугодии

Ключевые слова: техническая эффективность

Передовые технологии в тайваньском проекте

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

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

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

Среди них можно выделить два основных, которые непосредственно способствовали продвижению бизнеса:

1. Контейнер средней ступени

Фронтенд-разработка бизнеса в основном распределяется по нескольким контейнерным сценариям, включая несколько типов терминалов.

Приложение WeChat (апплет WeChat, официальный аккаунт WeChat H5)
Приложение Qiwei (Qiwei Workbench H5)
Внутреннее приложение собственной разработки (собственное приложение, встроенный H5)

Это означает, что на всех терминалах из-за разных языков разработки и технологических стеков нам необходимо создавать различные инфраструктуры (включая инструменты разработчика, спецификации кода, инструменты упаковки, инструменты развертывания, библиотеки компонентов, библиотеки функций и т. д.) решения. ), а для развития такого бизнеса, как капсула CMS, необходимо разработать несколько языков и несколько кодов (Android — это Java, iOS — это OC, апплет и H5 — это JS, но есть много несовместимых синтаксисов для решения с), такие затраты на разработку, очевидно, не соответствуют первоначальному намерению реагировать на бизнес быстро, эффективно и с низкими затратами.Поэтому переход от среднего к тайваньскому уровню на техническом уровне переднего плана является обязательным.

Благодаря постоянной практике и ловушкам в нашем клиентском бизнесе мы пришли к перекрестному техническому решению, которое относительно подходит для нашего бизнес-сценария: гибридные приложения Webview H5 Hybrid являются основными, а некоторые кросс-энд нативный рендеринг React Native дополняется. В определенной степени это сглаживает разницу в стоимости между терминалами и повышает скорость отклика клиентских технологий на бизнес.

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

Мы недавно представили контейнерную инфраструктуру React Native в двух основных проектах приложений и вскоре внедрили эту практику в бизнес.В позиции ресурса активности CMS на домашней странице нам нужно только разработать набор компонентов React и скомпилировать многотерминальный код.Реализовано мультиплексирование на разных бизнес-линиях и терминалах, повышена техническая эффективность. Подводя итог, кросс-энд техническое решение, в основном основанное на Webview H5 и дополненное RN, достаточно для решения задач большинства наших бизнес-сценариев.

2. Интерфейсные приложения уровня бизнес-страниц для электронной коммерции.

В настоящее время заказы, послепродажное обслуживание, обслуживание клиентов, купоны, управление адресами и другие модули во внешнем бизнесе электронной коммерции интегрированы во внешний и внутренний бизнес и могут быть подключены к многоконечным и мультисервисным с помощью конфигурации JSSDK + JSON.Одна итерация разработки, для которой требуется n человек (Android, iOS, внешний интерфейс H5, внешний апплет и несколько бизнес-серверов), теперь может быть выполнена только два человека (один для интерфейса и один для сервера), что значительно повышает оперативность бизнеса.

2. Главные дела во втором полугодии

Ключевые слова: оптимизация и снижение затрат

1. Производительность и оптимизация затрат

Начиная со второй половины года, благодаря некоторым дивидендам, принесенным повышением технической эффективности в первой половине года, мы смогли посвятить больше энергии оптимизации производительности интерфейсных продуктов. общая оптимизация затрат на ресурсы Alibaba Cloud была возможностью.Все ресурсы проекта внешнего интерфейса были отсортированы. Внешние ресурсы CDN в основном основаны на JS, CSS, изображениях, аудио и видео ресурсах, хранящихся в OSS, и небольшом количестве шрифтов, html файлов и других типов файлов.Направление оптимизации в основном делится на две части. ограничение количества запросов ресурсов.Во-вторых, ограниченное количество запросов также необходимо контролировать размер. Согласно этому направлению, конкретные технические изменения, которые необходимо внедрить во фронтэнд, относительно очевидны, и, вероятно, существуют следующие категории:

Ресурсы кода JS и CSS разделены на более мелкие части. В прошлом грубое разделение было разделено на три части (файлы js для бизнеса страницы, common.js для общедоступного кода бизнеса и vendor.js для внешних зависимостей). .После разделения он станет более совершенным.Во-первых, часть бизнес-кода будет разделена в соответствии с уровнем маршрутизации одностраничного приложения, так что при первом открытии страницы нужны только необходимые файлы ресурсов для загрузки, а затем в соответствии с переходом по маршруту или прогнозом поведения пользователя перейдите к разделу Отложенная загрузка и предварительная загрузка соответствующих файлов ресурсов JS. То же самое верно и для ресурсов CSS, и стратегию разделения необходимо точно настроить в соответствии с реальными бизнес-сценариями и потребностями. Для зависимых файлов, в соответствии с разницей в частоте обновления стороннего пакета и стороннего пакета, он также был дополнительно разделен, что также является «динамическим и статическим разделением» с точки зрения внешнего интерфейса в смысл.
Заголовки строгого кеша HTTP устанавливаются для ресурсов JS и CSS для всего сайта OSS. Если в ходе создания файлов обнаруживается, что они были изменены, будет создан новый файл с именем хэша, и клиент будет извлекать новые файлы ресурсов. Для этого требуется, чтобы файл HTML быть установлен на Стратегия кэширования без хранения гарантирует, что самые последние ресурсы могут быть немедленно извлечены каждый раз
Оптимизация файлов изображений, аудио- и видеоресурсов на стороне клиента — это не что иное, как формат, ширина, высота, качество и другие параметры.Форматы изображений с более высокой степенью сжатия, такие как webp, могут быть полностью использованы на стороне Android. (наш пользователь семь Вышеупомянутый телефон Android). Здесь мы также ссылаемся на множество отличных продуктов электронной коммерции и устанавливаем разные стандарты и спецификации в разных сценариях, которые не только контролируют ресурсы, но и обеспечивают базовый опыт на стороне пользователя.
Файлы ресурсов, активно загружаемые клиентом, в основном используются в некоторых бизнес-сценариях, связанных с контентом.Для этих целей мы также ссылаемся на некоторые отличные бизнес-приложения на основе контента в отрасли, такие как Meituan и Xiaohongshu, для выполнения операций загрузки пользователей. Для обработки бокового сжатия в сценариях, где некоторые интерфейсы промежуточной и фоновой систем не подходят для сжатия, применяется схема сжатия на стороне сервера. С помощью этих методов можно эффективно контролировать размер восходящего трафика и косвенно уменьшить занятость этих ресурсов нисходящим трафиком во внешнем представлении.

Отображение эффекта частичной оптимизации

1. Эффект оптимизации затрат

Общий трафик оптимизирован с 11Тб до 5Тб в сутки, а среднесуточное снижение6Tb

Трафик, генерируемый на пользователя (общий трафик/UV): оптимизирован с 36,51 МБ до 12,44 МБ в сентябре и оптимизирован до 11,21 МБ в октябре.

2. Эффект оптимизации производительности

Домашняя страница: оптимизация с 58,93% до 69,63% в сентябре и оптимизация до 81,61% в октябре.

Место проведения: оптимизировано с 54,94% до 68,84% в сентябре и оптимизировано до 83,77% в октябре.

Детали бизнеса: сентябрь с 68,54% до 79,11%, октябрь до 89,15%

К концу декабря всеБолее 90

2. Оптимизация работы функций

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

Как главная страница платформы и общая структура пользовательского интерфейса системы, домашняя страница за кулисами продавца в прошлом имела серьезные проблемы со стилем и стилем.Вся система не имеет чувства дизайна, и нет стандартизированного стандарта дизайна. , что дает людям сильное «чувство коттеджа». Восприняв эту проблему как возможность, после работы с командой дизайнеров мы сначала подготовили визуальные спецификации для разработки внешнего интерфейса серверной системы, а также переработали заголовок и боковую панель главной страницы и всего мерчанта. система, которая значительно улучшила производительность платформы "Face Project".

Функция загрузки продукта является основным бизнес-процессом для продавцов по продаже товаров на платформе, а также функцией, которая используется очень часто.Однако до нашей оптимизации в этом году показатель успешной загрузки одного продукта здесь составляет менее 50. %, и пользователи столкнутся с различными нерегулярными заполнениями полей формы продукта, ненадежными системными сбоями и негуманными сообщениями об ошибках, которые в конечном итоге приведут к невозможности успешного создания продукта. Также есть проблема с функцией пакетной загрузки товаров.Файлы товарных ресурспаков большого объема часто не возвращаются из-за ошибки в поле одного товара из 100 товаров.Процесс нужно запускать повторно,или потому что сеть нестабильна и скорость сети низкая Загрузка прервана или не удалась по какой-то причине, но система не поддерживает возобновление загрузки с точки останова. После серии оптимизаций технических функций и опыта взаимодействия, к концу декабря успешность загрузки пользовательского продукта достигла около 90%.

Эффект оптимизации опыта

1. Успешность загрузки одного товара: от 3,91% до88.77%

2. Успешность пакетной загрузки товаров: увеличена с 50% до97.07%

3. Среднее время, сэкономленное благодаря нажатию точки останова для возобновления передачи.57.18s

3. Другие вещи

1. Ротация бизнеса

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

Точки оптимизации в основном основаны на категории повышения эффективности: включая некоторые функциональные дефекты внутренней платформы Xiaoer, системные ошибки и проблемы с взаимодействием с пользователем, а также некоторые средства технической автоматизации для выполнения определенных механических повторяющихся операций и повышения эффективности работы оператора. Например, для работы WeChat note генерация материального контента фронтенд был разработан за неделю с помощью автоматизированного скриптового инструмента Auto.js, что экономит около двух человек в день на прошлой операции .

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

2. Спецификация места захоронения

В 2021 году он в основном решает проблемы хаотического управления требованиями к скрытым точкам и сложного обслуживания данных скрытых точек в прошлом, а также вводит концепцию блока и модуля скрытых точек, чтобы обеспечить более детальный резерв возможностей анализа данных, трехтерминальный (Приложение, апплет, H5), чтобы унифицировать формат поля для удовлетворения общих потребностей всех бизнес-направлений.Благодаря улучшению платформы отслеживания он поддерживает соблюдение требований к отслеживанию бизнеса всей платформы в соответствии с новой стандартной спецификацией. Основной процесс групповых бизнес-транзакций в основном охвачен, а также охвачены ключевые процессы, такие как поиск и совместное использование, что создает хороший резерв для последующей очистки и анализа данных.

3. Система мониторинга

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

С точки зрения мониторинга производительности, основным показателем является скорость открытия вторых страниц в интерфейсе, и мы внесли новые коррективы в метод расчета этой скорости открытия вторых страниц. Раньше мы рассчитывали на основе времени завершения первого рендеринга (жизненный цикл onReady апплета) и времени, которое потребовалось для загрузки внешних ресурсов (событие onLoad H5). страница была открыта, и действительное содержимое было отображено. Реальный сенсорный опыт на стороне пользователя должен быть полным представлением бизнес-контента, такого как информация о продукте, информация о месте проведения, информация о событии и т. д., который может быть интерактивным временем (вместо времени белого экрана или времени первого экрана).

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

4. Приземление новых технологических возможностей

Длительное нажатие на материал окна чата WeChat онлайн-мини-программы открывает функцию поиска изображений. Страница результатов поиска, под влиянием одноклассников по продукту и дизайну, также ведет интерактивную унифицированную статистику данных после запуска. нажатие учетной записи изображения для общего поиска рисунка PV составляет 40%, и скорость использования хорошая.

4. Изменения в команде

В 2021 году я вполне доволен членами моей команды в целом.Ключевыми моментами являются:

1. Принимайте изменения и быстро приспосабливайтесь

В 2021 году бизнес и команда претерпели несколько серьезных изменений.Фронтенд-команда может быстро вносить изменения.Гибкая настройка организационной структуры позволяет быстро поддерживать бизнес и реагировать на него.Это неотделимо от TL нескольких фронт-эндов. Управленческие способности и отличные базовые профессиональные качества передовых общих членов

2. Технологический бизнес по расширению прав и возможностей среднего уровня

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

Очки за улучшение в команде

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

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

3. Планы и ожидания на 2022 год

1. Опыт работы (постоянная оптимизация второго коэффициента открытия)

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

Вызов интерфейса первого экрана ранее
Интерфейс возвращает меньший размер
Статические интерфейсы используют кэширование

2. Стабильность

1. Технические характеристики команды

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

2. Фронтальный выпуск оттенков серого

Выпуск интерфейса в градациях серого — это возможность, которой всегда не хватало. . В настоящее время апплет уже может поддерживать выпуск в градациях серого нескольких измерений, таких как процентное соотношение, регион и белый список пользователей.Это будет обязательным в нашем бизнес-релизе апплета в следующем году, но выпуск терминала H5 и веб-терминала для ПК происходит не так быстро. Осуществимый план реализации может потребовать некоторой технической трансформации на основе Nginx и CDN, и необходимо общаться и сотрудничать с командой эксплуатации и обслуживания, чтобы продвигать этот вопрос в следующем году.

3. Мониторинг CDN

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

3. Рост бизнеса (постоянная оптимизация по модели AARRR)

Чтение «Growth Hacking» в команде откроет мне много новых взглядов на бизнес и технологии, и я пойму, что фронтенд-технологии имеют огромный потенциал и безграничное воображение в развитии бизнеса. После этого я также сделал несколько простых попыток в бизнесе, с помощью некоторых открытых возможностей публичной платформы WeChat я провел эксперимент по росту в апплете и получил хорошие положительные отзывы. План на следующий год состоит в том, чтобы в основном сотрудничать с командой разработчиков и дизайнеров в течение длительного времени, чтобы способствовать непрерывным экспериментам и оптимизации роста бизнеса в соответствии с моделью AARRR.С помощью научно-теоретических моделей мы обнаружим наши проблемы, уменьшим их шаги и продолжаем прилагать усилия.

4. Некоторые изменения и ожидания от себя

1. Скорректируйте прошлые методы управления и уделяйте больше внимания учащимся, работающим на переднем крае.

2. Более глубокий и систематический вывод на командную технологию

3. Напишите больше кода и узнайте больше о бизнесе