Comments 12
А вот рыба для любителей блокнота, кому не нужны сборщики npm vite и т.п., всё упрощено до одного файла html:
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Рыба для SPA</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@2.0.0/dist/vue-router.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/x-template" id="topmenu-template">
<div>
<button @click="doClick('Home')" >Home</button>
<button @click="doClick('About')" >About</button>
</div>
</script>
<script type="text/x-template" id="home">
<div>
Home page
</div>
</script>
<script type="text/x-template" id="about">
<div>
About page
</div>
</script>
<script>
var Home = {
template:'#home',
data: () => ({
}),
methods:{
},
mounted: function () {
},
};
var About = {
template:'#about',
data: () => ({
}),
methods:{
},
mounted: function () {
},
};
Vue.component('top-menu',{
template:'#topmenu-template',
data(){
return {
}
},
methods: {
doClick(name){
router.push({name,params:{lang:this.$route.params.lang}});
},
},
mounted: function() {
},
created: function () {
},
watch: {
}
});
const routes = [
{ path: '/', name:'Home', component: Home },
{ path: '/about', name:'About', component: About },
];
const router = new VueRouter({
mode: 'hash',
//mode: 'history',
routes
});
new Vue({
router,
el: '#main',
template:`<div style="width:100%">
<top-menu></top-menu>
<router-view></router-view>
</div>`,
});
</script>
</body>
</html>
Самое эпичное зрелище - это когда адептам SPA ставят задачу: написать аутентификацию с проверкой мыла (активация по ссылке) при классическом бекенде типа PHP.
В т.ч. эпично выглядят потуги у фулстеков, когда выясняется, что, в отличие от сессионной аутентификации, здесь (SPA + API) нужно овердофига всего вручную делать, т.е. сочинять много нового приходится из того, что раньше "само работало".
А потом еще и набегают "Свидетели JWT" ... ну, это которые считают, что JWT секурнее обычного токена (рандомная строка) в БД.
И вот это все называется "прогрессом", а также "смотрите, как все стало проще" ((с) обучатели из ютубных видео).
Я все пытаюсь найти первоисточник Urban Legend о том, что юзеры (именно юзеры!) очень негативно воспринимают полную перезагрузку страниц - это тезис, на котором до сих пор едут куда-то в минус бесконечность адепты SPA.
Только программисты в публичном пространстве ноют по поводу перезагрузок. Откуда эта легенда пошла?
Не утверждаем, что SPA - это панацея. Статья не является сравнительным анализом, в ней разбираем подробно один из подходов к разработке приложений, который сейчас достаточно популярен. А для фулстек-разработчика нет никакой проблемы в написании аутентификации с проверкой почты в SPA приложении.
Что то не понял совсем, а какая вообще принципиальная разница, и в чем сложность делать активацию по email на spa в отличии от ssr, и там и там публичный эндпоинт с проверкой уникального ключа из url в письме? Или есть какой то другой хитрый способ?
Так уж исторически сложилось ,что термин endpoint относится исключительно к API. Так вот, нет и там и там endpoint-а. Он есть только в случае "модно-молодежного" SPA + API. И в этом случае есть 2 (очевидных) пути решения вопроса валидации мыла: фолбек к классическому серверному роуту, либо ТРУ СПА метод - ссылка ведет на клиентский роут, там токен выдергивается и отправляется на эндпоинт, а потом... ну, в общем, уже огород нагородился приличный. Все это будет сопровождается всей этой (тайп-)джваскриптовой асинхронщиной, апдейтам стейта, ререндерами на клиенте. Все это (кто бы мог подумать...) увеличивает когнитивную сложность просто на ровном месте.
Т.е. либо делаем по классике, либо получаем увеличенную (не важно насколько) когнитивнуюю сложность - в этом вся суть SPA, которое выходит за рамки одноэкранного учебного примера.
По факту, сайты, у которых подсвечиваются дев тулс реакта или vue, часто содержат различные глюки интерфейса. Глюки, как правило не критические, но они бывают часто.
А еще есть бесконечные лоадеры или плейсхолдеры, которые просто выводят из себя, когда нужно что-то в каталоге поискать. Из последнего опыта - citilink, у которого КАЖДОЕ изменение фильтра автоматически начинает обновлять список товаров, на что уходит несколько секунд наблюдения за плейсхолдерами. Спасибо очередному "прогрессивному" персонажу, который решил, что это хорошая идея.
Все это дерьмо с лоадерами пришло с распространением AJAX, ну а СПА - это дальнейшее скатывание в (тайп-)джаваскриптовый маразм.
Проблемы с перезагрузкой страницы нет, если у тебя быстрый интернет и ты все файлы статики можешь заново загрузить. Проблема на медленном мобильном интернете, когда чтобы получить основной контент, ты снова ждешь и грузишь шапку, стили и тд.
Для мелких сайтов разницы нет, для больших гигантов это это экономия на запросах к серверу для получения статики и нагрузки на бекенд для генерации меню и прочих динамических вещей на сайте.
Стили и скрипты должны безусловно кэшироваться. И тогда проблема отпадает сама собой.
Выбор подхода разработки всегда индивидуален для каждого проекта, и это отдельная тема. Добавление кэширования скриптов и стилей — безусловно, важный момент, который не стоит упускать, но полностью от всех проблем на всех проектах не избавит. Важно понимать, чем подходы к разработке отличаются друг от друга и какие у них есть плюсы и минусы, чтобы уже на конкретном проекте определиться, какой подход использовать.
Согласен с вами.
Спасибо вам за эту информацию. Разбираться самому как это сделать, было бы долго.)
Пошаговое руководство для начинающих по разработке SPA на Laravel и Vue.js