ionic + Browserify

I Me MineAlexandre Barbier

Front End dev @Sfeir

You can find me at:

@alexbrbr

1 ecosystem

Number of npm packages on

May 3, 2015

145,165

Most packages and fastest

growth at the same time

145,165

Examples of node core libraries

▪ events

▪ streams

▪ path

▪ url

▪ assert

▪ util

▪ querystring

▪ http

▪ vm

▪ crypto

2

We should write tiny reusable

modules that each just do one

thing.

“substack”

▪ Use modules written in CommonJS / node.js

▪ Can both require and export modules

▪ Super easy to setup

▪ Tools for automation : watchify

Using browserify in 3 steps

browserify main.js -o bundle.js

<script src=”bundle.js”></script>

npm install mymodule

3 Example in an ionic app

Stack :

Lots of functionality without backend with

Firebase + Browserify

npm install elo-rank

Implementation of the elo-ranking system in

JavaScript.

Created as a chess rating system,

adapted in video games,

basketball, Major League

Baseball, competitive programming

and esports.

Elo

2500 -> grand master

1200 -> new player

victory ~+15 points

▪ Expose the npm module elo-rank

as an angular constant :

▪ angular.module(‘...’)

.constant(‘eloRank’, require(‘elo-rank’)(32);

▪ So it’s easily reusable using dependency

injection “the angular way”

▪ angular.module(‘...’)

.controller(‘...’, function($scope, eloRank) {

var test = eloRank.getExpected(1200, 1400);

//0.2402530733520421

});

Let’s see some code !!!

Conclusion

You might want to use Browserify if you :

▪ Need an npm module for a specific use

▪ Want to share some reusable code on npm

▪ Want to use node.js syntax inside angular/ionic

Also it might be useful in a mobile environment to

avoid server api calls

Links

Special thanks to all the people who made and released

these awesome resources for free:

▪ Browserify handbook by substack : https://github.

com/substack/browserify-handbook

▪ Fast Browserify builds for gulp : https://github.

com/gulpjs/gulp/blob/master/docs/recipes/fast-

browserify-builds-with-watchify.md

Thanks!ANY QUESTIONS?

You can find me at:

@alexbrbr on Twitter