IT-инфраструктура для бизнеса и творчества
Разработка
Danil Shashkov

Фронтенд проекта Shortstories

Для начала расскажу о проекте. Shortstories — это open source платформа для чтения и написания любительских рассказов. Делаю я этот проект в одиночку и здесь хочу рассказать о том как устроен фронтенд. Сайт можно посмотреть здесь:

Фронтенд я реализовывал дважды. Первый раз, когда только начал делать проект, второй раз после полугодовой паузы. Первая версия состояла из create-react-app, redux, redux-thunk, стили в CSS. Всё просто: отправка запросов в thunk’ах к REST API, хранение ответов в redux store. При таком подходе не было server side rendering'a (SSR), который для моего проекта важен из-за SEO продвижения. Также пришлось переписывать большую часть компонентов, потому что бэкэнд был переписан GraphQL.

Я не стал писать велосипед и за основу проекта взял Next.js, он поддерживает SSR из коробки. Интеграция с GraphQL API происходила посредством библиотеки react-apollo, которая является некой прослойкой между бэком и фронтом. Стили переписал на styled-components, просто потому что привык. Но не советую брать эту либу, если у ваших клиентов низкая скорость интернета, styled-components тянет лишние 30 кб js кода для генерации стилей. Если для вас это критично возьмите astroturf или linaria.

После переписывания сайт стал работать быстрее, потому что почти все запросы выполнялись на сервере, а html со стилями отдавался моментально. Также я был приятно удивлен упрощением разработки: не нужно вручную обрабатывать состояния отправки запроса (loading, error), реализация optimistic UI делается в пару строк кода.

Но не все так гладко. Я столкнулся с несколькими проблемами. Компоненты в react-apollo используют паттерн render props, поэтому если у нас в компоненте несколько мутаций (аналог POST/PUT запроса), то падает читабельность. Решить это можно, используя либу react-adopt. Также есть проблемы с кэшем — обновлять его надо вручную и следить, чтобы он обновлялся корректно.

Код можно посмотреть здесь:

Буду признателен если проведете код-ревью или поучаствуете в разработке.

{ "author_name": "Danil Shashkov", "author_type": "self", "tags": [], "comments": 0, "likes": 0, "favorites": 2, "is_advertisement": false, "subsite_label": "dev", "id": 59916, "is_wide": true, "is_ugc": true, "date": "Thu, 28 Feb 2019 18:15:24 +0300", "is_special": false }
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ // { // name: 'camera', // url: `${cdnUrl}CameraCat`, // text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', // link: '1', // }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', } ] let buttonCycle = document.querySelector('.button--cycle') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите почитать?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
Новый налоговый режим для малого бизнеса

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

Контроль доступа как сервис: интегрированное решение Gaskar Group на базе Sigur
«Яндекс.Еда» начала продавать сертификаты на доставку из ресторанов и магазинов Статьи редакции

Можно воспользоваться самому или подарить другу.

«Модульбанк» и «Ясно» проведут бесплатный воркшоп о синдроме трудоголика

30 сентября первый банк для предпринимателей «Модульбанк» и сервис психологических консультаций «Ясно» проведут второй совместный воркшоп для предпринимателей. Тема — синдром трудоголика. Эксперты «Ясно» расскажут, как владельцу бизнеса правильно отдыхать и не стыдиться этого.

Daniel Chekalov
Платное приложение, которое убирает «ненавистные» AMP-версии сайтов, взлетело в рейтинге App Store Статьи редакции

«Все так сильно ненавидят Google AMP, что готовы платить $2,99, лишь бы его не видеть».

Amplosion is a new app that can block AMP links from websites automatically!

AMP is a curse from Google who claims to speed up the web but breaks the website’s content! It even tracks you more than ever!

Just look at the difference between left & right.
«Amplosion — новое приложение, которое позволяет автоматически блокировать AMP-ссылки на сайтах. AMP — это проклятие от Google, которая утверждает, что так ускоряет загрузку, но ломает содержание сайта. И отслеживает больше, чем когда либо. Просто посмотрите на разницу между левым и правым скриншотом»
Как охватить 98% сотрудников кадровым электронным документооборотом

Кейс Альфа-Лизинга и EasyDocs

Apple извинилась перед пользователем «Хабра» — он нашёл четыре уязвимости в iOS, но за полгода компания исправила одну Статьи редакции

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

Великая рокировка Майкла Делла

Краткая история о том, как Майкл Делл за 8 лет увеличил своё состояние в несколько раз, искусно воспользовавшись финансовым рычагом, и превратил Dell Technologies в одну из крупнейших технологических компаний по объёму выручки.

Майкл Делл
«Открытие Брокер» и УК «Открытие» продолжат работу под брендом «Открытие Инвестиции»

«Открытие Брокер» и УК «Открытие» (входят в группу банка «Открытие») объединили продукты и решения брокера и управляющей компании на одной онлайн-витрине под брендом «Открытие Инвестиции». Синергия компетенций, ресурсов, инфраструктуры и разработок компаний в рамках единого пространства позволит обеспечить широкий спектр финансовых предложений…

7 ошибок бизнеса при продажах в WhatsApp

Как перестать проваливать план продаж и начать зарабатывать с помощью WhatsApp? Делимся советами и лайфхаками для тех, кто хочет увеличить свою выручку и окупить инвестиции на продвижение бренда.

null