Category: gulp

Gulp is fond of Node streams

February 15th, 2015 | browserify, gulp, javascript, nodejs |

If you’re not familiar enough with browserify options and features, check out my previous post explaining browserify in-depth.

I love streaming

Gulp is a stream-based project builder. Basically: a bunch of modules that take one input and output something, which is taken by another module etc. until the whole process is done.

First thing to do, create our gulpfile.js at the root of our project and require() what we need: gulp and browserify.
Once, there was a gulp-browserify plugin. It’s still downloadable but it is not maintained anymore so don’t use it. You have to use browserify itself, that’s it.

var browserify = require('browserify');
var gulp = require('gulp');

gulp.task('default', function() {
    console.log('todo');
});

> gulp
[14:16:44] Starting 'default'...
todo
[14:16:44] Finished 'default' after 85 µs

Before throwing lines of code and browserify, let’s explain a bit more how this stream management work with some examples.

 
Continue reading Gulp is fond of Node streams

Browserify in-depth

February 14th, 2015 | browserify, gulp, highcharts, javascript |

I was seeing this name Browserify everywhere but I always found difficult to understand how Browserify work when I was reading blogs or others articles. It was never clear or it was using things I don’t wanted (I wanted to use gulp for instance to build my project, no grunt, no bower, and I knew gulp-browserify was blacklisted). I decided to step into and learn from the beginning what is browserify, and how it works.

You just need to know at least Node and npm to read further.

So, what I only knew at the beginning was that Browserify is used to create a bundle of js files (on which you can apply transforms such as uglify to minify and reactify to convert React .jsx files), and the html just need to reference one file and then you don’t care anymore of what component to include in the page, how to handle dependencies (A needs B, B should be included before A, this kind of stuff).

That what is, all I knew. Now, let’s start from scratch and let’s discover what’s inside.

We will start by using the browserify command line to check how that’s work and we’ll finish with examples having html and differents third party libs such as Highcharts.

Continue reading Browserify in-depth

A journey through the creation of an app with Node, MongoDB, React, Gulp

February 9th, 2015 | expressjs, gulp, javascript, mongodb, nodejs, react |

So, being so interested in React, I wanted to create something, something useful, not just a single page with a Hello World in the middle, no, that does tell you how to really use a framework, what are its pros and cons.

To really evaluate it, you need at least to have a design of some application, with some links here and there (routing), some dynamic rendering (events), some webservice calls (server, async), a database, and a process to build the project (because you don’t want to manually add a reference in the .html everytime you add a .js file for instance, this is especially true when you deal with React components, every component should have its own file). Then it should have some testing.

So, my only constraint was : use React. After watching so many videos and read many things, I needed to write that down and see how I’m doing.
From that, I needed to store some data on a server that would connect to a DB. So for the server, I picked NodeJS. I barely used it, just for some tutorials I think. But nevermind, I’ll learn. Now a database, at first, I decided on NeDB, because I didn’t want to install a true database server at the beginning. But, I was going to have some many rows later (>300k) that I had to switch to a more powerful one. I through of MongoDB. Never used it, but I knew it integrates easily with NodeJS (using Mongoose) and NeDB has the same exact syntax so no code changes! I only used relational databases until now, so it was going to be a good learning curve ! Finally, as a build system, I used Grunt a bit back then, but I heard about Gulp being much nicer. Go for it. (I’ve added it at the end actually :-))
And of course, I did of all my coding in my new favorite editor, Atom!

I’m going to explain step by step how I did from scratch, what I’ve learned and give some tips and pointers.

Continue reading A journey through the creation of an app with Node, MongoDB, React, Gulp