Худшие проблемы, с которыми вы столкнетесь при создании изоморфного приложения (пункт 2)

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

Вы можете найти часть 1 здесь по этой ссылке:

Я бы подробно описал все «Проблемы первых исследований» в этой части 2, но я решил разделить «Проблемы» узла на третью часть из-за ее размера (он не такой большой, но я не не думаю, что длинные тексты продуктивны).

И перейдем к главному:

Подробные проблемы первых исследований

Если вы хорошо помните, это темы, и мы собираемся здесь обсудить те, которые выделены жирным шрифтом:

• Как правильно получать информацию с обеих сторон, сервера и клиента, с одним и тем же кодом.
• Как не получать данные на клиенте, когда мы уже делали это на сервере;
• Как сделать так, чтобы у нас была разметка HTML, чтобы сканеры нас понимали?
• Как запустить полнофункциональную версию ES6 на NodeJS (в части 3);
• (предупреждение о спойлере) Затем вы узнаете, как запускать функции ES6 на NodeJS, но это не рекомендуется для производства из-за потребления памяти, и что тогда? (в части 3)

Как правильно получать информацию с обеих сторон, сервера и клиента, с одним и тем же кодом

И позвольте мне объяснить почему. Учтите эти два момента:

• Если вы просто принесете разметку без контента и получите данные на клиенте, как сканеры узнают о вашем контенте?
• Если вы уже загружали данные через сервер, зачем выполнять повторную загрузку на клиенте? Вы только увеличите свои счета за сервер и ухудшите пользовательский опыт.

Если вы используете Redux с какой-либо технологией Virtual DOM, я настоятельно рекомендую вам прочитать этот пост:

Если вы измените каждое слово React для ‹your_virtual_dom_lib› и правильно сделаете абстракцию, вы получите те же результаты.

Вкратце я сделал так:

• считайте, что у вас есть один preloaded_state объект;
• на сервере вы получите информацию и сохраните все в preloaded_state;
• с сервера через вашу разметку вы вставите над своим Javascript что-то вроде этого (представленное внутри строки шаблона):

`window.__STATE__ = ${preloaded_state};`

• не будут переданы только некоторые части вашего кода, поэтому в клиенте вы должны preloaded_state создать свой магазин:

const store = window.__STATE__;

После этого вы можете правильно настроить store, следуя документации Redux. :)

Теперь нам нужно поговорить об однократной выборке информации, что подводит нас к следующей теме.

Как не получать данные на клиенте, когда мы уже сделали это на сервере

Теперь у меня store на клиенте, и эта информация уже получена, но я использую один и тот же код для сервера и клиента, и когда приходит клиент, он все снова забирает, такой болван, этот клиент, верно?

Вот что произошло на временной шкале:

• Я решил создать функцию с именем shouldFetchAction, чтобы проверить, есть ли у меня пустой объект, и использовать ее при необходимости. Звучит хорошо, но представьте, что при просмотре приложения по разным продуктам данные не обновляются, потому что shouldFetchAction будет проверять только пустые объекты и все остальное;
• Затем хаос, несколько мгновений размышлений, 2 круговых совещания (я назвал круговое совещание, когда я хожу по компании, проводя совещания, вы должны это сделать) с одним разработчиком, 3 круга встречи с моим заказчиком (который также является техническим специалистом), пока не появятся идеи по решению этой проблемы;
• Что делать, если я отмечу свой запрос? Могу ли я .push() объект requestedOrigin для моих запросов и сопоставить их происхождение? Думаю, кто-то скажет, что это плохая практика, но поскольку я создаю что-то настолько новое и в короткие сроки, мне нужно сделать вещи как минимум безопасными, а затем улучшить методы. Я мог доказать, что это безопасно, и команда работала над этой реализацией.

Я использую библиотеку под названием Axios, которая очень хорошо работает как с серверными, так и с клиентскими запросами, и в ней есть эта transformResponse функция, с помощью которой я могу творить там чудеса. Я проверил, откуда исходит этот запрос, и пометил ['s'] в случае сервера и ['s', 'c'] в случае, если он доступен для повторного запроса от клиента.

В своих действиях Redux я правильно обновил объект requestedOrigin, чтобы ['s', 'c'] правильно отправил его в магазин.

Я все еще ищу альтернативные способы сделать это и сравниваю. Если вы читаете это и можете найти лучшее решение, поделитесь со мной, комментируя здесь, если хотите. ❤

Как сделать так, чтобы у нас была разметка HTML, чтобы сканеры нас понимали

Это тема, которую я могу рассмотреть с помощью двух подходов.

1- Я много говорю о Virtual DOM, его движке и т. Д .; или

Я делаю это просто и просто говорю вам, что если вы будете искать в Google «‹your_lib_name› рендеринг на стороне сервера», вы найдете почти все, что вам нужно.

Если вы используете React, renderToString() функция React решит проблему, что очень важно для вас на стороне NodeJS. И это так просто, как должно быть. Вы require свой компонент в файл разметки на стороне сервера и делаете что-то вроде этого:

var App = require('./components/App.js');
var renderToString = require('react').renderToString;
...
function renderHTML() {
  renderToString(
    <App />
  );
}
...

Если вы используете VueJS, я нашел эту ссылку, которая может вам помочь:

И если у вас есть другие предложения, прокомментируйте их, я даже подумываю использовать Vue для моего следующего проекта, и всегда приятно поделиться знаниями! :)

Теперь, если вам нужно предоставить данные с сервера, помните тот пост, которым я поделился в начале? Действуй.

НАМЕКАТЬ:

Если вы используете .jsx синтаксис для компонентов React, вам понадобится дополнительная магия, чтобы NodeJS понимал, что происходит внутри этого кода. В части 3 я расскажу об этом немного подробнее.

Скоро части 3 и 4 :)

Я уже пишу части 3 и 4 этой серии, а остальные появятся, пока работа над этой серией ведется.

• Часть 3: Детальные первые задачи исследования (продолжение);
• Часть 4: Важность шаблонов проектирования интерфейсов.

Концовки

Надеюсь, вам понравилось, и если да, поделитесь, прокомментируйте ниже все, что помогает улучшить контент или сомневается. Вы также можете связаться со мной в Twitter, я буду рад ответить и поболтать о Javascript или дизайне программного обеспечения. :)

Спасибо!