Using Browserify

Writing modular code that runs on 
backend & frontend

* As an example we will write a travis client

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

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?

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.. :)

*from ng-conf 2014 by Ben Clinkinbeard

"Hello World" example

What is browserify

When to use it
 

Travis client example


How to write test

 

Travis Client Example

Lets write code that runs in node.js and angular

WRONG!!!!

2-way binding won't work

How we resolved it in cloudify.
We are using node's request and request-browser

lodash _.wrap and ECMAScript proxy might be relevant

"Hello World" example

What is browserify

When to use it
 

Travis client example


How to write test

 

How to write tests

Same way we wrote the code

We use expect.js , mocha and jasmine 2.0 to get same API across

jasmine_node is still on jasmine 1.x
which has a problem with nested 'describe'

Browserify has a preprocessor for karma

The test is pretty standard

A word about webpack and friends

guym@gigaspaces.com

@guymograbi

guy-mograbi-at-gigaspaces

Browserify 101

By Guy Mograbi

Browserify 101

How to write code that runs on backend & frontend

  • 1,382
Loading comments...