Polymer brings WebComponents to all browsers, allowing for the creation of web apps using DOM elements as the primary building blocks.
deepstream comes with its own polymer plugin that makes it easy to add data-sync directly to these DOM elements.
<ds-record name="myRecordName" data=""></ds-record>
behaviours: [ Polymer.DSRecordBehaviour ]
You can find the documentation for all deepstream-polymer elements and behaviours here:
Getting started with deepstream-polymer
You can install deepstream-polymer via Bower using
bower install deepstream.io-tools-polymer
or get it directly from Github.
Before we begin, let's start a deepstream server. If you haven't done that before, have a look at the getting started tutorial.
First, let's connect to deepstream. This can be accomplished by adding a
ds-connection element. This creates a connection to deepstream based on the
url attribute you've specified and exposes the connection state and deepstream instance.
<ds-connection url="localhost:6020" state="" ds=> </ds-connection>
Once we have a connection it's time to login. This can be achieved via adding a
ds-login element. You can also log in anonymously by having an
auto-login attribute present.
<ds-login auto-login logged-in="" ds="[[ds]]"> </ds-login>
Want to login with an actual user-name or password? Just supply them via your
auth-params and call
<ds-login auth-params="" logged-in="" ds="[[ds]]"> <input type="text" value=""/> <input type="password" value=""/> <!-- Note: login binding is on the current scope and will require to be proxied to the login method - or you could create your own element that uses the LoginBehaviour --> <button on-click="" /> </ds-login>
Now that we're connected you can enable your elements to auto-sync their data with all other clients simply by using a
ds-record element. This requires three attributes: a
name to know what record to use,
data to allow reading and writing to the record and
ds to expose the deepstream client to the element.
<template> <ds-connection ds=""></ds-connection> <ds-record name="[[name]]" data="true" ds="[[ds]]"> <input type="text" value=""> </ds-record> </template>
Note how there is another
ds-connection element present. This is to access the same deepstream connection using a global variable across the application.
Finally, let's look at lists. Lists are collections of record that are related to each other and can be iterated. This can be achieved by using a
ds-list element. The attributes used are the same as
ds-record, except the record names are exposed via an array called
<template> <ds-connection ds=""></ds-connection> <ds-list name="[[name]]" entries="" ds="[[ds]]"> <template is="dom-repeat" items="[[todos]]" as="recordId"> <div>RecordId : </div> </template> </ds-list> </template>
And that's it, everything needed to create an application with data-sync!
Building a more complex app?
Here's an example of how to combine all these concepts to build a to-do list with Polymer: