Quiver.js - A New Server-side Component Architecture

name: inverse
layout: true
class: center, middle, inverse

---

#Quiver.js

A New Server-side Component Architecture

![Quiver Icon](images/quiver-icon.png)

.footnote[By [Soares Chen](http://github.com/soareschen)]

---
layout: false

# Introduction to Quiver

.center[
![Quiver Cover](images/quiver-model.jpg)
]

- Component-based architecture

- Server-side applications

- Implemented in Node

---

# Coding in Quiver

.center[
![Quiver Craft](images/quiver-craft.png)
]

- Code organized as small and reusable components

- Functions with standardized signatures

- JSON-like component definition

---
# Related Works

- Concepts and best practices other systems

- REST Architecture

- Unix Philosophy

- Functional Programming

---
# Architecture Overview

.center[
![Architecture Layers](images/layers.png)
]

- Six layers of constructs

- Current focus: stream handler and filter

---

# Stream Handler

.center[
![Stream Handler](images/stream-handler-1.png)
]

- Accept a key-value object `args`

- Accept a stream-like object `streamable`

- Asynchronously return a stream-like object

---

# Example Hello Handler

```javascript
var helloHandler = function(args, callback) {
  callback(null, 'Hello World!')
}

exports.quiverComponents = [
  {
    name: 'demo hello handler',
    type: 'simple handler',
    inputType: 'void',
    outputType: 'text',
    handler: helloHandler
  }
]
```

---

# Image Thumbnail Server

.left-column[
- Create a simple HTTP server
  
  - Static image files

- Resize on the fly

- Quiver's approach

- Reuse existing components

- Code has no knowledge of image manipulation
]

.right-column[
![Quiver back](images/quiver-back.png)
]

---

# Step #1: Static File Server

.center[
![File Handler](images/file-handler.png)
]

- npm install `quiver-file-component`

- run `quiver file directory handler` component

---

# Quiver Server

- npm install -g `quiver-server`

- Wrapper tool to run a handler component as HTTP server

- Require a config.js or config.json file

```javascript
var path = require('path')

module.exports = {
  dirPath: path.join(__dirname, 'static')
}
```

```bash
$ quiver-server . --config ./config.js --main \
    'quiver file directory handler'
```

---
# Image Conversion

.center[
![Image Conversion Pipeline](images/pipeline-1.png)
]

- Form a image conversion pipeline

- Second component: `resize image handler`

- Whole pipeline as component: `image thumbnail handler`

---
# ImageMagick

- Image conversion not done in JS

- Use ImageMagick's `convert` command

```bash
$ convert in.jpg -resize 200 out.jpg
```

- Doc: http://www.imagemagick.org/script/convert.php

---
# Command Handler

- npm install `quiver-command-component`

- Resize image handler extends from `file convert command handler`

- Generic handler for running any file conversion command

- Handler perform implicit conversion

1. Input stream to file

2. Execute Command
  
  3. Output file to stream

---
# Command Args Extractor

.center[
<img src="images/command-args.png" style="width:50%">
]

- Handler need to know how to execute command

- Supply a `commandArgsExtractor` function to specify the command

---
# Image Convert Component

```javascript
{
  name: 'demo resize image handler',
  type: 'stream handler',
  configOverride: {
    commandArgsExtractor: 
      function(args, inFile, outFile) { ... },
  },
  resultContentType: 'image/jpeg',
  handler: 'quiver file convert command handler'
}
```

- Customize existing component

- Supply custom configuration in `configOverride`

---
# Pipeline Component

```javascript
{
  name: 'demo image thumbnail handler',
  type: 'stream pipeline',
  pipeline: [
    'quiver file directory handler',
    'demo resize image handler'
  ]
}
```

```bash
$ quiver-server . --config ./config.js --main \
    'demo image thumbnail handler'
```

---

# Caching Resize Result

.center[
![Filter](images/filter-1.png)
]

- One issue remain

- Pipeline executed repeatedly

- Quiver has no implicit optimization

- Filter is the general solution

- Extends existing handler

- Intercept original input/output

---
# Cache Filter

.center[
![Filtered Pipeline](images/pipeline-2.png)
]

- Caching done outside the entire pipeline

- Result cached based on `args.path`

- Pipeline skipped if cached result available

---
# Final Thumbnail Component

```javascript
{
  name: 'demo image thumbnail handler',
  type: 'stream pipeline',
  middlewares: [
    'quiver memory cache filter'
  ],
  pipeline: [
    'quiver file directory handler',
    'demo resize image handler'
  ]
}
```

- npm install `quiver-cache-component`

- 3 extra lines of code

- Filter is a subtype of middleware

---

# Component Reuse

.center[
![Quiver Cover](images/quiver-cover.png)
]

- Advantage of Quiver

- Smaller components can be recombined and reused

- Components run on both server and command line

---

# Image Resize

- Resize command

```bash
$ quiver-command . --main 'demo resize image handler' \ 
    < static/images/blue-hat.jpg > temp/out.jpg
```

- Resize server

```bash
$ quiver-server . --main 'demo resize image handler'

$ curl http://localhost:8080 -X POST \
    --data-binary @static/images/blue-hat.jpg > temp/out.jpg
```

---

# Proxy Pipeline

.center[
![Proxy Pipeline](images/proxy-pipeline.png)
]

- Horizontal scaling

---

# One Pattern, Unlimited Combination

- File + Image Resize + Memory Cache

- S3 + Audio Encode + Disk Cache

- Git + Compilation + CDN Cache

- Remote API + Template + Permission

---
name: inverse
class: center, middle, inverse

# Full Demo

![Quiver 3D](images/quiver-3d.jpg)

http://github.com/quiverjs/demo/02-format-convert

---

# Preview of All Constructs

.center[
![Quiver Constructs](images/constructs.png)
]

- True power of Quiver lies in more advanced constructs

- Quiver solves many other problems in web development

- Dependency management

---

# Thank you!

.center[
![Bring back quiver](images/bring-back-quiver.png)
]

- Slide available at http://quiverjs.github.io/slides-01

- Quiver.js Homepage: http://quiverjs.org