Текущая ситуация в японской интернет-индустрии

До того, как я поехал в Японию, я слышал о различных странных ситуациях в японской интернет-индустрии, и я многое испытал с тех пор, как приехал сюда. В целом выделяют следующие аспекты:

Общая технология в целом: На самом деле, исследования в области компьютерной теории в Японии очень хороши, но их промышленное применение не так хорошо. Как не желают добиться прогресса? Например, Yahoo Japan, крупнейший веб-портал в Японии, использует API Google непосредственно в качестве поисковой системы.
Система развития позади: Поскольку производственная промышленность Японии очень развита, многие промышленные продукты реализуются через аутсорсинг слоя. Просто, OES, OEM. Благодаря этой модели они достигли очень успешной в традиционном производстве, поэтому они использовали этот набор шаблонов без колебаний.
Большинство практикующих наполовину монахи: большинство из них не имеют профессионального образования, и в основном они переведены из других отраслей. Есть люди всех возрастов.

Вышеуказанные причины вызывают множество проблем, которые я подробно объясню позже на примере.

Когда вы впервые пришли в компанию

Компания, в которой я работаю, называется リクルート, это компания, предоставляющая информацию и консультации, имеющая множество филиалов, которые в основном охватывают все аспекты японской жизни. Недвижимость, красота, бронирование отелей, подержанные автомобили, подбор персонала и многое другое. Вы можете себе представить ситуацию, когда отечественные Dianping, Lianjia, 58.com, Ctrip и другие информационные сайты собраны в одной компании. После того, как автор поступил на работу, конкретная работа была в упомянутой в вопросе ветке информационной платформы по недвижимости. Группа, в которую я вошел, отвечает за разработку и поддержку мобильных веб-сайтов.

стек технологий

Стек фронтенд-технологий: PHP (Zendframework) + шаблонизатор Smarty + jQuery-подобная библиотека собственной разработки, и вся среда развернута на AWS.

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

Итак, что может сделать ваша компания? Осталась только передняя часть, верно? Тогда давайте посмотрим, как они делают этот интерфейс.

большой фронт

Он разрабатывается в компании, то есть саморазрабатывается (на самом деле около половины саморазвитых здесь — это аутсорсинговый персонал, который круглый год находится в компании), остается только PHP и фронтенд. Потом некоторые друзья спросят, а не значит ли это, что бэкенда нет? Разве здесь нет PHP? Друзья, которые пришли в индустрию раньше, могут знать, что раньше не было интерфейсных фреймворков, таких как AngularJS, ReactJS, VueJS и т. д., шаблон архитектуры веб-сайта. В первые годы все шаблонизаторы находились на бэкенде. После того, как серверная часть получает необходимые данные, они отрисовываются в в основном пригодный для использования HTML в соответствии с шаблоном и отправляются во фронтальную часть После того, как передняя часть получает отрисованный HTML, она просто делает некоторые анимации или асинхронные запросы AJAX и другие действия. PHP здесь должен выполнять работу по рисованию шаблона, а также для доступа к API для получения данных обработки. В рамках этой структуры PHP можно отнести к большой категории интерфейсных приложений.

проблема, с которой мы сталкиваемся

Будучи крупнейшей в Японии информационной платформой по недвижимости (хотя ежедневно активируется всего 400 000 человек), интерфейсная структура настолько проста, что должны быть проблемы. Так в чем проблема?

техническая проблема

На уровне JS/CSS нет фреймворка, а операции с DOM — это прямые ручные операции, Jquery-подобная библиотека, разработанная сама по себе, также время от времени содержит некоторые сложные для устранения ошибки, а повторяющиеся коды и глобальные функции летают повсюду. небо.
Механизм шаблонов находится на уровне PHP с zendframework в качестве фреймворка, поэтому правил более или менее, а код шаблона организован в единицы страниц, но между страницами много повторяющихся кодов, что затрудняет обслуживание.
В общем, непорядок.

организационные вопросы

Что касается того, почему это так хаотично, это во многом связано с организацией.

Японские интернет-компании — рай для обучения продакт-менеджеров. Наша компания — большая компания, и многие программисты в ней — постоянные члены. Но большинство интернет-компаний, которые пишут программы, работают на аутсорсе. Постоянными членами являются только менеджеры по продуктам. Формируется такая организационная структура, программистысовершенно безусловныйПодчиняйтесь продакт-менеджеру. Даже у программистов, которые являются постоянными участниками, нет высокого голоса. А как насчет вас, вы говорите по-японски и хотите стать менеджером по продукту, почему бы вам не приехать в Японию поскорее?

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

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

исходное решение

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

На момент входа AngularJS был уже слаб, ReactJS уже был известен, а VueJS только начинал набирать обороты. Передняя часть похожа на Период Весны и Осени и Период Воюющих царств, подъем различных стран и образ хаотичного мира.

Готов к работе

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

импортировать веб-пакет

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

Перед рефакторингом:

После рефакторинга:

Поскольку я импортирую webpack, я могу делать много интересного, например, я сделал инструмент, похожий на сборник рассказов внутри компании, в отличие от сборника рассказов, я могу запускать PHP-шаблоны. Конечно, на ES6 тоже можно писать JavaScript.

Также импортировал eslint, а также postCSS, различные продвинутые инструменты. Значительно улучшена эффективность работы и качество кода.

выбрать кадр

После импорта веб-пакета самое главное — импортировать интерфейсный фреймворк.

Но для различных сравнений в качестве фреймворка для импорта в итоге был выбран VueJS. Есть так много причин

VueJS легко начать, потому что все аутсорсеры в группе - отречения, некоторые сменили карьеру в музыке, некоторые сменили карьеру на аукционах, а некоторые сменили карьеру в продажах. Да, вы правильно прочитали. Есть женщины-программисты. в возрасте 40. Есть матери-одиночки в возрасте 30 лет и дети в возрасте 20 лет, окончившие колледж. Но есть общая черта, то есть несколько стационарных технологий отработали не менее 5 лет. Для них, чтобы учиться и знакомиться с новыми технологиями, затраты времени и цена совершения ошибок очень высоки. Так что, если вы можете использовать существующие технологии, это здорово. Для VueJS легко начать работу с HTML/CSS/JavaScript, я настраиваю для них среду webpack, и в основном мне не нужно учиться, чтобы начать.
Его можно частично импортировать, в частности, его можно смонтировать на узел HTML, который был успешно отрисован, то есть экземпляр VueJS все еще может быть привязан к HTML, отрисованному PHP.

Вроде бы все так гладко, но когда на самом деле импортирует, то сталкивается с массой проблем.

Препятствие, которое невозможно преодолеть

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

Хотя механизм шаблонов PHP является древним, он очень удобен для SEO и после многих лет модификации и эксплуатации уже находится в очень хорошем состоянии. Компания очень серьезно относится к этому. Всем известно, что хотя VueJS теоретически решает проблему SEO через SSR, это все-таки новая технология, и она очень и очень осторожна для крупных компаний, и даже крупных японских компаний. Тогда некоторые друзья скажут, что вы можете экспериментировать в небольших масштабах.まあな、Сначала я хочу поговорить об организационной структуре

Разработка мобильного веб-сайта компании состоит из нескольких групп.Группа разработчиков разделена в зависимости от области рынка.Например,рынок земли возглавляет группа рынка земли.Разработкой веб-сайта в области земли руководит земля market group.Разработка функции инициируется земельной командой, а затем разрабатывается программистами земельной команды. В целом сайт — это тот же сайт, сгруппированный по рынку, и у каждой группы своя программа развития. Но для обслуживания и обновления всего сайта есть еще и команда разработчиков всего сайта, а я состою в команде разработчиков всего сайта. Однако с точки зрения организации команда всей станции не имеет контроля над командами на других рынках, а контроль находится в руках продакт-менеджеров рыночных команд. На сайте 5 или 6 групп. В организации есть барьеры, если уровня не хватает, раскрутить всю станцию очень и очень сложно.

Мысли о рефакторинге

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

Это не вопрос SEO и не вопрос необходимости существования PHP, а вопрос повышения эффективности разработки.

Почему текущая эффективность разработки низкая?

Организация кода шаблона основана на интерфейсе, а общий код между интерфейсами решается путем копирования и вставки. Слишком много повторяющихся кодов, и они везде видоизменены.
JS/CSS более грязный, чем Template, и существуют они в разных местах. Нет единого разделения файлов или папок по интерфейсу или функциям. Часто, чтобы найти CSS, везде ищется JS. Их тоже много. повторения между этими CSS и JS.

Итак, текущая проблема заключается в том, чтобы организовать отношения между Template/JS/CSS, так как же это организовать?

Компонентизация — хорошее лекарство

Будь то AngularJS, ReactJS или VueJS, предоставляемые ими классные функции, такие как привязка данных и виртуальный DOM, не очень полезны для традиционных крупномасштабных веб-сайтов CMS, таких как наш. Однако одна из их очень важных концепций очень применима к нашему веб-сайту, то есть компонентизация (веб-компонент).

Итак, вопрос в том, как реализовать компонентизацию без фреймворка?

webpack-component-loader

Конкретное решение подробно описано в другой моей статье,

Как добиться компонентизации без большого внешнего фреймворка

Подводя итог: через реализованный вами webpack-loader на этапе разработки соедините Template/JS/CSS в соответствии с компонентами, а на этапе упаковки переместите их туда, где они должны быть.

Суммировать

После того, как мой загрузчик был импортирован, он был разделен на компоненты, но это не изменило существующий стек технологий и не повлияло на SEO, а эффективность значительно повысилась. И в соответствии с тенденцией компонентизации, которую все продвигают, стоимость миграции на VueJS, ReactJS или новый фреймворк в будущем (при условии, что он соответствует идее компонентизации) не особенно велика.

PS

Я видел много друзей в комментариях, спрашивающих меня, как приехать в Японию на работу.Автор не учился в Японии, а приехал в Японию работать сразу после окончания учебы в Китае. На самом деле впереди много каналов, особенно IT-талантов, которые остро нуждаются. Заинтересованные друзья могут подписаться на мой Zhihu, аккаунт Weibo можно проконсультироваться.

Автор знает

Weibo автора