September 11.2016

In this article we are going to talk about writing good code and what challenges we face reaching for it. Readable, declarative, composable and testable are all terms related to writing good code. Often pure functions is referred to as the solution, but writing web applications is mostly about side effects and complex asynchronous flows, concepts that are inherently impure. This article will explain a concept that allows us to inherit all these great attributes of pure functions and still embrace side effects and complex asynchronous flows.

  • April 27.2016

    In the world of web applications it is not enough to just write code. We also need a well thought out interface for our users to interact with the application. The web has changed a lot the last few years as we have moved from building static websites to full fledged complex applications. The workflow of writing code, collaborating with designers and push great products out the door is still changing as we explore this brave new world. In this article I am going to tell you about a collaboration where the designer treats the developer as a manufacturer of components, and how this idea can make very happy developers and designers.

  • April 6.2016

    So CycleJS, created by André Staltz, is an interesting project. It runs on the philosophy that applications are just inputs (interaction, normally) and outputs (UI, normally). This analogy fits very well with Observables, which CycleJS is all about.

  • March 31.2016

    Let me just fire off a disclaimer here first. I am a JavaScript developer. I did not go to school to learn programming, I do not know .Net, Java or other languages. Maybe you think that makes me a bad programmer, and maybe it does, but I did not learn JavaScript to learn programming. I learned JavaScript to build things. And with JavaScript running in the browsers I have the right tool for the job.

  • March 27.2016

    Functional Reactive Programming concepts is really grabbing a hold in the community these days. Projects like Elm, Cycle JS, Angular2 and soon to come RxJs5 is all over twitter, at least on my account :) They are all about observables. If you have not heard of observables they can quickly be explained as a way to handle input over time. This input coming from a mouse click, messages over websocket or whatever really.

  • December 17.2015

    In the previous article we took a look at Elm and how we can structure Elm applications. It is important to divide logic into different files and allow views to share state and trigger any actions to change the state in the application. This is based on ideas from Flux, which allows us to structure and scale applications without causing a lot of pain.

  • November 30.2015

    So there is a new language that is catching interest these days. Elm, by Evan Czaplicki, is a language that is based on the theories and concepts of FRP (functional reactive programming). In the world of JavaScript we quickly think about tools like rxjs, baconjs and frameworks like cyclejs. In JavaScript FRP is more of an approach, while in Elm it is just how it works.

  • November 16.2015

    I attended the Reactive Conference in Bratislava a couple of weeks ago. I even gave a talk on Cerebral if you want to check it out. One of the questions after the talk was “How does Cerebral relate to Redux?”. This is a difficult question to answer because they really try to solve different problems, but I would like the opportunity to answer a redefined question: “How does Flux differ from using a single state tree?”.

  • October 1.2015

    It has been a year since I first got into React and Webpack. I have many times expressed that Webpack is amazing, but hard to configure. That being truthy I think there is a different reason why developers does not adopt it. So I want to go head first and say; “Webpack is amazing, but it is hard to understand why”. In this article I will try to convey the core of what makes Webpack great. Then we are going to look at the very latest contributions to the Webpack/React ecosystem.

  • September 22.2015

    How we think about building web applications evolves quickly. It is not long ago Backbone was the mainstream choice for developing applications. It still is for a lot of developers. But a lot has happened since its release. We got Ember, Angular and the latest mainstream breaker was React with its Flux architecture.

  • August 20.2015

    Creating applications in the browser is still pretty new, but it is moving incredibly fast. Great innovations are being made and the community is growing. We are pushing the boundaries of the browsers and the rest of the web stack. We create things today that we did not know was possible just a year ago. A lot of it has to do with better browsers, and especially faster JavaScript engines, but maybe now more than ever the way we think about how to develop apps is an important factor. One thing is for sure… it is really fun and exciting to be a frontend developer these days :-)

  • August 2.2015

    The MVC (Model View Controller) architecture is referenced in almost all Frontend frameworks. Angular, Ember, Backbone etc, but is it really MVC they are implementing? And is Flux really a different architecture? In this article I am not going to go all academic on you, I am going to tell you about why I think Frontend frameworks are not implementing MVC correctly, and that Flux is actually a lot closer to traditional MVC than any of the other frameworks, but still does not quite “get us there.” This is a bold statement, but please read on and I will explain.

  • May 18.2015

    I have been writing about React, Webpack, Flux and Flux like architectures for quite some time now. All these ideas and thoughts have been churning around in my head and after watching this video on how Elm is able to control the state flow of your application everything just came together. I wanted to take what I have learned so far and build something that tries to solve all the challenges I have been writing about and at the same time bring something new to the table.

  • April 26.2015

    So Baobab is here in version 1.0. Let us quickly recap why Baobab is such a great tool for your application and then we will see what version 1.0 addresses in regards of complex state handling. I encourage you to read the initial article on Baobab first as it introduces why you would consider Baobab at all.

  • April 19.2015

    Note! The repo created for this article has quite a few updates. That said, it is within the same domain. So please read through for inspiration, but make sure you use the latest repo version to get the latest implementations.

  • April 1.2015

    I want to take a step back from React JS, FLUX and cursors for a minute. There is a concept that has always intrigued me, but I have never quite understood it in the context of creating an application. The concept is Functional Reactive Programming. There are quite a few articles on the subject, but none of them really explains this concept in the context of building an application.

  • March 1.2015

    So this little library Baobab continues to surprise me. The previous article I wrote on this used a strategy where you would lock up all your components, but have a dependency to the state tree of the application in each component that needed it. The individual components could point cursors into the state tree, allowing the component to extract state from the state tree and render itself whenever the cursor notified about a change. This optimized the rendering of React JS and gave a very good FLUX structure to your application.

  • February 22.2015

    My last months has been heavily devoted to understanding React JS and FLUX patterns. In parallell with this I have been helping out on an Angular project. Angular was chosen because the guy who got me involved is a Java developer, and of course he likes Angular. In these months working together there has been a lot of discussion on, “Why does Java developers love Angular?”. I have given my cents on React JS, using components, and the one way flow of FLUX. The discussions has not been in the form of “one is better than the other”, but despite his open mind, it was very difficult to explain what makes React JS and FLUX so great.

  • February 6.2015

    All standards, libraries, practices, architectures and patterns needs some time to evolve before becoming widely accepted. The flux architecture is no different. After Facebook released their React JS project the suggested flux architecture has evolved into many different shapes and colors. Some of them more accepted than others. In this article we are going to look at what challenges exists today with the flux architecture. We are also going to look at a solution that I think is a great contribution to the evolution of flux.

  • January 1.2015

    I got into JavaScript about 5 years ago and I have no to very little experience with other languages. That can sometimes be a bad thing, but it can also be a very good thing. In this article I am going to talk about classes, which is coming to the next version of JavaScript. I am going to talk about why I do not understand developers simulating classes and class inheritance in JavaScript and why I think it is not a very good idea to bring the concept into JavaScript at all.

  • December 13.2014

    Note! This article has aged quite a bit. Though it still has valid points, I would suggest reading some of my laster articles on Webpack to get up to speed.

  • October 30.2014

    I wrote an article on working with React JS in a browserify workflow. Well, I got some more experience with it and here is PART2. You can grab this boilerplate at react-app-boilerplate.

  • October 22.2014

    Note! This article is over a year old now. Though it still has valid points the implementation has changed quite a bit. Look at the repo of Formsy-React for more information.

  • August 29.2014

    Note! This article is over a year old now. Though it still has valid points, I would suggest reading some of my laster articles to get up to speed.

  • August 20.2014

    I am not going to take up your time explaining FLUX in details, that is already very well done on the Facebook flux site. What I want to tell you about is why you would want to consider the flux architecture with React JS

Who is Christian Alfoni?

Got into programming about 5 years ago and completely fell in love with it. The productivity you have working with the web platform is incredible. Going from idea to production can be done in a matter of hours. The momentum of new standards, new practices, ideas and solutions also keeps me on my toes, as there is always something new to dive into. The greatest thing about the web as a platform though is its open source community. Love contributing with ideas and thoughts on current and new developments in the world of web applications.

Currently running my own startup and doing consultancy. Please contact me on if you have any questions or feedback.



A code sharing tool that supports NPM and modern worfklows


An state controller with its own debugger


This blog is built with EmptyBox. It is an isomorphic hackable blog project based on React JS.

Webpack React Cookbook

Working on a project to explain the amazing features of Webpack and React JS.



A super flexible form component and form element concept for React JS.


A flux implementation for Angular using Yahoo Dispatcher and my own immutable-store project.


A tool that lets you very easily create and use immutable data structures.