Modules & Browserify

Module pattern y utilización de npm modules en el browser con Browserify. Presentado en el primer meetup de Barranquilla JS. Julio 15 de 2015, Barranquilla - Colombia.

Transcript

1. MODULE PATTERN & npm MODULES EN EL BROWSER CON BROWSERIFY Por: José Trezza
2. ASUNTOS A CUIDAR • Escalabilidad • Reusabilidad • Optimización, etc.
3. ORGANIZACIÓN DEL CÓDIGO • Namespaces • Patrones de desarrollo • Patrones de diseño
4. JAVASCRIPT = LIBERTAD
5. CREACIÓN DE OBJETOS var jorge = Object.create(person, {name:{value:'Jorge', enumerable: true}}); var jorge = new Person('jorge'); var jorge = {name: 'Jorge', age: 25};
6. INVOCACIÓN DE FUNCIONES var sum = new Sum(1, 3); function sum(a, b){return a + b;} sum(1, 3); var Math = {sum: function(a, b){return a + b;}} Math.sum(1, 3);
7. MULTIPARADIGMA • Orientado a objetos • Imperativo • Funcional
8. MÓDULOS Organización, abstracción, reutilización...
9. CÓDIGO PLANO function abs(n){ return n >= 0 ? n : n * -1; } function pow(n, exp){ var positivo = exp >= 0, resultado = 1; exp = positivo ? exp : -exp; while(exp >= 1){ if(exp % 2 != 0) resultado *= n; exp /= 2; n *= n; } return positivo ? resultado : 1 / resultado; }
10. OBJETOS var Math = { abs: function (n){ return n >= 0 ? n : n * -1; }, pow: function (n, exp){ //Implementación aquí } }
11. FUNCIONES Son la única forma de crear un nuevo scope en JavaScript.
12. FUNCIONES ¿Qué son? function saludar(nombre){ alert("Hola "+ nombre); } //Se invoca con () saludar("Hola");
13. FUNCIONES Son valores. var alertar = function(r){ alert(r); }; $.get("/url", alertar); function plusSomething(n){ return function(a){ return a + n; }; } alertar.prototype = {}; alertar.toString();
14. SENTENCIA Ejecuta una acción. EXPRESIÓN Produce un valor. var mayor; if(edad > 17){ mayor = true; }else{ mayor = false; } var mayor; mayor = edad>17 ? true:false;
15. SENTENCIA Ejecuta una acción. function saludar(nombre){ console.log("Hola " + nombre); } EXPRESIÓN Produce un valor. var saludar = function(nm) { console.log("Hola " + nm); };
16. MÓDULO var myModule = function(){ var bike = { color: 'Black/Blue' } return { setColor: function(color){ bike.color = color; }, describe: function(){ console.log("This is a "+ bike.color+" bike."); } } }();
17. PROBANDO MÓDULO myModule.describe(); myModule.setColor('Yellow'); myModule.describe(); myModule.setColor('Green'); myModule.describe(); > This is a Black/Blue bike. > This is a Yellow bike. > This is a Green bike.
18. PROBANDO MÓDULO console.log(myModule.color); console.log(myModule.bike['color']); > undefined > Uncaught TypeError: Cannot read property 'color' of undefined
19. MÓDULO (function (counter) { var times = 0; counter.increment = function () { return times++; }; counter.howMany = function () { console.log( "Total: " + times); }; })(window.counter = {});
20. PROBANDO MÓDULO counter.increment(); counter.howMany(); counter.increment(); counter.howMany(); > Total: 1 > Total: 2
21. MÓDULO (function( window, undefined ) { var readyList, rootjQuery, core_strundefined = typeof undefined, location = window.location, document = window.document, docElem = document.documentElement, _jQuery = window.jQuery, _$ = window.$, class2type = {}, jQuery = function( sel, cxt ) { return new jQuery.fn.init( sel, cxt, rootjQuery ); }... })( window ); jQuery (Código ilustrativo)
22. DEPENDENCIAS <script src="js/myApp.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery-1.11.0.min.js"></script> Archivos independientes > Uncaught Error: Bootstrap's JavaScript requires jQuery
23. ESTÁNDARES • AMD • Common JS • ES Harmony
24. ESTÁNDARES • AMD • Common JS • ES Harmony
26. modulecounts.com
27. COMMON JS exports.abs = function (n){ return n >= 0 ? n : n * -1; } exports.pow = function (n, exp){ //Implementación aquí } math.js Módulo de ejemplo
28. COMMON JS module.exports = { abs: function (n){ return n >= 0 ? n : n * -1; }, pow: function (n, exp){ //Implementación aquí } } math.js Módulo de ejemplo
29. COMMON JS var http = require('http'), $ = require('jquery'), math = require('./math'); $(document).on('ready', function(){ alert(math.abs(-35)); }); myApp.js Ejemplo de uso
30. npm modules en el browser
32. GRACIAS @jtrezza