bloodyowl

POC: minimal Backbone subset written in ES6/ES7

bloodyowl

React

A JavaScript library that manages the UI.

What does it do?

React enables you to express in a declarative way what your UI should look like at any point in time; while building your app with little, reusable blocks: components.

bloodyowl

export default function arrayShallowEqual(left, right) {
  if(left.length !== right.length) {
    return false
  }
  return !left.some((item, index) => item !== right[index])
}

bloodyowl

// ES6 tl;dr; for beginners
 
// 1. variables
 
// `const` & `let` are scoped at the block level
if(true) {
  let foo = "bar"
}
foo // ReferenceError
 

bloodyowl

class ImmutableDate extends Date {
  constructor(...args) {
    this._date = new Date(...args)
  }
}

const methods = {
  toString: false,
  toISOString: false,
  toUTCString: false,

bloodyowl

class AccessibleComponent extends Component {
  render() {
    return (
      <div>
        <div aria-label={this.props.label}>foo</div>
      </div>
    )
  }
}

bloodyowl

import React, {Component} from "react"
import shallowEqual from "react/lib/shallowEqual"

/**
 * example :
 * 
 * import React, {Component, PropTypes} from "react"
 * 
 * class MyComponent extends Component {
 * 

bloodyowl

const origin = window.pageYOffset
const destination = 3000

animate({
  duration : 500,
  tick(progress) {
    window.scrollTo(
      0,
      progress * destination +
      (1 - progress) * origin

bloodyowl

export default class Store {

  listeners = new Set()

  constructor(dispatcher) {
    this.reactions = this.getActionHandlers()
    this.dispatcher = null
    this.dispatchToken = null
    this.actionHandler = this.actionHandler.bind(this)
    this._getOriginalState()

bloodyowl

        +----------------+
        | INITIALISATION |
        +--+-------------+
           |
        +--v--------------------+
+-------+ INITIAL DATA FETCHING |
|       +--+--------------------+
|          |
|       +--v------------------+
|       | DOM EVENT LISTENING |