Full-Stack Redux Tutorial

A Comprehensive Guide to Test-First Development with Redux, React, and Immutable

Posted on by Tero Parviainen

Update 2016-02-24: Updated react-router to 2.0.0. In tests, replaced use of deprecated setProps() with ReactDOM.render(). Also now using the react-addons-test-utils package so that no imports of 'react/addons' are needed anywhere.

Update 2015-11-06: Updated to the new Babel 6 release. The Babel packages we need to install are now a bit different, and an additional "babel" section is needed in the package.json in both projects.

Update 2015-10-09: Updated to React 0.14, React Router 1.0.0 RC3, and jsdom 6.x. The changes include:

  • Installing and using React and ReactDOM separately.
  • Using the PureRenderMixin from a separate NPM package.
  • Changing the way the routes are set up in index.jsx
  • Changing the way the current route's contents are populated into App.jsx
  • Removing the getDOMNode() calls in unit tests, as the test helpers now directly return the DOM nodes.

Update 2015-09-19: Clarified which version of the React Router is used. Various other small fixes and improvements. Thanks to Jesus Rodriguez and everyone who has been suggesting fixed in the comments!

Redux is one of the most exciting things happening in JavaScript at the moment. It stands out from the landscape of libraries and frameworks by getting so many things absolutely right: A simple, predictable state model. An emphasis on functional programming and immutable data. A tiny, focused API... What's not to like?

Redux is a very small library and learning all of its APIs is not very difficult. But for many people, it creates a paradigm shift: The tiny amount of building blocks and the self-imposed limitations of pure functions and immutable data may make one feel constrained. How exactly do you get things done?

This tutorial will guide you through building a full-stack Redux and Immutable-js application from scratch. We'll go through all the steps of constructing a Node+Redux backend and a React+Redux frontend for a real-world application, using test-first development. In our toolbox will also be ES6, Babel, Socket.io, Webpack, and Mocha. It's an intriguing stack, and you'll be up to speed with it in no time!

Read more →

Clojure Cup Looking For Organizer

Posted on by Tero Parviainen

I've organized the Clojure Cup a couple of times now: The inaugural event in September 2013 and the second edition in September 2014.

I'd very much like to see a Clojure Cup 2015 this fall, but the time has come for me to hand over the reins to someone else. So, I'm looking for someone to take on the ownership and organizing duties of Clojure Cup.

Read more →

Overcoming JavaScript Framework Fatigue

Posted on by Tero Parviainen

The JavaScript community is suffering from a wave of framework fatigue. It's caused by the massive outpouring of new frameworks, techniques, and ideas that has been going on for some time now. Even though it's all very exciting, it's just impossible to keep up with it all.

Since you can't keep up with it, you have to choose what to focus on. And having to make that choice is a cause of anxiety in itself. Are you focusing on the right things? Is the framework you're learning the best one for you or is there something even better out there? Will something happen next month that'll make your choices seem obsolete?

There are ways to resist these feelings of fatigue and anxiety. Here's what works for me.

Read more →

A Guide To Transclusion in AngularJS

Posted on by Tero Parviainen

I've always had a problem with transclusion. Though I've used it from time to time, using it always felt uncomfortable. I was never really sure what exactly the API was doing, or more importantly, what exactly I was supposed to do when using it.

Based on what I've heard, I'm not alone in this. Transclusion is one of those things people often mention when they talk about their difficulties with Angular.

What is it that makes this a difficult topic then? Conceptually we're not talking about anything hugely complicated - it's essentially just moving some DOM elements around. I think the bigger problems are tangential:

  • The API is tricky, with its higher-order functions and "magic arguments".
  • Parts of the API are deprecated, and it can be hard to figure out which parts.
  • The documentation uses lots of big words ("a transclude linking function pre-bound to the correct transclusion scope").
  • There are actually two separate features provided by the same API: Regular transclusion and element transclusion.

It wasn't until writing the transclusion chapter for my book that I felt I had fully grasped this topic. While the book covers the internals of the API, this article is an attempt to write the user guide I wish I'd had before. I want to describe what you can do with transclusion and how you can do it.

Read more →

Change And Its Detection In JavaScript Frameworks

Posted on by Tero Parviainen

In 2015 there is no shortage of options when it comes to JavaScript frameworks. Between Angular, Ember, React, Backbone, and their numerous competitors, there's plenty to choose from.

One can compare these frameworks in various ways, but I think one of the most interesting differences between them is the way they manage state. In particular, it is useful to think about what these frameworks do when state changes over time. What tools do they give you to reflect that change in your user interface?

Managing the synchronization of app state and the user interface has long been a major source of complexity in UI development, and by now we have several different approaches to dealing with it. This article explores a few of them: Ember's data binding, Angular's dirty checking, React's virtual DOM, and its relationship to immutable data structures.

Read more →