Silly Code: Importing Redux from a tweet! #javascript

Programming shouldn't always be about work. Sometimes you just need to have some fun and write something silly. That is exactly what @rauchg did when he created require-from-twitter.

Who needs NPM when you can require code directly from Twitter? That is so ridiculous! Now lets have some fun and play with it!

If you haven't seen it yet, checkout Redux: Implementing Store from Scratch. It's amazing, @dan_abramov creates Redux's createStore from scratch in under 3 minutes.

So I start with the code from that video:

export default (reducer) => {
  let state
  let listeners = []

  const getState = () => state

  const dispatch = (action) => {
    state = reducer(state, action)
    listeners.forEach(listener => listener())
  }

  const subscribe = (listener) => {
    listeners.push(listener)
    return () => {
      listeners = listeners.filter(l => l !== listener)
    }
  }

  dispatch({})

  return { getState, dispatch, subscribe }
}

... and reduce it to an expression using techniques from Challenge: Program without variables #javascript

export default (reducer, state = reducer(undefined, {}), listeners = []) => ({
  getState: () => state,
  dispatch: (action) => (
    state = reducer(state, action),
    listeners.forEach(listener => listener())
  ),
  subscribe: (listener) => (
    listeners.push(listener),
    () => {
      listeners = listeners.filter(l => l !== listener)
    }
  )
})

Oof. Still too big for twitter. Okay, let's minify this thing.

export default (a,b=a(void 0,{}),c=[])=>({getState:()=>b,dispatch:d=>(b=a(b,d),c.forEach(e=>e())),subscribe:d=>(c.push(d),()=>{c=c.filter(e=>e!==d)})})

I was assuming now that I have trimmed the code down to 153 Characters and twitter has a new 280 character limit that this would be enough, but I ended up receiving truncated text back when using twit. (scroll to the end to see truncation)

// Redux createStore
export default (a,b=a(void 0,{}),c=[])=>({getState:()=>b,dispatch:d=>(b=a(b,d),c.forEach(e=>e(… https://t.co/jNSo5bd60k

Hmmm. So let's just trim off the unsubscribe function and see if we can slim this thing down.

// 124 characters
export default(a,b=a(void 0,{}),c=[])=>({getState:()=>b,dispatch:d=>(b=a(b,d),c.forEach(e=>e())),subscribe:d=>c.push(d)})

This should work.

Next step, post the code to Twitter

Finally, the sample app!

import requireFromTwitter from './require-from-twitter'

(async () => {
  const createStore = await requireFromTwitter('928882286883254272')

  const reducer = (store = 0, { type }) =>
    type === 'INCREASE'   ? store + 1
    : type === 'DECREASE' ? store - 1
                          : store

  const store = createStore(reducer)

  store.subscribe(() => {
    console.log('state', store.getState())
  })

  store.dispatch({ type: 'INCREASE' })
  store.dispatch({ type: 'INCREASE' })
  store.dispatch({ type: 'DECREASE' })
  store.dispatch({ type: 'DECREASE' })
})()

// state 1
// state 2
// state 1
// state 0

note: If you get some weird error TypeError: Path must be a string, it went away after upgrading the npm packages.

Summary

This code was hilarious and fun to write. Thanks to Guillermo Rauch for creating require-from-twitter.

Some improvements that would be cool

• twit could support the larger tweet size.
• An npm like service is needed to permanently persist tweets.
• require-from-twitter could be upgraded to support multi-tweet for larger code imports.

Anyway, this was fun and I think it's time to end it here.

Tell me what kind of silly projects you have worked on in the comments section.

Follow me on Twitter @joelnet or LinkedIn

Cheers!