исходное заявление
Эта статья подготовлена членами YUX из Reading Experience Design. Пожалуйста, уважайте оригинальность. Для перепечатки, пожалуйста, свяжитесь с общедоступным аккаунтом WeChat Reading Experience Design ( id: YUX_design ) для авторизации и укажите автора, источник и ссылку.
Ознакомить с чтением, понять чтение, в том числе командное, в том числе технологическое.
1. Общая стратегия выбора технологии «максимизация корпоративного дохода»
Для клиентских команд ключевые моменты, которые могут максимизировать доход от бизнеса, можно резюмировать следующим образом:
Гарантия качества продукции
1. Надежная функциональность:Веб-страница не пуста, экран в порядке, положение не застревает, работа нормальная, данные точные;
2. Отличный опыт:Опыт загрузки, интерактивный опыт, визуальный опыт, доступность "поисковики, вспомогательные устройства"...
Низкие трудозатраты
1. УменьшениеРанняя стадиязатраты на разработку;
2. Уменьшениепоздноэксплуатационные расходы;
Технический отбор почти всех проектов основан на вышеуказанных стратегиях и пунктах.
Так как группы пользователей, платформы и сценарии разных проектов разные, то и акцент на выборе технологий разный.иностранныйсайтов больше ориентированы на пользовательский опыт,ВнутреннеСайты больше внимания уделяют операционной гибкости и контролю затрат на оплату труда.
Во-вторых, выбор модели разработки интерфейса.
В настоящее время команда разработчиков интерфейса Reading User Experience Design Department насчитывает около 20 человек, и мы поддерживаем различные линейки продуктов Reading.
Режим развития линейки продуктов чтения
1. Чистая фронтенд-разработка;
2. Раздельная разработка front-end и back-end;
3. Back-end ведущая разработка;
1. Чистая фронтенд-разработка
В основном дляСтатические страницы, без участия шаблонов и фрейм-машин, в основном фронтенд малый партнер держит аудиторию один. Например: чтение официального сайта, рекрутингового сайта и некоторых страниц с сильным дизайном и важными операционными действиями.
Потому что вся автономия в руках наших фронтенд-разработчиков. Поэтому легко использовать инструменты собственной разработки Node.js для вспомогательной разработки, запускать «сжатие, статистику и совместное внедрение» и т. д.
Наиболее часто используемым инструментом является «Bobo Desktop Edition»: https://github.com/yued-fe/bobo-electron.
▲ Настольная версия Бобо
2. Front-end и back-end раздельная разработка
Более 80% крупных и средних проектов по чтению статей используют режим разработки с разделением интерфейса и сервера. Согласно характеристикам проекта, либо Node.js выполняет отрисовку шаблона, либо веб-сторона выполняет отрисовку шаблона, но по сути JavaScript строит страницу, а управление находится в руках фронтенда.
К таким проектам можно отнести различные новые сайты для чтения в группе, ПК-станции, мобильные станции и соответствующие серверные системы.
Среди них для прямого рендеринга шаблонов используется фрейм-машина собственной разработки «Ynode»: https://github.com/yued-fe/yuenode.
Существует также инструмент рабочего процесса для фронтенд-разработки «Yworkflow»: https://github.com/yued-fe/Yworkflow.
Это похоже на большинство рабочих процессов фронтенд-команды, поэтому я не буду их повторять.
3. Back-end ведущая разработка
В силу непреодолимых исторических причин до сих пор существуют линейки продуктов, такие как внутренние административные системы, в которых используется модель разработки внутренних страниц рендеринга. При работе с этими проектами фронтенд очень самоотвержен, когда дело доходит до создания прототипов:
1. Не используйте что-то вроде Sass, Less и т. д.передний препроцессор;
2. Вместо использования модульных библиотек компонентов, таких как Seajs, используйте менее эффективныеИнтеграция искусственного модуля;
3. не гордыйЕсли вы не стремитесь к инновациям, если Vue очень популярен, вам будет сложно использовать его небрежно;
В этих проектах принадлежат к фронтуслужба поддержкиРоль, пост-техническое обслуживание, как правило, «внутренняя разработка» коллегами из других отделов сотрудничества. Этим коллегам относительно сложно иметь дело с фронтенд-инженерными вещами и популярными новыми технологиями. В итоге обслуживание очень болезненное, и тогда я иду к Жиху, чтобы ответить на вопрос «Какой опыт поддержки плохого кода, написанного предшественниками компании?».
Разделение front-end, back-end и front-end проектирования действительно делает разработку более удобной. Но в этих проектах нужно добровольно отказываться от собственногозона комфорта, используйте более простой код, примите более традиционный ручной метод и обеспечьте качество за счет хорошего дизайна кода, «если все интерфейсы параметров открыты, серверную часть можно легко настроить вместо того, чтобы связывать ее с JS по соглашению».
Эти процессы добавляют множество затрат на трудоустройство на переднее развитие, но окончательный результат заключается в том, что проект может поддерживаться устойчивым и здоровым способом. Такого рода самоопределение и определенные «самопожертвования» для обеспечения гладкого Сотрудничество является воплощением реальной карьеры.
В-третьих, специфические специфические технологии развития технологии «Шанхайская команда».
Основной бизнес шанхайской команды — различные сайты для чтения. Для одного и того же типа проекта текущая модель разработки и используемая базовая структура одинаковы.
Выбор технологии Front-end "Тип проекта"
1. Группа пользователей — ПК-станция внешних пользователей;
2. Мобильные станции, пользователи которых являются внешними пользователями;
3. Разработана группа пользователей для собственного приложения внешних пользователей;
4. Группа пользователей — это управленческий фон внутренних сотрудников;
1. Группа пользователей — ПК-станция внешних пользователей.
Например: Qidian Chinese Network, Qidian Girls Network, Qidian Overseas Edition, Red Sleeves, Novel Reading Network, Romance Novel Bar…
Front-end и back-end разрабатываются отдельно, страница отображается напрямую на основе jQuery разработка.
Причины использования прямого рендеринга
1. Лучший опыт загрузки;
2. Лучшее SEO;
Причины использовать jQuery для разработки
1. нужносовместимыйIE8;
2. Аудитория — внешние пользователи,Визуальный опытОчень важный, с большим весом. Следовательно, более целесообразно сначала быть видимым, а затем иметь действие, то есть видение и поведение должны быть максимально разделены, что немного пожертвует стоимостью разработки, но, очевидно, здесь важнее пользователь;
3. Подавляющее большинство страницвзаимодействоватьв этом случаеЛегкийСовсем не зависит от данных;
Используемая структура пользовательского интерфейса - это пользовательский интерфейс LuLu "http://l-ui.com/", особенно для более поздних проектов, пользовательский интерфейс LuLu берет верх.
▲ Пользовательский интерфейс ЛуЛу
LuLu UI — это ориентированная на дизайн, удобная и гибкая структура пользовательского интерфейса.
2. Мобильная станция, группа пользователей которой — внешние пользователи.
Например: станция M на китайском веб-сайте Qidian, станция M на сайте девушки Qidian, станция M на зарубежной версии Qidian, станция M в Hongxiutianxiang, станция M в сети чтения романов, станция M в баре романтических романов…
Здесь к мобильной станции в основном обращаются через браузеры.Поэтому переключение страниц по-прежнему является традиционным переходом по ссылке, который относится к традиционной веб-странице.Внешний и задний интерфейсы разрабатываются отдельно, и страница отображается напрямую.Поэтому выбор принимает Zepto.js разработка.
▲ Реагировать
Стоит упомянуть об этом, потому что отправная точка для зарубежных изданий, как вы знаете, была на кону, и, следовательно, AMP и PWA, в настоящее время пытаются реконструировать React. Зачем рассматривать выбор технологии React? Давайте посмотрим на творческий коллектив Feifei, как сказать:
Общее содержание: выберите React, чтобы сохранить синхронизацию с приложением, завершившимся React Native, и введите начальную версию для зарубежных стран в AMP и исследуйте PWA.
3. Группа пользователей разрабатывает нативные приложения для внешних пользователей.
У фронтенд-команды на стороне чтения есть проекты, которые напрямую участвуют в разработке нативных приложений, используя для разработки React Native.
▲ Реагировать на родной
Почему стоит выбрать React Native? И есть ли у вас опыт, которым вы можете поделиться? Давайте посмотрим, что говорит главный создатель Wenkang:
Общий смысл таков: "Раньше при разработке гибридного режима было узкое место в производительности. Использование производительности React Native может преодолеть это узкое место, и он поддерживает горячие обновления. Начать работу не так уж сложно. Кроссплатформенность, iOS и Android" уровень повторного использования кода составляет 90%+. Подходит для проектов с менее сложной анимацией, но в конечном итоге зависит от проекта. В частности, он очень подходит для проектов, которые очень подходят для быстрой итерации или проектов, требующих большого количества проб и ошибок на ранней стадии.
Два совета
① Не используйте сторонние библиотеки по своему желанию, неудобно потом модифицировать и поддерживать, попробуйте написать сами или напишите сами;
② Кроме того, необходима поддержка студентов-клиентов, особенно на начальном этапе, потому что переднее понимание нижнего уровня все еще затруднено, и требуется сотрудничество старших студентов-клиентов;
4. Группа пользователей — это управленческий фон внутренних сотрудников
Раздельная разработка внешнего и внутреннего интерфейса, асинхронный рендеринг на веб-стороне страницы с использованиемVue.js.
▲ Vue.js
Почему фоновые проекты управления предприятием рассматривают возможность использования Vue.js для выбора технологии? Какой опыт использования? Вот что сказал создатель Ченг Ронг:
Общее содержание таково: в фоновой системе управления имеется большое количество дополнений, удалений, изменений и проверок, которые подходят для рендеринга библиотеками классов или фреймворками с двусторонней привязкой. При этом нет требований к совместимости «таких как SEO, рендеринг выше сгиба», поэтому подходят одностраничные приложения. Варианты: Angular, React и Vue. Vue.js выбран потому, что Vue.js более удобен для разработчиков для API, документации и т. д.
Затем поделился опытом использования Vue, включая выбор хороших компонентов пользовательского интерфейса, реализацию спецификаций, разделение и загрузку по требованию. Упомянули, что автоматизированное тестирование все еще находится в стадии разработки.
4. Front-end технологии и сценарии, используемые пекинской командой
Продукты и бизнес-направления пекинской команды почти полностью независимы от шанхайской команды, поэтому будет некоторая практика в выборе передовых технологий. Ниже приводится соответствующее введение, представленное Чжао Ранем:
Vue.js
Предоставляет виртуальный уровень представления DOM, подобный React, который можно интегрировать с другими библиотеками, а также поддерживает одностраничные приложения, легкие и простые в использовании. Он подходит для активных страниц, требующих краткосрочной разработки, и конечных страниц со сложными взаимодействиями. Однако решение для рендеринга страниц Vue приводит к тому, что первый экран загружается слишком медленно, а первоначальная загрузка занимает много времени. Чтобы решить эту проблему, мы рассматриваем возможность использования рендеринга на стороне сервера на первом экране. Онлайн-проекта пока нет .
React Native
Используйте JavaScript для эффективной разработки сопоставимых кросс-платформенных приложений. В настоящее время мы использовали фреймворк RN «React Native» для разработки фреймворка RN «React Native» впервые в «QQ Reading v6.6.1». Постепенно вмешиваемся в разработку RN.
Template.js
Переднему интерфейсу нужно только написать файл шаблона для создания фрагментов HTML, сгенерированных соответствующими данными в соответствии с различными входящими данными, и отобразить различные эффекты страницы. До того, как внешний и внутренний интерфейсы были разделены, встроенная страница на стороне клиента использовала это решение технологии шаблонов.
NPM
Удобно скачивать различные Node-модули, используемые в проекте.Функция Scripts может использоваться для выполнения общих задач.На данный момент мы используем ее совместно с Webpack.
Yarn
Каждый загружаемый пакет кэшируется, что устраняет необходимость в повторных загрузках. Он также может распараллеливать операции для максимального использования ресурсов, и его установка немного быстрее, чем Npm.
Webpack
Он имеет все функции Browserify и RequireJS, обрабатывает проект как единое целое, через заданный основной файл «например: index.js», Webpack запустится из этого файла, чтобы найти все зависимые файлы проекта, использовать загрузчики для обработки их и, наконец, упаковать их как один или несколько файлов JavaScript, распознаваемых браузером. В настоящее время Webpack используется для компиляции, извлечения, упаковки и сжатия таких файлов, как Js, Less, Sass, .vue и т. д., для реализации автоматического построения проекта.
Препроцессор CSS
Используйте динамический язык стилей, чтобы быстро и легко писать CSS в проекте, а также легко писать повторно используемые модули CSS. В соответствии с потребностями проекта в настоящее время широко используются переменные, смешанные макросы, заполнители классов, вложенность и т. д. Также пытаюсь использовать плагин PostCSS CSSnext для стилей CSS.
Bodymovin
▲ Бодимовин анимация
При сотрудничестве с дизайнером после того, как дизайнер использует AE для создания анимации, файл Json с информацией о векторной анимации экспортируется.На веб-странице внешний интерфейс восстанавливает анимацию путем рендеринга файла Json. Во время разработки приложения правильное использование анимации может улучшить взаимодействие с пользователем и сделать наши продукты еще лучше. Для некоторых простых анимаций мы можем легко реализовать их, но для некоторых более сложных анимаций нам, возможно, придется выбрать подходящее решение для реализации.Бодимовин - лучший выбор.Его преимущества заключаются в эффективности разработки и плавности самой анимации. высокое восстановление. Мы использовали эту технологию в «Рекламной кампании 658», что не только сэкономило время на реализации анимации, но и на 100% восстановило потребности дизайнеров в анимации.
Lottie
Lottie — это библиотека с открытым исходным кодом от Airbnb, которая поддерживает Android, iOS и React Native и использует файлы Json для быстрой реализации анимационных эффектов. После разработки с RN мы попробуем использовать Lottie для достижения сложных анимационных эффектов. В настоящее время эффект анимации на странице сведений о медали «QQ Reading V6.6.1», партнеры по разработке клиента сначала не решались увидеть требования к анимации дизайна, потому что это был первый раз, когда RN использовалась для разработки, и цикл разработки был ограничен. После того, как внешний интерфейс порекомендует им библиотеку Lottie, эффект анимации может быть достигнут с помощью простого кода.
V. Резюме
Для более формальных проектов стратегия выбора передовых технологий на стороне чтения должна бытьМаксимальный доход от продукта,ПользовательВо-первых, учитывая количество пользователей на уровне 100 миллионов, выбор естественной технологии должен быть более осторожным, поэтому предпочтение отдается зрелым и классическим решениям.
Но это не означает исключениегорячие технологии. Наоборот, даже если это незрелая новая технология, пока она может принести очевидную пользу продукту, ее применение должно поощряться. Например, практика AMP и PWA в зарубежной версии Qiqi.
Но это также приносит еще одну проблему: у техников есть естественное желание изучать и практиковать новые технологии, потому что это помогает уменьшить внутреннюю тревогу и неуверенность.
Особенно тем, кто увлекается техникой. Из-за ограничений спецификаций эти зрелые проекты не могут быть случайными, и разработчикам легко почувствовать, что им негде служить стране, что делать?остаток средств?
Через дополнительные проекты, экспериментальные проекты и команда спонтанно инициирует некоторые ценные внутренние проекты для удовлетворения таких требований и накопления ценного опыта. Это эквивалентно внедрению очень важной доски, позволяющей продуктам, командам и отдельным лицам достичь очень хорошего баланса.
Кроме того, я лично считаю, что начальное чтение относительно болееосторожныйБудьте тише. На самом деле темперамент команды и стиль выбора технологий часто тесно связаны с культурными генами компании.
Ориентировано на продуктВ китайской культуре я больше думаю о том, чтобы сделать пользователей и продукты лучше, позволить технологиям служить продуктам, а технологиям — благодаря продуктам, а не технологиям — благодаря технологиям.
Операция управляемаяСогласно культуре лозунга, это, по сути, ведение бизнеса, поэтому стоять на пороге бури и становиться законодателем передовых технологий больше соответствует корпоративной культуре. Идти дальше — это на самом деле стиль основателя компании.
исходное заявление
Эта статья подготовлена членами YUX из Reading Experience Design. Пожалуйста, уважайте оригинальность. Для перепечатки, пожалуйста, свяжитесь с общедоступным аккаунтом WeChat Reading Experience Design ( id: YUX_design ) для авторизации и укажите автора, источник и ссылку.