"Быстрый! Происходит что-то странное, и нам нужно с этим справиться. В полицейские управления повсюду поступают звонки о появлении йети. Можете ли вы создать приложение, которое поможет отслеживать эти наблюдения менее чем за час? »
Конечно, - говорите вы, когда ваш разум начинает думать о том, какая структура может помочь вам быстро выполнить эту работу. Я свяжу что-нибудь вместе с« Парусами или Перьями . Да, и фронтенд 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