Separate Logic from Effects in Cycle.js

André Staltz
InstructorAndré Staltz

Share this video with your friends

Send Tweet

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.

Nils
Nils
~ 5 years ago

Sweet!

David
David
~ 5 years ago

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

André Staltz
André Staltzinstructor
~ 5 years ago

Hi David, here is an Egghead course to introduce RxJS https://egghead.io/series/introduction-to-reactive-programming

Steve Schwarz
Steve Schwarz
~ 5 years ago

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

Briisk Sp. z o.o.
Briisk Sp. z o.o.
~ 5 years ago

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 ?

André Staltz
André Staltzinstructor
~ 5 years ago

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.

Briisk Sp. z o.o.
Briisk Sp. z o.o.
~ 5 years ago