Разработка Danil Shashkov
79

Фронтенд проекта 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": 1, "is_advertisement": false, "subsite_label": "dev", "id": 59916, "is_wide": false, "is_ugc": true, "date": "Thu, 28 Feb 2019 18:15:24 +0300" }
{ "id": 59916, "author_id": 260193, "diff_limit": 1000, "urls": {"diff":"\/comments\/59916\/get","add":"\/comments\/59916\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/59916"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 235819 }

Комментариев нет 0 комм.

Популярные

По порядку

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления
{ "page_type": "default" }