Мама, я сделал Хабр


Мне 17 лет и я уже несколько месяцев делаю клон мобильного приложения Хабра, назвав его соответствующе, модно, со стилем и пафосной точкой в конце — habra. Получилось реализовать несколько фич, которых пока нет ни в официальном приложении из плей маркета, ни на самом сайте.


Ссылка на web-приложение для самых нетерпеливых — habra.js.org. Всех остальных — прошу под кат.


С чего всё начиналось


Помните, было такое приложение под андроид чтобы читать Хабрахабр? Вроде официальное, от самих создателей сайта, но последнее обновление было в 2019 году. В нём было все хорошо — начиная тёмной темой и заканчивая оффлайн режимом, при котором можно было читать статьи без интернета по дороге домой. Но мир не так идеален, как того бы хотелось, и вот это последнее обновление того рокового года убило, нет, прям убило такое классное приложение: недогрузившиеся картинки стали то появляться, то исчезать, вызывая дёрганье текста статьи. Да и дизайн, по меркам 2019 года, был уже "не торт".


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


Фишки


Первое, и самое главное — темы.


Их пока четыре — тёмная, белая (стандартная), для OLED экранов и ночной режим. Вполне достаточно, чтобы читать в любое время суток, не правда ли?



Скорость


475ms на то, чтобы открыть главную страницу со статьями (у хабра — 1 207ms):



Комментарии


Пробовали когда-нибудь их открыть у популярной статьи на телефоне? Мобильный хабр пытается за раз отобразить все комментарии, да причем с вложенной структурой, что приводит к неюзабельности страницы. Вот сравнение на i7-7700K:


m.habr.com


habra.js.org


В DevTools, снизу на первом скриншоте, видно, что блокировка страницы по продолжительности составила 16 секунд, и это ещё на i7! На телефоне сайт просто падает и грустно молчит. В своём приложении я сделал некое подобие виртуализации и теперь комментарии загружаются по ходу смещения контента:



Не идеально, но хотя бы не 16 секунд блокировки user input.


Оффлайн режим


PWA на реакте он и есть PWA, там по дефолту будет service-worker, который кэширует файлы. Я только добавил в кэш все запросы на API хабра.


sw-custom.ts
const whitelist = ['https://m.habr']
const CACHE_LIFETIME = 3600 * 1000

self.addEventListener('fetch', (event) => {
  return event.respondWith(
    (async () => {
      const isOffline = !navigator.onLine

      // Do not cache requests that are not in whitelist
      if (!whitelist.some((e) => event.request.url.startsWith(e)))
        return fetch(event.request)

      // Try to get the response from a cache
      const cachedResponse = await caches.match(event.request)

      // Return it if we found one and we don't have connection
      if (cachedResponse && isOffline) return cachedResponse

      // If we didn't find a match in the cache, use the network
      const response = await fetch(event.request)

      if (response.status < 400) {
        try {
          const responseClone = response.clone()
          const cacheStore = await caches.open('v1')
          cacheStore
            .put(event.request, responseClone)
            .catch((e) =>
              console.warn('Cannot put a request to the cache:', e.message)
            )
        } catch (e) {
          console.warn('Cannot put a request to the cache:', e.message)
        }
      }

      return response
    })()
  )
})

Сделай сам


Раз проект открытый, можно пилить свои фишки! Например, расширение из поста про бан-лист можно перенести прямо в интерфейс приложения. Проект обрёл начальный каркас, а дальше добавлять новые детали можно сколько угодно.



Остальные фичи, как говорится, найдите сами (как например, новый интерфейс у пользователя)


Баги и недоделки


… отправляйте в issues, буду всегда готов поправить. А так работа пока сделана примерно на 70% — есть статьи и новости, можно их смотреть, можно смотреть автора, можно комментарии посмотреть и т.д. Пока нет страниц для хабов (можно смотреть их список, но не заходить в них), потоков и страниц с топом компаний и пользователей. Но, честно, я ими никогда не пользовался, поэтому и делаю в последнюю очередь.


По дизайну надо подумать и порисовать. Возможно, попробую сделать интерфейс в виде карточек или ещё как-нибудь. Сейчас использую наикрутейшую либу Material-UI для людей, которым надо "быстро-красиво".


Проект хостится на Github Pages и, если зайти не по рутовому пути, то он выдаст ошибку 404. Первый раз надо заходить именно по адресу в статье, а потом service worker будет подтягивать странички с другими путями.


А теперь важно. В хабра-аккаунт зайти нельзя. Все кнопочки, связанные с действием с аккаунтом, нерабочие. Я честно пытался заревёрс-инженирить, откуда берутся токены у приложения, но не смог. Если кто-то расшифрует для меня и юзербазы, как получаются значения csrf-token в реквестах, пишите в git/issues/22. Поддержка сказала, что API аутентификации для сторонних аппов закрыт. Вот как то так.


В будущем адаптирую интерфейс под планшеты. Обещаю. Если экзамены сдам.




Можно сказать, что я самоутвердился в сфере фронтенда именно этим проектом. Поэтому отдаю его вам, господа читающие, на растерзание и критику. Мне, как ребёнку с неразвитым чувством самооценки, она нужна, чтобы хвастаться по вечерам в чатиках (или нет). Заранее спасибо!


Ссылки


Github: jarvis394/habra
Сам сайт: habra.js.org


UPD: Добавил фичу из этого поста

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 156

    –2
    У меня на телефоне стоит древняя версия Оперы, на тот случай чтобы не работали все новомодные фишки вебсайтов. И вот на ней Хабр шустр и авторизация проходит. И в Facebook там старый удобный дизайн.
      0
      как на счет Opera Presto под пк?
        0
        Надо пробовать. На каких-то Операх ползла разметка.
          0

          В ней протухли корневые сертификаты. Почти ничего не открывается. Если кто знает, как их обновить, поделитесь! Буду очень благодарен.

            0
            вручную импортируйте её сертификат в браузер через "Издатели" или "Посредники" (Настройки, Расширенные, Безопасность, Управление сертификатами), через что воспримет Импорт.

            Вот форум по Opera Presto. Ответ скопироан оттуда, может поможет

              0

              Спасибо, но ваша цитата относится к решению другой проблемы (импорт сертификата для MitM прокси). Актуальных корневых и промежуточных под сотню переносить их вручную по одному точно не буду. :)

          +1

          Каждому своё, можно и здесь сделать lite версию для таких как Вы. Повторюсь, тёмной темы нет на хабре)

            +8
            И в Facebook там старый удобный дизайн

            А он там когда-то был?
            Извините, не удержался.
              +1

              А я вот искренне удивился, без шуток.

                0
                В сравнении с современным нововведением. Приходится на десктопном браузере использовать расширение.
              +1

              Интересно, сколько на вашей древней опере уязвимостей накопилось.

                0
                Как в неуловимом Джо.
              –3
              Классно! Есть куда посмотреть.
              Из фич можно добавить лог кто ставит какие отметки.
                +2
                Сделано действительно круто, респект. Реверс — рекомендую смотреть в сторону fiddler'а и подстановки сертификатов.
                  0

                  Спасибо за оценку! Насчёт реверса, я сидел и разбирал исходные чанки на странице, чтобы найти как генерируется токен. Ничего, собственно я не нашёл, кроме загадочного значения token внутри самого приложения.
                  Есть идея делать одноразовый запрос со страницы хабра, а потом вставлять значения токенов (из request headers) в моё приложение, как то так

                    +4

                    Если что, токен не генерится на юае, токен поставляется бекендом

                      0

                      Ну вот я сидел и смотрел траффик — ничего и близко нет :(
                      Есть connect_sid после аутентификации и csrf, который отличается от тех значений, которые идут в request headers.

                        0

                        Я бы начал копать с того что дропнул PHP_SESSION из кук и внимательно посмотрел на траффик после релоада.

                      0

                      csrf-token — это токен защиты от подделки запросов (Wikipedia)
                      Он создается на сервере и вживляется в форму. Т.е. по факту его можно получить только если скачать страницу с формой и достать его из html. Это если говорить про web. Как оно работает в мобильных приложениях я не знаю. Не сталкивался.
                      Глянул сейчас форму авторизации хабра в web-версии — там нет csrf токена, но есть какой-то скрытый state. Скорее всего это и есть csrf токен. Либо токен как-то передается в AJAX запросы напрямую или через cookies. В общем тут тупиковый вариант скорее всего.
                      Без официального API вероятно не получится нормально реализовать авторизацию. Да и потом — после авторизации нужно будет узнать какие запросы и куда отправлять чтобы получить нужные данные.

                        0

                        Запросы как раз легко найти в DevTools, а state с токеном никак не кореллирует (по крайней мере, я не увидел). state, по-моему, обозначает пользователя в сети Хабр и потом по этому стейту даётся токен. Вобщем, гиблое это дело, исходники разбирать...

                    0
                    Шик! Есть в планах выпуск в виде приложения под андроид?
                      0

                      Ну, как сказать, если бы можно это было запихнуть в React Native, было бы круто, но к сожалению я этим не занимался. Уже есть тикет насчёт манифеста приложения, который позволит добавлять сайт как аппу андроида. Пока, в Хроме можно сделать так: зайти на сайт -> три точки -> Добавить на домашний экран


                      А так, проект абсолютно открытый, создаёте форк и делаете и себе, и людям хорошо!

                        0

                        Cordova, не?

                          +4

                          Мне сами по себе гибриды не нравятся. Уж лучше я либо поставлю сайт как PWA, либо буду просто на сайт заходить. Гибрид, случаем, не добавляет кучу саппортящих библиотек, чтобы приложение запускалось?

                            0
                            Какие библиотеки… Он в приложение Хромиум целиком добавляет))
                              +1
                              Если не ошибаюсь, сейчас он использует библиотеку системного браузера. Это добавляет проблем при разработке. Но вот приложение получается как раз не большим так как оно не тянет всё собой а на оборт использует установленные у пользователя либы.
                              В итоге хорошо сделаая cordova всё же приятнее чем просто браузер.
                          +6

                          Этот проект удобнее, чем официальная версия. Работает шустрее.

                            0

                            Лично у меня "официальная версия" не может даже комменты открыть. Так что однозначно должно быть лучше.

                            +1
                            С помощью www.pwabuilder.com можно завернуть TWA для Play Store. По сути это будет тот же PWA, только одобренный и устанавливаемый через магазин.
                              0

                              А зачем плодить сущности?
                              PWA с манифестом и так отлично работает
                              А кешем пусть занимается браузер

                                +1
                                Сущностей никаких не надо плодить. TWA это возможность выложить PWA в магазин. Кстати там есть инструменты для публикации и в MS Store. Никаких изменений в приложение вносить не надо, и всем также занимается браузер.
                          0
                          Добавь возможности PWA. Можно кешировать статьи в локальную базу indexedDB и в офлайне их оттуда доставать.
                            0

                            Уже есть тикет, спасибо! Кэш у меня работает через Cache и sw; так же впрочем работает и мобильный хабр:


                            m.habr.com

                              0
                              Хранить данные в Cache хранилище — не лучшая практика. Оно больше подходит под ресурсы — скрипты, картинки, json, стили. Собственно основная оболочка shell должна быть закеширована там, плюс какие-то дополнительные ресурсы. Данные лучше хранить в базе, например статьи — их предпросмотр для показа на главной и содержимое для перехода к статье. Тогда получится при отсутствии интернета формировать список закешированных статей и читать их в офлайне. Также при нестабильном интернете и обрыве запроса можно искать статью в базе и подставлять ответ оттуда.
                            0
                            Выглядит симпатично, успехов в дальнейшем
                              +2
                              Насчёт мобильной версии сайта почти правильно сказано — комментарии загружаются только все сразу, и посмотреть хоть какой-то, пока остальные грузятся, нет возможности, только ждать. Но сайт хоть и «подвисает» на некоторое время, не падает. Просто нужно довольно долго ждать. Недавно открывал комментарии к какой-то недавней статье, их было >1800, ждать пришлось около 30 секунд или немногим больше. И они всё-таки загрузились.
                              Скрытый текст
                              Браузер samsung internet, смартфон redmi note 8T.

                              Если приложение действительно даст возможность убрать эти задержки, это весьма полезно! Но буду пока следить, подожду, может всё-таки авторизация появится.
                                0

                                Каюсь, немного приукрасил работоспособность комментариев: в итоге всё равно будет в DOM'е висеть 2к компонентов, НО — большое но — есть разные ситуации, когда у тебя уже есть dom, и когда его нужно за раз построить. Надо бы серьёзную виртуализацию через react-window например, но там встает вопрос о вычислении высот — надо в невидимом диве отрендерить все комментарии, чтобы потом знать какой делать отступ сверху и снизу (минус скорость).


                                Насчёт авторизации, было бы очень круто, если бы кто-нибудь из Хабра обратил на всё это внимание и дал какие-нибудь подсказки. Пока жду.


                                UPD. на Redmi Note 8 Pro (ram 6GB) хром один раз умер. Ну это хром.

                                  0

                                  Работа проделан классная! На вид гораздо симпатичнее чем другой подобный проект, который тут постили несколько месяцев назад. Что ещё раз подтверждает мою мысль что древовидная структура дом не нужна.


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


                                  Если очень хочется, то у меня была идея как cделать прогресс бар ещё умнее. Локально мы отрендерили комментарии и знаем их размер, так что локально он ведёт себя как обычно. Глобально мы знаем положение лишь примерно (по номеру комментария + кэш уже отрендеренных ранее при прокрутке) поэтому прогресс бар должен тоже вести себя примерно. Остается придумать какую-то хитрую нелинейную функцию, которая будет склеивать эти два решения.


                                  Пока не было времени это сделать, и я к сожалению мало знаю про нужные апи браузера для виртуального скрола.

                                    0

                                    А зачем склеивать два решения, когда можно сделать точно:


                                    • есть высота всех комментариев вместе
                                    • есть clientHeight — высота текущего скролла относительно начала комментариев

                                    Вычитаем из первой величины clientHeight и переводим в проценты. Или просто брать номер самого верхнего комментария в текущем viewport, тогда у прогресс бара, максимальным значением будет кол-во комментариев, а текущим значением — номер комментария.

                                +2

                                Выглядит круто, я сам пару месяцев назад загорелся похожей идеей мобильного приложения на Flutter, но вы опередили.


                                Если интересно то вот: https://github.com/avdosev/habr_app


                                Правда, особых фишек в нем и нет, кроме кеширования статей

                                  +1
                                  Напиши свою статью, почему бы и нет.
                                  0

                                  https://habra.js.org/all/p/1 > 404 после обновления. Видимо нужна кастомная 404 которая подгрузит необходимые скрипты и отобразит контент.

                                    0

                                    Если зарегестрирован service worker, то страница работает. Вам нужно сначала на главную страницу зайти (/), а потом все будет работать.


                                    404 страничку сделать надо у github pages, спасибо что сказали.

                                      0

                                      Я service worker кажись вырубил. Ещё неплохо было бы показывать текст до ката хотябы по кнопке а то заголовок мало что говорит иногда.

                                        0

                                        Поймал 404 с неактивированным sw, хотя вроде уже заходил на главную...


                                        картинка


                                        Ещё неплохо было бы показывать текст до ката

                                        Я вот думал сделать дизайн карточками, как у Гугла, но пока надо фиксить баги. Вот, как я бы сделал текст до ката (или хотя бы несколько строчек текста):


                                          0

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

                                            0

                                            Тоже вариант.

                                    +3
                                    Классная прога!
                                    А мне вот не хватало всех подряд постов в канале телеграмм и я сделал свой)
                                    https://t.me/habr_all
                                      +1

                                      не хватает функции instant view. Тогда точно из телеги вылазить на надо)

                                      0
                                      Здорово! Просто отлично. Даже без авторизации — уже польза есть.
                                      В будущем адаптирую интерфейс под планшеты. Обещаю. Если экзамены сдам

                                      Отдельное спасибо от пользователей не очень популярных у разработчиков устройств. Мой старый планшетик новостью доволен.
                                      Успехов в сдаче экзаменов!
                                        0

                                        Спасибо!
                                        У мобильного хабра есть режим для планшетов — значит и у меня будет)

                                        0
                                        еще бы не все комменты загружать, а только то те, у которых оценка большая (положительная или отрицательная).
                                        Что бы не читать все подряд, а только нужное.
                                        Конечно должно отключаться.
                                        Как то делал себе такой скрипт
                                          0


                                          Можно попробовать.

                                            0

                                            Тогда уж и сортировку комментариев по рейтингу было бы хорошо получить

                                              0

                                              Так получится сделать только с комментариями верхнего уровня — это же дерево.

                                                0

                                                Каждый уровень можно сортировать в пределах ветки.

                                          +1

                                          Хорошая работа. Как тебе мысль о том, чтобы добавить функцию случайной выдачи какого-либо из старых постов, который набрал хороших оценок, но не дотянул до категории 'лучшее', а затем потерялся во времени. Такие посты были бы интересны для новых пользователей, но инструментов поиска для них нет, а очень жаль.

                                            0

                                            Для начала нужно подумать, откуда эти посты брать, потому что раздел "Все подряд" обновляется Возможно, нужно делать небольшой бекэндик, который будет сортировать из этого раздела все посты и фильтровать те, которые прошли в "Лучшее". А потом выдавать их где нибудь в ленте, помечая тегом.

                                              0

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

                                                0

                                                Можно спарсить категорию "самое лучшее". Сделать условие, например, парсить страницы в "лучшее" и собирать ссылки на статьи до тех пор как их оценка не будет равна 50ти, например.

                                                  0

                                                  Могу написать скрипт для парсинга таких ссылок и скинуть его в лс, если интересно

                                                  0

                                                  Если будете пилить эту фичу, то лучше сделать полностью настраиваемый фильтр по всем возможном параметрам статей и авторов, а не какие-то отдельные захардкоженные фильтры. Крайне ценно было бы, уже сколько раз просили разработчиков..

                                                0

                                                Молодец, выглядит круто! :)

                                                  0

                                                  Спасибо, рад стараться!

                                                  +5
                                                  Белая зависть, 17 лет, сделал отличный клон, успехов тебе!
                                                    –4

                                                    Все выглядит круто, шустро… но вот что с нагрузочнвм тестированием?
                                                    Сравнивать скопость отдачи сайта без нагрузки с хабром с нагрузкой — это ни о чем.
                                                    Запустить лоадимпакт (там бесплатно 10 тестов) на стресс с хотя бы на 10 vu и посмотреть что и как, а потом уже рассказать об успехах

                                                      +2

                                                      Я написал о проблемах отображения комментариев — это никак с нагрузкой на сайт не связано. Сам Vue с кучей компонентов работает помедленней, и т.п. Не думаю, что Github Pages справятся с дикой многомилионной нагрузкой, но и, с другой стороны, будет ли здесь такой наплыв пользователей?


                                                      (холивары на тему Vue и фреймворков поднимать не надо)


                                                      UPD:


                                                      k6

                                                        +7

                                                        Вы о чём, это же статический сайт на github pages который на стороне браузера по json апи забирает данные с хабра. Нету сервера который надо тестировать.

                                                          0

                                                          Github же)

                                                        0
                                                        Есть одна недоработка: не видно границ между постами, сделайте их в виде material карточек с тенью что ли.
                                                          0

                                                          Я так делать пытался, но что получилось у Гугла, у меня не вышло красиво.


                                                          как у гугла

                                                          0
                                                          Все классно, для 17 лет, но когда я увидел клон мобильного приложения хабр сразу подумал что это будет нативное приложение под android. Так что думаю если замутить мобильную версию хабра не через сайт а нативно вооще агонь будет) Может когда-ни будь и я попробую замутить нативную версию
                                                            0

                                                            А какие это даст преимущества?

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

                                                              выглядит интересно, единственное, что кнопки мигают, поставь --webkit-tap-highlight-color

                                                                +1

                                                                Смахивает на вкусовщину: у хабра тоже мигают


                                                                  0

                                                                  вкусовщина, как никак под нативное закос с material ui, поэтому не хотелось бы видеть резкие мигания

                                                                    0

                                                                    Эта настройка позволяет получить app-like experience.
                                                                    Также, помнится, несколько лет назад был хак, чтобы убрать небольшую задержку в 100ms перед тем, как клик распознается браузером. Это сделано для распознавания лонг-тача и прочих альтернативных моментов.

                                                                  0
                                                                  Круто, очень круто.
                                                                  По issues: 404 not found по open link in new tab
                                                                    +1
                                                                    Что-то успело поменяться? Теперь по open link in new tab на статью (линк, при этом, корректен), кидает на /all/p/1
                                                                      +1

                                                                      Пофиксил.

                                                                        0
                                                                        Почти :(
                                                                        Привет!

                                                                        Тебе нужно зарегестрировать одну вещь — специального воркера, который будет обрабатывать твои запросы.

                                                                        Для этого нужно всего лишь зайти на коренной путь — habra.js.org или нажать сюда

                                                                        Ни переход по линку и открытие habra.js.org в новой вкладке не возымеют действа, всегда показывается эта плашка с урлом открываемой статьи в адресной строке (блокировщиков нет)
                                                                          0

                                                                          Уфф, сервис воркеры включены? Попробуйте очистить данные у сайта.


                                                                          Так стоп. Вы действовали так, как сказано на странице? Т.е. заходили на (/) и у вас была видна лента или же у Вас на любой урл идёт эта табличка?

                                                                            0

                                                                            Именно так, была лента, а при открытии статьи в новой вкладке, вот эта плашка. Для чистоты эксперимента и в другом браузере открывал.
                                                                            Однако, все это не важно и я должен извиниться, ибо не упомянул небольшую, но дюже важную деталь. А именно, суровый энтерпрайз с ни менее суровой политикой безопасности.
                                                                            Перед уходом в глаза бросились JS ошибки в консоли, т.е. воркеры не смогли :(
                                                                            Посему, не обращайте на предыдущий комментарий внимание. Вне конторы все супер.

                                                                              0

                                                                              Если браузер устройства не поддерживает Service Worker, то эта страница всегда будет отображаться. Ну и при первом открытии пользователи всегда будут видеть 404 страницу.


                                                                              Эта проблема (context root'а или pathname) исправляется простыми двумя скриптами в 404.html и index.html.


                                                                              Вообще это не единственная проблема с Service Worker, но у вас вроде отдельный домен, поэтому не должно больше вызывать сложностей.

                                                                      +1
                                                                      Может быть у вас получится функционал игнонирования авторов и компаний сделать? Пока в Хабре не чешутся, это может помочь привлечь пользователей.
                                                                        +3

                                                                        Уже делаю! Сегодня — завтра будет готово.

                                                                          0

                                                                          Сделал, посмотрите в настройках

                                                                          +2
                                                                          А что сам Хабр думает об этом? Если бы кто-то сделал клон моего сайта, я бы точно такое не одобрил. Это же -реклама, -трафик.
                                                                            +7

                                                                            В мобильной версии сайта рекламу можно отключить. Хабр-вакансии могу по запросу прикрутить в выдачу в ленте. А если ребята из отдела увидят, что трафик уплывает, значит надо уже как-то двигать сайт вперёд в плане фич)

                                                                            –2

                                                                            Хабру нужно допиливать фичи, к примеру, загрузка всех комментариев за один раз — это довольно позорно в 2020 году.

                                                                              +2
                                                                              Проблема не в количестве комментариев, а в том, что вы сидите в Хроме вместо ФФ как они рендерятся. Надеюсь, загрузку всех комментариев оставят — не хотелось бы получить Реддит с типичным «вот вам 2 комментария и кнопка „подгрузить ещё 2“».
                                                                                0

                                                                                Как подгружаются тоже важно так как на медленном канале фаерфокс через некоторое время показывает ошибку вместо загруженной части страницы. Если бы API хабра умело отдавать коменты по частям. Или хотябы при помощи Range запросов ответ API можно было бы забрать по частям то эту ошибку можно было бы обойти.

                                                                                  0
                                                                                  Если бы API хабра умело отдавать коменты по частям. Или хотябы при помощи Range запросов ответ API можно было бы забрать по частям то эту ошибку можно было бы обойти.
                                                                                  Можно просто загружать ответ как стрим, если вас проблема ручного парсинга частичных данных не останавливает: свойство responseText у XMLHttpRequest обновляется всё время загрузки (пока readyState == 3).
                                                                                  0

                                                                                  Подгрузку можно сделать как "infinite scroll", по мере листания вниз комменты грузятся сами. Тем более, на беке же очень просто сделать пагинацию.

                                                                                    0
                                                                                    Надо чтобы загрузился один комментарий и он тут же рендерится, и так далее без остановки.
                                                                                      0

                                                                                      Как правило, делают подгрузку по 20-30 элементов

                                                                                      0

                                                                                      Для древовидных комментариев не так просто.

                                                                                        0

                                                                                        Согласен, но тогда хотя бы пагинацию по корневым комментариям. К примеру, по 20 корневых + все их дети, если они есть. Все же лучше, чем один запрос на все.

                                                                                          0
                                                                                          возможен вариант когда к 1му родительскому комменту 10000000 сообщений. И тут твоя пагинация теряет смысл
                                                                                          0
                                                                                          Не нужно просто дерево реализовывать реальной вложенностью элементов. Пусть будет плоский список и переменный отступ слева.
                                                                                            0

                                                                                            Допустим, первый комментарий был вчера, а сегодня 2 минуты назад появился к нему ответ. На первой странице будет первый и последний по времени комментарий, то есть надо все равно достать все комментарии из базы и построить в нужном порядке. Или в базе как-то по-особому хранить. То есть даже на бэке это будет не так уж и просто.

                                                                                              0
                                                                                              Подождите, мы, вроде бы, про загрузку существующих комментариев на фронте говорили, а не про обновление дерева. Фронту не нужно собирать дерево, он его с бэка получает. А бэку всё равно собирать полный список, и наверняка он кэшируется как-то, а не пересобирается под каждый запрос.
                                                                                                0
                                                                                                Да и организацию хранения дерева можно организовать так, что и вставка будет делаться за константное время, и построение списка будет за O(n) без рекурсий (см. мой комментарий ниже)
                                                                                                  0

                                                                                                  Я говорил про слова "Тем более, на беке же очень просто сделать пагинацию". Можно, да, но это будет сложнее, чем стандартный offset/limit.

                                                                                                    0
                                                                                                    Если дерево хранится так, как я описал (с материализованным путём), то этим самым offset/limit всё и делается.
                                                                                                      0

                                                                                                      Ну так я и написал "надо как-то по особому хранить") Все равно надо это специально продумывать, alter table делать, то есть есть отличия от стандартной пагинации существующих сущностей.

                                                                                                        0
                                                                                                        Alter table — это колонку «путь» добавить? Ну, так деревья всё равно хранить нужно же как-то, не так, как не-деревья. А пагинация от других сущностей не отличается вообще никак — если уже есть запрос на выдачу списка, то к нему просто добавляется top/skip (offset/limit).
                                                                                                          0
                                                                                                          в хайлоуде это не работает.
                                                                                                          skip 100000 take 10
                                                                                                          это значит что будет прочитано 100010 элементов.

                                                                                                          Все это знают. Оптимизация этого: where datetime > lastelement take 10. Но в варианте котором ты описываешь такое условие невозможно выполнить.

                                                                                                            0
                                                                                                            Что мешает написать WHERE path > lastPath?
                                                                                                            0
                                                                                                            Ну, так деревья всё равно хранить нужно же как-то, не так, как не-деревья.

                                                                                                            Да. А чтобы ваш вариант заработал, надо дополнительно добавить путь и заполнять его определенным образом. Я это и имел в виду, когда сказал "не так просто".


                                                                                                            А пагинация от других сущностей не отличается вообще никак

                                                                                                            Пагинация не отличается, а возможность ее применения отличается. Список произвольных сущностей можно вывести постранично через limit/offset, независимо от того, какие поля в них есть, а произвольное дерево нельзя.

                                                                                            +1
                                                                                            не хотелось бы получить Реддит

                                                                                            Вот кстати поэтому я там ничего и не читаю. Дичь просто.
                                                                                            0
                                                                                            На ПК это весьма удобно.
                                                                                            +3
                                                                                            Все это напоминает одну давнюю историю.
                                                                                            Она случилась с первыми выходцами из России, приехавшими жить в Христианию (квартал-коммуна хиппи-анархистов, в одном из районов Копенгагена). Их наняли пилить дрова для общественной бани. И тут произошло столкновение культур. Парни бодро взялись за работу и за три часа перепилили, накололи и сложили в поленницу все имеющиеся в распоряжении доски. После чего поспешили сообщить работодателям об успешно выполненном задании. Однако результатам их труда совершенно не обрадовались, а, наоборот, ужасно разозлились. Из-за плохого знания английского, парни далеко не сразу поняли, в чём же дело. Оказывается, crazy Russians за три часа сделали полуторамесячный объём работ, оставив без заработка не только себя, но и еще десяток коренных жителей. Можно сказать, подорвали экономику страны. Дело в том, что оплата в Христиании почасовая. Это значит, что работать следует не торопясь, без надрыва.
                                                                                              +1
                                                                                              1. Делал я, в первую очередь, для себя; никого я не оставляю без работы, наоборот — Хабр может здесь посмотреть, что надо людям.
                                                                                              2. Работал я "не торопясь, без надрыва" начиная с мая месяца этого года :p
                                                                                              0
                                                                                              Спасибо, jarvis394. После того, как я увидел, что делают ребята в 17, мне стало стыдно говорить, чем я занимаюсь в свои 20.
                                                                                              А если без сарказма, то это действительно похвальная работа, наконец-то у хабра появится достойное приложение под мобилки. И чем-то твоя работа даже вдохновляет, аж снова появилась воля к разработке своих никому ненужных игр.
                                                                                                +6
                                                                                                Вы уже лучше меня (( В 17 лет я разбирался в ассемблере, прерываниях и писал в delphi. Сейчас мне 37 и я уже не могу написать что-то серьезнее Hello World.
                                                                                                  0
                                                                                                  Мне 28 и я учу студентов ассемблеру, прерыванию, выкинул делфи из программы — учу программировать на си. Круг замыкается…
                                                                                                0

                                                                                                Спасибо за работу. Очень прикольно. Продолжайте развиваться) Интересно увидеть проект на финалочке.


                                                                                                А такой вопрос: а что насчет тем для десктопов? Вот на данный момент пришу с приложения и тут настроек темной темы нет. Или надо открывать этот сайт их хрома (отрывал из под еджа).

                                                                                                  0
                                                                                                  А не, я нашел в чем дело) Вопрос с десктопом решил)
                                                                                                  +1
                                                                                                  SPA он и есть SPA, там по дефолту будет service-worker, который кэширует файлы.
                                                                                                  Не вижу связи между SPA и service-worker.
                                                                                                  Может вместо SPA имели ввиду PWA?
                                                                                                    0
                                                                                                    Больше удобных и разнообразных публичных API для Хабра
                                                                                                    Будет удобный инструмент для написания своих для первых приложений

                                                                                                    Как идея для повышения популярности?
                                                                                                      +2

                                                                                                      Крайне удивлен тому факту, что здесь не объявился nin-jin и не рассказал автору о том, что надо было писать весь проект на его фреймворке.
                                                                                                      А самому автору спасибо за материал.

                                                                                                        +1
                                                                                                        С картинками все плохо. почти все превью к постам обрезаны так, что чувствую себя азиатом не понятно, что там вообще изображено.


                                                                                                          0

                                                                                                          Вчера фиксил всё, что мог — вот и полетела разметка :(

                                                                                                          0
                                                                                                          Над разметкой тоже стоит поработать



                                                                                                          Однако, придираться можно вечно, но в целом — отличная работа, учитывая возраст ) Круто, продолжай!
                                                                                                            0

                                                                                                            Пофиксил.

                                                                                                            0
                                                                                                            Отлично сделано! Даже не заметил, как habra. оказалась в закладках. Скорее всего темная тема оказалась решающим аргументом (кастомные темы от Stylish вечно подглючивают).
                                                                                                              0
                                                                                                              Хабра храбр.
                                                                                                                0
                                                                                                                Ну такое — ошибки в консоли расстраивают… prntscr.com/vcjwhw
                                                                                                                  0

                                                                                                                  Не поверите, даже у Google есть ошибки в консоли:


                                                                                                                  Картинка

                                                                                                                    0
                                                                                                                    Это не ошибка Google. Это AdBlock заблокировал запрос.
                                                                                                                  +1

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

                                                                                                                    0

                                                                                                                    Рассматривается ли вами переход на Preact? Это даст более маленький бандл и возможные ускорения в работе с DOM. Конечно некоторые фичи там отсутсвтуют, но их убрали потому что ими вроде и так никто не пользуется.
                                                                                                                    Сам я не разработчик реакт, мне скорее интересно мнение по этой теме если таковое имеется.

                                                                                                                      0

                                                                                                                      Я пробовал на него переходить, но библиотеку компонентов (MUI) я с Preact подружить не смог. А так Preact довольно классный, с ним быстрее react-scripts стартует (сейчас проект с нуля запускается минуты 3)

                                                                                                                      0
                                                                                                                      Ну это уже остальные заморочки,
                                                                                                                      Заголовок спойлера
                                                                                                                      они конечно понадобятся в будущем, уже когда будет полностью готовое приложение. Это так сказать полировка, а полировать неотёсанный проект негоже)
                                                                                                                      как по мне сейчас важнее узнать всё таки где находится истинный токен и внедрить его в аппу.
                                                                                                                        +1

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

                                                                                                                        0
                                                                                                                        Еще бы тему Solarized Dark/Light, было бы полное счастье )
                                                                                                                          0
                                                                                                                          Интересно ктото хоть раз пытался сделать пагинацию древовидных коментариев как на хабре в хайлоуде.
                                                                                                                            0
                                                                                                                            Имею некоторый опыт в хайлоаде, конкретно такая задача не попадалась реально в продакшне, но не вижу большой проблемы ни на фронте, ни на бэке.
                                                                                                                            Достаточно фронту отдавать плоский список с отступами (уровень вложенности), а на бэке хранить дерево в таблице с материализованными путями — это даст вставку в 1 INSERT (c 1 вложенным SELECT'ом для получения пути и уровны родителя) и выборку всего списка в 1 SELECT с ORDER BY по этому пути, без рекурсии и джоинов таблицы на саму себя.
                                                                                                                              0
                                                                                                                              это не работает, если появились новые комментарии к старым родителям
                                                                                                                                0
                                                                                                                                В какой момент появились? За время пейджинга?
                                                                                                                            +6
                                                                                                                            Дуров как-то делал конкурс клиентов для Телеграм и некоторые проекты оставил на прикорме чисто для разнообразия экосистемы.
                                                                                                                            Хабр, договоритесь с автором на умеренную ставку, и пусть он пилит альтернативный клиент для Хабра в своё удовольствие, сам поддерживает связь с сообществом и т.п.
                                                                                                                            А вы ему только апишки откройте как надо, чтобы авторизация работала, и всё такое.
                                                                                                                              +2


                                                                                                                              Очень уж мне понравился этот клиент! Вообще не охота открывать оригинальную мобильную версию....

                                                                                                                                +3

                                                                                                                                Тот случай когда "школьник" уделал весь отдел разработчиков крупного ит ресурса )))

                                                                                                                                  +1

                                                                                                                                  Уже разобрались с проблемой получения токенов, конечно, не тех, что хотелось, но всё равно прогресс в сторону добавления функционала для пользователя идёт.

                                                                                                                                  +1
                                                                                                                                  Для меня киллер фитчей был бы каталог с обширными фильтрациями и сортировками, а так же возможность отмечать и убирать уже прочитанные, посмотренные посты из выдачи.
                                                                                                                                    0

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

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

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

                                                                                                                                          0

                                                                                                                                          Те посты что по ППА оплачены автоматом под CC BY 3.0 и их можно копировать. А за остальные авторы решают но думаю врятли много людей будут против этого.


                                                                                                                                          В то же время поисковики ровно тем же и занимаются не спрашивая никакого разрешения.


                                                                                                                                          Кстати Boomburum вы посты под CC BY 3.0 помечаете как то?

                                                                                                                                            0

                                                                                                                                            Хм, согласен. Но тут кстати другой интересный вопрос появляется. Текст поста допустим принадлежит автору. А все остальные параметры — рейтинг, хабы, количество комментариев, дата размещения — это же результат размещения на площадке, у автора статьи нет прав на эти данные, он не может ими распоряжаться. А идентификаторы, ники и имена авторов это персональные данные, и если они буду кешироватся в приложении, то это уже хранение персональных данных. В общем я хотел сказать, что это слишком большая работа с неизвестным правовым статусом, и может получиться так, что она будет сделана впустую.

                                                                                                                                      0
                                                                                                                                      1. Вы про какое приложение? Оба прекратили обновления в 2019 г.
                                                                                                                                      4pda.ru/forum/index.php?showtopic=632943 (темная тема, КПДВ из поста в ленте)
                                                                                                                                      4pda.ru/forum/index.php?showtopic=566249 (портянки текста без картинок в ленте, зато офф приложение)

                                                                                                                                      2. Я правильно понял, что столь быстрая скорость загрузки обеспечивается, в том числе, ещё и полностью выпиленной аналитикой (метрика, гугл, etc)?
                                                                                                                                        0
                                                                                                                                        1. Второе, официальное. GeekHabr сейчас вполне неплох, хоть и устарел.


                                                                                                                                        2. Да, из метрики собираюсь вводить только viewcount или вообще без неё. К тому же, на хабре все аналитики загружаются асинхронно, поэтому не мешают начальной отрисовке приложения.


                                                                                                                                          0
                                                                                                                                          1. Увы, GeekHabr не умеет галереи, gif, контейнеры с видео, спойлеры. Те норм отображает только сразу видимый текст и картинки с mothership "habr".

                                                                                                                                          Три. Лучи добра вам за тёмную тему и норм отображение комментов "из коробки"


                                                                                                                                          Четыре. Ждём авторизацию и порт на андроид=)


                                                                                                                                          Зы. Буквами — тк хабр "чинит" нумерацию на свой лад.

                                                                                                                                        0
                                                                                                                                        Занятие достойное, но я не вижу смысла держать приложения для каждого ресурса. Есть rss, есть браузер с режимом чтения и блокировкой рекламы. Кстати, в подобных приложениях рекламу как правило не заблокируешь. Я просто использую rss агрегатор с режимом полного скачивания статей, в случае комментариев перехожу на сайт. Я думаю что время приложений для отдельного ресурса прошло. Сделайте лучше нормальный rss агрегатор для iPad в стиле Apple news

                                                                                                                                        Only users with full accounts can post comments. Log in, please.