Эта статья была рецензирована Агбонгхама Коллинз . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Объемы данных быстро растут, и их становится все сложнее поддерживать. Многие разработчики хотят избежать проблем и головных болей, вызванных проблемами с данными во время их работы.
Breeze.js — это одна из библиотек, которая облегчает нашу работу. В этой статье мы поговорим о том, как лучше писать запросы с помощью Breeze.js. Но, во-первых, мы должны знать, что такое Breeze.js и почему он был создан.
Что такое Breeze.js?
Breeze.js — это библиотека JavaScript, которая помогает нам управлять данными в многофункциональных клиентских приложениях. Breeze работает в любом браузере и поддерживает запросы, кэширование и динамические графы объектов на стороне клиента.
Самое лучшее в Breeze.js — это то, что он не отражает серверную модель, а создает ее динамически. С Breeze кэшированные данные находятся на стороне клиента. Ему не нужно запрашивать сервер, потому что он может запросить кэш вместо этого. Это сохраняет кэш локально и в автономном режиме. Когда он подключен, он синхронизирует изменения.
Двумя сильными сторонами Breeze.js являются расширенные запросы и отслеживание изменений. Четыре мощных способа запроса — это фильтры , сортировка , разбиение на страницы и проекции . Для выполнения запроса требуется помощь, и тут приходит Breeze EntityManager. Каждая сущность отслеживает свое собственное измененное состояние. Мы обсудим это позже.
Breeze.js хорошо работает со многими фреймворками, включая AngularJS, Backbone.js, Knockout, Node.js и многими другими.
Теперь давайте посмотрим, как настроить среду и перейти к кодированию.
Как установить
Breeze можно скачать из своего репозитория на GitHub. Наиболее распространенные версии Breeze:
- breeze.debug.js — это стандартная клиентская библиотека, которую я предлагаю использовать. Он поддерживает сторонние библиотеки, включая Backbone и Knockout.
- breeze.min.js — Breeze.min.js — это минимизированный breeze.debug.js, его размер составляет 175 КБ по сравнению с размером breeze.debug.js, который составляет 602 КБ.
Есть два других способа получить Breeze: через Bower и npm . Я предпочитаю использовать Bower, потому что я более знаком с ним. Откройте терминал, затем перейдите в каталог клиента и выполните эти две команды, чтобы получить Breeze:
bower install breeze-client
bower install breeze-client-labs
Чтобы включить Breeze в проект, вы должны включить этот тег сценария внутри <body>
<script src="bower_components/breeze-client/build/breeze.debug.js"></script>
Старые браузеры, которые не поддерживают ECMAScript 5, могут вызвать проблемы для Breeze. Для включения синтаксиса ES5 в этих браузерах необходима библиотека shim. Для пользователей Internet Explorer этот код рекомендуется вводить внутри <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
Breeze также нужны некоторые расширения для нормальной работы :
- служба данных
- компонент JavaScript, который выполняет запросы AJAX
- библиотека моделей для привязки данных (например, Knockout)
- библиотека обещаний
Чтобы продемонстрировать Breeze в действии, в следующем разделе я покажу вам, как запустить и запустить одно из примеров приложений Breeze . Это будет включать в себя все эти вещи из коробки.
Предпосылки для примера приложения
Чтобы запустить пример приложения, на вашем компьютере должны быть установлены Node.js и MongoDB.
Node.js является бесплатным и может быть загружен с домашней страницы проекта . Если на вашем компьютере установлен Bower или npm, у вас также установлен Node. Если у вас возникли проблемы с установкой Node, ознакомьтесь с нашим руководством по npm (которое включает в себя раздел об этом): Руководство для начинающих по npm
MongoDB можно скачать с их страницы загрузки . У них есть руководства по установке для всех основных операционных систем.
Настройка примера приложения
Первое, что нужно сделать, это взять копию примеров приложений Breeze JavaScript Client . Самый простой способ сделать это — использовать Git:
git clone https://github.com/Breeze/breeze.js.samples.git
В рамках проекта перейдите в папку node/zza-node-mongo
cd breeze.js.samples/node/zza-node-mongo
Здесь вы видите три папки: clientdatabaseserver В папке databasezza-mongo-database.zip
cd database
unzip zza-mongo-database.zip
Теперь нам нужно узнать имя каталога, который MongoDB использует для чтения и записи своих данных . По умолчанию это /data/db\data\db Однако, если вы установили MongoDB с помощью менеджера пакетов, проверьте файл /etc/mongod.conf Для меня (в Linux) это был /var/lib/mongodb
Теперь переместите файлы в этот каталог:
sudo mv zza.0 zza.1 zza.ns /var/lib/mongodb/
И измените владельца файлов на mongodb:nogroup
sudo chown mongodb:nogroup /var/lib/mongodb/zza.*
Если сервер mongodb не запущен, запустите его, указав на этот каталог базы данных:
sudo service mongod start
Вернитесь в папку client /node/zza-node-mongo/client
bower install
После того, как компоненты Bower установлены, вам нужно перейти в папку server /node/zza-node-mongo/server
npm install
Затем запустите сервер приложений из той же папки:
node server.js
Последний шаг — открыть браузер и перейти по адресу http: // localhost: 3000 . Если вы видите рисунок ниже, вы выполнили все правильные шаги. Если нет, вернитесь к описанным выше шагам, чтобы убедиться, что вы все сделали правильно, и обратитесь к этой странице для получения дополнительной информации.
Напишите лучшие запросы
Прежде чем мы рассмотрим архитектуру приложения CRUD, полезно узнать о некоторых компонентах Breeze, которые помогают нам лучше писать запросы. Первое, что нужно понять, это Breeze EntityManager . EntityManager является шлюзом для службы персистентности и содержит кэш сущностей, с которыми работает приложение. К ним относятся объекты, которые были запрошены, добавлены, обновлены и помечены для удаления.
var serviceName = 'breeze/todos';
var manager = new breeze.EntityManager(serviceName);
serviceName
фильтры
Написание запросов с помощью Breeze очень просто и понятно. Например, посмотрите на этот запрос, который показывает заказы, размещенные после 1 февраля 2010 года.
var query = EntityQuery.from('Orders')
.where('OrderDate', '>', new Date(2010, 1, 1))
Другой хороший способ написания запросов с помощью Breeze — составные условия с предикатами. Предикат является условием, которое является истинным или ложным. Давайте объединим два предиката с .and()AND
В приведенном ниже примере первый предикат отбирает все пиццы стоимостью более 60 долларов. Второй выбирает все заказы, которые были размещены после 15 января 2015 года. Когда они объединяются с .and()
var q1 = new Predicate('Pizza', '>;', 60);
var q2 = new Predicate('OrderDate', '>', new Date(2015, 0, 15));
var query = baseQuery.where(q1.and(q2));
Сортировка
Другой тип запроса — сортировка. Бриз-код для сортировки товаров в порядке убывания имени показан ниже. Его код очень читабелен.
var query = EntityQuery.from('Products')
.orderBy('ProductName desc');
Бриз имеет три типа сортировки . Это сортировка по одному свойству, сортировка по нескольким свойствам и сортировка связанных свойств.
Paging
Пейджинг — это процесс возврата результатов запроса в меньшие подмножества данных или, другими словами, на страницы. Пейджинг в Breeze может быть выполнен двумя способами: с помощью skip()take()
Чтобы получить первые пять продуктов, которые начинаются с буквы «E», мы могли бы сделать следующее:
var query = EntityQuery.from('Products')
.where('ProductName', 'startsWith', 'E')
.take(5)
Пропуск используется, когда вы не хотите брать указанное количество объектов, а скорее возвращаете оставшиеся из них. Код ниже пропускает первые пять продуктов и возвращает остальные. Необходимо использовать .orderBy().skip()
var query = EntityQuery.from('Products')
.orderBy('ProductName')
.skip(5);
Прогнозы
Проекционные запросы позволяют запрашивать именно те свойства сущности, которые вам действительно нужны. Давайте посмотрим на пример, демонстрирующий простую проекцию в Breeze, которая возвращает имена клиентов, начинающиеся с буквы «C».
var query = EntityQuery.from('Customers')
.where('CompanyName', 'startsWith', 'C')
.select('CompanyName');
Существует четыре типа проекций свойств : отдельные данные, одиночная навигация, проекции с несколькими свойствами и связанные свойства.
Если вам нужна дополнительная информация о запросах Breeze, вы можете обратиться к их обширной документации .
Простая архитектура приложения
Теперь давайте вернемся к приложению, которое мы запустили в предыдущем разделе (если все прошло хорошо, оно все равно должно быть доступно по адресу http: // localhost: 3000 ).
ZZA! это приложение CRUD для заказа пиццы, салатов и напитков. Он использует стек BMEAN (что означает Breeze + MEAN).
Как мы видели ранее, интересующая нас часть приложения ( breeze.js.samples/node/zza-node-mongo Папка database Папка server Теперь давайте сосредоточимся на стороне клиента и посмотрим, что находится в client folder
Это самые важные компоненты:
-
index.html -
app -
bower -
css -
images
Внутри index.html В теле index.html<script>
<body class="ng-cloak" data-ng-app="app">
<!-- Shell of the Sample App -->
<div data-ui-view="header"></div>
<div id="shell-content" data-ui-view="content"></div>
<div data-ui-view="footer"></div>
<!-- Vendor Scripts -->
...
<!-- Application scripts -->
<script src="app/app.js"></script> <!-- must load first -->
<script src="app/appStart.js"></script>
<!-- Feature Areas: controllers -->
...
<!-- Directives & Routing -->
...
<!-- Services -->
<script src="app/services/config.js"></script>
...
</body>
AngularJS — это мышца приложения. Он динамически загружает шаблонные представления, а также верхний и нижний колонтитулы. Вы можете заметить три divdata-ui-view Именно здесь загружаются шаблоны. Большая часть активности приложения происходит внутри тега divshell-content Это показывает страницу заказов, страницу продуктов и большую часть того, что мы видим.
Breeze контролирует все действия и движения данных приложения. Breeze EntityManager В этом приложении контроллеры делают запросы данных через dataserviceclient/app/services/dataservice
Вывод
В этой статье мы обсудили Breeze.js, его возможности и некоторые примеры запросов, чтобы продемонстрировать, как Breeze упрощает нашу работу в качестве разработчиков. Надеюсь, теперь у вас есть представление о том, как настроить Breeze и понять архитектуру примера приложения.
Breeze — хороший инструмент для использования, потому что он уменьшает объем кода, который нам нужно написать, тем самым экономя наше время и делая нас более продуктивными. Если вы, ребята, имеете дело с большим количеством данных о ваших проектах, я настоятельно рекомендую изучить Breeze. Я хотел бы услышать ваши мысли о Breeze.js в комментариях ниже.