Реагировать на будущее с изоморфными приложения

Вещи часто приходят полный круг в разработке программного обеспечения.Веб, в частности, начали с серверами доставки контента до клиента.В последнее время с созданием современных веб-систем, таких как AngularJS и Эмбер, мы видели толчок оказать на клиента и только использовать сервер для API.Мы сейчас видим возможное возвращение или, скорее, больше комбинации обеих архитектурах, происходящих .

Что такое Реагировать

Реагировать есть, в соответствии с официального website 1 :

“ Библиотека JavaScript для создания пользовательских интерфейсов .”

Это способ создания многократно используемых интерфейсных компонентов.Просто и понятно, что цель Реагировать .

Чем она отличается

Реагировать быстро вырос до огромной популярности в обществе JavaScript.Есть ряд причин, по ее успеха.Во-первых, Facebook создал его и использует его.Это означает, что многие разработчики Facebook работать с ним, исправлять ошибки, предполагая, функции и так далее .

React To The Future With Isomorphic Apps

Еще одна причина для его быстрой популярности в том, что он по-другому.Это в отличие от AngularJS 2 , Backbone.js 3 , Ember 4 , Knockout 5 и почти любой из других популярных фреймворков MV * JavaScript, которые вышли во время революции JavaScript в последние несколько лет.Большинство из этих других структур работают на идее двусторонний привязки к DOM и обновления на основе событий.Они также все требуют DOM, чтобы быть present;Так вот, когда вы работаете с одним из этих рамок, и вы хотите, чтобы любой из разметке быть вынесено на сервере, вы должны использовать что-то вроде PhantomJS .

Виртуальный DOM

Реагировать часто описывается как “V” в приложении MVC.Но он делает V совсем иначе, чем другие механизмы MV *.Это отличается от вещей, как Рули, шаблоны подчеркивания и шаблонов AngularJS.Реагировать работает на концепции “виртуального DOM.” Он поддерживает этот виртуальный DOM в памяти, и в любое время изменения, внесенные в DOM, реагируют ли быстро Diff изменений, партии их все в одно обновление и парад фактическаяDOM сразу .

Это имеет огромные последствия.В первую очередь, с точки зрения производительности, вы не постоянно делать обновления DOM, асо многими из других фреймворков. DOM является огромным препятствием с переднего плана выполнения . второй ветвления является то, что Реагировать может оказать на сервере так же легко, как это может на клиенте .

Реагировать предоставляет метод под названием React.renderToString().Этот метод позволяет пройти в компоненте, который, в свою очередь делает его и все дочерние компоненты, которые он использует, и просто возвращает строку.Вы можете взять эту строку в HTML и просто отправить его вниз для клиента .

Example

Эти компоненты строятся с синтаксисом под названием JSX.Во-первых, JSX выглядит странным HTML-JavaScript гибрид:

var HelloWorld = React.createClass({
    displayName: "HelloWorld",
    render() {
        return (
            <h1>Hello {this.props.message}</h1>
        );
    }
});

React.render(<HelloWorld message="world" />, document.body);

Что вы делаете с этим .jsx Формат передать его через (или “transpile”) webpack, grunt, gulp, или ваш “визуализации” выбора, а затем выплюнуть наличие которая выглядит следующим образом:

var HelloWorld = React.createClass({
  displayName: "HelloWorld",
  render: function() {
    return (
        React.createElement("h1", null, "Hello ", this.props.message)
    );
  }
});

React.render(React.createElement(HelloWorld, {message: "world"}), document.body);

Это то, что наши HelloWorld.jsx комплектующие transpiles не — ничего больше, чем просто JavaScript.Кто-то может считать это нарушением разделения проблем путем смешивания наличие с HTML.Во-первых, это похоже на то, что мы делаем.Тем не менее, после работы с Реагировать на некоторое время, вы понимаете, что близость разметки вашего компонента в JavaScript позволяет развиваться более быстрыми темпами и поддерживать ее больше, потому что вы не прыгать туда и обратно между HTML и файлы JavaScript. Все код для данного компонента живет в одном месте .

React.render прикрепляет <HelloWorld> компонент в body.Естественно, это может быть любой элемент существует.Это вызывает компонент в render способ уволить, и результат добавляется к DOM внутри <body> тега .

С React компонента, все, что вы пройти в качестве атрибутов — сказать, <HelloWorld message="world" /> — у вас есть доступ в компонента this.props.Так, в <HelloWorld> компонента, this.props.message составляет world.Кроме того, посмотрите немного ближе в JSX части кода:

return (
    <h1>Hello {this.props.message}</h1>
);

Вы заметите, прежде всего, что у вас есть, чтобы обернуть HTML в скобках.Во-вторых, this.props.message, завернутый в фигурные скобки.Фигурные вы получите доступ к компоненту через this .

Каждый компонент также имеет доступ к его с Реагировать, каждый компонент управляет его состояние с помощью нескольких простых методов API, getState И setState, а также getInitialState Ибо, когда первый компонент нагрузок.Всякий раз, когда изменяется состояние, render метод просто повторно делает компонент.Например:

var Search = React.createClass({
    getInitialState() {
        return {
            search: ""
        };
    },
    render() {
        return (
            <div className="search-component">
                <input type="text" onChange={this.changeSearch} />
                <span>You are searching for: {this.state.search}</span>
            </div>
        );
    },
    changeSearch(event) {
        var text = event.target.value;

        this.setState({
            search: text
        });
    }
});

React.render(<Search />, document.body);

В этом примере, getInitialState функция просто возвращает литерал объекта, содержащего начальное состояние компонента .

render функция возвращает JSX для нашего элементов — так, input и span, как завернутый в div.Имейте в виду, что только один элемент могут когда-либо быть возвращен в JSX как родитель.Другими словами, вы не можете вернуться <div></div><div></div>;Вы можете вернуть только один элемент с несколькими детьми .

Обратите внимание, onChange={this.changeSearch}.Это говорит компонент уволить changeSearch функцию, когда срабатывает событие изменения на входе .

changeSearch функция получает event уволили из событий DOMи может захватить текущий текст входе.Затем, мы называем setState и передать в тексте.Это приводит к render огонь снова, и {this.state.search} отразит новое изменение .

Многие другие интерфейсы в Реакция доступны для работы, но на высоком уровне, что мы и сделали выше так же легко, как он получает для создания простой Реагировать компонент .

Изоморфная JavaScript

С Реагировать, мы можем строить “изоморфными” приложения .

Я · так · мор · гомеоморфными: “соответствующих или аналогичных по форме и отношений”

Это уже стало модным в 2015 году В принципе, это просто означает, что мы получаем, чтобы использовать тот же код на клиенте и на сервере .

Этот подход имеет много преимуществ .

Ликвидация FOUC

С AngularJS, Эмбер (на данный момент) и SPA-типа архитектуры, когда пользователь впервые попадает на страницу, все активы должны загрузить.С SPA приложений, это может занять секунду, и большинство пользователей в эти дни ожидают время загрузки менее чем за две секунды.В то время как содержание загружается, страница нетонированное.Это называется “вспышка без стилей содержания” (FOUC).Одним из преимуществ изоморфной подхода к созданию приложений является то, что вы получаете преимущества скорости рендеринга на сервере, и вы все еще можете сделать компоненты после загрузки страницы на клиенте .

Работа изоморфной приложение не заменить традиционный API сервера, а просто, чтобы помочь устранить FOUC и дать пользователям лучше, быстрее опыт, который они растут привыкли .

Общий Code

Один большой плюс заключается в возможности использовать тот же код на клиенте и на сервере.Просто создайте компонентов, и они будут работать в обоих местах.В большинстве систем, таких как Rails 6 , ASP.NET MVC 7 Вы обычно имеют erb или cshtml Просмотров за оказание насервер.Затем вы должны иметь на стороне клиента шаблоны, такие как рули или Hogan.js, которые часто дублируют логику.С Реагировать, одни и те же компоненты работают в обоих местах .

Progressive Enhancement

Оказание сервера позволяет отправлять вниз баребоны HTML, что клиент должен отобразить веб-сайт.Вы можете расширить опыт или сделать несколько компонентов в клиенте .

Доставка хороший опыт для пользователя на панель телефона в Африке, а также в качестве расширенной опыт для пользователя на 15-дюймовом MacBook Pro с Retina Display, подключили к новому 4K монитор, как правило, довольно утомительной задачей.

Реагировать и …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.