JavaScript for Line of Business Applications

Isomorphic apps are almost like “normal” apps when creating them with the FRP. Because the FRP encourages you to always pass the entire state object to the rendering function, nothing prevents you to do the same in the backend as well.

If you have read other tutorials you may already know that React has a “backend-compatible” function called renderToString. It behaves exactly like render but doesn’t call componentDidMount and returns the rendered HTML as a string instead of placing it into a DOM node. Component & model in → HTML out. Couldn’t be simpler?

Well… actually, it could be. There are two gotchas you should know before trying to use renderToString:

1. Your backend must understand JSX syntax
2. Your front-end modules must be CommonJS compatible

Many people that use ReactJS as their renderer are using some kind of the
Flux architecture to store data, react to actions and notify components
about changes. After a University project involving Scala and RxJava, I wanted
to use these ideas together with ReactJS views. Besides that I found two things
missing in the Flux architecture:

composing different kinds of data easily
interaction with the server

Of course there are ways to solve this, but perhaps reactive streams can help
ease these shortcomings.

I’m going to share how we transitioned to Flux and give some insight into why each part of the architecture is valuable. I’ll also show a couple examples similar to real problems we faced here at Kapost. I do assume the reader has some knowledge of React, a rough idea of what Flux is, and doesn’t mind reading a lot of code. If you are unfamiliar with React and Flux, check out the React documentation and the basic introduction to Flux. (Unfortunately the Flux docs are like a shoddy professor—giving a vague lecture and basic example, then running off and expecting you to solve the hard problems with no office hours.) I’ll try to explain the parts in more detail below.

BangJS is Bacon-flavored Angular. Program watertight web app user interface behavior with AngularJS and Bacon.js.

Enjoy everything that’s good about functional reactive programming with all the benefits of a mature and vibrant front-end framework ecosystem.

BangJS offers you the tools to take this challenge head on:

• make support for asynchronous logic the default;
• focus on your business logic instead of managing state;
• keep your code maintainable and scalable due to inherent composability.