The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

The Cycle.js principle: separating logic from effects

The Cycle.js principle: separating logic from effects

3:30
This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.
Watch this lesson now
Avatar
egghead.io

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Avatar
Julio

more, more, please!

In reply to egghead.io
Avatar
Nils

Sweet!

Avatar
Julio

Meu deus, que alegria André
Oh my god, What a wonderful day

In reply to Julio
Avatar
David

What is an observable? Do you have any suggestions for RX tutorials/videos before this?

Avatar
Steve

For anyone else wondering how that string template works I found this and it must be why this code requires Babel:
https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en

Avatar
Briisk Sp. z o.o.

Andre, estou usando Cycle DOM version: 12.1.0, Gulp e Browserify (e algums midlewares). Quando eu faco a injecao dos scripts no elemento HEAD, nao funciona e eu recebo um erro 'Cannot render into unknown element body'. Se por outro lado eu injeto os scripts no elemento BODY tudo funciona. Cycle ta tentando montar antes do DOM esta completamente renderizado. Ha alguma maneira de injetar os scripts no elemento HEAD ?

Avatar
Andre

Hi Briisk,
Yes, you can inject the scripts in HEAD, but then you also need to delay Cycle.run and makeDOMDriver until the document is ready. For instance

document.addEventListener('DOMContentLoaded', function () {
  Cycle.run(main, {
    DOM: makeDOMDriver('body'),
  });
});

In the future we need to support your use case, see this issue https://github.com/cyclejs/cyclejs/issues/222.

In Portuguese

Sim você pode injetar os scripts no elemento HEAD, mas aí você também precisa adiar o Cycle.run e makeDOMDriver até o documento ficar pronto. Por exemplo:

document.addEventListener('DOMContentLoaded', function () {
  Cycle.run(main, {
    DOM: makeDOMDriver('body'),
  });
});

No futuro queremos dar suporte a essa forma de usar, e está registrado nesse item: https://github.com/cyclejs/cyclejs/issues/222.

In reply to Briisk Sp. z o.o.
Avatar
Briisk Sp. z o.o.

I wasn't expecting such a quick reply :-) thanks for that. I noticed that when I put the same bit of code that you wrote in a setTimeout with 1 ms of delay, it worked but it's better to use your solution with an event listener. BTW, I'm Francisco, Briisk is the company where I work here in Poland.

In reply to Andre
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?