История создания библиотеки

В начале развития динамических веб-приложений интерфейсы в основном отображали даты в статическом формате:

2020-05-14 13:42:11

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

  • «5 минут назад»
  • «час назад»
  • «только что»
  • «2 дня назад»

Именно такой способ отображения времени стал особенно востребован после популяризации:

  • Twitter
  • Facebook
  • Reddit
  • GitHub

Появилась необходимость в компактной библиотеке, способной:

  • преобразовывать дату в относительное время;
  • автоматически обновлять отображение;
  • работать быстро даже с большим количеством элементов;
  • поддерживать локализацию;
  • не зависеть от тяжёлых фреймворков.

На фоне этих требований и появилась библиотека timeago.js.

Формирование концепции библиотеки

Основная идея timeago.js строилась вокруг нескольких принципов.

Минимальный размер

В эпоху активной борьбы за производительность фронтенда разработчики стремились уменьшать объём JavaScript-кода. Особенно это было важно для:

  • мобильных устройств;
  • медленных сетей;
  • клиентских SPA-приложений.

Большие библиотеки для форматирования дат уже существовали, например:

  • Moment.js
  • date-fns

Однако они решали значительно более широкий круг задач:

  • парсинг дат;
  • работа с часовыми поясами;
  • вычисления интервалов;
  • форматирование по шаблонам;
  • календарные операции.

Для простой задачи «5 минут назад» подключение тяжёлой библиотеки считалось избыточным.

timeago.js создавалась как специализированный инструмент с узкой областью ответственности.

Влияние jQuery-плагинов

До появления современных модульных библиотек аналогичный функционал часто реализовывался через jQuery-плагины.

Наиболее известным примером стал плагин:

  • jquery-timeago

Он автоматически заменял содержимое HTML-элемента:

<time datetime="2020-05-14T13:42:11Z"></time>

на:

5 minutes ago

Однако архитектура jQuery-плагинов имела ряд недостатков:

  • сильная зависимость от DOM;
  • необходимость подключения jQuery;
  • сложность интеграции с современными сборщиками;
  • неудобство использования в React/Vue/Angular;
  • низкая модульность.

С развитием экосистемы ES-модулей появилась потребность в независимом решении без jQuery.

timeago.js стала одной из библиотек нового поколения, ориентированных именно на модульный JavaScript.

Появление timeago.js

Библиотека была создана как лёгкое решение для отображения относительного времени в браузере и Node.js.

Ключевые особенности первоначальной архитектуры:

Простая функция форматирования

Библиотека предлагала лаконичный API:

timeago.format(date)

Пример:

import * as timeago from 'timeago.js'

timeago.format('2020-05-14')
// "3 years ago"

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

Ориентация на современные стандарты

timeago.js появилась в период активного перехода JavaScript-сообщества к:

  • ES6;
  • npm;
  • модульной архитектуре;
  • tree shaking;
  • webpack;
  • Rollup.

Поэтому библиотека проектировалась с учётом:

Поддержки npm

Установка выполнялась через:

npm install timeago.js

Использования ES-модулей

import { format } from 'timeago.js'

Поддержки CommonJS

const timeago = require('timeago.js')

Такой подход позволил библиотеке быстро интегрироваться в современную фронтенд-экосистему.

Основная философия проекта

Философия timeago.js строилась вокруг нескольких идей.

Одна задача — одно решение

Библиотека не пыталась стать универсальным инструментом для работы с датами.

Она не включала:

  • календарные вычисления;
  • работу с часовыми поясами;
  • сложный парсинг;
  • локальное форматирование по ICU;
  • операции над временными интервалами.

Вместо этого вся логика концентрировалась вокруг одной задачи:

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

Подобная философия соответствует Unix-подходу:

«делай одну вещь, но делай её хорошо».

Развитие пользовательских интерфейсов

Рост популярности SPA-приложений существенно повлиял на востребованность timeago.js.

Особенно библиотека оказалась полезной в:

  • новостных лентах;
  • чатах;
  • комментариях;
  • уведомлениях;
  • системах активности;
  • социальных сетях;
  • issue-трекерах.

Например:

Комментарий опубликован 2 минуты назад

Через некоторое время интерфейс должен автоматически обновиться:

Комментарий опубликован 3 минуты назад

timeago.js решала эту проблему автоматически.

Автоматическое обновление времени

Одной из важных особенностей библиотеки стала функция рендеринга с таймером обновления.

Пример:

timeago.render(document.querySelectorAll('.time'))

После вызова библиотека:

  1. находила элементы;
  2. считывала дату;
  3. вычисляла относительное время;
  4. автоматически обновляла текст через интервалы.

Это избавляло разработчиков от необходимости самостоятельно писать:

  • setInterval;
  • перерасчёт времени;
  • обновление DOM;
  • синхронизацию отображения.

Поддержка локализации

По мере распространения библиотеки возникла необходимость интернационализации.

Изначально многие библиотеки отображали время исключительно на английском:

5 minutes ago

Однако мировое сообщество разработчиков требовало локализации:

  • русский;
  • китайский;
  • японский;
  • французский;
  • немецкий;
  • арабский;
  • испанский.

timeago.js получила систему регистрации языков.

Пример:

import { register } from 'timeago.js'

Разработчик мог определить собственные правила локализации.

Особенности реализации локалей

Локализация времени значительно сложнее обычного перевода строк.

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

1 минуту назад
2 минуты назад
5 минут назад

Поэтому архитектура локалей в timeago.js строилась на функциях, а не на статических словарях.

Пример упрощённой локали:

const localeFunc = (number, index) => {
  return [
    ['только что', 'прямо сейчас'],
    ['%s секунд назад', 'через %s секунд']
  ][index]
}

Такой подход позволял реализовывать сложные языковые правила.

Производительность как ключевая цель

Одной из причин популярности timeago.js стала высокая производительность.

Библиотека:

  • не перегружала DOM;
  • минимизировала количество обновлений;
  • использовала простые вычисления;
  • избегала тяжёлых зависимостей.

Это было особенно важно для интерфейсов с большим количеством временных меток.

Например:

  • лента Twitter;
  • список GitHub Issues;
  • комментарии Reddit;
  • корпоративные чаты.

В подобных интерфейсах могут одновременно присутствовать сотни дат.

Конкуренция с Moment.js

Во время активного распространения timeago.js библиотека Moment.js уже доминировала на рынке работы с датами.

Однако у Moment.js существовали проблемы:

  • большой размер;
  • сложность tree shaking;
  • высокая стоимость для bundle size;
  • избыточность для простых задач.

Со временем сообщество начало искать более лёгкие альтернативы.

На этом фоне появились:

  • Day.js
  • date-fns
  • Luxon
  • timeago.js

Каждая из них решала собственный класс задач.

timeago.js заняла нишу сверхлёгкого отображения относительного времени.

Распространение в экосистеме JavaScript

Со временем библиотека начала активно использоваться в:

  • React-приложениях;
  • Vue-проектах;
  • Angular-интерфейсах;
  • Svelte;
  • Node.js;
  • SSR-приложениях.

Особенно важной оказалась возможность использовать библиотеку независимо от фреймворка.

Пример для React:

format(date)

Пример для Vue:

{{ format(date) }}

Пример для Node.js:

console.log(format(Date.now() - 10000))

Библиотека не навязывала архитектурных ограничений.

Минимализм API

API библиотеки оставалось крайне небольшим.

Основные функции:

Функция Назначение
format Форматирование даты
render Автоматическое обновление DOM
cancel Остановка обновлений
register Регистрация локали

Подобный минимализм имел несколько преимуществ:

  • низкий порог входа;
  • простота документации;
  • быстрое освоение;
  • предсказуемое поведение;
  • удобство сопровождения.

Поддержка браузеров

В период создания библиотеки веб-разработка всё ещё сталкивалась с проблемами совместимости браузеров.

timeago.js проектировалась так, чтобы корректно работать:

  • в современных браузерах;
  • в мобильных WebView;
  • в старых версиях Chrome и Firefox;
  • в серверной среде Node.js.

Минимальное использование сложных API облегчало переносимость.

Эволюция подходов к форматированию времени

История timeago.js тесно связана с общим развитием форматирования дат в JavaScript.

Ранний этап

Разработчики вручную вычисляли разницу:

const seconds = Math.floor((Date.now() - date) / 1000)

Затем писали длинные условия:

if (seconds < 60) {
  return 'just now'
}

Подобный код:

  • дублировался;
  • плохо поддерживался;
  • не поддерживал локализацию;
  • содержал ошибки.

Этап библиотек общего назначения

Позже появились универсальные решения:

  • Moment.js
  • date-fns

Они предоставляли API:

fromNow()

или:

formatDistanceToNow()

Однако размер библиотек оставался существенным.

Этап специализированных решений

timeago.js стала представителем подхода:

«маленькая библиотека для одной конкретной задачи».

Этот подход хорошо совпал с трендами современного frontend engineering:

  • микробиблиотеки;
  • tree shaking;
  • modular design;
  • performance-first development.

Влияние на пользовательский опыт

Относительное отображение времени существенно изменило UX веб-приложений.

Сравнение:

Абсолютное время

2026-05-21 12:41

Относительное время

5 минут назад

Второй вариант воспринимается быстрее и интуитивнее.

Особенно это важно для:

  • уведомлений;
  • новостей;
  • сообщений;
  • комментариев;
  • систем активности.

timeago.js стала одной из библиотек, сделавших такой формат стандартом индустрии.

Архитектурная простота

Внутренняя архитектура библиотеки оставалась достаточно компактной.

Основные этапы обработки:

  1. получение даты;
  2. вычисление разницы;
  3. определение единицы времени;
  4. выбор локализованной строки;
  5. форматирование результата;
  6. обновление DOM.

За счёт небольшой кодовой базы библиотека:

  • легко изучалась;
  • быстро расширялась;
  • хорошо тестировалась;
  • редко содержала критические баги.

Популярность в open source

timeago.js активно использовалась в open source-проектах благодаря:

  • MIT-лицензии;
  • маленькому размеру;
  • отсутствию зависимостей;
  • простому API;
  • хорошей локализации.

Это способствовало росту сообщества и появлению:

  • дополнительных локалей;
  • интеграций;
  • React-обёрток;
  • Vue-компонентов;
  • TypeScript-типов.

Значение библиотеки для современной веб-разработки

timeago.js стала примером того, как небольшая специализированная библиотека может занять важное место в экосистеме JavaScript.

Она продемонстрировала эффективность подхода:

  • минимальный размер;
  • узкая специализация;
  • высокая производительность;
  • независимость от фреймворков;
  • простота интеграции.

История библиотеки отражает общую эволюцию frontend-разработки:

  • переход от монолитных библиотек;
  • развитие микромодулей;
  • ориентацию на UX;
  • борьбу за размер bundle;
  • распространение SPA-интерфейсов;
  • стандартизацию человекочитаемого времени.
Оглавление