Why I’m Switching from React to Cycle.js

I would guess that most developers these days are using some sort of framework for developing apps. Frameworks are there to help us structure complex apps and save us time. Every day, we can see much discussion about which framework is the best, which framework should you learn first, etc. So today, I would like to share my experience, and why I'm switching to Cycle.js from React.

React is probably the most popular frontend framework these days and it has a great community. I am a big fan of it and it really helped me to change the way I think about web apps and how I develop them. Some developers love it, and some think that it's not as good as everyone says.

Most people start to use React without thinking that there might be a better way to build a web app. That reflection made me try Cycle.js, a new reactive framework that is becoming more popular every day. In this article, I want to explain what reactive programming is, how Cycle.js works, and why I think it's better than React. So let's start!

What is Reactive Programming?

Reactive programming (RP) is programming with asynchronous data streams. If you've already built a web app, you probably did a lot of reactive programming. As an example, click events are asynchronous data streams. We can observe them and perform some side effects. The idea behind RP is to give us an ability to create data streams from anything and manipulate with them. We then have the same abstraction for all our side effects which is easier to use, maintain, and test.

You're probably thinking "why do I need this new reactive programming thing?" The answer is simple: Reactive programming will help you unify your code and make it more consistent. You won't need to think about how the things should work and how to properly implement them. Just write the code in the same way, no matter what data you work on (click events, HTTP calls, web sockets...). Everything is a stream of data and each stream has many functions that you can use to work with it, such as map, and filter. These function will return new streams that can be used, and so on.

Reactive programming gives you the bigger abstraction of your code. It will give you an ability to create interactive user experiences and focus on business logic.

Image taken from http://ift.tt/1x4NpLA

Reactive Programming in JavaScript

In JavaScript, we have a couple of awesome libraries for dealing with data streams. The most well-known one is RxJS. It's an extension of ReactiveX, an API for asynchronous programming with observable streams. You can create an Observable (a stream of data), and manipulate it with various functions.

The second one is Most.js. It has the best performance and they can prove that with some numbers: Performance comparation.

I would also like to mention one small and fast library, made by the creator of Cycle.js and made specifically for it. It's called xstream. It has only 26 methods, is approximately 30kb, and is one of the fastest libraries for reactive programming in JS.

In the examples below, I will use xstream library. Cycle.js is made to be a small framework and I want to attach the smallest reactive library to it.

What is Cycle.js?

Cycle.js is a functional and reactive JavaScript framework. It abstracts your application as a pure function, main(). In functional programming, functions should have only inputs and outputs, without any side effects. In Cycle.js's main() function, inputs are read effects (sources) from the external world and outputs (sinks) are write effects to the external world. Managing side effects is done using drivers. Drivers are plugins that handle DOM effects, HTTP effects, and web sockets etc.

Image taken from Cycle.js website

Cycle.js is there to help us build our user interfaces, test them and write reusable code. Each component is just one pure function that can run independently.

The core API has just one function, run.

run(app, drivers);

It has two arguments, app and drivers. app is the main pure function and drivers are plugins that need to handle side effects.

Cycle.js separates additional functionality into smaller modules. They are:

• @cycle/dom - a collection of drivers that work with DOM; it has a DOM driver and HTML driver, based on the snabdom virtual DOM library
• @cycle/history - a driver for the History API
• @cycle/http - a driver for HTTP requests, based on superagent
• @cycle/isolate - a function for making scoped dataflow components
• @cycle/jsonp - a driver for making HTTP requests through JSONP
• @cycle/most-run - a run function for apps made with most
• @cycle/run - a run function for apps made with xstream
• @cycle/rxjs-run - a run function for apps made with rxjs

Cycle.js Code

Let's see some Cycle.js code? We will create a simple app that should demonstrate how it works. I think that a good old counter app should be ideal for this example. We will see how handling DOM events and re-rendering the DOM works in Cycle.js.

Let's create two files, index.html and main.js. index.html will just serve our main.js file, where the whole of our logic will be. We are also going to create a new package.json file, so run:

npm init -y

Next, let's install our main dependencies:

Continue reading %Why I’m Switching from React to Cycle.js%

by Ivan Jovanovic via SitePoint