Slide 1

Slide 1 text

MODULE PATTERN & npm MODULES EN EL BROWSER CON BROWSERIFY Por: José Trezza

Slide 2

Slide 2 text

ASUNTOS A CUIDAR • Escalabilidad • Reusabilidad • Optimización, etc.

Slide 3

Slide 3 text

ORGANIZACIÓN DEL CÓDIGO • Namespaces • Patrones de desarrollo • Patrones de diseño

Slide 4

Slide 4 text

JAVASCRIPT = LIBERTAD

Slide 5

Slide 5 text

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};

Slide 6

Slide 6 text

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);

Slide 7

Slide 7 text

MULTIPARADIGMA • Orientado a objetos • Imperativo • Funcional

Slide 8

Slide 8 text

MÓDULOS Organización, abstracción, reutilización...

Slide 9

Slide 9 text

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; }

Slide 10

Slide 10 text

OBJETOS var Math = { abs: function (n){ return n >= 0 ? n : n * -1; }, pow: function (n, exp){ //Implementación aquí } }

Slide 11

Slide 11 text

FUNCIONES Son la única forma de crear un nuevo scope en JavaScript.

Slide 12

Slide 12 text

FUNCIONES ¿Qué son? function saludar(nombre){ alert("Hola "+ nombre); } //Se invoca con () saludar("Hola");

Slide 13

Slide 13 text

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();

Slide 14

Slide 14 text

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;

Slide 15

Slide 15 text

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); };

Slide 16

Slide 16 text

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."); } } }();

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

PROBANDO MÓDULO console.log(myModule.color); console.log(myModule.bike['color']); > undefined > Uncaught TypeError: Cannot read property 'color' of undefined

Slide 19

Slide 19 text

MÓDULO (function (counter) { var times = 0; counter.increment = function () { return times++; }; counter.howMany = function () { console.log( "Total: " + times); }; })(window.counter = {});

Slide 20

Slide 20 text

PROBANDO MÓDULO counter.increment(); counter.howMany(); counter.increment(); counter.howMany(); > Total: 1 > Total: 2

Slide 21

Slide 21 text

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)

Slide 22

Slide 22 text

DEPENDENCIAS Archivos independientes > Uncaught Error: Bootstrap's JavaScript requires jQuery

Slide 23

Slide 23 text

ESTÁNDARES • AMD • Common JS • ES Harmony

Slide 24

Slide 24 text

ESTÁNDARES • AMD • Common JS • ES Harmony

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

modulecounts.com

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

COMMON JS var http = require('http'), $ = require('jquery'), math = require('./math'); $(document).on('ready', function(){ alert(math.abs(-35)); }); myApp.js Ejemplo de uso

Slide 30

Slide 30 text

npm modules en el browser

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

GRACIAS @jtrezza