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

В настоящее время мы запускаем код Javascript не только в браузере и на сервере, но и на мобильных устройствах, микроконтроллерах, таких как Piis и Arduino, и даже на встроенных устройствах.

В последнее время люди стали называть изоморфный javascript универсальным javascript. Хорошо. Куда бы ни текла лодка…

Как сделать наше приложение изоморфным?

Во-первых, это использование сервера NodeJS с кодом Javascript, который позволяет повторно использовать один и тот же код Javascript как в браузере, так и на сервере. Во-вторых, использование фреймворков, которые позволяют использовать изоморфное кодирование javascript. Их так много, вот некоторые крутые:

  • РеактJS
  • Метеор
  • Rendr: визуализируйте свои приложения Backbone.js на клиенте и сервере, используя Node.js.
  • Mojito: создавайте высокопроизводительные, независимые от устройств приложения HTML5, работающие как на клиенте, так и на сервере, с помощью Node.js.
  • LazoJS: клиент-серверная веб-инфраструктура, построенная на Node.js, которая позволяет разработчикам внешнего интерфейса легко создавать полностью совместимое с SEO компонентное структурированное веб-приложение MVC с оптимизированной загрузкой первой страницы. и наконец….
  • Угловой 2 Универсальный

Почему изоморфный?

  • Лучший общий пользовательский опыт
  • Индексируется поисковой системой
  • Более простое обслуживание кода
  • Бесплатные прогрессивные улучшения

Универсальный обзор Angular 2

Здесь я хотел бы рассказать, как настроить очень простое приложение с помощью Angular 2 Universal. Если у вас еще не было возможности работать с Angular 2, вот стартовый набор, который поможет вам начать работу: https://github.com/AngularClass/angular2-webpack-starter

В представлении высокого уровня в Angular Universal есть два основных компонента:

1- Генерация всего HTML для страницы по заданному маршруту или рендеринг на сервере

2- Переход от просмотра сервера к просмотру браузера в клиентском браузере

Существует два подхода к предварительному рендерингу и повторному рендерингу.
Предварительный рендеринг означает использование одного из универсальных инструментов сборки (например, gulp, grunt, broccoli, webpack и т. д.) для создания статического HTML-кода для всех ваших маршрутов во время сборки, а затем развертывания этого статического HTML-кода в CDN. . Этот подход отличается высокой масштабируемостью и производительностью.

повторный рендеринг означает динамическую повторную визуализацию приложения для каждого запроса на сервере. Для повышения производительности и масштабируемости кэширование определенно является вариантом.

Согласно документации Angular 2 Universal, вот весь поток:

1- Браузер получает начальную полезную нагрузку с сервера

2- Пользователь видит вид сервера

3- Preboot создает скрытый div, который будет использоваться для начальной загрузки клиента, и начинает запись событий.

4. Браузер отправляет асинхронные запросы на дополнительные ресурсы (например, изображения, JS, CSS и т. д.)

5- После загрузки внешних ресурсов начинается начальная загрузка клиента Angular.

6- Представление клиента отображается в скрытом div, созданном Preboot
7- Bootstrap завершен, поэтому клиент Angular вызывает preboot.done()

8- События перед загрузкой воспроизводятся, чтобы настроить состояние приложения, чтобы отразить изменения, внесенные пользователем до загрузки Angular (например, ввод текста в текстовое поле, нажатие кнопки и т. д.)

9- Preboot переключает скрытый div представления клиента на видимый div представления сервера

10- Наконец, Preboot выполняет некоторую очистку видимого представления клиента, включая настройку фокуса.

Теперь давайте приступим к настройке очень простого приложения Angular 2 с помощью Angular 2 Universal. Сначала нам нужен сервер NodeJS, вот простой сервер NodeJS в Angular2:

Далее нам нужен файл нашего универсального модуля:

Затем мы настроили очень простой модуль angular 2. Поскольку рынок покемонов довольно популярен, давайте создадим одностраничное приложение, в котором каждый вводит свое любимое имя покемона:

Теперь нам нужно загрузить наше приложение с помощью Angular Universal:

И, наконец, файл HTML:

Это была очень простая презентация Angular 2 Universal, если вы хотите начать изучать больше, есть довольно хороший стартовый набор, который я настоятельно рекомендую использовать.

Первоначально опубликовано на nazaninde.ghost.io 21 июля 2016 г.