25 лет, через три года после выпуска

интервью внешний фреймворк

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

Три года пролетели в мгновение ока: от простой погони за спросом до создания колес, разделения и руководства командой — многие вещи, на которые могут только смотреть свежие выпускники, теперь не так уж недосягаемы. Проще говоря, за последние три года я сменил три места работы, и каждое место работы имеет самые высокие результаты по итогам года в моем отделе. Но этот аргумент слишком утилитарен, слишком скучен. Я считаю, что этот опыт — не просто стереотипный отчет в еженедельной газете и резюме, и это может быть хорошей историей для всех, чтобы разобраться в этом, когда мне исполнится 25 лет. Отсюда и эта статья.

догнать первый год времен

Первой компанией, к которой я присоединился после выпуска, была iFlytek. Хотя это не маленькая компания, с iFLYTEK почти так же легко, как студенту Lanxiang за рулем экскаватора для студента университета. Я помню, что процесс собеседования сводился к тому, чтобы пообщаться с несколькими выпускниками HKUST, занимающими высокие посты в iFlytek, а затем получить предложение.

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

В первый год выпуска моя работа в основном была сосредоточена на реализации некоторых требований к веб-интерфейсу открытой платформы iFLYTEK. В этот период, помимо реализации различных бизнес-потребностей, моя энергия в основном была сосредоточена на изучении технологий с открытым исходным кодом и личных проектах. Когда я впервые присоединился к команде, технологический стек моей команды разработчиков все еще был в модели jQuery + JSP с неразделенными фронтендом и бэкендом, код фронтенда загружался на статический сервер через FTP, а код товарищи по команде все еще изучали возможность использования Knockout в качестве базовой библиотеки следующего поколения — даже тогда прошло почти десять лет с момента появления Knockout. Фактически, многие устаревшие инструменты можно легко заменить, если они имеют доступ к основным технологиям сообщества. Из-за этого я быстро применил ведро семейства Gulp для обработки некоторых задач, которые было легко автоматизировать, и начал тестировать воды Vue 2.0 и Webpack, которые сейчас в самом разгаре, начиная с ноябрьских праздников того года. Затем я создал частный репозиторий NPM во внутренней сети и выпустил более десяти пакетов, включая скаффолдинг, чтобы помочь всем перейти на новый стек технологий. Эта технология, которая сейчас распространена среди первокурсников, в то время была достаточно новой. Воспользовавшись случаем, я продвигал практику разделения фронт- и бэк-эндов команды, и позже был удостоен чести быть назван лучшим новичком в отделе в том году.

Было так много вещей, которым я могла научиться и хотела научиться, когда только закончила учебу. Помните, что внутреннее приложение iFLYTEK может отображать ежедневный рейтинг ударов. Если вы забьете вовремя в 12 часов вечера, то у вас есть шанс отхватить первое место в заезде на следующий день - скриншоты забивки этого периода, у меня более 30 картинок в мой телефон. Конечно, даже если iFLYTEK действительно является компанией, в которой я работал больше всего сверхурочно, на самом деле она далеко не так загружена. Правда в том, что с тех пор я обнаружил, что пока вы смотрите на экран с кодом и выполняете его вовремя, никому нет дела до того, что вы пишете. С высоким интересом в то время я возился со многими вещами, которые сейчас кажутся в основном чистым развлечением. Например:

  • Ove Langязык программирования, который можно интерпретировать как(表态 (钦点 董先生 特首) (= 特首 董先生) 哦。код.
  • Merry8Виртуальная машина, которая может имитировать и запускать игры PONG, написанные с использованием древних инструкций по сборке Chip8.
  • SinomapБиблиотека карт, которая может отображать данные GeoJSON на холсте с использованием алгоритма проекции Меркатора.
  • FlylogИнструмент удаленной отладки, который может помещать информацию журнала с других страниц устройства в фоновый режим ПК.
  • CSS EmojiНапример, эмодзи можно нарисовать с помощью двух div.

Конечно, вы можете обвинить меня в том, что я был одержим технологиями, а не бизнесом в то время (это действительно оценка интервью крупного завода), но подбрасывание этих интересных проектов заставляет меня чувствовать, что жизнь в то время была лучше, чем каждые выходные. Колледжи, которые должны спешить (переписывать) свою домашнюю работу, намного комфортнее. С точки зрения стороннего наблюдателя, я рос в iFLYTEK не спеша, и многие выпускники HKUST с годами стали там техническим костяком. Однако дело в том, что я не пробыл в iFlytek целый год и оставил статью "300 дней Сяоцзи в iFlytek«В память о нем я прощаюсь с Хэфэем. Зачем оставлять? Если мне нужно подвести итог в одном предложении, я должен сказать, что я чувствую, что я непринадлежатьВот оно: у Хэфэй нет особого чувства принадлежности ко мне как к южанину, а передовые технологии, с которыми я знаком, — это скорее глазурь на торте для технологической компании, которая не является интернет-компанией. Из тоски по географии и личным ценностям я решил попрощаться с этой столовой, компанией, по которой я до сих пор скучаю. Спасибо Jindong, Fangjie, Jiajun и многим другим за их заботу и надеемся увидеть вас снова, если у вас будут предопределенные отношения.

Фотография отладки демонстрации большого экрана 2016 года. Это были мои самые загруженные 24 часа в iFlytek, и это был единственный раз, когда я отчитывался непосредственно перед председателем.

Второй год участия сообщества

Когда я представляюсь, то часто говорю, что места, в которых я останавливался, кажутся «фальшивыми»: я учусь в HKUST, но это не в Пекине; я ездил на гусиную фабрику на стажировку перед выпуском, но база не в Шэньчжэне, я оставляю новости После полета я отправился в Meituan Dianping, но отдел был в Сямыне. До сих пор у меня пока нет планов покидать город. Пока я не ограничиваюсь этим вульгарным давлением со стороны сверстников, Сямынь — удобный город, который находится недалеко от моей семьи и легко видит море. В 2017 году Сямэньский научно-исследовательский центр Мэйтуан-Дяньпин все еще мог видеть яхты перед тем, как отправиться в путь. Каждый день, когда вы едете на велосипеде на работу и обратно, вы можете подышать морским бризом. Иногда вы можете пойти на пляж с друзьями, чтобы ловить крабов после работы :)

Мое собеседование на вступление в Meituan-Dianping прошло очень гладко.Основной процесс заключался в том, что я показал некоторые из различных игрушек, описанных выше, соответствующие блоги и главного босса Ху Гэ. Там моя основная работа заключалась в разработке внутренней системы базы знаний под названием Xuecheng. Хотя доля кода, который я представил для этого проекта, возможно, была небольшой, я верю, что пока он еще жив, он всегда будет иметь со мной тонкое отношение — название города — это мое имя. Все студенты, смотревшие «Игру престолов», должны знать Цитадель, в которой живут холостяки Семи Королевств Вестероса. Разве это мудрое название не подходит для базы знаний?

Для систем баз знаний, подобных Wiki, очень важен редактор форматированного текста в веб-интерфейсе. Студенты с небольшим опытом знают, что редактирование форматированного текста — это область, которая долгое время считалась тянькеном, а время от запуска до зрелости соответствующих основных базовых библиотек исчисляется годами. Очевидно, что нам не нужно изобретать велосипед, мы можем опираться на зрелую структуру, которая уже есть у сообщества. В этом контексте я впервые столкнулся с Slate, фреймворком, который позволяет вам настраивать ваши собственные текстовые приложения в форме написания компонентов React.Его элегантный API, полная документация и чистый исходный код сделали меня очень быстрым.Я решил чтобы сесть в машину, и меня даже не слишком заботило дружеское напоминание о том, что она все еще находится в состоянии бета-тестирования.

В первых нескольких версиях Citadel наш код на Slate был довольно аккуратным. Но вскоре возникла проблема: это был не совсем проверенный фреймворк, наши пользовательские компоненты выявляли множество проблем с состоянием при редактировании, а количество ошибок было очень велико. По моему предыдущему опыту работы, проблемы, с которыми фреймворк не прост в использовании, можно в принципе модифицировать или обойти в бизнесе. Но это не касается форматированных текстовых редакторов, потому что многие баги есть в самом фреймворке, и даже если о них сообщается сообществу, никто не обязан решать их за вас немедленно. Так что делать? Загрузите исходный код и измените его самостоятельно.

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

Я до сих пор очень четко помню содержание первого PR: дай.npmignoreВ файл добавлена ​​новая строка для решения проблемы повторной компиляции Babel по умолчанию. Это всего лишь одна строка кода, но из-за моего благоговения перед проектами с открытым исходным кодом я написал довольно подробное описание того, почему мне нужно было добавить эту строку кода и как это решит проблему. Автор тоже слил этот PR ненадолго. После того, как я обнаружил, что участие в проектах с открытым исходным кодом — это то, чем это было раньше, у меня появился отличный стимул представить больше моих улучшений вышестоящим. К тому времени, когда я покинул проект Xuecheng, я объединил почти 20 MR, включая исправления ошибок, тесты, документацию, в основную часть Slate и поддерживал полный китайский перевод версии 0.24 документации. Сегодня Slate имеет почти 15 000 звезд и более 200 участников, и я все еще могу быть в первой десятке в его таблице лидеров участников.

К сожалению, даже если я изо всех сил стараюсь улучшить Slate, в нем есть вложенные компоненты пользовательского интерфейса для таблиц, списков и т. д., и его стабильность по-прежнему не соответствует потребностям Xuecheng. В сочетании с более агрессивным подходом к обновлению мы быстро столкнулись с проблемами, связанными с продолжением синхронизации исходящих обновлений. Достаточно поставив проблему перед верхушкой компании и предоставив альтернативы, мы мигрировали фреймворк Rich Text в ProseMirror, аналогичный по архитектуре, но более стабильный, который и должен был использоваться в академии по сей день. Хотя Slate уже давно не на рынке, в процессе его использования и улучшения я полностью понимаю работу и участие open source проектов, и наконец-то не просто развлекаюсь на GitHub.

Сравнение моих вкладов на GitHub в 2016 и 2017 годах.

Ко второму году, хотя код, который я отправил на GitHub, по-прежнему имел много игровых билетов, это уже не были игрушки. Примерно таковы:

  • Инструмент асинхронной миграции данныхBumpover, что обеспечивает 100-процентное покрытие юнит-тестами.
  • Сравните сходство Vue и Angular, извлекая узлы синтаксического дерева.naming-style-demoПример.
  • Строка HTML для виртуального синтаксического анализатора DOMhtml-toy-parser.
  • 40 строк фреймворка MVCnano-mvc.

Во время моего пребывания в Meituan Dianping, помимо отправки кода на GitHub, я также был весьма активен в некоторых технических сообществах. Я помню, что мне нужно было переключить Vue на React, когда я только начинал, Ностальгия по Vue побудила меня пойти на SegmentFault, чтобы ответить на множество вопросов по Vue, и это было первое место в этой теме в течение нескольких недель. Более того, я также обнаружил, что Nuggets — очень подходящее место для публикации технических статей (для новичков). В конце 2017 года мойКолонка самородковУже имеет более 3000 подписчиков. Однако я не дурак, который вносит только положительную энергию технологий. Если бы в то время вы говорили о том, как глубоко разобраться в четырех направлениях этого и паразитарного смешанного наследования и прочей старомодной дребедени в статье о Наггетсах, то я бы, наверное, не задумываясь встал и пожаловался в комментариях :) Но сейчас Мне больше неинтересно участвовать в этих слюнявых темах.

Я не работал в Meituan Dianping больше года из-за более подходящих для меня возможностей, но я все еще скучаю по команде, к которой только что присоединился. Будь то ежедневный ужин, когда друзья съедают все меню во время ужина, или Starbucks бренда Tiger Brother, который можно найти время от времени, все это довольно интересные воспоминания. Я также хотел бы поблагодарить Jiali, Genlong, Chunyu и других учеников, которые взяли на себя Xuecheng. Благодаря вам Босс Зоу не пришел за мной охотиться.

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

Третий год прорыва узкого места

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

Однажды в конце 2017 года, когда я поливал наггетс водой, я нашел мягкую статью под названием «Мы пишем код у моря». Так совпало, что его база тоже в Сямэне, а настоящий адрес как раз по дороге на работу. В любом случае, в настроении поболтать, я посетил эту компанию, которая в то время называлась Happy Shopping, на велосипеде.

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

Надо сказать, что если бы Sugar Cake не разместил поддержку PR для параллельных сборок, которые он объединил в Webpack, я бы не стал так легко поощрять его на третью работу менее чем через два года после выпуска. Конечно, наша общая повседневная жизнь не такая уж и высокая ракетостроение. Моя работа здесь в основном сосредоточена на эскизных проектах, которые в то время не были независимыми. Я отвечаю за поддержку SDK Flat Editor на этом сайте дизайна вместе с соответствующими компонентами пользовательского интерфейса. Сначала я думал, что составление чертежей — это относительно маргинальный новый бизнес, пока после переезда компании на стойке регистрации не повесили вывеску с чертежным дизайном, и тогда я понял, что это, вероятно, равносильно присоединению к компании под названием China Mobile до раскрутки. отдел Почты Китая.

Редакторы графического дизайна имеют много общего с редакторами форматированного текста, а текущие широко распространенные проекты с открытым исходным кодом в этом сегменте не разработаны с учетом масштабируемой гибкости Slate, что, несомненно, дает мне много возможностей для игры. За последний год или около того я шаг за шагом знакомился с редактором, начиная с незначительных исправлений ошибок, и, наконец, за последний квартал запустил функции, которым больше всего хочу научиться у Slate:Компонентные редактируемые элементы. Slate позволяет нам объявить<Table>компонент расширяет возможности редактирования таблицы в текстовом редакторе. Я применил эту идею к нашему редактору на основе Vue. Теперь нам нужно только предоставить компоненты пользовательского интерфейса, написанные на основе Vue, и мы можем легко собрать поддержку новых редактируемых типов элементов для редактора, не изменяя основной исходный код фреймворка. В сочетании с неустанными усилиями наших партнеров по внешнему рисованию наш редактор добился преимуществ как Canvas, так и DOM.В настоящее время нет общедоступного редактора с открытым исходным кодом, который мог бы соответствовать этому.

Наш плоский редактор, добро пожаловать в гостиgaoding.comопыт о.

Помимо рефакторинга фреймворка в соответствии с моими дизайнерскими идеями на высоком уровне, я также проделал кое-какую интересную работу на более низком уровне детализации. Например, я использую идею преобразования системы координат для поворота графики.Алгоритм ограничения кадрирования и перетаскиванияОт сотен строк if else решение упрощается до более чем десяти строк математического преобразования; на основе хеш-значения сериализованных данных узла реализуется более мелкозернистое совместное использование структуры исторического состояния, а историческое состояние библиотека управления с открытым исходным кодомStateShot;использоватьCodeModАвтоматический рефакторинг кода ES5 в ES6, разработка и реализация механизма настройки спецэффектов в редакторе, подача заявки на патент в качестве первого изобретателя и т. д. Теперь я номинальный лидер (талисман) команды веб-инструментов, я написал около 80 технических блогов, а читаемость рубрики Nuggets перевалила за 200 000. Вроде бы все в порядке, правда?

Но эти работы не заставляют меня чувствовать, что я преодолел узкое место.

Я давно спрашивал Xiaomi, есть ли у нас какие-то особые преимущества перед Adobe? Ответ Xiaomi заключается в том, что нам нужно сосредоточиться на сценариях контента и подразделения, чтобы добиться большей простоты использования для обычных пользователей. С точки зрения бизнеса я согласен с этим ответом, но с чисто технической точки зрения я всегда чувствую, что этот ответ больше подходит для руководителя отдела маркетинга, а не осведомленности технического отдела. Кроме того, я всегда чувствовал, что моей собственной системы навыков все еще не хватает, поэтому, хотя я работаю в компании, которая занимается бизнес-дизайном и уделяет особое внимание фронтенд-технологиям, то, что я делаю, недостаточно круто. Что случилось? мой ответоказывать.

JavaScript, который хорошо пишут наши фронтенд-студенты, — это просто однопоточный код, исполняемый на процессоре. Не забывайте, что у нас также есть WebGL, утомительное оружие, которое позволяет нам раскрыть потенциал наших графических процессоров. Эта область часто считается эксклюзивной для разработчиков игр. Когда дело доходит до применения 3D-возможностей в Интернете, первое, что приходит на ум, — это применение зрелых движков рендеринга с открытым исходным кодом, таких как Three, которые полностью упакованы. Так что нет необходимости изобретать велосипед в этой области? Наоборот, я обнаружил, что это огромный голубой океан, и его применение в сфере веб-дизайна — это почти чистый лист бумаги, и есть большие возможности настройки, оптимизации и перспективы применения. В связи с ограниченным объемом и тематикой этой статьи, я не буду здесь ее подробно раскрывать, достаточно показать некоторые эффекты рендеринга, полученные нашим собственным движком рендеринга в течение одного месяца разработки:

Когда я некоторое время назад решил углубиться в WebGL, Mirage напомнил мне, что это в основном эквивалентно удалению числа и переобучению. Это правда, что порог неясного API для графики очень сильно ударил по мне в начале кривой обучения, но после того, как я некоторое время придерживался реализации демо без использования готового движка, в какой-то момент я почувствовал, что я Наконец-то смог собрать эти кусочки воедино. В это время, вкупе с опытом проектирования фронтенд-фреймворка, я нашел направление самоисследования, очень подходящее для нашего сценария приложения. Конкретное наполнение здесь не описать, могу только сказать, что мой мы с друзьями интенсивно развиваемся. , очень надеемся, что наши новые возможности познакомятся с вами как можно скорее :)

Сегодня мне 25 лет, и я чувствую, что наконец-то выбрался из узкого места написания логики на процессоре в предыдущие годы. От самых ранних игрушечных языков программирования и игровых симуляторов до нынешних движков рендеринга, так называемые «языки программирования, операционные системы и компьютерная графика» - это три основных романа программистов.Я также могу похвастаться, что немного баловался. Мне может быть нелегко сохранять мотивацию и находить достойные технические области после трех лет работы, так что сейчас я в хорошей форме. Конечно, для того, чтобы продолжать углублять технологию в будущем, необходимо не только знание предметной области традиционного веб-интерфейса, но и больше междисциплинарных и междисциплинарных знаний. Спасибо большим ребятам, которые решили изучать здесь игровые движки и графику, и я получил много пользы от общения с ними. Сейчас у меня действительно слишком много дел, поэтому мой блог и колонка могут не выдерживать ритм ежемесячных обновлений, надеюсь компенсировать это большим количеством галантерейных товаров в будущем :D

Постскриптум и спасибо

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

Хотя эта статья в основном о технологиях, моя жизнь не полностью связана с технологиями: у меня есть микро и дрон, я играю в Zelda и Mario на Switch, имя цветка (Sprite) и паблик. Имена (цветные альбомы) все от Бай Сюэ: после выпуска, помимо посещения крупных городов, таких как Пекин, Шанхай, Гуанчжоу, Шанхай и Ханчжоу, за государственный счет, они также побывали на Тайване, в Сингапуре, Чехии и Франции (включая святую землю Бай Сюэ, Страсбург). , что весьма интересно.Место. Пока вы сохраняете непредубежденность в жизни, вы всегда можете узнавать и учиться у многих людей, которые лучше вас. Если я составлю список в порядке признания газеты, то я чувствую, что самые влиятельные люди следующие, даже если некоторых из них я никогда не встречал:

  • Xiaomi и Tangbing нашей компании сыграли для меня большую «образцовую роль» в отношении к технологиям и управлению командой, и опыт роста в этой команде лучший.
  • Ян Сторм Тейлор, автор Slate, дал мне много восторженных и строгих отзывов, когда я впервые вступил в сообщество открытого исходного кода, и его философия проектирования фреймворка оказала на меня глубокое влияние.
  • Ctrip's Industrial Gathering показал мне уровень элегантности, которого может достичь логика кода. Стиль кодирования GSP, который резюмирует Джуджу, хорошо работает даже при написании движков рендеринга, полностью меняя мое отношение к функциональному программированию как излишество.
  • Иван Куцкир, автор Photopea, приветствовал меня в Праге, и применение его работ в графике вселило в меня огромную уверенность, чтобы погрузиться в эту область.
  • Неназванная женщина очень утешала меня, когда я попадал в беду, и я привык со спокойной душой писать код в движущемся поезде, куда я езжу к ней каждые выходные.

Фотография сделана во время экскурсии по Страсбургу.

Я также хотел бы поблагодарить многих, многих людей, которых я встретил после выпуска, Ведь только через бесчисленные выборы, сделанные судьбой с каждым, человек может стать человеком. В огромной и хаотичной системе жизни мы, к счастью, можем делать выбор, чтобы встречаться с другими, следовать идеалам и вносить изменения —We are what we choose, Наконец, спасибо за чтение: D

Эта статья была впервые опубликована на моем официальном аккаунте "Цветной альбом". Мне не нужен трафик или реклама. Это просто для того, чтобы подружиться. Добро пожаловать на внимание :)