Using Browserify

Writing modular code that runs on
backend & frontend

* As an example we will write a travis client

Read this presentation

Guy Mograbi

married+2.5

Web Developer for 10+ years
javascript first sight love story
stutter

GigaSpaces
2 products
growing UI Teams
transition to new tech

join us.
We are hiring!

"Hello World" example

What is browserify

When to use it

Travis client example

How to write test

Hello World Example

console.log('hello world');

browserify -e ./src/HelloWorld.js -o HelloWorld.all.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof 
require=="function"&&require;if(!u&&a)return a(o,!0);
    if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");
throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};
    t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}
return n[o].exports}var i=typeof require=="function"&&require;
    for(var o=0;o<r.length;o++)s(r[o]);return s})
({1:[function(require,module,exports){



console.log('hello world');
},{}]},{},[1]);

"Hello World" example

What is browserify

When to use it

Travis client example

How to write test

What is it?

Make your nodejs code work on browsers

could, should

Concat++

Concat require you to specify files in the right order.

frontend libraries can use modules structure for development and output a single file.

While keeping the code readable..

Require and exports
to the frontend!

Other transformations

list of available transformations

brfs - inline fs.readFileSync() calls with file contents

es6ify - compile ES6 files to ES5 javascript automatically

ngify - load HTML files into Angular's $templateCache and eliminate hard Angular dependency in JavaScript files by using annotations.

cloudify

react

mapbox

elasticsearch

cloudflare

Is it being used?

Travis does not use browserify

How should I use it?

project internal reusable code

new Repository(data).getName()

external API delivered for different frameworks

angular.module('myApp',['travisjs'])

function( TravisClient ){ .. }

new $.TravisClient()

new window.TravisClient();

var travisClient = new require('travisjs')();

When it is easier to write code in a different syntax and then transform

var log = msg => console.log(msg);

Another example

function MyCtrl (serviceName){
    this.message = 'Hello World!';
}

MyCtrl.prototype.sayHello = function(){
    console.log(this.message);
}

exports = module.exports = MyCtrl

exports['@ng'] = {
    name: 'myCtrl',
    type: 'controller',
}


console.log('Hello World')

Every opportunity I get.. :)