staltz

const Cycle = require('@cycle/core');
const CycleWeb = require('@cycle/web');
const makeHTTPDriver = require('@cycle/http');
const h = CycleWeb.h;

function main(responses) {
  const GITHUB_SEARCH_API = 'https://api.github.com/search/repositories?q=';

  // This essentially models when search requests are supposed
  // to happen

staltz

" Append these to your .vimrc

syntax enable
au BufRead,BufNewFile *.todo setfiletype todo
au BufRead,BufNewFile TODO setfiletype todo

staltz

Rx.Observable.timer(0, 1000)
  .map(i => `Seconds elapsed ${i}`)
  .subscribe(text => {
    const container = document.querySelector('#app');
    container.textContent = text;
  });

staltz

function main() {
  return {
    DOM: Rx.Observable.timer(0, 1000)
      .map(i => `Seconds elapsed ${i}`)
  };
}

const drivers = {
  DOM: function DOMDriver(sink) {
    sink.subscribe(text => {

staltz

h('div.container', [
  h('label.nameLabel', 'Name:'),
  h('input.myinput', {attributes: {type: 'text'}}),
  h('hr'),
  h('h1.greeting', `Hello ${name}`)
])

// or

div('.container', [

staltz

import Cycle from 'cyclejs';

const { h, Rx } = Cycle;

// all html/svg element names <<
var elements = [
  'a',
  'abbr',
  'address',
  'area',

staltz

Terse Cycle.js

Take Cycle's primal example, on the README:

import Cycle from 'cyclejs';
let {Rx, h} = Cycle;

let name$ = Cycle.createStream(function model(changeName$) {

staltz

https://github.com/Raynos/mercury

Rough sketch of how is the flow of data in Mercury.

                           │
  Event channels  <───────────── dom-delegator (events)
       │                   │           ^
       V  (imperative)                 │
  View state               │          DOM

staltz

Cycle custom elements decouple the component's abstraction from its implementation.

When you use a React component like

<div>
  <NewHotness />
</div>

You are pulling in that specific NewHotness component. You actually had to explicity import the NewHotness component before using it.

staltz

/**
 * Delays all items from the source Observable up until when the other Observable
 * emits its first item. After the other Observable emitted its first item,
 * the source items are not delayed.
 *
 * source: ---s-s---s----------s---s----s---s---s--|>
 * other:  ------------o------o-------o------o-----|>
 * result: ------------sss-----s---s----s---s---s--|>
 *
 * @param first