Определение термина «изоморфный» в 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 г.