Hammock

View Github Repository Open presentation in a new window

vonwao

See all presentation from vonwao

Hammock

0 0

vonwao.github.io

On Github vonwao / vonwao.github.io

Hammock

A novel approach to web programming

Why should I care?

100% Javascript

Declarative programming

Strong typing, smart editor

Basics

In Hammock, a class is simply a JSON document that has a schema (a "fields" property).

A class is always an instance of another class. The root class, which defines the basic types and structure of a class schema, is an instance of itself.

The root class looks something like this:: 
{
  "fields": {
    "name": { "type": "string", "required": true },
    "fields": { "type": "object", "required": true, "value_fields": {
      "type": { "type": "select", "required": true,
        "options": ["string", "select", "boolean", "object", "array",
          "number", "function", "markup", "date"] },
      "required": { "type": "boolean" /* default: false */ },
      "options": { "type": "array" },
      "fields": { "type": "object" },
      "value_fields": { "type": "object" },
      "ref": { "type": "select", "ref": "class" },
      "ref_field": { "type": "string" /* default: "name" */ }
    }
    }
  }
}

Classes are very flexible

  • They can model persistent application data (e.g. post class for a blog)
  • They can model UI components (e.g. React component, a button class)
  • Or they can be building blocks for a program, (e.g. a "module" class)
What's a Schema? Schemas are how you define classes in Hammock. You define the schema of a class via the "fields" property. For example: 
{
  "name": "react-meta-class",
  "fields": {
    "render": { "type": "function", "required": true },
    "getInitialState": { "type": "function" },
    "componentDidMount": { "type": "function" }
  }
}
This is a class definition for any React.js class. (we called it a meta-class because instances of this class are React classes -- both Hammock and React use the term "class", but they're not really the same thing).
Unlike other languages, instances of classes can be either documents in a database, or they can be run-time objects (e.g. a UI component)
For data classes, you can think of the class as a template for JSON documents, for example:

So if we define a class, with the following schema...

{
  name: "post-class",
  fields: {
    title: { type: "string", required: true },
    category: { type: "select", options: ["main", "business", "tech"] },
    state: { type: "select", options: ["draft", "published", "archived"],
             default: "draft" }
  }
}

The editor offers auto-complete support:

Just keep pressing Tab, autocomplete helps you fill in the document. Easy!

Web Shell

The Web Shell is an integral part of Hammock, it has a built-in database.

When using the Hammock Web Shell to develop a project, both your code and data is stored in JSON documents in a database (using PouchDB and CouchDB).

Modules

Similar to other languages, modules can be used to:

  • Reuse and share code across projects
  • A module can be compiled and deployed as a web app
  • ... or it can act as a plugin by implementing a certain interface
Hello World example: 
Hammock.createModule({
  name: "hello-world",
  title: "Hello World!",
  world: "earth",
  render: function () {
    return <div>Hello {this.world}!</div>;
  }
});
...yes, that looks exactly like a React class, that's the point. But a module can also do a lot more.

A more complex example:

(this part is under construction)

The vision is to foster an ecosystem of modules and plugins to make web programming simple and fun!