Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Go From Zero to Serverless With Backand, Part 2

DZone's Guide to

How to Go From Zero to Serverless With Backand, Part 2

In this article we will go over how to define a data schema for the to-do list model we worked on in Part 1, and create a very basic UI using Twitter Bootstrap.

· Web Dev Zone
Free Resource

Prove impact and reduce risk when rolling out new features. Optimizely Full Stack helps you experiment in any application.

In Part 1 of this series, we looked at serverless architecture and what it means for web development. We also looked at Backand and creating an account to work with our to-do List application. In this article, we'll build our application's data model by walking through a simple set of requirements. We'll implement the data model in Backand, then work on building a simple UI to present our data to the user.

Defining Our Requirements

Common software development wisdom is that changing requirements becomes an order of magnitude more challenging as you move through the development process. While a change at design time might have some frustrating repercussions, on average it would cost ten times as much to make the exact same change once design has completed and implementation has begun, and one hundred times as much once development is completed and we're ready to deploy to production. In recognition of this, let's spend some time defining the requirements of our application:

  • It should store a list of to-do items.

  • An item consists of a name, a description, and a completed flag.

  • The name should be short, and will be visible in a list.

  • The description should be viewed by selecting an item name from the list of items.

  • The completed flag should be a simple binary flag - true if the item is completed, false otherwise.

  • All items should start uncompleted.

  • An item has an owner, which is the user that created the to-do item.

This requirements list is extremely basic, but for the purposes of this exercise, this small requirements list fits us perfectly - without confounding the design with a lot of extra functionality and testing.

Creating a Data Model

Now that we have a set of requirements, we can use these to build an object model. Focusing on the requirements, we can quickly recognize that we'll need an object to manage our to-do list entries - let's call this "item." The "item" object, in turn, has a name, description, an owner, and a completion flag. This also implies that we have an "Owner" object - for now we'll just call that "users," and add some simple data - firstName, lastName, and email.

As we're using Backand to manage our application, we'll need to convert the above text description into a suitable format. Backand provides us with two tools to do this - a GUI Schema editor, which allows us to quickly build a model using GUI tools, or a JSON Schema editor, which allows us to define our fields using a JSON-formatted schema description. Which approach you choose will depend heavily on your personal preferences. For this article, I've converted our schema into a Backand-compatible JSON schema object below:

[
  {
    "name": "items",
    "fields": {
      "name": {
        "type": "string"
      },
      "description": {
        "type": "text"
      },
      "owner": {
        "object": "users"
      },
      "completed": {
        "type": "boolean"
      }
    }
  },
  {
    "name": "users",
    "fields": {
      "items": {
        "collection": "items",
        "via": "owner"
      },
      "email": {
        "type": "string"
      },
      "firstName": {
        "type": "string"
      },
      "lastName": {
        "type": "string"
      }
    }
  }
]

Most of the schema above should be fairly self-explanatory. The trickiest portion is the "items" collection in the "users" object. This uses a one-to-many relationship, representing that a single user can own many different to-do items. To use this model, paste it into the Backand Schema editor:

Once you've pasted the schema in, click "Validate & Update" to save these changes to your database. Backand will convert this schema to SQL statements, and make the appropriate modifications to your app's underlying database automatically.

Building a UI

Now that we've chosen a schema, let's create a simple UI. Our UI has to have the following components:

  1. The app defaults to a list view of items.

  2. Each item can be marked completed.

  3. Each item can be clicked on, to view the data on the to-do item.

We'll ignore the user component for now, adding it in at a later stage in the tutorial. A simple mockup of the above might resemble the following:

simple_todo_list_ui.png

This uses Twitter Bootstrap's Links and Buttons functionality, providing a simple UI with a clean look-and-feel. The HTML is fairly straightforward:

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 align="center"> To Do List </h1>
    <div class="list-group">
      <a href="#" class="list-group-item active">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">To Do Item 1</h5>
          <button type="button" class="btn btn-success">Complete</button>
        </div>
        Description 1, Owner: Foo
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">To Do Item 2</h5>
        <button type="button" class="btn btn-success">Expand</button>
      </div>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">To Do Item 3</h5>
        <button type="button" class="btn btn-success">Expand</button>
      </div>
      </a>
    </div>
  </body>
</html>

This includes Twitter Bootstrap using their CDN, then defines a list group. Each list group entry has a title, a button, and a description. We will use code to automatically hide the description when the item is not selected, but for now this is sufficient to get us started.

Conclusion and Next Steps

In this article we covered defining a data schema for our to-do list model, and created a very basic UI using Twitter Bootstrap. Next, we'll look at what we need to do in order to connect this HTML to our Backand application, and replace the default list in the HTML above with a dynamic list constructed based on server responses. We'll use jQuery for simplicity's sake, but functionality is also available - along with ready-made SDKs - for AngularJS 1, AngularJS 2, and React, among other platforms. If you want to get a head start, head over to Backand's SDK Github page for more info, otherwise - see you next time!

With SDKs for all major client and server side platforms, you can experiment on any platform with Optimizely Full Stack.

Topics:
serverless ,bootstrap ,html ,javascript ,web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}