vdsabev

class EventBus {
  private handlers: Record<string, ((...args: any[]) => void)[]> = {};

  trigger(eventName: string, ...args: any[]) {
    if (this.handlers[eventName]) {
      this.handlers[eventName].forEach((handler) => handler(...args));
    }
  }

  on(eventName: string, handler: (...args: any[]) => void) {

vdsabev

// map
const double = x => x * 2;
map(double, [1, 2, 3]); // --> [2, 4, 6]

// filter
const isEven = x => x % 2 === 0;
filter(isEven, [1, 2, 3, 4]);  // --> [2, 4]

// complement
const isOdd = complement(isEven);

vdsabev

app({
  state: {
    count: 0
  },
  actions: {
    decrement: ({ count }) => ({ count: count - 1 }),
    increment: ({ count }) => ({ count: count + 1 })
  },
  view: ({ count }, { decrement, increment }) =>
    <div>

vdsabev

const Counter = ({ count, decrement, increment }) => (
  <div>...</div>
);

app({
  state: { ... },
  actions: { ... },
  view: (state, actions) =>
    <Counter
      count={state.count}

vdsabev

const Counter = ({ attrs: { count = 0 } }) => {
  const decrement = () => count--;
  const increment = () => count++;

  return {
    view: () => <div>...</div>
  };
};

vdsabev

const Counter = component({
  state: {
    count: 0
  },
  actions: {
    decrement: ({ count }) => ({ count: count - 1 }),
    increment: ({ count }) => ({ count: count + 1 })
  },
  view: ({ count }, { decrement, increment }) => <div>...</div>
});

vdsabev

class Counter {
  oninit({ attrs }) {
    this.count = attrs.count || 0;
  }

  decrement = () => this.count--;
  increment = () => this.count++;

  view() {
    return (

vdsabev

const Counter = ({ attrs: { count = 0 } }) => {
  const decrement = () => count--;
  const increment = () => count++;

  return {
    view: () =>
      <div>
        <h1>{count}</h1>
        <button onclick={decrement} disabled={count <= 0}>-</button>
        <button onclick={increment}>+</button>

vdsabev

const component = (options = {}) => (vnode) {
  let state = { ...options.state, ...vnode.attrs };

  const proxyActions = {};
  Object.keys(options.actions).forEach((key) => {
    proxyActions[key] = (...args) => {
      const newState = options.actions[key](state, proxyActions, ...args);
      if (newState) {
        state = { ...state, ...newState };
      }

vdsabev

Development

Animation & Interactivity

• IntersectionObserver - get notified when element properties change, e.g. when an element becomes visible or invisible

Authentication

• One-tap sign in / sign up

Components

• Web components - encapsulate HTML / CSS / JS components and use them across the whole web