ionic + browserify by alexandre barbier - soirée mobile sfeir 05/05/2015
TRANSCRIPT
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