Есть такие JS фреймворки для фронтенда, что бы SPA и SEO?

Question

[chelkaz]

Начинаю делать динамическое приложение. Решил на бэк поставить Laravel.
Что выбрать для клиента, и что на сегодня развивается перспективно? Проект большой и разнообразный.
Так же важно SEO, с этим проблем вроде у nuxt.js нет. Но уж очень мало про него инфы сторонней и он совсем новый, и стоит ли на нем останавливаться?

Answer 1

[Константин Китманов]

Ищите фреймворки с возможностью Server-Side Rendering или сокращенно SSR. На слуху — React, Vue, angular 2-4, riot.js.
next.js и nuxt.js — это фреймворки или даже бойлерплейты на основе React и Vue соответственно, где SSR и роутинг уже прикручен в приложение на основе express и можно просто писать код.
Почти все решения на основе Vue моложе и до некоторой степени идут по пятам React. Там вроде не должно быть какой-то особой rocket science чтобы особо беспокоиться о молодости:)

Но как, и, главное, зачем вы будете дружить это с Laravel, не очень ясно. Если только в качестве API и CMS...

Comments

[chelkaz]

Laravel в качестве API что бы поставлять клиенту данные. Данных много. Так же нужна регистрация пользователей и прочие фишки бэкенда, события отправка писем, работа с MySQL через модели и т.д...

[Константин Китманов]

chelkaz: ну смотрите, как вам удобнее. Но, если что, то же самое можно и на nodejs сделать, чтобы зоопарк не разводить.

[chelkaz]

Константин Китманов: Я хорошо знаю PHP, но javascript слабо. Хотя может и хорошо будет как раз подучить?
Подскажите, какой сервер собрать js фреймворка? Как я понимаю можно только Nginx?
Приглянулось мне конечно nuxt.js, но пока не пойму до конца логику работы.
Как потом его с нодой связывать? И как настроить сервер на корень проекта? Это вместо index.php будет index.vue ? То что на dev версии Open 127.0.0.1:3000 это ясно, а в продакшине какой корень проекта? В документации не увидел...

[chelkaz]

А после этой статьи закружилась голова) https://habrahabr.ru/post/324220/

[Константин Китманов]

chelkaz: я думаю, что кроме nginx можно что угодно, только какой смысл?:)

Как потом его с нодой связывать?

Это и будет приложение на ноде.

И как настроить сервер на корень проекта? Это вместо index.php будет index.vue?

Нода работает совсем не так, как PHP (точнее, ничто не работает так, как PHP:)). nginx работает с нодой в роли reverse-proxy, пробрасывая http-запросы к приложению на node.js. Его конфиг при этом выглядит как-нибудь так:

upstream myproject {
    server 127.0.0.1:7007; # IP локальный, порт -- на котором работает ваше nuxt-приложение
}

server {
    set $apppath /path/to/nuxt-app; # папка где лежит приложение

    listen 80;
    access_log /var/log/nginx/myproject.log; # пишем логи в файлик с понятным именем
    server_name mega-project.com; # доменное имя, на котором работает сайт

# раздаем статику nginx-ом для скорости и экономии памяти
# для приложения на nuxt скорее всего будет выглядеть по-другому
    root $apppath;

    location ~ /css|js/ {
        root $apppath/public/static/;
        gzip on;
        gzip_static on;
        gzip_types text/css application/x-javascript;
        gzip_proxied no-store no-cache private expired auth;
    }

    location ~ /img/ {
        root $apppath/public/;
        gzip on;
        gzip_static on;
        gzip_types image/png image/svg+xml image/gif image/jpeg;
        gzip_proxied no-store no-cache private expired auth;
    }
# /раздаем статику nginx-ом для скорости

# собственно reverse-proxy часть
# кажется, при использовании вебсокетов надо дописать еще что-то
    location / {
        proxy_pass http://myproject/; # то, что в самом верху файла указано как upstream
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_upgrade; 
        proxy_redirect off;
    }
}

Детали про nuxt не подскажу, увы, не имел с ним дела на практике.

[Константин Китманов]

chelkaz:

А после этой статьи закружилась голова) https://habrahabr.ru/post/324220/

Очень круто, не знал, возьму на заметку.

[chelkaz]

Константин Китманов: Вы не в курсе, все js фреймворки в документации запускаются приблизительно так из консоли - npm run
Я настроил nginx и после запуска npm run все работает. Но как быть если сервер упадет или я закрою консоль) Каким образом запускать автоматом, что бы постоянно работало?

[Константин Китманов]

chelkaz: запускать из консоли вручную — пусть в никуда, конечно. Гуглите pm2 или supervisord (я за второе, потому что с минимальной обрабткой напильником умеет посылать уведомление на почту, а в pm2 эту фичу с презрением отвергли). Если дистр на сервере с systemd, то можно systemd unit nodejs. У DO вообще много неплохих статей на тему nodejs на продакшене.

Answer 2

[ozknemoy]

если перспективно то только тяжеловесы в роде ангулара2/реакта/возможно vue. остальное угадалка и потом возможен вариант полной переписи приложения на ангулар/реакт/возможно vue. мы на последнем проекте использовали нод-ангулар4 стоящий за апачем + бэк yii2

Comments

[chelkaz]

Статья где говорится что, реакт не фреймворк, это ТОЛЬКО УРОВЕНЬ ПРЕДСТАВЛЕНИЯ.
https://habrahabr.ru/post/249107/
Я все таки думаю выбрать Vue, отказаться от одностраничного приложения (spa) и сделать так:
Всю динамику на сайте делать через Vue, а Laravel под API и прочие нужды.
Хотел попробовать Nuxt фреймворк от Vue https://ru.nuxtjs.org/ но показалось очень запутанно... Мало документации и он совсем новый. Так же не понял как там генерируется динамика для SEO

[ozknemoy]

chelkaz: чтобы понять серверную часть можно попробовать уже готовый стартер. конкретно для vue есть магазинчик на гите