git ssb

0+

dinoworm 🐛 / campjs-viii-ludditejs



Tree:
📄.gitignore
📄LICENSE
📄NOTES.md
📄README.md
📄avatar.png
📄catstack.jpg
📄dogstack.jpg
📄enspiral.png
📄example.js
📄follow_your_dreams.png
📄git-ssb-screenshot.png
📄index.css
📄index.html
📄index.js
📄luddite.jpg
📄morpheus-cat.png
📄package-lock.json
📄package.json
📄patchwork-screenshot.jpg
📄patchwork.png
📄rabbit-hole.jpg
📄root-systems.jpg
📁stuff
📁test
📄white-rabbit.jpg
README.md

layout: true

<footer>dinosaur.is</footer>

class: center

luddite.js

<img src="./white-rabbit.jpg" />

<!-- image credit to http://www.rabbitholekc.org/ -->

???

hey CampJS

i'm Mikey from Enspiral & Root Systems

<div class="row">
<a href="http://dinosaur.is.com">
<img alt="Mikey's avatar" src="./avatar.png" width="200" />
</a>
<a href="http://enspiral.com">
<img alt="Enspiral logo" src="./enspiral.png" width="200" />
</a>
<a href="http://dinosaur.is">
<img alt="Root Systems logo" src="./root-systems.jpg" width="200" />
</a>
</div>

slides are available at:

http://dinosaur.is/campjs-viii-ludditejs

???

let's adventure

to the silly wonderland of luddite.js

<img src="./rabbit-hole.jpg" height='400' class="center" />

<!-- image credit to Mary Blair at Disney -->

???

an ambiguous utopia

class: info

Luddite?

the Luddites was a political movement against automated centralized technology.

<img src="./luddite.jpg" height='300' class="center" />

???

class: info

luddite.js?

luddite.js is a (made-up) meme for simple decentralized JavaScript.

???

class: center, info

decentralized userland ecosystems

class: info

what if i told you...

<img src="./morpheus-cat.png" height="400" />

that anyone can create a standard?

???

class: info

what is a standard?

anything that enough people use is a "standard"

example: "standard style"

npm install --global standard

???

class: info

what is a luddite.js standard?

a standard based on a function signature

example: Redux reducers

const reducer = (state, action) => nextState

???

class: info

why is this important?

???

class: center, info

simple patterns based on function signatures

class: info

what if i told you...

<img src="./morpheus-cat.png" height="400" />

that you only needed functions and objects?

???

class: success

just a function

function fn (options) { return value }

const fn = (...args) => ({ [key]: value })

class: info

sync function signals

with a sync function, there are two possible signals:

  1. value: return value
  2. error: throw error

???

function fn (...args) { throw error }

try {
  fn(...args)
} catch (const err) {
  // handle error
}

class: center, info

modules

class: danger

es modules

import thing from 'module'

export default thing

import { thing as thingy } from 'module'

export const thing = thingy

???

class: success

node modules

also known as "CommonJS"

const thing = require('module')

module.exports = thing

const { thing: thingy } = require('module')

module.exports = { thing: thingy }

???

class: center, info

dom elements

class: danger

jsx

import React from 'react'

export default Table

function Table ({ table }) {
  return <table className='table'>
    {table.map(row => {
      <tr className='row'>
        {row.map(item => {
          <td className='item'>{item}</td>
        })
      </tr>
    })
  </table>
}

???

class: success

hyperscript

const h = require('react-hyperscript')

module.exports = Table

function Table ({ rows ) {
  return h('table.table', rows.map(row => {
    h('tr.row', row.map(item => {
      h('td.item', item)
    })
  })
}

???

class: success

hyperx

const hyperx = require('hyperx')
const React = require('react')
const html = hyperx(React.createElement)

module.exports = Table

function Table ({ rows ) {
  return html`<table class='table'>
    ${rows.map(row => {
      html`<tr class='row'>
        ${row.map(item => {
          html`<td class='item'>${item}</td>`
        })}
      </tr>`
    })}
  </table>`
}

???

class: center, info

eventual value

class: danger

promise

const promise = new Promise((resolve, reject) => {
  // do stuff...
  resolve(value)
  // oh no!
  reject(error)
}

promise
  .then(value => console.log(value))
  .catch(err => console.error(value))

???

module.exports = fetchCats

function fetchCats ({ cats }) {
  return Promise.all(cats.map(cat => {
    return fetch(cat)
  }))
})

class: success

continuable

a "continuable" is a function that takes a single argument, a node-style error-first callback

const continuable = (cb) => {
  // do stuff...
  cb(null, data)
  // oh no!
  cb(error)
}

???

a continuable is the callback version of a promise

can be passed around as an "eventual value", same as promises. but without the resolved, pending, rejected state machine complexity.

const request = require('request')
const parallel = require('run-parallel')

module.exports = fetchCats

function fetchCats ({ cats }) {
  return cb => parallel(cats.map(cat => {
    return request(cat, cb)
  }))
})

class: info

async errors

with a node-style error-first callback, there are three possible signals:

  1. value: cb(null, value)
  2. user error: cb(error)
  3. programmer error: throw error

???

class: center, info

reactive values

class: danger

es observables

https://tc39.github.io/proposal-observable/

???

too much detail to explain here

class: success

observ-ables

reactive values using only functions!

  • thing() gets the value
  • thing.set(...) sets the value
  • thing(function (value) { ... }) listens to the value.

???

class: center, info

values over time

class: danger

node streams

https://nodejs.org/api/stream.html

???

class: danger

whatwg streams

https://streams.spec.whatwg.org/

???

class: success

pull streams

async streams using only functions!

pull(source(), through(), sink())

???

pull streams could be its own talk, going to be a quick intro

class: success

source usage
const source = values([0, 1, 2, 3])

source(null, (err, value) {
  console.log('first value:', value)
})
// first value: 0

class: success

source example
function values (array) {
  var i = 0
  return (abort, callback) => {
    if (abort || i === array.length) {
      callback(true)
    }
    else {
      cb(null, array[i++]
    }
  }
}

???

class: success

sink usage

const source = values([0, 1, 2, 3])

log(source)
// 0
// 1
// 2
// 3

class: success

sink example

function log (read) {
  read(null, function next (err, data) {
    if (err) return console.log(err)
    console.log(data)
    // recursively call read again!
    read(null, next)
  })
}

???

with continuables:

function log (read) {
  return (cb) => {
    read(null, function next (err, data) {
      if (err) return cb(err)
      console.log(data)
      // recursively call read again!
      read(null, next)
    })
  }
}

class: success

through usage

const source = values([0, 1, 2, 3])
const double = map(x => x * 2)

log(double(source))

class: success

through example

function map (mapper) {
  // a sink function: accept a source
  return function (read) {
    // but return another source!
    return function (abort, cb) {
      read(abort, function (err, data) {
        // if the stream has ended, pass that on.
        if (err) cb(err)
        // apply a mapping to that data
        else cb(null, mapper(data))
      })
    }
  }
}

class: success

wild pull streams

ecosystem of modules: pull-stream.github.io

// parse a csv file
pull(
  File(filename),
  CSV(),
  pull.drain(console.log)
)

function CSV () {
  return pull(
    Split(), // defaults to '\n'
    pull.map(function (line) {
      return line.split(',')
    })
  )
}

???

obviously you don't want to re-implement simple streams from scratch all the time

class: info

pull stream errors

with a pull stream source callback, there are four possible signals:

  1. value: cb(null, value)
  2. user error: cb(error)
  3. programmer error: throw error
  4. complete: cb(true)

???

class: center, info

why should you be a JavaScript luddite?

class: success

better performance

software performance is less about gaining muscle, more about losing weight

???

class: success

easier to describe

specification is a function signature, not a complex state machine

???

class: success

easier to understand

less "snippet-driven development"

more learnable tools focused on power users

???

His system, called NLS, showed actual instances of, or precursors to, hypertext, shared screen collaboration, multiple windows, on-screen video teleconferencing, and the mouse as an input device.

He intended to boost collective intelligence and enable knowledge workers to think in powerful new ways, to collectively solve urgent global problems.

The pendulum has swung about as far as it can toward the consumerization of computing technology, in which everything should be immediately intuitive and nothing should require learning, training, or practice. Engelbart’s vision was on the opposite end of that pendulum swing—he believed that the power of these tools came with inherent complexity.

class: center, info

stories

class: warning

story: catstack

build a framework from scratch, alone

<img src="./catstack.jpg" height="350" class="center" />

???

reinvent every wheel possible!

https://github.com/root-systems/catstack

i did it, but it was unsustainable, unable to transfer context to team

class: warning

learning:

yay, reinventing wheels for fun and learning

boo, the world on your shoulders

???

pros

cons

class: info

revised: dogstack

choose your battles

<img src="./dogstack.jpg" height="350" class="center" />

???

focus on what you do best

delegates parts where you are only marginally better

http://dogstack.js.org/

class: success

story: patch ecosystem

bring-your-own-JavaScript potluck

<img src="./patchwork.png" height="350" class="center" />

???

build an app with others, bring your own JavaScript opinions

references:

class: success, center

offline social media

<img src="./patchwork-screenshot.jpg" height="500" class="center" />

class: success, center

git projects

<img src="./git-ssb-screenshot.png" height="450" class="center" />

class: success

learning: mad science works!

follow your passion

find others who share your passion

???

class: center, info

conclusion

class: info

so what

everyone has opinions.

this one is mine. :3

???

as my Mom always says:

it's not about being right, it's about being successful

takaways

aids

blocks

class: info

all the "standards"

make up your own "standards"!

you have just as much a right to make the next JavaScript standard as anyone else.

???

at the end of the day, standards are just somebody's opinion.

class: info

questions?

class: success

thanks!

i appreciate the gift of your attention. ♥

<img src="./follow_your_dreams.png" height="300" class="center" />

<!-- image credit to @substack -->

???

references

luddite.js apps

Built with git-ssb-web