Перед вами — React Modern Web App

[altrus]

Что такое PWA Гугл дал определение
Формальное и вообще
А что такое MWA так и не ясно. Особенно фраза "MWA — opensource проект" загрузила.
И в чем отличие MWA от PWA — непонятно

[IRT]

В демке кусок сжатой каши из JavaScript весом 230 кбайт не делает ровным счетом ничего. Значение счетчика не сохраняется, между открытыми вкладками не синхронизируется. Пример можно было бы и попрактичнее и понагляднее сделать.

Плюс, даже в этом ничего не делающем приложении и то иногда проскакивает:
«Please, click here or reload the page. New content is ready.» при нажатии на кнопку About.
А если сайт будет чуть сложнее?

Мне становится грустно от таких вот «чудесных» приложений. А уж на CSS без слез смотреть вообще нельзя.

[VanishMax]

Спасибо за ваш отзыв!

230кб получаются при использовании material-ui. Если использовать голый css — выйдет в разы меньше. Однако мы вынуждены «платить» килобайтами за возможность делать визуально приятный пользовательский интерфейс без привлечения дизайнеров.

Насчет перезагрузки при новом контенте: в рамках статьи используется относительной простой service-worker, который лишь кэширует и таким образом обновляет страницу. Делать воркер гораздо сложнее (например, который вообще никак не будет мешать просмотру старого контента или автоперезагрузки страницу при новом контенте) не в рамках статьи для людей, только знакомящихся с веб-стандартами.

[mcferden]

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

[VanishMax]

Данная статья освещает достаточно тенденций современной веб разработки, поэтому, если и писать статьи для продвинутых, то нужно направить взор на что-то конкретное. Тем не менее, про service-worker'ы уже написано немало подробных статей, а SSR разжеван сотни раз.

Можете заметить, что про MWA я несколько раз отметил — приложение направленно именно на масштабируемость, то есть внедрение других технологий должно проходить почти как по маслу. Конечно, будут возникать различные трудности и ошибки, но выделять на них статью нецелесообразно, для этого предназначен stackOverflow.

[biziwalker]

Спасибо за статью!

Советую вам изучить другие направления, вне React экосистемы — вы слишком узко смотрите на современность во фронтенде. Есть ворох интересных решений на веб-компонентах к примеру. Запомните, что фреймворки появляются и исчезают, а платформа останется с нами на очень долгое время.

[rozhik]

Странная смесь разных ES****, зачем раутер зачем другие вещи. Как вообще можно что-либо показывать без комбайн редьюсеров — люди после таких примеров получают плохую практику. Как по мне — так такие статьи вредны для начинающих imho. Если уж взяли ткое название — то modern — ES как минимум 2017, если уж APP — оно должно быть немного осмысленным, иметь персстентное состояние… Жаль, что статья, на которую ушло автора хороша лишь как первая. Желаю автору прислушаться к коментам, и вторую написать лучше

[TimeCoder]

Мне, как back-end разработчику на это просто страшно смотреть. Въехать во всё это, и поддерживать знания на актуальном уровне — это как вторую профессию освоить. Я к тому, что быть по-настоящему Full-stack, способным запилить крутые алгоритмы, обернуть это правильным облачным rest API, а потом написать ещё вот это всё, это… ну возможно, наверное, только надо отказаться от всего и жить работой.

[Selector]

Интересно, а как сделать бесконечную новостную ленту где каждая новость рендерется на сервере?

[VanishMax]

В этом нет необходимости. Лучший подход — рендерить на сервере 10-15 новостей, а остальные подгружать при скролле. Простой пример — лента Instagram.

[dfuse]

А можно поставить NextJS и выкинуть все шаги кроме последнего для PWA