design-patterns.md

Design Patterns

The main operating principle for vdom (virtual DOM) is:

Write functions that return vdom elements

In matching with React parlance, we'll call these functions components. This allows you to share, remix, and use components amongst everyone. You'll be able to compose together components to create greater components than you have before.

Introductory component

We'll start with a component that takes a level of happiness and produces a light visualization:

from vdom.helpers import div, span, p, meter

def happiness(level=90):
  smiley = "😃"
  percent = level / 100.
    
  if(percent < 0.25):
    smiley = "☹️"
  elif(percent < 0.50):
    smiley = "😐"
  elif(percent < 0.75):
    smiley = "😀"

    
  return span(
      p('Happiness ', smiley),
      meter(level, min=0, low=25, high=75, optimum=90, max=100, value=level)
  )

The user of the component only needs to call it with a level of happiness from 0 to 100.

happiness(96)

Happiness 😃

96

---

🎉 Our first component is ready! Since we can think of happiness as a little building block component, we can put several of these together to create whole layouts:

div(
  happiness(10),
  happiness(32),
  happiness(65),
  happiness(80)
)

Happiness ☹️

10

Happiness 😐

32

Happiness 😀

65

Happiness 😃

80

---

Working with Python objects

For this section, you'll need ggplot and matplotlib packages installed. We'll create a component, fancy_hist, that creates a histogram which allows for displaying side by side:

import matplotlib.pyplot as plt
import io, base64, urllib
from ggplot import mpg
from vdom.helpers import div, span, p, h1, img

def fancy_hist(value, data=mpg, title="Plot", bins=12, style=None):
    if(style is None):
        style = {"display": "inline-block"}
    
    f = plt.figure()
    plt.hist(value, bins=bins, data=data)

    buf = io.BytesIO()
    f.savefig(buf, format='png')
    buf.seek(0)
    string = base64.b64encode(buf.read())
    
    plt.close()
        
    return div(
        h1(title),
        p(str(bins), " bins"),
        img(src='data:image/png;base64,' + urllib.parse.quote(string)),
      style=style
    )

fancy_hist('cty', data=mpg, title="City MPG")

City MPG

12 bins

div(
  fancy_hist('hwy', data=mpg, title="Highway MPG"),
  fancy_hist('cty', data=mpg, title="City MPG")
)

Highway MPG

12 bins

City MPG

12 bins