Изоморфизм….
Этот пост был вдохновлен недавним проектом. Я делал HTTP-запрос и столкнулся с некоторыми проблемами. Я разместил свой вопрос на stackoverflow и получил множество ответов, которые не только помогли мне решить проблему, но и открыли для себя концепцию изоморфизма. Я уверен, что некоторые новые разработчики могут относиться к реакции коленного рывка на использование jQuery для всех запросов AJAX. До недавнего времени я был этим разработчиком! Я стал настолько зависим от него, что не переставал думать, что могут быть лучшие альтернативы. Итак, давайте поговорим об изоморфизме!
Основы: концептуализация
Начнем с общего определения изоморфизма:
Изоморфизм означает соответствие или сходство по форме и отношениям.
Итак, что касается веб-разработки, приложение JavaScript, считающееся «изоморфным», — это приложение, которое может работать как на стороне клиента, так и на стороне сервера (в большинстве случаев это одностраничное приложение, которое можно запускать на сервере).
Изоморфные библиотеки
Теперь, когда у нас есть представление о том, что означает изоморфизм, давайте займемся концепцией изомофных библиотек. Примером изоморфной библиотеки может быть ReactJS. ReactJS — это библиотека с открытым исходным кодом, разработанная Facebook, которая работает как V в MVC (модель, представление, контроллер). Что делает ReactJS изоморфным, так это его способность рендериться на стороне сервера. Это означает, что сервер NodeJS может анализировать ваши компоненты ReactJS и возвращать HTML в браузер.
Изоморфная библиотека против библиотеки jQuery
Я считаю, что можно привести аргумент, что выбор изомофной библиотеки для выборки данных по запросу jQuery AJAX является скорее предпочтением разработчика. Например, если вас интересует оптимальная производительность, вы можете выбрать библиотеку изоморфной выборки. Производительность JQuery или ее отсутствие могут быть незаметны в небольших приложениях, но для крупных приложений производственного уровня это далеко не идеальный выбор.
Для тех, кого могут заинтересовать дебаты о том, нужна ли нам, разработчикам, jQuery, ознакомьтесь с этим постом:
https://mmikowski.github.io/why-jquery/
Автор подробно объясняет, почему нам нужен jQuery и когда его использовать.
Преимущества изоморфизма
- Для изоморфных SPA первый запрос страницы выполняется быстро, а последующие — еще быстрее; в отличие от обычных SPA, где первый запрос используется для загрузки приложения, а затем выполняется двусторонний обход для получения того, что было запрошено.
- Кода меньше, так как он используется как клиентом, так и сервером.
Изображение выше иллюстрирует различия между изоморфным приложением и приложением, отображаемым на сервере. На изоморфном веб-сайте HTML-код, отображаемый сервером, возвращается клиенту при первом запросе страницы. HTML содержит специальную разметку, которая позволяет асинхронно загружаемому SPA на стороне клиента подключаться и обрабатывать будущий рендеринг на клиенте. Когда пользователь меняет представления или страницы, SPA на стороне клиента полностью берет на себя навигацию и рендеринг, используя сервер только для запросов API по мере необходимости.
Почему это важно?
Начальная страница SPA может загружаться медленно из-за времени, необходимого для загрузки и анализа JavaScript на стороне клиента. Хотя эта задержка составляет всего несколько секунд или миллисекунд, пользователи могут потерять терпение и покинуть сайт, в результате чего компания потеряет доход.
Практическое использование:
Вот фрагмент кода, показывающий, как можно интегрировать изоморфную библиотеку npm isomorphic-fetch.
require('es6-promise').polyfill();
require('isomorphic-fetch');
fetch('//offline-news-api.herokuapp.com/stories')
.then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
})
.then(function(stories) {
console.log(stories);
});
Ключ к пониманию того, как работает выборка, находится в обещании .then() и функции обратного вызова. Обещание представляет собой конечный результат асинхронной операции. Это заполнитель, в котором материализуется значение успешного результата или причина неудачи. В этом случае выполненное обещание является успешным ответом обратного вызова, а отклонение связано с неудачным обратным вызовом.
Дополнительные ресурсы:
Если вы заинтересованы в интеграции ismorphic библиотек в свои проекты, вам следует ознакомиться с некоторыми из них:
