С момента своего возникновения веб-приложения прошли долгий путь. Мы знаем, какую важную роль играет в вебе JavaScript и какие безграничные возможности есть у нас при выборе фреймворков и технологий. Каждый фреймворк имеет свои достоинства и недостатки, но почти во всех используются какие-то основные методологии. Такие инструменты как create-react-app, next.js, vue-cli и другие действительно полезны для начального формирования проекта и его структуры, но в остальном вы вольны создавать приложение в соответствии со своими предпочтениями и требованиями проекта.

В статье собран список принципов, которые будут полезны при создании веб-приложений с помощью React и Vue. Они помогут вам задать нужное направление и упорядочить разработку. Большинство этих принципов применимо к созданию любого ПО, но всё же список предназначен именно для веб-приложений.

Передать нужный код для каждого браузера – непростая задача.

В этой статье рассмотрим несколько вариантов, как эту задачу можно решить.



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

Среди инструментов для разработчиков доминирует паттерн module/nomodule декларативной загрузки современного или legacy-кода, который предоставляет браузерам источники и позволяет решать, какие из них использовать:

<script type="module" src="/modern.js"></script>  
<script nomodule src="/legacy.js"></script> 

К сожалению, не всё так просто. Показанный выше подход на основе HTML инициирует перезагрузку скриптов в Edge и Safari.

Все эти годы вы, frontend-разработчик, писали монолиты, хотя и понимали, что это дурная привычка. Вы делили свой код на компоненты, использовали require или import и определяли npm-пакеты в package.json или плодили гит-репозитории в вашем проекте, но все равно писали монолит.
Пришло время изменить положение.