About me

Software engineer at OM MediaWorks

Dutch, living in Stockerau

My background

Full stack software engineer

Working on a headless CMS that:

• Uses an RDF graph database
• Outputs media catalog PWAs with ease
• Up next: sharing of data between instances
• This is when I learned about fluent interfaces

A definition

In software engineering,
a fluent interface is an object-oriented API
whose design relies extensively on
method chaining.

Example: jQuery

jQuery('.my-button').fadeOut().remove()

Example: Entity builder

new Person()
  .firstName('John')
  .lastName('Doo')
  .dateOfBirth('05-09-1883')
  .save()

Example: Fluent Snake

await api
  .fetch('https://en.wikipedia.org/wiki/Linux')
  .querySelector('.infobox tr:nth-child(4) a')
  .href()
  .fetch()
  .querySelector('#firstHeading')
  .text()

// Unix-like
  

Example: LDflex on top of a Solid pod

await solid.data['https://danielbeeke.nl/']['foaf:img']

// https://danielbeeke.nl/images/daniel.jpg
  

Good developer experience

• Abstractions on top of complexity
• Provide easy access to data
• Feels like objects
• TypeScript autocompletion

Libraries

moment('20111031', 'YYYYMMDD')
  .subtract(6, 'days')
  .fromNow()

Libraries

d3.select('svg')
  .append('text')
  .attr('font-size', '20px')
  .attr('transform', 'translate(100,0)')
  .attr('x', 150)
  .attr('y', 200)
  .text('Sample Chart Title')

Data for the template

const source = 'https://ruben.verborgh.org/profile/'
const omni = await new Omni(source, { context })
const person = omni.get(source + '/#me')

render(document.body, html`
  
${person.name}
  
${person.friends.givenName.map(name => html`
    
${name}
`)}
  
`);

Query builders

knex.select('id').from('users')

My use case

A bit of background.

What made me use and learn about fluent interfaces?

We are building an headless CMS
with frontends that support:

• Multilingual media items
(all metadata of books, authors, videos etc. in multiple languages)
• Online and offline usage
(read eBooks / listen podcasts while traveling etc)

We wanted

• Easy integration of the CMS in frontends
• While enabling (new) features
• A library that abstracts away complexity

It is mostly data display

const eBook = get('ebook', id)

return html`
  

    ${ebook.title}
  

  
    ${ebook.authors.map(author => author.name)}
  
`
  

Also lists

const offset = state.page * this.pageSize
const limit = this.pageSize

const overviewQuery = query(queryTypes)
  .sort({ name: 'asc' })
  .filter(filters)
  .addSidetrack('authors')
  .addSidetrack('category')
  .paginate({ offset, limit })

Methods must return 'this'

class Thing {
  methodA () { return this }

  methodB () {
    console.log('b')
    return this
  }
}

const item = new Thing().methodA().methodB()

// b

getters

You can use getter methods in chains

class Thing {
  get fruit () {
    return 'pear'
  }
}

console.log(item.fruit)

// pear

You can use .then() to have async chains

class Thing {
  async then (resolve) {
    // Do async things here ...
    resolve('Hello World')
  }
}

const item = new Thing()
console.log(await item)

// Hello World

Queue

class Calculator {
  #commands = []

  add (number) { 
    this.#commands.push((total) => total + number)
    return this
  }

  minus ...
}
    

Queue

temperatureForCity (city) { 

  this.#commands.push(async (total) => {

    const { lat, lon } = await getLatLonByCityName(city)
    const temperature = await getTempByLatLon(lat, lon)

    return total + temperature
  })

  return this
}
    

Queue

class Calculator {
  #commands = []
  
  ...

  async then(resolve) {
    let result = 0
    for (command of this.#commands)
      result = await command(result)
    resolve(result)
  }
}

    

Queue

const calculator = new Calculator()
const number = await calculator
  .add(10)
  .temperatureForCity('Vienna') 
  .minus(4)
  .temperatureForCity('Amsterdam') 
  
// ~ 56

    

Promise chain

These can be used to return the value. Every segment of the chain appends a new Promise to the previous Promise.

// A Promise chain

const person = await fetch('/user.json')
  .then(response => response.json())
  .then(response => new Person(response))

Proxy

A layer on top of an object which can intercept and
redefine fundamental operations on that object.

We might want to have segments with properties we do not know beforehand.

Proxy example

const myObject = { hello: 'world' }

const proxy = new Proxy(myObject, {
  get: function(target, prop, receiver) {
    return 'Vienna'
  }
})

proxy.hello // Vienna
proxy.gutenTag // Vienna

Diverging paths

One array of commands will not be enough.
Promises are better in this area.

Diverging paths

Each chunk is its own Promise. With a queue we would have to clone the queue a lot of times.

TypeScript

What about type autocompletion?

TypeScript

TypeScript does not understand a Proxy.
But, we can instruct TypeScript it is dealing with something else.

It start with Generics...

const items: Array<​string> = []

TypeScript Generics

function myFunction<​Type>(arg: Type) {}

const example1 = myFunction<​string>()
const example2 = myFunction<​number>()
const example3 = myFunction<​Array<​​string>>()

const example4 = myFunction('Hello World')

TypeScript Generics

function myFunction<​Type>(arg: Type): Promise<​Type> {
  return new Promise(resolve => resolve(arg))
}

TypeScript: as unknown as Type

We can use this trick to tell TypeScript something acts as a certain type.

function myFunction(arg: string) {
  return arg as unknown as number
}

Questions, thoughts? Thanks!

Interested? Here are some links:

• Fluent Calculator, a step by step tutorial
• Fluent Snake, fluent interface helper library
• LDflex, linked data fluent interface
• Builder pattern
• MDN Proxy
• Fluent Interface
• About good developer experience for RDF

https://danielbeeke.nl/fluent-interfaces