Мы внесли большие изменения в мобильные страницы Ameblo, самый популярный блог в Японии. В сентябре этого года мы переключили нашу систему с Java на node.js с помощью react / redux. Мы знаем, что мгновенная загрузка контента является наиболее важным моментом для UX, поэтому основная цель изменений - ускорение.
Нам нужно было обновить UI / UX и архитектуру нашего продукта. Мы считаем, что создание хорошего UI / UX и использование современной экосистемы действительно важно для создания отличного продукта.
Мы используем эти технологии и методы, перечисленные ниже.
ССР и СПА
Мы смешали рендеринг на стороне сервера (SSR) для первого рендерера с одностраничным приложением (SPA) для рендеринга во время выполнения. И то, и другое важно для блогов, поскольку пользователи часто просматривают несколько страниц после того, как увидят статью.
SSR - хорошая система для первого рендерера и SEO. Минимальный объем содержимого, включенного в HTML, необходим для отображения в верхней части страницы.
Скорость СПА потрясающая. Для отображения страниц требуется лишь небольшой объем данных из API. Это дает большое преимущество UX.
Ленивая загрузка
Мы используем отложенную загрузку, чтобы быстрее рендерить первую страницу. В HTML включается только основное содержимое, такое как статья, а вспомогательное содержимое загружается по мере прокрутки пользователей. Используя эту технику, мы можем уменьшить размер содержимого HTML и количество неиспользуемых запросов.
Реагировать и Redux
React / Redux - отличный инструмент для веб-разработчиков. Мы можем создать множество логик и компонентов как чистые функции с помощью React / Redux. Это упрощает разработчикам управление состоянием приложения и упрощение логики.
Во-первых, создатели действий Redux возвращают простой объект как действия Redux. Затем редукторы Redux возвращают новые объекты как новые состояния Redux, объединенные с предыдущими состояниями. Наконец, компоненты React получают состояния как свойства и возвращают элементы.
() => action, (previousState, action) => newState, (props) => el
Поток является односторонним, и все они управляются как чистые функции.
Изоморфное веб-приложение
Приложение Ameblo, версия 2016 написан на JavaScript. Почти все коды работают как на стороне клиента (браузеры), так и на стороне сервера (node.js) одним и тем же потоком.
Атомный дизайн
Сначала мы управляем компонентами, используя containers и components каталоги, рекомендованные Redux (Компоненты представления и контейнера). Но в итоге мы остановились на Атомарном дизайне. Это проясняет роль каждого компонента.
Atoms(минимум, без состояния, например, значок, кнопка)Molecules(для повторного использования, без состояния, например, список, миниатюра пользователя)Organisms(большие части, наличие состояния, получение данных, например Navi, Article)Templates(шаблоны каждой страницы, список модулей организма, например EntryList, Entry)Pages(только одна страница из-за SPA)
ESLint и stylelint
Мы используем ESLint и stylelint для обеспечения согласованности кода. Наши правила расширены от eslint-config-airbnb и stylelint-config-standard. Разработчики не могут пройти тест CI, если в их коде есть ошибки. Правила строгие, поэтому новым участникам может быть немного сложно. Но мы думаем, что использовать инструмент лучше, чем вручную проверять и указывать на ошибки.
Большая фотография
Это общая картина нашей новой системы.
Когда разработчик отправляет свой код в GHE, тестирование и сборка автоматически запускаются на CircleCI. После этого CircleCI развертывает статические файлы в CDN и запускает веб-серверы.
Наши веб-серверы находятся в контейнерах Docker. Докер приносит много преимуществ приложению node.js. Как только мы создадим образ докера, он может работать где угодно. Мы можем развернуть или вернуться в любое время, и обновление версии node.js станет проще.
Код приложения генерируется webpack и Babel. Мы используем webpack-isomorphic-tools, babel-preset-es2015, babel-preset-react, transform-decorators-legacy и т. Д. Это пример кода компонента. Декоратор полезен для компонентов React.
// components/organisms/SpProfile.js
import React from 'react';
import { connect } from 'react-redux';
import { routerHooks } from 'react-router-hook';
import { fetchBloggerRequest } from '../../../actions/bloggerAction';
const defer = async ({ dispatch }) => {
await dispatch(fetchBloggerRequest());
};
const mapStateToProps = (state, owndProps) => {
const amebaId = owndProps.params.amebaId;
const bloggerMap = state.bloggerMap;
const blogger = bloggerMap[amebaId];
const nickName = blogger.nickName;
return {
nickName,
};
};
@connect(mapStateToProps)
@routerHooks({ defer })
export class SpProfileInfo extends React.Component {
static propTypes = {
nickName: React.PropTypes.string.isRequired,
};
render() {
return (
<div>{this.props.nickName}</div>
);
}
}
Обновить UI / UX
Мы обновили пользовательский интерфейс для лучшего UX в 2016 году.
В новом пользовательском интерфейсе исправлены размеры представления содержимого. Поздняя загрузка содержимого может вызвать промах. Я думаю, что промахнуться - худший UX.
Мы начали предоставлять дизайн с ориентацией на контент.
Доступность
С момента выхода этого нового выпуска мы начали уделять внимание доступности. HTML достаточно доступен, поэтому стараемся правильно разметить. Например, добавление alt к <img> и разметка как <a> или <button> для интерактивных элементов. Чтобы проверить это автоматически, воспользуемся плагином jsx-a11y.
В то же время мы начали пробовать разметку для голосовых читателей. Мы используем WAI-ARIA, например aria-hidden, aria-label, role attribute и т. Д.
Результаты
Эти статистические данные взяты из SpeedCurve и Google Analytics по сравнению с августом и сентябрем 2016 года.
- Критические блокирующие ресурсы (улучшено 75%)
- Запросы содержания (улучшено 58,04%)
- Рендеринг (улучшено 44,68%)
- Время загрузки страницы (улучшено 40,5%)
- Просмотры страниц (улучшение на 57,15%, фактическое около 20%, некоторые блоггеры опубликовали последние новости в сентябре)
- Страниц / сеанс (улучшено 35,54%)
- Показатель отказов (улучшение 44,44%)
: суши :: пиво :!
