1. Что такое React? Какой смысл? Почему это хорошо?
2. Итак ... WTF с JavaScript?
3. «Мы пытаемся понять JavaScript с помощью JavaScript»
4. «Это трудно сделать в масштабе нынешней сети, но мы решили, что оно того стоит. "
5. Что такое React?
6. Сильные стороны React
7. Изомор ... что?
8. ReactJS ≠ AngularJS
9. Как ты это делаешь?
10. Преимущества ReactJS для SEO
11. Недостатки React?
12. Кто использует React?
13. И это еще не конец ...
14. Источники и вдохновение

Официально React у всех на слуху, но даже ценой хорошей документации сложно понять влияние этой технологии на SEO. Небольшое освещение, чтобы освоить предмет?

Что такое React? Какой смысл? Почему это хорошо?

С появлением SPA Веб-приложения почти в реальном времени, такие как Gmail, Airbnb, Soundcloud или Netflix, JS-фреймворки и библиотеки, никогда не были так популярны.

С одной стороны, пользователи становятся все более и более зрелыми и требуют таких приложений, которые являются чрезвычайно удовлетворительными с точки зрения опыта. С другой стороны, большинство разработчиков ищут лучшую производительность (плавность интерфейса, масштабируемость и снижение затрат) и любят писать красивый код (удовольствие от кода, удобочитаемость, мощность и удобство обслуживания).

Трудно пропустить такие технологии, как AngularJS (фреймворк Google), Backbone.js, Ember.js или KnockoutJS.

Массовое использование JavaScript меняет игру с точки зрения SEO.

Итак ... WTF с JavaScript?

Основная проблема этих фреймворков заключается в том, что контент загружается на стороне клиента после загрузки страницы на стороне сервера (в отличие от PHP, например): если мы посмотрим на исходный код, это ничто!

В этих обстоятельствах робот Googlebot не может сканировать и индексировать этот контент, введенный апостериорно: катастрофически, так с точки зрения SEO! (Видимо , ...)

Недавно Google объявил, что теперь робот Google попытается интерпретировать просканированные страницы, запустив JavaScript ... "Будет пытаться ..."

«Мы пытаемся понять JavaScript с помощью JavaScript»

В сообщении от 23 мая 2014 года Google заявляет, что GoogleBot может интерпретировать JavaScript и, следовательно, индексирование содержимого ранее невидимым (поскольку генерируется на стороне клиента, а не на стороне сервера, вы следуете эх ..). Тем не менее, вы можете себе это представить, в масштабе Интернета, это работа титана ...

«Это трудно сделать в масштабе нынешней сети, но мы решили, что оно того стоит. "

Со стороны разработчика было разработано много инициатив, позволяющих сканировать и индексировать сгенерированный контент, но тем не менее он остается дорогостоящим или, по крайней мере, обязательным в жизненном цикле проекта.

Это где React, иначе решение приходит! Вы все еще следите?

Что такое React?

реагировать это библиотека ( набор методов и функций ) для разработки интерфейсов с характеристиками, которые постоянно изменяются : мы можем думать о модуле комментариев в «реальном времени» или тикере Facebook (который суммирует активность ваших друзей Там же в квази "в реальном времени").

Сила React в том, чтобы всегда находить лучший способ быстро обновлять и отображать [ эти изменения ] без необходимости перезагрузки страницы .

Разработка, а также публикация этой библиотеки являются результатом сотрудничества около сотни разработчиков работа в различных компаниях, включая инициативу Facebook и Instagram: довольно серьезно!

Сильные стороны React

«Реакция настолько быстрая, потому что она никогда не говорит напрямую с DOM. "

1. Разумность : код продукта «чистый» ( простой для чтения, понимания и обслуживания), и его чтение позволяет сразу увидеть, как будет работать ваше приложение.
2. Производительность : это одна из ключевых особенностей React, концепции Виртуальный ДОМ , React сосредоточится на обработке и отображении только изменений в представлении (оставляя в стороне оставшуюся часть представления, которая не изменяется).
3. Сообщество : ReactJS быстро соблазнил сообщество разработчиков JS. И это не говоря уже о React Native, который со своей стороны может публиковать нативные приложения iPhone (и Android в ближайшее время), написав JavaScript. Это, следовательно, экономит значительное время разработки.
4. [HOT SEO] Изоморфизм и рендеринг на стороне сервера : через использование сервера узел код сможет генерироваться на стороне клиента и на стороне сервера (немного похоже на PHP, но ... без перезагрузки!) в отличие от других библиотек и традиционных сред JS ( Backbone.js , AngularJS , ember.js и т. д.), который изначально выполняет код только на стороне клиента (в браузере). Эта сильная сторона интересует нас больше всего с точки зрения SEO, потому что она решает проблему индексации контента (возможность сканирования и индексации), заполненного только на стороне клиента.

Изомор ... что?

Просто помните, что код между клиентом (вашим браузером) и сервером один и тот же! И говорит иначе: «Бэкэнд и внешний интерфейс используют один и тот же код. (Показано справа на диаграмме)

Кроме того, React - не единственная библиотека, «внедряющая» эту технологию . На сегодняшний день уже есть хорошие двадцать, такие как Brisket, Cassis, Catberry , Чаплин , котелок , Эзель Эсте, Флэтайрон, плавкий Невидимый, jsblocks , Петля, лазойс, петлевой , Мохито, Sara.js, Сан-Стек и Taunus ,

Что касается терминологии в других местах, некоторые предпочитают говорить о Универсальный JavaScript а не изоморфизм. Следует признать, что это выражение легче понять.

«... это чисто анекдотическое свидетельство, но когда мы используем слово универсальное, а не изоморфное, все получают его. "

ReactJS ≠ AngularJS

«Многие люди используют V в MVC. "

Не нужно их сравнивать, React в отличие от AngularJS не является фреймворком.

Если разница между каркасом и библиотекой Вы одержимы, не стесняйтесь взглянуть на эти обсуждения. Для других просто помните, что React не навязывает конкретную архитектуру вашему приложению и может быть перенесен в любой проект с использованием других веб-технологий (включая AngularJS), совершенно независимо.

« Реагировать это просто вид ... »

Как ты это делаешь?

Мы платим, или мы работаем!

Если у нас нет средств, мы предлагаем сканерам альтернативную версию HTML (снимок) своих страниц благодаря Phantom.js (вы можете посмотреть на этот урок чтобы получить представление, он встречается немного, но дух есть). Да, из маскировка ! Это "грязные" пуристы говорят, что их трудно поддерживать, но это работает, довольно хорошо.

Если нет, и если у вас небольшой бюджет (или бизнес-модель, которая работает), это довольно мощный и простой в настройке: он называется PreRender или BromBone назвать только их. Если предмет « Как сделать ваши SEO-дружественные приложения JavaScript »Интересует вас, эта статья хороша.

Преимущества ReactJS для SEO

1. Возможность сканеров сканировать и индексировать содержимое в исходном формате: у нас есть все преимущества JS без недостатков!
2. Благоприятные времена загрузки способствуют хорошему пользовательскому опыту. Счастливые пользователи = Счастливый Google.

И это все! Да, с точки зрения SEO. Все будет зависеть от того, что вы будете делать в следующем бэк-офисе. И чтобы завершить анализ по этой теме, я предлагаю вам взглянуть на эту статью Zack Argyle, разработчик @Pinterest «Прекратить использование React для ВСЕГО»

«Если у вас сильное динамическое приложение, которое нужно часто обновлять, и вы хотите избежать большого веса различий, вы смотрите на противника типа травы, и виртуальный DOM от ReactJS будет очень эффективным. Однако, если у вас не будет таких потребностей, ВЫБЕРИТЕ ЧТО-нибудь другое! "

Недостатки React?

Проще говоря, нет ни одного. Если мы немного копаем, мы можем отметить это:

• Документация продвигается, но было еще некоторое время, когда было непросто обойтись только с Facebook.
• Facebook оставляет за собой право отозвать лицензию , право использовать React. Этот вопрос обсуждается, хотя наивно можно задаться вопросом, какой интерес Facebook может принять на вооружение такого типа.

Кто использует React?

Все больше и больше компаний! Чтобы говорить о самых известных, мы можем, конечно, процитировать Facebook, Instagram, а также Yahoo, Adobe, Airbnb, AdRoll, Asana, BBC, Century 21, Club Med, Dropbox, Feedly, Github, Khan Academy, KissMetrics, Netflix, Reddit, Salesforce, Twitter, WhatsApp и полно других ,

И это еще не конец ...

Вам понравилась эта статья? Спасибо, что поделились этим или рассказали нам о своем опыте (хорошем или плохом) с фреймворками и библиотеками JS, оставив комментарий.

И если у вас еще есть энергия, я могу только посоветовать вам прочитать нашу предыдущую статью Demandware: плюсы и минусы для SEO ,

PS: спасибо Georges , Жереми , Blandine , Франсуа и Одри для корректуры!

Источники и вдохновение

1. Реакция против AngularJS - Как эти два сравнивают [EN]
2. Facebook ReactJS - Ресурсы, чтобы начать [FR]
3. Awesome React, коллекция потрясающих инструментов React, ресурсов, видео и ярких вещей [EN]

Игнорируемые предметы

1. React Native, платформа для создания собственных приложений с использованием React [EN]
2. JSX, расширение синтаксиса JavaScript, похожее на XML [EN]
3. Многоразовые компоненты [EN]
4. Дополнения React, некоторые полезные утилиты для создания приложений React [EN]
5. Flux, архитектура приложений для создания веб-приложений на стороне клиента [EN]

Похожие

Комментарии