This document discusses using Polymer mixins and Vaadin Elements to create reusable CRUD components. It introduces CrudListMixin and CrudItemMixin that provide APIs for list and item views. A <crud-view> element wraps the grid and editor. The components support filtering, sorting, validation, theming and can retrieve/modify data from sources like PouchDB. A step-by-step demo shows integrating the components for a user management app.

1. CRUD with
Polymer 2.0 And Vaadin Elements
Manuel Carrasco Moñino
Vaadin Elements Team

2. CRUD Basis
- Create, Read, Update & Delete Entities
- Describes UI conventions that allow viewing,
searching and modifying information
- The most tedious part of App programming
(50-80% of Enterprise apps)

3. Typical CRUD View
- A list view
- Filtering
- Sorting
- Responsive
- An edit view
- Validation
- Responsive
- Dialog
- User Confirmation

4. Objective
Since CRUD is included in almost FW, let’s
create some nice helpers for Polymer 2

5. Strategy
- Write Re-usable classes or components
- Define CRUD views via Declarative Views
- Reliable Operations
- Dirty detection
- Confirmation
- Validation
- Good Looking UI
- Enterprise components & Themable
- Bound to any data source

6. The crud-view project
https://github.com/manolo/crud-view

7. Two ES6 mixins
- CrudListMixin ES6 class for the list view.
- CrudItemMixin ES6 class for the entity editor.
One Polymer 2 Element
- <crud-view> P2 element to enable dialogs
Contents of crud-view project

8. CrudListMixin API

9. CrudListMixin
Usage
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/crud-view/crud-list-mixin.html">
<link rel="import" href="crud-user.html">
<dom-module id="crud-users">
<template>
<iron-ajax auto url="/dummy/users.json" handle-as="json" last-response="{{items}}"></iron-ajax>
<input value="{{search::input}}"></input> <button on-click="new">New Item</button>
<vaadin-grid id="grid" items="[[filter(items, search, items.*)]]" active-item="{{activeItem}}">
<vaadin-grid-column>
<template>[[item.email]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template>[[item.name]] [[item.last]]</template>
</vaadin-grid-column>
</vaadin-grid>
<br>
<crud-user id="editor" item="[[item]]" on-save="save" on-delete="delete" on-close="close"></crud-user>
</template>
<script>
class CrudUsers extends window.CrudListMixin(Polymer.Element) {
static get is() {
return 'crud-users';
}
}
window.customElements.define(CrudUsers.is, CrudUsers);
</script>
</dom-module>

10. CrudItemMixin API

11. CrudItemMixin
Usage
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/crud-view/crud-item-mixin.html">
<dom-module id="crud-user">
<template>
Email: <input value="{{item.email::input}}"></input>
First: <input value="{{item.name::input}}"></input>
Last: <input value="{{item.last::input}}"></input>
<button on-click="save" disabled="[[!dirty]]">Save</button>
<button on-click="cancel">Cancel</button>
<button on-click="delete" disabled="[[new]]">Delete</button>
</template>
<script>
class CrudUser extends window.CrudItemMixin(Polymer.Element) {
static get is() {
return 'crud-user';
}
}
window.customElements.define(CrudUser.is, CrudUser);
</script>
</dom-module>

12. <crud-view> API

13. <crud-view>
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/crud-view/crud-list-mixin.html">
<link rel="import" href="../../bower_components/crud-view/crud-view.html">
<link rel="import" href="crud-user.html">
<dom-module id="crud-users">
<template>
<iron-ajax auto url="/dummy/users.json" handle-as="json" last-response="{{items}}"></iron-ajax>
<crud-view editing="[[editing]]" >
<input slot="header" value="{{search::input}}"></input>
<button slot="header" on-click="new">New Item</button>
<vaadin-grid id="grid" slot="grid" items="[[filter(items, search, items.*)]]" active-item="{{activeItem}}">
<vaadin-grid-column>
<template>[[item.email]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template>[[item.name]] [[item.last]]</template>
</vaadin-grid-column>
</vaadin-grid>
<br>
<crud-user id="editor" slot="editor" item="[[item]]" on-save="save" on-delete="delete" on-close="close"></crud-user>
</crud-view>
</template>
<script>
class CrudUsers extends window.CrudListMixin(Polymer.Element) {
static get is() {
return 'crud-users';
}
}
window.customElements.define(CrudUsers.is, CrudUsers);
</script>
</dom-module>

14. UI Elements

15. - Data listing (filtering, ordering)
- <vaadin-grid>
- Responsive form
- <vaadin-form-layout>
- Form fields
- Core elements: <vaadin-text-field> <vaadin-button> ...
- Dialogs
- <vaadin-dialog>
- Data retrieval & modification
- <iron-ajax> or <vaadin-pouchdb>
UI Elements

16. Vaadin
Core
Elements
<vaadin-form-layout>
<vaadin-text-field colspan="2" label="Login" value="{{item.email}}"></vaadin-text-field>
<br>
<vaadin-password-field colspan="2" label="Password"
value="{{item.password}}"></vaadin-password-field>
<br>
<vaadin-text-field label="Name" value="{{item.name}}"></vaadin-text-field>
<vaadin-text-field label="Surname" value="{{item.last}}"></vaadin-text-field>
<br>
<vaadin-combo-box label="Role" value="{{item.role}}"
items='["admin","operator","user"]'></vaadin-combo-box>
<vaadin-date-picker label="Birthday" value="{{item.birthday}}"></vaadin-date-picker>
</vaadin-form-layout>
<br>
<div class="buttons">
<vaadin-button on-click="save" theme="primary" disabled="[[!dirty]]">Save</vaadin-button>
<vaadin-button on-click="cancel">Cancel</vaadin-button>
<span style="flex: 1"></span>
<vaadin-button on-click="delete" theme="danger" disabled="[[new]]">Delete</vaadin-button>
</div>

17. Theming

18. Valo
Theme
<link rel="import" href="bower_components/vaadin-themes/valo/typography.html">
<link rel="import" href="bower_components/vaadin-themes/valo/color.html">
<link rel="import" href="bower_components/vaadin-themes/valo/sizing-and-spacing.html">
<link rel="import" href="bower_components/vaadin-themes/valo/style.html">
<link rel="import" href="bower_components/vaadin-themes/valo/icons.html">
<link rel="import" href="bower_components/vaadin-themes/valo/vaadin-button.html">
<link rel="import" href="bower_components/vaadin-themes/valo/vaadin-text-field.html">
<link rel="import" href="bower_components/vaadin-themes/valo/vaadin-checkbox.html">
<link rel="import" href="bower_components/vaadin-themes/valo/vaadin-date-picker.html">
<link rel="import" href="bower_components/vaadin-themes/valo/vaadin-form-layout.html">
<link rel="import" href="bower_components/vaadin-themes/valo/vaadin-form-item.html">
<link rel="import" href="bower_components/vaadin-themes/valo/vaadin-combo-box.html">

19. Material
Theme
<link rel="import" href="bower_components/vaadin-themes/material/typography.html">
<link rel="import" href="bower_components/vaadin-themes/material/color.html">
<link rel="import" href="bower_components/vaadin-themes/material/vaadin-button.html">
<link rel="import" href="bower_components/vaadin-themes/material/vaadin-text-field.html">
<link rel="import" href="bower_components/vaadin-themes/material/vaadin-date-picker.html">

20. Validation

21. Validation
<vaadin-form-layout style="padding: 10px">
<vaadin-text-field colspan="2" label="Login" value="{{item.email}}"
required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$"></vaadin-text-field>
<br>
<vaadin-password-field colspan="2" label="Password" value="{{item.password}}"
required pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{6,}"></vaadin-password-field>
<br>
<vaadin-text-field label="Name" value="{{item.name}}"
required pattern=".{3,}"></vaadin-text-field>
<vaadin-text-field label="Surname" value="{{item.last}}"></vaadin-text-field>
<br>
<vaadin-combo-box label="Role" value="{{item.role}}"
items='["admin","operator","user"]' required></vaadin-combo-box>
<vaadin-date-picker label="Birthday" value="{{item.birthday}}"></vaadin-date-picker>
</vaadin-form-layout>
<br>
<div class="buttons">
<vaadin-button on-click="save" theme="primary" disabled="[[!dirty]]">Save</vaadin-button>
<vaadin-button on-click="cancel">Cancel</vaadin-button>
<span style="flex: 1"></span>
<vaadin-button on-click="delete" theme="danger" disabled="[[new]]">Delete</vaadin-button>
</div>

22. Persisting Data

23. iron-ajax
<iron-ajax auto url="/users.json" handle-as="json"
last-response="{{items}}"></iron-ajax>
pouchdb <vaadin-pouchdb dbname="demo" data="{{items}}"
remote="https://my-account.cloudant.com/demo"></vaadin-pouchdb>

24. Demo architecture
Vaadin Elem.
Polymer 2
PouchDB CouchDB
Serv. Worker HTTP
IndexedDB
crud-view

25. Demo steps
Follow the steps in repo https://github.com/manolo/crud-slides-demo/commits/master
- Step 1: polymer init and bower dependencies
- Step 2: CrudListMixin and <vaadin-grid> in the users view
- Step 3: CrudItemMixin in the user edit view
- Step 4: <crud-view> wrapping grid and editor
- Step 5: Add a search-bar to the users view
- Step 6: Add sort helpers to the grid
- Step 7: Replace native elements with vaadin ones
- Step 8: Import the vaadin valo theme
- Step 9: Configure field validation
- Step 10: Replace <iron-ajax> with <vaadin-pouchdb>

26. Thanks
Manuel Carrasco Moñino
+ManuelCarrascoMonino
manolo@vaadin.com
@dodotis