Category Archives: Experiments

RxJS – first steps

Experiments, ,

rxjs-logo

I’ve been hearing about RxJS for a little more than 2 years in meetups and conferences, but never took the time to test it in a project (lots of other things came before on my list 😉 ).

At the end of last month, I decided to try it after watching the CycleJS Courses by André Staltz. Even if you’re more into React/Redux (like I am), I recommend it.

Before starting, I created a boilerplate for Webpack / Babel projects, gathering configurations, development & build workflow, good practices I used to setup each time I was creating one of my projects using Webpack. That way, everything would be in one place (and could be shared).

One thing RxJS is very good at is managing events (and multiple events) that have intermediate states (such as drag’n drop). So you will find the following features on topheman/rxjs-experiments (at least for the moment):

  • Multitouch/Mouse painting on a canvas
  • Accelerometer based background color

I could have coded those features in VanillaJS, but when you’ll take a look at the code, you’ll see how much simplier it is in RxJS.

Test the Demo!

I’m still a beginner at reactive programming. I can understand how it simplifies async event management. The number of operators is overwhelming though … It can be hard to find the right ones (or the right way) to use them – I’ve been said that at the end, you only use a handful of them – a little like when you switch from imperative to functional programming.

I’ll continue to add examples (for me to train) – if you’re an RxJS expert and find a better way to write my code, please consider to send me a PR.

Resources:

Learn functional programming with Redux

Experiments, ,

A few weeks ago, I implemented redux on my react project now renamed topheman/react-es6-redux.

What is Redux ?

Redux is a library made by Dan Abramov that evolves the ideas of Flux, avoiding its complexity (and lots of boilerplate). You can use it anywhere (client/server) with any library. Its goal is to solve the problem of state management in applications.

To do that, you have a single store that holds the state of your whole app as an object.

This store dispatches actions (make this kind of call from anywhere inside your app).

Those actions will pass through “reducers” which will process them and return a new state: (previousState, action) => newState (they are called “pure function” because no matter what, given the same arguments, they should always return the same result – no side effects).

Since all the app state exists in one place, you can combineReducers (split them so that they’ll each handle their part of the state).

This was a very short description of what is redux – more infos on redux.js.org.

How about functional programming ?

This paradigm has been around for a long time (it was there before Object Oriented programming) and if you’ve never heard of it, you’ve been using it for sure. I have been using both but I must say that I did learned design patterns in OOP but I never took any real interest in functional programming until recently, mostly because I was used to OOP.

What’s great with Redux is that if you digg just a little, you’ll learn a lot about:

  • immutability
  • functional programming
  • ES6+

If you’re doing UI in JavaScript, you should embrace those. Don’t be afraid, we’re already developping in ES6, you might find very interesting the approach of functional programming and immutability …

Resources:

Upgraded to react v0.14

Experiments, , , ,

logo-reactjs

The genesis of the project:

On october 7th, 2015, Facebook released the v0.14 of React. I took it as an opportunity to get back at React and upgrade those projects to the latest version, to check it out.

The easy part

Upgrading React was in fact the easy part … Since my app was react-warnings free, as said on the upgrade-guide, I only had to:

  • switch to react-dom (and react-dom/server for the server-side). As of now the render engine is a different module (React already did the render on browser and server, but now that there is react-native, it really makes sense to split)
  • switch to react-addons-* modules and drop React.addons which were deprecated (more modularity)

The tricky part

I was using react-router@0.13.2 and by upgrading to react@0.14.0, I ran into invalid peerDependencies problem (react-router@0.13.x couldn’t work with a version of React over 0.13).

So I also upgraded react-router to the v1.0.0-rc3, which has a new API … In fact, the refactor went pretty smoothly for the client-side part (the upgrade guide is well documented).

But for the server-side, I hit an issue: on previous versions, you could attach pretty much any attribute to the object passed from the router to your components. Now if you do that, it won’t get all the way down to your components. The workaround I finally found is to attach those data to the params attribute of the object passed by the router and retrieve them in the props.params of the component … There might be a better way (the createElement API …)

UPDATE: Since then, react-router has released the v0.13.4 which is compatible with react@0.13.x, but I’m glad I did the upgrade, so now I have a client & a server-side project that work with the latest versions of React & react-router!

Sugar

I refactored some components with the syntax introduced in react@0.14 for stateless functional components using ES6 fat arrow (no this, class or anything alike).

As I was at it, I enhanced the build routines:

  • I added banners on html/js/css containing description/version/git revision (something I’m doing by default now on my projects) – for those who are building their project on heroku, check this commit 😉
  • I fixed react-hot-reload for the client-side project (this is a great workflow)
  • I fixed livereloading for the server-side project (when you make changes on a component in development, not only your browser has to reload but your also has your node server, since there is server-side rendering and they both need to have the same version)

Conclusion

This sprint was a great exercise to get back into React – both client and server-side. I also got to play with webpack and gulp (yeah, I enjoy setting up build routines 🙂 ). But moreover, coding in ES6 is great … I enjoy it, I did it on my previous project and please, don’t get left behind, don’t fear webpack/Babel, those are great tools that you could easily setup via a yeoman generator or a boilerplate from git …

I’ll keep using React, I do like this library. My next steps will be to add some animation/transition and setting up redux (or a flux-like implementation).

Tophe

All the code is available on github, each tag has its own release providing a changelog with a list of items pointing to the commits of the version, so if you want to take a peak, please do.

Resources:

Gulp – fail run-sequence with a correct exit code

Experiments,

gulp-2x

You may use the run-sequence module in your gulp tasks to make sure a task is finished before launching some others (example: make sure the build folder is cleaned up before launching the build related tasks).

The problem with run-sequence is that you always get a 0 exit code, no matter the task succeeded or failed. So you can’t rely on that in Continuous Integration tools (such as Travis CI).

I bumped into that problem on one of my projects, here’s how I solved it:

var runSequence = require('run-sequence');

gulp.task('build', function (cb) {
  runSequence(
    ['clean'],
    ['compile', 'extras', 'images'],
    // this callback is executed at the end, if any of the previous tasks errored, 
    // the first param contains the error
    function (err) {
      //if any error happened in the previous tasks, exit with a code > 0
      if (err) {
        var exitCode = 2;
        console.log('[ERROR] gulp build task failed', err);
        console.log('[FAIL] gulp build task failed - exiting with code ' + exitCode);
        return process.exit(exitCode);
      }
      else {
        return cb();
      }
    }
  );
});

This bug happens with gulp@3.9.0, in the next major version (v4.0.0), there will be a built-in gulp.series API that should fix this kind of problem.

Feedbacks on my Isomorphic app using React and ES6

Experiments, , , ,

logo-reactjs

UPDATE: This project has been upgraded to React v0.14 – read the blog post about the upgrade.

This post is about a three steps project I initiated a few weeks ago. I completed the previous step about two weeks ago, so feel free to read my blog post about the front-end part : “Playing with ES6 (and React)”.

Before going further, a quote from stackoverflow (this is the most concise I found) :

Isomorphic web sites can be run on both the server and in the browser. They grant code reuse, seo, and page load speed boosts while still having an interface written in JS. node.js is most often used for the server javascript-engine.

Initial Goal

My challenge was to make an isomorphic app, using React and ES6 :

  • ES6 : I’ve been hearing about it for a while on meetups, articles I read, videos I watched – just like I knew it already – had to throw some real lines of codes 😉
  • React : Same as above (moreover, I’ve been doing a lot of Angular the past two years and hearing more and more about React lately, so I had to try it for real)
  • Isomorphic app : If I were about to use React in a project, it seems to be the perfect opportunity to try to implement it

Project Steps

I split the project into three parts :

  • topheman-apis-proxy : The backend part (and a project on its own as well, since it’s extensible and configurable)
  • topheman/react-es6 : The frontend part where I developed the app in ES6, using React, with the last step in mind – I only used isomorphic libraries
  • topheman/react-es6-isomorphic : The expressJS server in the middle, that handles server-side rendering. I retrieved the frontend part from the previous step. At this point, any missing feature in the client was first developed on the frontend project repo then merged back to this one, to make sure that each project stays focused on its scope (one on frontend, the other on server-side rendering).

Try the app (there is an about page that will help you understand the difference between the two projects). If you’re into React and server-side rendering, take a look at my feedbacks …

Give it a try ! Continue reading →