Возможно, кто-то из вас сейчас впервые окажется на мобильной версии Хабра, а кто-то наоборот скажет, что «это уже третья версия и что ни говори, а в 2009 году она была самой-самой». Как бы там ни было, в этот раз захотелось сделать не просто анонс новой мобильной версии. Приятно было именно отмотать время назад и вспомнить, как всё было. 
Для такой ретроспективы пришлось обратиться к веб-архиву. Благодаря ему в жизни сайта можно выделить следующие этапы:
День рождения мобильной версии. ID-шники постов на Хабре только начали свой путь к шестизначным значениям, а в офисе ТМ (тогда эта аббревиатура ещё расшифровывалось как «Тематические Медиа») на Кривоколенном переулке царила атмосфера стартапа. Незадолго до этой даты в голове одного из разработчиков (Максима rossomachin) зарождается идея сделать экспериментальную облегчённую версию «Хабра», которая бы более лучше работала на мобильных устройствах.
Три человека (программист, веб-технолог и проектировщик интерфейсов), две недели времени и на сайте появился самый короткий пост-анонс: μHabr (дословная цитата анонса). Как говорится, ничего лишнего — ни в анонсе, ни на новорождённомнюХабре мюХабре. Тогда это название не прижилось, так как его было сложно правильно писать и все думали, что это хабратрекер. Поэтому скоро к проекту приклеилось название «Микрохабр».
Особенности первой мобильной версии:
В этой версии были недоступны функции авторизации, голосования и комментирования. То есть её можно было использовать только для чтения, что, собственно, от неё на тот момент и требовалось. Микрохабр мало чем отличался от RSS-агрегатора, но зато не требовал отдельного приложения (кроме браузера).
А выглядела она так:
Если бы у Микрохабра был аккаунт в твиттере, то последующие несколько лет он был бы похож на твиттер камня в лесу: ежедневное «сегодня ничего не произошло». Ну, разве что однажды причесали шрифты, сделав их покрупнее и менее блеклыми:
В таком виде (с небольшими изменениями в вёрстке) мобильная версия просуществовала аж до 2014 года, так как мобильный трафик в то время был совсем незначительным.
Блоги, которые были раньше на Хабре, лёгким движением руки превратились в элегантные хабы. Каждую публикацию стало можно прикреплять к нескольким хабам, поэтому список хабов пришлось перенести под заголовок. Мобильная версия по-прежнему представляет собой примитивную читалку — бум мобильного трафика тогда ещё не случился и весь рунет дружно игнорировал решения для телефонов.
С 2009 по 2014 года мобильная версия Хабра оставалась простой читалкой. Однако рост мобильной аудитории заставил обновить «мобилку» до второй версии, что мы сделали 10 июня 2014 году. Это уже не столько хобби-эксперимент одного из сотрудников, сколько умышленная работа группы лиц по предварительному сговору.
Если раньше диагонали экранов (и их разрешения) различных КПК особо не разрешали играться с отступами, то к 2014 годужелезный трон империю рынок захватили смартфоны. С новой типографикой и более воздушными отступами уже было сложно выводить 40 публикаций на странице, поэтому их количество было сокращено до 10. Название «Микрохабр» уже нигде не фигурирует — везде вместо него «мобильная версия».
Несмотря на то, что это был в первую очередь фейслифт (так как предыдущий дизайн морально устарел), новая «мобилка» обросла новыми функциями: появилась авторизация, а значит и возможность отслеживать новые комментарии к тем публикациям, которые уже прочитал пользователь. Также появилась возможность перейти в нужный хаб или в блог компании.
В этом же году на свет появляется официальное приложение Хабра, выпущенное сразу под три платформы (психанули): iOS, Android и Windows Phone. Функциональность аналогичная: авторизация, чтение лент, подписка на хабы, голосование-избранное-комментарии.
В iOS-приложении у аватарки пользователя есть небольшая пасхалка, которую за всё время вряд ли кто-то нашёл.
В конце 2014 года произошло ещё одно немаловажное событие в истории Хабра — от него отпочковался Geektimes. Некоторые пользователи очень болезненно восприняли последующее разделение публикаций на два сайта, поэтому, чтобы хоть как-то обезболить это, мы сделали TM Feed — своего рода мостик между двумя сайтами. Та же мобильная версия, но с возможностью выбрать в качестве источника один или оба сайта. Ну или все три (когда в 2015 появился ещё и «Мегамозг»).
Спустя несколько лет после разделения проектов, мы надумали взять курс на большой интернет. Идти туда на нескольких корабликах было бы многократно сложнее, чем на одном большом ледоколе, поэтому было принято решение воссоединять все ранее разделённые проекты. И проще всего начать делать это было с объединения контент-проектов, так как они были максимально похожими и близкими по структуре. Вместе с этим отпала необходимость в TM Feed, поэтому он пропал из верхнего меню.
Оставшись с одним только Хабром, мы решили освежить его мобильную версию, которая, по сути, была неизменной с 2014 года. Сделать это на старой версии было сложно из-за большого количества унаследованного давнокода, поэтому было решено сделать не косметический ремонт, а капитальный: перерисовали всё с нуля, переписали весь бэкенд и фронтенд.
Если от идеи до запуска в 2009 году прошло 2 недели, то в 2018 году мы не могли себе позволить такой прыти и старались всё сделать «по-взрослому»: несколько месяцев ушло на одно только бета-тестирование, в котором приняло участие более 7000 человек. И, как вы понимаете, не зря — благодаря ему, то есть вам, нам удалось поправить в мобильной версии немало багов: от маленьких неприметных букашек до гигантских жуков-голиафов. И вот сегодня, под звон колоколов первоклашек, мы решили окончательно зарелизиться.
Девиз, которого мы старались придерживаться: мобильная версия ≠ урезанная версия. Поэтому к прежнему требованию (удобное чтение публикаций) добавили немного новых функций и заложили фундамент для дальнейшего масштабирования.
Из нового:
Владельцы Теслы с горечью признают, что новая мобильная версия ощутимо быстрее их электрокаров :)
И надо понимать, что пока мы релизим базовую версию мобильного Хабра, но не окончательную: «обрастать мясом» и новыми фичами будем чуть позже.
Ну, го? Мы создали: m.habr.com
22 апреля 2009
День рождения мобильной версии. ID-шники постов на Хабре только начали свой путь к шестизначным значениям, а в офисе ТМ (тогда эта аббревиатура ещё расшифровывалось как «Тематические Медиа») на Кривоколенном переулке царила атмосфера стартапа. Незадолго до этой даты в голове одного из разработчиков (Максима rossomachin) зарождается идея сделать экспериментальную облегчённую версию «Хабра», которая бы более лучше работала на мобильных устройствах.
Три человека (программист, веб-технолог и проектировщик интерфейсов), две недели времени и на сайте появился самый короткий пост-анонс: μHabr (дословная цитата анонса). Как говорится, ничего лишнего — ни в анонсе, ни на новорождённом
Особенности первой мобильной версии:
- Каждая страница весила в среднем 5 килобайт (без учёта контента)
- Полное отсутствие рекламы и лишних элементов
- Каждая страница содержала 40 ссылок на публикации
- Хорошо отображалась на всех основных мобильных платформах
В этой версии были недоступны функции авторизации, голосования и комментирования. То есть её можно было использовать только для чтения, что, собственно, от неё на тот момент и требовалось. Микрохабр мало чем отличался от RSS-агрегатора, но зато не требовал отдельного приложения (кроме браузера).
А выглядела она так:
2010
Если бы у Микрохабра был аккаунт в твиттере, то последующие несколько лет он был бы похож на твиттер камня в лесу: ежедневное «сегодня ничего не произошло». Ну, разве что однажды причесали шрифты, сделав их покрупнее и менее блеклыми:
2013
Блоги, которые были раньше на Хабре, лёгким движением руки превратились в элегантные хабы. Каждую публикацию стало можно прикреплять к нескольким хабам, поэтому список хабов пришлось перенести под заголовок. Мобильная версия по-прежнему представляет собой примитивную читалку — бум мобильного трафика тогда ещё не случился и весь рунет дружно игнорировал решения для телефонов.
2014. Версия 2.0 и мобильное приложение
С 2009 по 2014 года мобильная версия Хабра оставалась простой читалкой. Однако рост мобильной аудитории заставил обновить «мобилку» до второй версии, что мы сделали 10 июня 2014 году. Это уже не столько хобби-эксперимент одного из сотрудников, сколько умышленная работа группы лиц по предварительному сговору.
Если раньше диагонали экранов (и их разрешения) различных КПК особо не разрешали играться с отступами, то к 2014 году
Несмотря на то, что это был в первую очередь фейслифт (так как предыдущий дизайн морально устарел), новая «мобилка» обросла новыми функциями: появилась авторизация, а значит и возможность отслеживать новые комментарии к тем публикациям, которые уже прочитал пользователь. Также появилась возможность перейти в нужный хаб или в блог компании.
В iOS-приложении у аватарки пользователя есть небольшая пасхалка, которую за всё время вряд ли кто-то нашёл.
2015. TM Feed
В конце 2014 года произошло ещё одно немаловажное событие в истории Хабра — от него отпочковался Geektimes. Некоторые пользователи очень болезненно восприняли последующее разделение публикаций на два сайта, поэтому, чтобы хоть как-то обезболить это, мы сделали TM Feed — своего рода мостик между двумя сайтами. Та же мобильная версия, но с возможностью выбрать в качестве источника один или оба сайта. Ну или все три (когда в 2015 появился ещё и «Мегамозг»).
2017
Спустя несколько лет после разделения проектов, мы надумали взять курс на большой интернет. Идти туда на нескольких корабликах было бы многократно сложнее, чем на одном большом ледоколе, поэтому было принято решение воссоединять все ранее разделённые проекты. И проще всего начать делать это было с объединения контент-проектов, так как они были максимально похожими и близкими по структуре. Вместе с этим отпала необходимость в TM Feed, поэтому он пропал из верхнего меню.
2018
Оставшись с одним только Хабром, мы решили освежить его мобильную версию, которая, по сути, была неизменной с 2014 года. Сделать это на старой версии было сложно из-за большого количества унаследованного давнокода, поэтому было решено сделать не косметический ремонт, а капитальный: перерисовали всё с нуля, переписали весь бэкенд и фронтенд.
Если от идеи до запуска в 2009 году прошло 2 недели, то в 2018 году мы не могли себе позволить такой прыти и старались всё сделать «по-взрослому»: несколько месяцев ушло на одно только бета-тестирование, в котором приняло участие более 7000 человек. И, как вы понимаете, не зря — благодаря ему, то есть вам, нам удалось поправить в мобильной версии немало багов: от маленьких неприметных букашек до гигантских жуков-голиафов. И вот сегодня, под звон колоколов первоклашек, мы решили окончательно зарелизиться.
Девиз, которого мы старались придерживаться: мобильная версия ≠ урезанная версия. Поэтому к прежнему требованию (удобное чтение публикаций) добавили немного новых функций и заложили фундамент для дальнейшего масштабирования.
Из нового:
- Стали доступны все сущности: потоки, хабы, списки компаний и пользователей
- Поддержка сортировок публикаций: по подписке, всё подряд и лучшие (за сутки/неделю/месяц)
- У каждой публикации появился счётчик новых комментариев
- Появился поиск по публикациям и пользователям
- В нижней части публикации, появилось (при скролле страницы вверх) меню с метриками
- Более удобное голосование за комментарии
Про дизайн
«Проделанную работу сложно назвать редизайном. По сути мы создали новый продукт, у которого из старого остался только адрес. Основной целью было создать единую визуальную среду, состоящую из графического стиля проекта и повторения сценариев поведения.»
// Дизайнер
Про технологии
«Старая мобильная версия работала с jQuery на фронтенде и PHP с шаблонизатором Blitz на бэкенде. Новая построена на более современных и хорошо зарекомендовавших себя технологиях. А именно Vue и весь стек около него (vuex, vue-router, vue-meta, vue-server-render), Express и Node.js: есть фронтенд в виде SPA, есть бэкенд (который рендерит это SPA для поисковиков и проксирует запросы в API) и отдельный сервер API.»
// Разработчики
Владельцы Теслы с горечью признают, что новая мобильная версия ощутимо быстрее их электрокаров :)
И надо понимать, что пока мы релизим базовую версию мобильного Хабра, но не окончательную: «обрастать мясом» и новыми фичами будем чуть позже.
Ну, го? Мы создали: m.habr.com
