"Быстрый! Происходит что-то странное, и нам нужно с этим справиться. В полицейские управления повсюду поступают звонки о появлении йети. Можете ли вы создать приложение, которое поможет отслеживать эти наблюдения менее чем за час? »

Конечно, - говорите вы, когда ваш разум начинает думать о том, какая структура может помочь вам быстро выполнить эту работу. Я свяжу что-нибудь вместе с« Парусами или Перьями . Да, и фронтенд React тоже! Увидимся через час! ».

К сожалению, вы тратите целый час на настройку файла gulp из тысячи строк, необходимого для создания пользовательского интерфейса React. Затем еще час изучите руководства по началу работы для каждого из этих фреймворков. А затем вы проводите остаток следующего дня, пытаясь и безуспешно пытаясь заставить каждого из них вести себя так, как вы хотите. В результате великое вторжение йети в 2016 году имело большой успех (то есть для йети).

Если бы вы были немного лучше знакомы с некоторыми более простыми и низкоуровневыми технологиями, которые могли бы помочь вам быстрее собрать приложение для отслеживания Yeti!

RethinkDb: Эта база данных создана для работы в реальном времени! Он быстро устанавливается и работает еще быстрее. Идеально подходит для быстрого сбора данных.

Faye: идеальный партнер для сбора событий в реальном времени из базы данных и передачи их клиентам. Очень просто настроить и использовать.

Vue.js: Если вы не создадите следующую в мире мегакорпорацию, ваше приложение, вероятно, не станет достаточно большим, чтобы действительно извлечь выгоду из Angular или React. Vue.js - чрезвычайно простой инструмент для создания пользовательских интерфейсов. Он позволяет быстро выполнять работу, а также предлагает поддержку таких вещей, как компоненты и маршрутизация, если они вам понадобятся.

Давайте попробуем еще раз выследить этих йети. На этот раз для этого нам понадобится всего два файла! Весь проект доступен по адресу: https://github.com/aaronblondeau/rethink-faye.

Первый файл - это наш внутренний сервер: https://github.com/aaronblondeau/rethink-faye/blob/master/index.js

Это действительно простое приложение Node.js / Express, которое предоставляет несколько базовых конечных точек REST для создания обновления и удаления записей о наблюдениях Йети.

Вот что самое интересное:

// Subscribe to all sighting updates
r.db(databaseName).table(tableName).changes().run(conn)
.then(function(cursor){
    cursor.each(function (err, change) {
        if((change.new_val) && (!change.old_val)) {
            bayeux.getClient().publish('/sightings/'+change.new_val.state, {
                type: "created",
                sighting: change.new_val
            });
        }
        else if((change.new_val) && (change.old_val)) {
            bayeux.getClient().publish('/sightings/'+change.new_val.state, {
                type: "updated",
                sighting: change.new_val
            });
        }
        else {
            bayeux.getClient().publish('/sightings/'+change.old_val.state, {
                type: "destroyed",
                sighting: change.old_val
            });
        }
    });
});

С RethinkDB мы можем отслеживать определенные изменения в базе данных, а затем перекачивать их по различным каналам, которые клиенты могут прослушивать. Этот код отслеживает любые изменения в таблице наблюдений. Затем он использует предоставленные новые и старые значения, чтобы выяснить, было ли изменение созданием, обновлением или уничтожением (см. Ответ Николаса на эту статью ниже, чтобы узнать более чистый способ закодировать это) . Наконец, он передает событие на определенный канал с информацией. Если я создам новое прицеливание Йети в Колорадо, любой клиент, наблюдающий на / visionings / CO, получит эту информацию.

На веб-интерфейсе (https://github.com/aaronblondeau/rethink-faye/blob/master/public/index.html) мы просто следим за событиями, происходящими по сети, а затем обновляем ими нашу модель Vue.js.

var client = new Faye.Client(window.location.origin+"/faye");
...
client.subscribe('/sightings/'+newState, handleSightingEvent);
...
function handleSightingEvent(data) {
    if(data.type === "created") {
        vm.modelAddSighting(data.sighting);
    }
    else if (data.type === "updated") {
        vm.modelUpdateSighting(data.sighting);
    }
    else if(data.type === "destroyed") {
        vm.modelDeleteSighting(data.sighting);
    }
}

Мне нравится, как просто и легко было настроить Фэй для публикации событий в реальном времени из RethinkDB. Одним из приятных побочных эффектов этого является то, что события изменения генерируются в самой базе данных. Если какая-то третья сторона внесет изменения без использования моего API, пользователи все равно будут в курсе.

Я думаю, что в следующий раз, когда мне придется создавать веб-приложение с поддержкой обновлений в реальном времени, я настоятельно рекомендую пропустить все существующие фреймворки и вместо этого создать что-нибудь с помощью этих трех простых и эффективных инструментов: RethinkDB, Faye, Vue.js