Tutorial: How Baqend Works

then call DB.connect("toodle") to connect
to the tutorial's Baqend app. If you want to connect the tutorial app to your own Baqend app,
start a free cloud-hosted Baqend app
and use
"<your app name>" in the connect
method. Once connected, DB.ready is called and you can start loading and saving data.
The Baqend JS SDK works in all major browsers, HTML5/hybrid apps as well as
Node.js servers.

In this tutorial, we are going to build a sharable todo list, that can track the time
spent on each todo. Below you can try, modify and extend each tutorial step against a real Baqend
instance. The code is written in ES6, the new
JavaScript standard and pre-compiled by Babel below.
Baqend is of course compatible with older JavaScript versions, too.

Concept

When developing with Baqend you create the major part of the application logic in JavaScript code that
uses the Baqend SDK to load and save data, authenticate users, etc. Your application assets
(HTML, CSS, JS, images, etc.) can be hosted on Baqend, too. This pattern of fetching HTML, CSS and JS
resources once and then rendering data on the client
is called Single-page
application.

This tutorial uses a shared Baqend application (toodle) focusing on the API. When you create a
Baqend account you get your own instance with a web dashboard, where you can specify data
models, upload files and server-side business logic, etc.

Data Modeling

Before starting to implement, let's create the data model of our
sharable Todo list with time-tracking. This schema is quickly created using the dashboard — we've already
done that for this
tutorial:

The explicit schema has the advantage that all data is automatically validated to prevent
corrupt
data. Also this gives us clever DB.Todo objects to program against. Schemas, i.e. the data
models, are flexible and can be changed at any time. Let's instantiate a Todo to see its properties.

Creating Data

To save a Todo we simply call save() on the instance. If no id was defined, it gets
assigned a random one.

Baqend objects are Active Records, i.e. they expose methods to
save,
update and delete the respective object. save() and the other methods return ES6
Promises. The application can easily react to success and failure:

Loading Data

Loading data is really easy. If we know the id of an object, we can load it with:

DB.Todo.load(id)
.then((todo) => {
//Do something with the todo
});

The great thing when working with objects in Baqend is that whenever you load objects that are already
used somewhere in your application, you will get the same references. This means that you do not have
to deal with different states of objects — it's always the same object.

When an object does not exist or we do not have the permission to read it, load will return
null. To manually refresh an object, we can call myTodo.load({refresh: true})
which updates our local copy with the newest version from the server.

Updating and deleting data

Updates and inserts are performed via save ("upsert") or explicitly via update
and insert.

If at the time of the
update the local copy was outdated, the operation will result in an error. Baqend automatically versions
all objects to detect concurrent changes and stale data. In the error callback of save we can
refresh the object with myTodo.load() and retry the update or decide to overwrite the
newer version at the server with our older version using the force parameter.

Putting it all together

Let's add a final improvements to our Todo app: a decent view. Baqend objects are
perfectly compatible with frameworks such as Angular.js,
Backbone.js, Knockout
and React.js. For the sake of simplicity we use Handlebars in this tutorial.

To keep track of each working period, we maintain a list of DB.Activity objects.
Activity is an embedded object, i.e. it only exists in the context of
its outer DB.Todo object and has no own id. Adding activities to a list is simple:

var activity = new DB.Activity({start: new Date()});
todo.activities.unshift(activity); //Start work
todo.activities.get(0).end = new Date(); //Stop work

Collections, i.e. Lists, Sets and Maps are first-level citizens in Baqend and a powerful way to
model complex data and relationships between objects.

Finally, to implement the sharing of Todo lists, we track the list Id in the hashtag of the URL and
generate
a random list id for first-time visitors. To fork the complete Todo App and start
hacking click here. It is also on Github.