Существует ли индексируемый поисковиками аналог AngularJS?

Question

[vasIvas]

Мне очень понравилось работать с angularjs, но теперь я хочу для себя сделать приложение-сайт,
который должен хорошо индексироваться, не уступать рендеру на сервере. Но существует ли хорошо
индексируемый аналог angularjs?
И у меня сразу просьба, если Вы лично не работали или если в Вашей команде с ним не работали,
то лучше не нужно комментировать.

И чтобы его можно было использовать с laravel5.

Comments

[nonlux]

А в чем проблема использования History API в js приложении + рендеринг необходимого в laraver5 для поисковиков ?

[Alex]

в Angular 2 как раз над этим работают\работали.

Answer 1

[Никита Гущин]

flux + react.js

Answer 2

[_ _]

В ангуляр2 рендер отделен от приложения, можно рендерить в текст, в DOM. Но пока порог вхождения высок - документации мало, бета-версии нет.
Для 1-го ангуляра смотрите prerender.io, angular-server.
Фразу про Laravel я не понял.

Comments

[_ _]

pygame: пруфы про отдельный render компонент во второй версии?
Рендер для DOM https://github.com/angular/angular/blob/master/mod...

Серверный рендер
https://github.com/angular/universal/blob/master/m...

Answer 3

[Сергей Протько]

стабильное решение уже указал вам Никита Гущин, будущее - Александр Марченко

И чтобы его можно было использовать с laravel5.

Все что угодно, SPA ничего не знают о Laravel. Всей ересью вроде проксирования поисковиков будет заниматься nginx или мидлвэр перед laravel.

Comments

[vasIvas]

Я специально подчеркнул laravel5, так как не понимаю "как работает именно reactjs".
Например с angularjs у меня проблем нет. Но я так (пока) и не смог понять что есть рендер на сервере для spa.

[Сергей Протько]

vasIvas: грубо говоря у вас reactjs все так же будет общаться с апишкой написанной на laravel или хоть на баше, просто вместо браузера будет node.js который будет продьюсить html, который уже будет грузиться на клиент и там реакт уже подхватит то состояние которое выплюнул сервер и продолжит работать как ни в чем не бывало.

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

Единственное что придется сделать правила машрутизации, скажем все запросы вида /api пихаем на laravel а все остальные на ноду которая будет генерить html.

[vasIvas]

Сергей Протько: спасибо. Ушел читать.

[Сергей Протько]

vasIvas: справедливости ради стоит заметить, что если смотреть под этим углом, то разница между server-side рендрингом для react и для angular только в производительности первого - сгенерить строку проще чем отрендрить DOM. В общем и целом все примерно одинаково, можно спокойно поставить какой phantom.js на сервак и не париться. Но это если для поисковиков.

Для конечного пользователя профит от server-side рендринга - он мгновенно получит страницу, а пока он тупит и смотрит на нее проинициализируется само приложение и плавненько так статическая страничка станет динамической.

[vasIvas]

Сергей Протько: после полудня чтения у меня лишь... примерно три вопроса. Но пока задам только полтора. 1) что использовать для полного боекомплекта react + flux + jsd. Что-нибудь ещё?
1,5) пока не знаю, как спросить, по этому ещё почитаю пойду.

[vasIvas]

Сергей Протько: кстати реализация react очень похожа на flash :) Я по моему даже с Вами спорил, что html+css+js нужно рассматривать, как одно целое. Что это не представление, модель, а что это все одно представление. Вот как во flash. Там все написано на одном языке и ты как не крути, там все является частью представления, если это не модель конечно.
Но вот я не пойму, как воспринимать flux.. Это вроде контроллер, так как он получает данные вместе с событием от представления и только он знает куда их положить.
То есть он хранит ссылки на все модели. В as3 тоже так. Но вот то, что он (flux) обновляет в ответ представление, делает его не контроллером, а viewmodel из mvvm.

И как не крути, это так. Это архитектура mvvm. Что как бы и не плохо, но она навеяна же c# у которого, не совсем такой же viewport, вроде бы, как у .. ну, как в браузере.
У него же типа как у flash свои компоненты и прочее...

А то что скорость обновления, это очень похоже на реализацию, которую я в играх встречал entity system, что в принципе логично для всех представлений, которые хотят быстро работать.

Если я не прав в чем-то, то поправьте своим виденьем и если можно расскажите, от куда представление берет данные.

[Сергей Протько]

vasIvas: хз, я не парюсь и использую angular + phantomjs на случай поисковиков. У меня не настолько медленно стартует фронтэнд пока что бы нужно было сервер-сайд рендрингом страдать, хотя конечно полезно было бы.

[Сергей Протько]

vasIvas: и ты туда же... react это V в контексте HMVC, и все. Flux это все остальное.

[Никита Гущин]

vasIvas: да-да, flux - это другой паттерн. MV*** не слишком хорошо показала себя для клиентских приложений (SPA). У вас есть выбор - можете взять классический flux от фейсбука, мне лично больше всего пришлась по душе другая реализация - redux (https://github.com/rackt/redux). Можно вообще по беспределу пойти и взять relay (https://facebook.github.io/relay/) - он тоже от фейсбука ... правда я не уверен насколько стабильная сейчас версия.

[Никита Гущин]

Сергей Протько: Я, обычно, все сайты делаю на реакте (будь то spa или нет) - выходит проще, чем на половине проектов использовать какой-нибудь бэкбон с джейквери + twig в php, а на другой - ангуляр.

[Сергей Протько]

Никита Гущин: что значит MV** "плохо показало"... MV** означает что можно так и эдак, MVC, HMVC, MVVM... на ваш выбор. От MVVM Angular2 судя по всему отказывается в пользу православного HMVC.

[Никита Гущин]

vasIvas: ох, коммент удалился :( Пишу заново ...

[Сергей Протько]

Никита Гущин: я так же обычно все делаю на angular, но так как у меня обычно не сайты мне проще. В большинстве случаев это какие-то внутренние приложения, а если надо что бы фронтэнд индексировался - добавляется один простенький httpInterceptor который говорит phantomjs-у когда запросы заканчиваются, после чего phantom ждет окончания $digest циклов и рендрит страницу. Естественно есть готовые реализации этого всего.

Что до backbone/jqyery + twig - давно уже не видел и счастлив. И да действительно удобнее и проще.

[Сергей Протько]

Никита Гущин: восстановил.

[Никита Гущин]

Сергей Протько: спасибо)

Я не точно выразился. Имелось ввиду, что лучше делать one-way-data-flow. В противном случае возникают сложности с серверным рендером: каждый компонент может попросить данный через async запрос. Из-за этого возникает неприятная ситуация, когда ты строишь дерево компонентов и начинаешь их рендерить, а на запросы еще нет ответа ...

[vasIvas]

Сергей Протько: неа, я знаю что react это только представление. Но и flux это всего лишь "что-то вроде контроллера". react обделен событиями и для того чтобы все функционировало воткнули flux, который выступает в роли global dispatcher. Только flux знает куда должна идти data от react, но при этом он не модель.

И да у меня ситуация, когда скорость и индексация критична. Да и я очень хочу и при чем давно попробовать react. Когда я задавал этот вопрос, то уже был нацелен на react.

Ушел про redux читать...

Answer 4

[Павел Волынцев]

AngularJS + https://prerender.io/

Пример: web-mastery-gauge.ru посмотрите исходник страницы - там только мета теги и ссылка на JS/CS. Откройте ту же страницу с UserAgent googlebot