Заметки из книги Конф Юхэ «Технологии и размышления о муравьиной ферме»

Предисловие:

Мне не повезло, и меня не выбрали для участия во второй See Conf Ant Financial Experience Technology Conference.Я смотрел прямую трансляцию всего процесса.Самое впечатляющее – выступление декана здания утром и выступление г-на Дж. Ты во второй половине дня.

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

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

Докладчик: Ю Хе, главный технический эксперт Ant Financial

Организатор: Ant Financial, 2nd See Conf Ant Financial Experience Technology Conference

Информация о создании заметок

Производитель: XX, Front-end разработка Aihuishou.com, WeChat: X_XDalston

Официальный аккаунт: Qingfeng Xunlai, фотография/еда/путешествия/интерфейс/перевод/чтение/фитнес...

Вступительное слово: О краже Ant Manor гений написал стихотворение на Weibo:

XX Примечание: Я сначала не внимательно слушал, что говорил спикер, я думал, что это было написано спикером, и я подумал, конечно же, фронтенд такой литературный и талантливый...

Истории пользователей о муравьиной ферме

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

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

2. Когда пара была вместе, каждая из них вырастила по две цыпочки в Поместье Муравьев. Позже они расстались, но две стороны не удалили друзей Alipay друг от друга; У обеих сторон есть чувства...

XX Примечание: Это все еще любовное слово: эмоция, эмоция, эмоция.

содержание:

XX Примечание: Когда я впервые увидел этот каталог, я не читал его внимательно, поэтому ничего не почувствовал; теперь, когда я пишу заметки, я вдруг обнаруживаю, что говорящий действительно литературный, а название очень литературно, например: Назад к началу Отправная точка, зеленое лицо ХХХХХ,...

WebGL, нелегко сказать, что я люблю тебя

Причины/преимущества первоначального выбора:

Более эффективная и производительная, чем традиционная технология рендеринга (Canvas).

Проблемы/недостатки, обнаруженные на этапе тестирования:

Ошибки рендеринга и другие проблемы в более ранних версиях Android

Реальные бизнес-сценарии:

Короткие сроки разработки и быстрый график проекта
Большое количество пользователей (и еще много пользователей низкоуровневого Android)

Окончательное предложение:

Возьми сейф: неподвижный холст для Android

Вывод: WebGL хочет сказать, что любить тебя нелегко

XX Примечание: Короче говоря, это: противоречие между постоянно растущими требованиями оптимизации производительности/эффективности разработки и проблемами обратной совместимости, это не правильное или неправильное, это компромиссы;

0,3 6 яиц? Скажи НЕТ десятичным дробям!

Феномен:

Давным-давно в незапущенной версии число яиц у пользователя было с запятой, 0,36 яиц

XX Примечание: Просто спросите, боитесь ли вы, удивлены ли вы, не удивлены ли вы

вопрос:

Дробные части могут сбивать с толку

XX Примечание: Нет необходимости объяснять это...

Количество увеличивается, восприятие пользователя неочевидно

XX Примечание: Это как слоган онлайн-игры, нож — это 999, а второй уровень — 99. Ничего страшного, да? Но замените его на: 3,1415 за один нож, 0,618 уровня в секунду... (черный вопросительный знак???)

Восприятие пользователем того, что можно собирать, неочевидно

Решения:

Индикатор прогресса в процентах дает пользователю ощущение предвкушения
- Например: докладчик упомянул, что у каждого героя King of Glory рядом с уровнем есть шкала прогресса улучшения, что дает людям ощущение ожидания.
  
  XX Примечание: Следуя этому примеру, XX считает, что это полезно для игроков, чтобы быть в курсе текущей ситуации с апгрейдом в любое время, и это полезно для некоторых тактических операций, чтобы удивить противника или оценить текущую ситуацию на поле, или просто скажите игроку, что скоро будет модернизация и заправка для пополнения нескольких бойцов.
Индикатор выполнения меняется, чтобы пользователь воспринимал
Цифры действительно представляют сумму, которая может быть списана

«Божественные детали дизайна Alipay» Little Bee

XX Примечание: Маленькая пчелка в PPT может двигаться, и она действительно прыгает с 8 символами. Я не внимательно слушал, что описывал спикер, но анимация этой картинки и текста рядом с ней достаточно четкие и живые.

Докладчик упомянул, что окончательная реализация осуществляется через суперпозицию двух тригонометрических функций (а затем сказал, что онлайн-версия, кажется, недоступна? Что за новая тема? ХХ не расслышал...)

ХХ Примечание:

Подробности, «подробности» были упомянуты и на утреннем заседании. В системе помощи и руководства предусмотрены некоторые мелкие детали, чтобы вызвать у пользователя теплые чувства, не беспокоя пользователя; и спикер также упомянул детали слова в последующем выступлении, уделяя внимание деталям и реализуя основные ценности Поместье муравьев: вносим в мир красивые и небольшие изменения. В случае жесткой конкуренции аналогичных продуктов детали могут стать одним из ключевых факторов, способных впечатлить пользователей.
С другой стороны, так как это называется деталью, ее легко не заметить. Например, я мало читаю и внимательно не наблюдал за пчелами. Если говорящий упомянул, что пчелы 🐝 прыгают 8, если вы увидеть эту деталь, я тоже не резонирую, и у меня нет чувства «Ага, это офигенно!» в моем сердце. Цена этого может заключаться в том, что, поскольку когнитивные способности некоторых пользователей не могут получить подробную информацию о продукте, часть затрат на разработку в некотором смысле тратится впустую.
Но, другими словами, принимая во внимание общение между людьми, может быть, однажды днем человек, узнавший подробности об этом боге, поделится этим с другим другом из-за этой детали... Ну, хватит болтать, пошли.

Как изящно «поиграть в цыпленка»

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

Как «поиграть в цыпленка»

Примите «слоистый дизайн»:
- Бизнес-уровень:
  - Концепция: компонентизация, управляемая данными
    
    XX Примечание: я забыл, какой фреймворк упомянул спикер, но когда я вижу редукс, это должен быть React, но связка луны на картинке немного неуверенна, предполагается, что это внутренний код проекта... Компонентизация и на основе данных, я не буду объяснять
- Слой данных:
  - На основе Редукса
    
    XX Примечание. Основные понятия: единый источник данных, состояние доступно только для чтения, использование чистых функций для выполнения модификаций.
  - Детали: Добавлены "Стабилизатор", "Комбинация".
    
    XX Примечание: Debounce обычно используется вместе с "throttle". Они похожи, но отличаются. Цель состоит в том, чтобы оптимизировать производительность высокочастотных операций, таких как мониторинг обработки событий прокрутки экрана. Похоже, что это просто смахивание, но он фактически запускает событие прокрутки для каждого 1 пикселя движения. Anti-shake, например, сесть в автобус, взять в качестве примера водителя за рулем автобуса, пока кто-то все еще садится в автобус в течение определенного периода времени, тогда водитель будет ждать, пока никто не сядет в автобус в течение определенного периода времени перед вождением. Например, нечеткий поиск обычно использует анти-дрожание, чтобы уменьшить нагрузку на сервер.По интервалу нажатия клавиши судят, что, пока пользователь все еще печатает, он будет ждать, пока не будет считаться, что пользователь остановился. введите, а затем отправьте запрос.
- Слой игры:
  - идея:
    - Инжиниринг
    - конфигурация
  - Пример: карта спрайтов, извлеченная и настраиваемая
Преимущество: меньшее количество вещей, о которых думают разработчики при внедрении новых функций, снижение затрат на обслуживание.

как быть элегантным

Эффект: отладка рендеринга игры
- Столкнулись с проблемой: не знаете, где проходит граница? (не могу вспомнить)
- Как решить: (ХХ забыл)
net: код отладки без вмешательства
- Гарантированно не будет выпущен в производство через загрузчик веб-пакетов.
Умный: изображение синтезируется автоматически.
- Автоматизация => Работа над композицией спрайтов
- пытаться
  - Изначально: из-за ограничения жизненного цикла веб-пакета эту функцию невозможно реализовать должным образом;
  - финал: перейти на загрузчик webpack
Микро: Отполированные детали анимации: (Концепция муравьиной фермы: Привнесение в мир красивых и небольших изменений)
- По поводу Weiwei, если не сделать хорошо, то => тривиальные проблемы станут фатальными при большом количестве пользователей
  
  XX Примечание: Так называемая анти-микроболезнь, дамба в тысячу миль разрушается в муравейнике. Возможно, рождественское пасхальное яйцо Ant Design, выпущенное некоторое время назад, может быть хорошим негативным учебным материалом... С моей личной точки зрения, это пасхальное яйцо является сюрпризом, но когда количество пользователей велико, количество и масштаб пользователей портреты намного превышают управляемый пасхалкой диапазон, это нельзя назвать неожиданностью.
Полюс: ручная резка

XX Примечание: Это еще один вид компромисса. Первый элемент элегантности — это «эффективность», а чистая ручная резка не способствует эффективности, но, как упомянул утром президент Лу, «метафора высоких каблуков», так называемый Дух мастерства означает, что даже если эффективность низкая, разработка очень неудобна и болезненна, но итоговое изображение имеет небольшой размер, а качество изображения также высокое, что делает опыт продукта лучше , и я готов заняться чистой ручной резкой...
- Размер изображения H5 является строгим;
  - png сжатие без потерь, непрерывное сжатие
- Разделение больших изображений;
- Каждая точка идеальна;

Ничто не может остановить тоску по интерфейсу

XX Примечание: когда я впервые увидел этот заголовок, я вдруг почувствовал, что друзья их группы на стороне сервера невинно лежат... Я огорчился на три секунды.

Пример: Из-за разочарования слово (гармония) используется для обозначения цыпленка... для завершения отладки интерфейса сервера.

XX Примечание: Насмешка над данными очень распространена, но чтобы иметь возможность так красиво и утонченно издеваться над ними с необыкновенным темпераментом и яркими и краткими словами, автор должен быть гением боевых искусств с необыкновенным костяком.

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

Оденься и тема, открыто и беспроигрышно

XX Примечание: здесь я ничего особенного не хочу сказать, но почему-то я вдруг подумал о LOL, и очень важным пунктом прибыли King Glory является продажа скинов, особенно скинов, которые ограничены различными фестивалями. что LOL будет иногда брать скины, которые были ограничены в прошлом, и продавать их в виде 10 последовательных розыгрышей карт... (Вообще-то, я думал о черной истории моих африканцев. Единственный европейец, это когда я наконец получил слепой монах Ли Цин в год Дракона, так называемый слепой дракон... …)

нужно:

Тема фестиваля: (тема Весеннего фестиваля 2018 г.)

Усовершенствованная одежда: содействие росту бизнеса для взаимовыгодной ситуации между Ant Manor и другими деловыми сторонами.

XX Примечание: Вот цитата друга: Я самый красивый ребенок в этом костюме.

Схема: Платформа для одевания FreeStyle

Цель: Освобождение разработки и визуальной продуктивности

Беспринципность к производительности; маленькие проблемы, большие алгоритмы

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

Пример: спрос на Праздник середины осени.

Введение требований:

XX Примечание: Этот вид спроса слишком распространен...
- Показывайте особые стили только в течение 3 дней Фестиваля середины осени.
- Первоначальное действие поедания печенья было изменено на поедание лунных пирожных.
Ситуация в команде
- время задачи короткое
- Существующий материал, уже имеет размер 1M
решение:
- Компромисс со временем. Добавлено еще пять наборов кадровых анимаций, а к 1М объему добавлено более 500 КБ.

Объяснение: Итак, это самая большая проблема

Размер 1M Причина: Все анимации цыплят являются покадровыми. Каждый кадр анимации содержит более 20 кадров, что в сумме составляет более 1 млн.
Воздействие: Каждый раз, когда вы заходите на главную страницу, потребляется более 1 М трафика. Пользователи обнаружат, что трафик резко израсходован, и они будут сомневаться в этом.

Процесс разрешения:

От покадровой анимации к каркасной X-кадровой анимации
- идея:
  - Переписать со скелетной моделью
- пытаться:
  - Эра Цапли, кости дракона
- вопрос:
  - Два слова => нет
    
    XX Примечание: этот знакомый северный акцент на самом деле вызывает у меня очень добрые чувства...
- прогресс:
  - С конца октября попробуйте использовать. Выяснилось, что кости дракона на самом деле использовали покадровую анимацию.
  - Позже (здесь не написано) и затем работа с визуальными
  - Финал: файл данных + модель скелета, более 100К
Еще одно требование: поддержка динамической повязки.

- 方案：

	- 资源系统

- 优点：

	- 根据服务端版本，实时更新

- 主要优化方案：

	- 加载策略：

		- 介绍：优先加载 js 文件，然后异步加载主题图片、装扮图片

		- 好处：加载 js 能保证主要功能不受素材文件加载异常的影响

	- 利用工程化手段：

		- 优化图片数量、体积、尺寸

		- 解决图片云构建系统依赖问题

Оптимизация бесконечна: для малой производительности, недобросовестных, оптимизируйте память
- Проблема: существует много ресурсов изображений и большой объем памяти.
  - Использование памяти Android пропорционально размеру изображения, будут различные нарушения рендеринга, заставка
- до: 5200b

	XX注：减肥前

- 网上找算法

	XX注：减肥中

	- max-rects-algorithm

		- 问题：

			- 大学学的算法都还给老师了

		- 解决方案：

			- 让新进来的校招生，来实现该算法（还成功了）

				XX注：算法鬼才，XXX淘到宝了

		- 大致思路：

			- 改变图片排列

- 优化了图片体积

XX Примечание: После похудения

In Tiny.js we trust, in R3 we trust.

XX Примечание: я не могу точно вспомнить, что я сказал... Я только помню, что на картинке ниже есть две игры, которые были реализованы с помощью R3. Я действительно играл в соревнование по альпинизму на картинке 3... Я почти пришел, чтобы выиграть первое место. Первое, но я ошибся в свайпе руки. В то время у меня даже хватило духу удалить первого друга на тот момент. Все равно это не WeChat... Стоимость удаления друзей здесь очень низкая...

Реализация на базе R3

Возврат к исходной точке; зеленое лицо WebGL

XX Примечание: все, что было в прошлом, — это пролог. Небеса хороши для реинкарнации, ... (? Я пошел не в ту студию)

Оглядываясь назад на более чем годичный процесс запуска Ant Manor

В сети много проблем со стабильностью, которые могут быть связаны с памятью и ЦП.

XX Примечание: Android: Винить меня?
Усадьба муравьев хоть и 2D, но не такая строгая, как 3D, но все же нуждается в оптимизации
В сентябре стартовал тест производительности новой версии,
- Обнаружена проблема: пользователь вылетает
- Попробуйте идею: WebGL может избежать проблемы воспоминаний
- Фактический бизнес-сценарий: более чем через год после обновления версии Alipay и обновления ядра Alipay поддержка телефонов Android стала лучше.
Вывод: Вернемся к исходной точке: зеленому лицу WebGL.

XX Примечание: В те годы ямы, которые мы засыпали, баги, которые мы исправили, лысины...

время вопросов

XX Примечание. Записанное здесь отклонение может быть больше и приведено только для справки.

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

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

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

Ответ: Отзывы очень хорошие, и они будут обсуждаться с продуктом позже.

Вопрос: Какой движок или инструмент используется для решения проблемы с анимацией цыпленка? кокос2d

Ответ: Это почти одно и то же.

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

Ответ: Я создал систему, чтобы дать работу видению, которое нужно сделать...

XX Примечание: В конце концов, в большой компании система говорит, что делает то, что говорит...

Эпилог

Фронтенд-обязанности: как фронтенд-разработчик вы должны не только выполнять требования продукта

Более высокие требования: нести ответственность за продукт, например: вносить свои предложения, даже руководить продуктом;

XX Примечание: здесь я не услышал конкретики, но общий смысл - это то, что я написал выше.

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

ХХ комментарии и предложения:

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

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

ХХ Отражение:

Времена меняются и итерация знаний

Я занимаюсь фронтендом уже больше 5 лет, да и про webgl тоже мало знаю, но так же как и опыт спикера, их команда тоже путается когда дело доходит до 2д анимации и скелетных моделей, но как он сказал, что нам делать? Одно слово: учиться. Это так просто.
Возможно, как отметил центр форума D2 на следующий день, в отличие от других программных позиций, область фронтенда — это быстро меняющаяся область, полная проблем и возможностей одновременно.
Объединив свой собственный опыт, когда я впервые начал работать над интерфейсом, я начал заниматься интерфейсом со своим самоучкой jQuery в моей школе, личным блогом, опытом работы в области компьютерных наук и хорошим впечатлением от фронтенда. -end, а затем обнаружил, что от jQuery, jQuery UI до Bootstrap, до template.js X lodash до корзины семейства Vue и теперь React X Typescript X Mbox... Кажется, я никогда не переставал учиться... Не так ли? страшный?
Но я вспомнил предложение, которое много раз слышал в звучании книг: «В ближайшие десять лет способности, которые, как мы думаем, исчезнут». Таким образом, решение таково: детский сад на всю жизнь перед лицом неопределенного будущего, поддержание любопытства, развитие творчества и обучение на протяжении всей жизни.

Инженерное мышление, дух мастера

Если использовать старую аналогию, содержание, упомянутое выше, может определять нижнюю границу нашего карьерного роста, докладчик упомянул инженерное мышление и мастерство, оно может определять верхнюю границу нашего карьерного роста.
Возможно, приведенная выше аналогия неуместна, но важность инженерного мышления и мастерства должна стать очевидной после того, как вы послушаете это высказывание. Когда дело доходит до духа мастерства, моей первой реакцией является книга «Путешествие и чтение», вопрос: «Если вам исполнится 100 лет, в каком ресторане вы будете есть?» и предложение: «Всякий раз, когда вы думаете, Еда на высшем уровне была такой, и всегда есть новые впечатления, которые могут снова меня удивить».
Что касается инженерного мышления, я думаю, что это очень просто: просто продолжайте изрываться, заполняться, изрываться, изрываться, изрываться, заполняться...

наконец

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

Эта заметка в основном о том, что XX записал какие-то мысли сам. На самом деле, она еще слишком разрознена. Может быть, это повлияет на него в будущем. Это только последняя часть размышлений, или как она появляется в статье: Цитата из первой половина See Conf Несколько точек зрения, может быть, в какой-то момент в будущем я вспомню определенную точку зрения в содержании, которым поделился Юхе на этот раз.

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

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

О, и документирование моей недавней борьбы с выпадением волос…