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 https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
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%

Link: https://www.sitepoint.com/switching-from-react-to-cycle-js/

Livecoding Recap: React-Navigation With React Native [Video]

I channeled my inner Darth Vader yet again. I still don’t know why my sound is garbled on YouTube but works on LiveEdu. They’re both using the same stream.
This week, I wanted to try out react-navigation because I’ve heard a lot about it. Supposed to be the big new (official) thing since Navigator was deprecated in April.

Link: https://dzone.com/articles/livecoding-recap-react-navigation-with-react-nativ?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

JavaScript Threading: The Magic Framework Problem

The Magic Framework Problem
This happens when two ways of thinking collide.

The framework developers create lots of “super smart” components. These components are so good at their job because they hide the underlying complexity and deal with major issues very well.
The designers have an imperfect understanding of the challenges they face. This is normal – design usually happens before most challenges come up. So they design with what they know, and often with a preconceived notion of how things work.

Mix the two together: The designers assume the framework will deal with all the design issues automatically. In other words, magic.

Link: https://dzone.com/articles/javascript-threading-the-magic-framework-problem?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Reactive UI’s with VanillaJS – Part 2: Class Based Components

In Part 1, I went over various functional-style techniques for cleanly rendering HTML given some JavaScript data. We broke our UI up into component functions, each of which returned a chunk of markup as a function of some data. We then composed these into views that could be reconstructed from new data by making a single function call.
This is the bonus round. In this post, the aim will be to get as close as possible to full-blown, class-based …

Reactive UI’s with VanillaJS – Part 2: Class Based Components is a post from CSS-Tricks

Link: https://css-tricks.com/reactive-uis-vanillajs-part-2-class-based-components/

React or AngularJS?

When Should You Use React?
React shines when you have lots of dynamic content changing within the view. Most client-side solutions on the web today struggle with rendering large lists of items within a single view. This “struggle” may be on the order of milliseconds, but in this increasingly digital world, a half a second delay is all it takes to kill your user experience. It’s why sites that have a lot of dynamic, constantly changing, data-intensive content like Instagram or Facebook choose to power their applications with React.
As a library, you can also use React as the view component of AngularJS or other frameworks, because it does not tie you to a specific technology stack. That said, there’s a quickly growing community and a number of existing libraries and add-ons that can help you build an app from scratch. 

Link: https://dzone.com/articles/react-or-angularjs?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

React or Vue: Which JavaScript UI Library Should You Be Using?

In 2016 React cemented its position as king of the JavaScript web frameworks. This year saw the rapid growth of both its web and native mobile libraries, and a comfortable lead over its main rival Angular.
But 2016 was an equally impressive year for Vue. The release of its version 2 made a huge impression on the JavaScript community, attested to by the 25,000 extra Github stars it gained that year.

Link: https://dzone.com/articles/react-or-vue-which-javascript-ui-library-should-yo?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

How I Designed & Built a Fullstack JavaScript Trello Clone

A few weeks ago, I came across a developer sharing one of his side projects on GitHub: a Trello clone. Built with React, Redux, Express, and MongoDB, the project seemed to have plenty of scope for working on fullstack JS skills.
I asked the developer, Moustapha Diouf, if he’d be interested in writing about his process for choosing, designing, and building the project and happily, he agreed. I hope you’ll find it as interesting as I did, and that it inspires you to work on ambitious projects of your own!
Nilson Jacques, Editor

In this article, I’ll walk you through the approach I take, combined with a couple of guidelines that I use to build web applications. The beauty of these techniques is that they can be applied to any programming language. I personally use them at work on a Java/JavaScript stack and it has made me very productive.
Before moving on to the approach, I’ll take some time to discuss how:

I defined my goals before starting the project.
I decided on the tech stack to use.
I setup the app.

Keep in mind that since the entire project is on GitHub (madClones), I’ll focus on design and architecture rather than actual code. You can check out a live demo of the current code: you can log in with the credentials Test/Test.

If you’re interested in taking your JavaScript skills to the next level, sign up for SitePoint Premium and check out our latest book, Modern JavaScript

Defining the Goals
I started by taking a couple of hours a day to think about my goals and what I wanted to achieve by building an app. A to-do list was out of the question, because it was not complex enough. I wanted to dedicate myself to at least 4 months of serious work (it’s been 8 months now). After a week of thinking, I came up with the idea to clone applications that I like to use on a daily basis. That is how the Trello clone became a side project.
In summary, I wanted to:

Build a full stack JavaScript application. Come out of my comfort zone and use a different server technology.
Increase my ability to architect, design, develop, deploy and maintain an application from scratch.
Practice TDD (test driven development) and BDD (behavior driven development). TDD is a software practice that requires the developer to write test, watch them fail, then write the minimum code to make the test pass and refactor (red, green, refactor). BDD, on the other hand, puts an emphasis on developing with features and scenario. Its main goal is to be closer to the business and write a language they can easily understand.
Learn the latest and the hottest frameworks. At my job, I use angular 1.4 and node 0.10.32 (which is very sad I know) so I needed to be close to the hot stuff.
Write code that follows the principle of the 3R’s: readability, refactorability, and reusability.
Have fun. This is the most important one. I wanted to have fun and experiment a lot since I was (and still am) the one in charge of the project.

Choosing the Stack
I wanted to build a Node.js server with Express and use a Mongo database. Every view needed to be represented by a document so that one request could get all the necessary data. The main battle was for the front-end tech choice because I was hesitating a lot between Angular and React.
I am very picky when it comes to choosing a framework because only testability, debuggability and scalability really matter to me. Unfortunately, discovering if a framework is scalable only comes with practice and experience.
I started with two proof-of-concepts (POCs): one in Angular 2 and another one in React. Whether you consider one as a library and the other one as a framework doesn’t matter, the end goal is the same: build an app. It’s not a matter of what they are, but what they do. I had a huge preference for React, so I decided to move forward with it.
Getting Started
I start by creating a main folder for the app named TrelloClone. Then I create a server folder that will contain my Express app. For the React app, I bootstrap it with Create React App.
I use the structure below on the client and on the server so that I do not get lost between apps. Having folders with the same responsibility helps me get what I am looking for faster:

src: code to make the app work
src/config: everything related to configuration (database, URLs, application)
src/utils: utility modules that help me do specific tasks. A middleware for example
test: configuration that I only want when testing
src/static: contains images for example
index.js: entry point of the app

Setting up the Client
I use create-react-app since it automates a lot of configuration out of the box. “Everything is preconfigured and hidden so that you can focus on code", says the repo.
Here is how I structure the app:

A view/component is represented by a folder.
Components used to build that view live inside the component folder.
Routes define the different route options the user has when he/she is on the view.
Modules (ducks structure) are functionalities of my view and/or components.

Setting up the Server
Here is how I structure the app with a folder per domain represented by:

Routes based on the HTTP request
A validation middleware that tests request params
A controller that receives a request and returns a result at the end

If I have a lot of business logic, I will add a service file. I do not try to predict anything, I just adapt to my app’s evolution.
Choosing Dependencies
When choosing dependencies I am only concerned by what I will gain by adding them: if it doesn’t add much value, then I skip. Starting with a POC is usually safe because it helps you "fail fast".
If you work in an agile development you might know the process and you might also dislike it. The point here is that the faster you fail, the faster you iterate and the faster you produce something that works in a predictable way. It is a loop between feedback and failure until success.
Here is a list of dependencies that I always install on any React app:
Continue reading %How I Designed & Built a Fullstack JavaScript Trello Clone%

Link: https://www.sitepoint.com/fullstack-javascript-trello-clone/

An intro to web components with otters

Monica Dinculescu on web components and why we might care:
… before web components came around, you had to wait on all browsers to agree on a new element (like, a date picker). And even after they agreed on a new element, it took them yeaaaaars to implement it… With web components, web developers get to write such elements, so that you don’t have to wait for 10 years before all browsers agree that they should implement a date picker.…

An intro to web components with otters is a post from CSS-Tricks

Link: https://meowni.ca/posts/web-components-with-otters/

Intro to Firebase and React

Let’s take a look at building something using Firebase and React. We’ll be building something called Fun Food Friends, a web application for planning your next potluck, which hopefully feels like something rather “real world", in that you can imagine using these technologies in your own production projects. The big idea in this app is that you and your friends will be able to log in and be able to see and post information about what you’re planning to …

Intro to Firebase and React is a post from CSS-Tricks

Link: https://css-tricks.com/intro-firebase-react/