SlideShare uma empresa Scribd logo
Breve história do
Javascript
modularizado
<script type="text/javascript"
src="index.js">
</script>
• Separation
• Composability
• Dependency management
• Namespace management
• Consistent implementation
• Separação
• Reuso
• Gerenciamento de dependências
• Gerenciamento de nomes
• Implementação consistente
Object Literal
Pattern
IIFE CommonJS AMD UMD
Object Literal Pattern
const Person = {
name: 'Filipe'
};
const Author = {
getName: function() {
return Person.name;
}
};
Prós
• Fácil de entender
• Fácil de implementar
Contras
• Depende de uma variável global
• Baixa reusabilidade
• Variáveis e métodos não privados
• Conflitos entre módulos
IIFE
Immediately Invoked Function Expression
const Author = (function(newName) {
var name = newName;
function getName() {
return name;
}
return {
getName: getName
};
})('Filipe');
Prós
• Melhor controle interno
• Variáveis e métodos privados
• Controle ao importar dependências
• Algo parecido com um construtor e também
com decorator pattern
Contras
• Continua dependendo de uma variável global
• Uma sintaxe feia e de difícil entendimento
CommonJS
Modularidade no server-side
module.export = function Person(newName) {
var name = newName;
return {
name: name
}
}
ou o que o node consolidou
var Person = require('./person.js');
module.exports = function Author() {
function getName() {
return Person('Filipe').name;
}
return {
getName: getName
};
};
Prós
• Sintaxe clara e influenciou o ES6
• Variáveis com escopo limitado
• Não é possível declarar uma variável global
Contras
• Não funciona bem assincronamente
• Lento e pesado em devices "fracos"
AMD
The next step
define('Person', function(newName) {
var name = newName;
return {
name: name
};
});
define('Author', ['Person'], function(Person) {
function getName() {
return Person('Filipe').name;
}
return {
getName: getName
}
});
Prós
• É assíncrono
• Gerenciamento de nomes facilitados
Contras
• Sintaxe complicada
• Sintaxe feia
UMD
Combina o CommonJS com o AMD
Prós e contras
Combina os mesmo prós e contras
ES6
const Person = {
name: 'Filipe'
};
export default Person;
import * from './person.js';
class Author {
getName() {
return Person.name;
}
}
import { name } from './person.js';
class Author {
getName() {
return name;
}
}
import * as Person from 'person.js';
class Author {
getName() {
return name;
}
}
Typescript namespace
namespace Animals {
export class Cats {
types: [
'Persian ',
'Russian'
];
}
export class Cat {
getCat() {
const cats = new Cats();
return cats.types[1];
}
}
}
namespace Animals {
export class Dogs {
types: [
'Dachshund',
'Bulldog',
'Boxer'
];
}
export class Dog {
getDog() {
const dogs = new Dogs();
return dogs.types[0];
}
}
}
const dog = new Animals.Dog();
dog.getDog(); // Dachshund
const cat = new Animals.Cat();
cat.getCat(); // Russian
namespace Shapes {
export namespace Polygons {
export class Triangle { }
export class Square { }
}
}
import polygons = Shapes.Polygons;
let sq = new polygons.Square();
Referencias
• https://www.sitepoint.com/understanding-es6-modules-via-their-history/
• https://groups.google.com/forum/#!msg/comp.lang.javascript/
eTzWVa1W_pE/N9lnvRG9WJ8J
• https://medium.com/@crohacz_86666/basics-of-modular-
javascript-2395c82dd93a
• https://www.typescriptlang.org/docs/handbook/namespaces.html
• https://requirejs.org/docs/whyamd.html#amd
Filipe M. Silva
Javascript software developer
na
Concrete Solutions
Twitter/Instagram
@flpms
Blog
https://flpms.me

Mais conteúdo relacionado

Semelhante a Breve história do javascript modularizado

Minicurso Ruby on Rails
Minicurso Ruby on RailsMinicurso Ruby on Rails
Minicurso Ruby on Rails
Maurício Eduardo
 
Palestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVAPalestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVA
Thiago Cifani
 
Java 9, 10 e ... 11
Java 9, 10 e ... 11Java 9, 10 e ... 11
Java 9, 10 e ... 11
Rodrigo Cândido da Silva
 
Grails parte 1 - introdução
Grails   parte 1 - introduçãoGrails   parte 1 - introdução
Grails parte 1 - introdução
Josino Rodrigues
 
Node JS - Parte 2
Node JS - Parte 2Node JS - Parte 2
Node JS - Parte 2
Bruno Catão
 
Php FrameWARks - sem CakePHP
Php FrameWARks - sem CakePHPPhp FrameWARks - sem CakePHP
Php FrameWARks - sem CakePHP
Marcio Albuquerque
 
Robustez de Software - Como ouvir menos reclamações dos seus chefes
Robustez de Software - Como ouvir menos reclamações dos seus chefesRobustez de Software - Como ouvir menos reclamações dos seus chefes
Robustez de Software - Como ouvir menos reclamações dos seus chefes
David Robert Camargo de Campos
 
PHP like a super hero
PHP like a super heroPHP like a super hero
PHP like a super hero
Elton Minetto
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como Programar
Tiago Antônio da Silva
 
PHP robusto com Zend Framework
PHP robusto com Zend FrameworkPHP robusto com Zend Framework
PHP robusto com Zend Framework
Jaime Neto
 
Doctrine for Dummies
Doctrine for DummiesDoctrine for Dummies
Doctrine for Dummies
Ari Stopassola Junior
 
Data mapping com Groovy - Part 2
Data mapping com Groovy - Part 2Data mapping com Groovy - Part 2
Data mapping com Groovy - Part 2
Jeison Barros
 
PHP 7
PHP 7PHP 7
PHP Experience 2016 - [Palestra] Keynote: PHP-7
PHP Experience 2016 - [Palestra] Keynote: PHP-7PHP Experience 2016 - [Palestra] Keynote: PHP-7
PHP Experience 2016 - [Palestra] Keynote: PHP-7
iMasters
 
Java+DDD+BDD+TDD=Sucesso Total
Java+DDD+BDD+TDD=Sucesso TotalJava+DDD+BDD+TDD=Sucesso Total
Java+DDD+BDD+TDD=Sucesso Total
Eduardo Bregaida
 
Ecosistema spring a_plataforma_enterprise_jav
Ecosistema spring a_plataforma_enterprise_javEcosistema spring a_plataforma_enterprise_jav
Ecosistema spring a_plataforma_enterprise_jav
Julio Viegas
 
Criando APIs com Node e TypeScript
Criando APIs com Node e TypeScriptCriando APIs com Node e TypeScript
Criando APIs com Node e TypeScript
Andre Baltieri
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
Alisson Agiani
 
Floggy-IIBoot-2008-09-25
Floggy-IIBoot-2008-09-25Floggy-IIBoot-2008-09-25
Floggy-IIBoot-2008-09-25
Thiago Leão Moreira
 
Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2
PrinceGuru MS
 

Semelhante a Breve história do javascript modularizado (20)

Minicurso Ruby on Rails
Minicurso Ruby on RailsMinicurso Ruby on Rails
Minicurso Ruby on Rails
 
Palestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVAPalestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVA
 
Java 9, 10 e ... 11
Java 9, 10 e ... 11Java 9, 10 e ... 11
Java 9, 10 e ... 11
 
Grails parte 1 - introdução
Grails   parte 1 - introduçãoGrails   parte 1 - introdução
Grails parte 1 - introdução
 
Node JS - Parte 2
Node JS - Parte 2Node JS - Parte 2
Node JS - Parte 2
 
Php FrameWARks - sem CakePHP
Php FrameWARks - sem CakePHPPhp FrameWARks - sem CakePHP
Php FrameWARks - sem CakePHP
 
Robustez de Software - Como ouvir menos reclamações dos seus chefes
Robustez de Software - Como ouvir menos reclamações dos seus chefesRobustez de Software - Como ouvir menos reclamações dos seus chefes
Robustez de Software - Como ouvir menos reclamações dos seus chefes
 
PHP like a super hero
PHP like a super heroPHP like a super hero
PHP like a super hero
 
Curso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como ProgramarCurso JavaScript - Aula de Introdução como Programar
Curso JavaScript - Aula de Introdução como Programar
 
PHP robusto com Zend Framework
PHP robusto com Zend FrameworkPHP robusto com Zend Framework
PHP robusto com Zend Framework
 
Doctrine for Dummies
Doctrine for DummiesDoctrine for Dummies
Doctrine for Dummies
 
Data mapping com Groovy - Part 2
Data mapping com Groovy - Part 2Data mapping com Groovy - Part 2
Data mapping com Groovy - Part 2
 
PHP 7
PHP 7PHP 7
PHP 7
 
PHP Experience 2016 - [Palestra] Keynote: PHP-7
PHP Experience 2016 - [Palestra] Keynote: PHP-7PHP Experience 2016 - [Palestra] Keynote: PHP-7
PHP Experience 2016 - [Palestra] Keynote: PHP-7
 
Java+DDD+BDD+TDD=Sucesso Total
Java+DDD+BDD+TDD=Sucesso TotalJava+DDD+BDD+TDD=Sucesso Total
Java+DDD+BDD+TDD=Sucesso Total
 
Ecosistema spring a_plataforma_enterprise_jav
Ecosistema spring a_plataforma_enterprise_javEcosistema spring a_plataforma_enterprise_jav
Ecosistema spring a_plataforma_enterprise_jav
 
Criando APIs com Node e TypeScript
Criando APIs com Node e TypeScriptCriando APIs com Node e TypeScript
Criando APIs com Node e TypeScript
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
 
Floggy-IIBoot-2008-09-25
Floggy-IIBoot-2008-09-25Floggy-IIBoot-2008-09-25
Floggy-IIBoot-2008-09-25
 
Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2Phpjedi 090307090434-phpapp01 2
Phpjedi 090307090434-phpapp01 2
 

Mais de Filipe M. Silva

Deploy com segurança com GitHub Actions
Deploy com segurança com GitHub ActionsDeploy com segurança com GitHub Actions
Deploy com segurança com GitHub Actions
Filipe M. Silva
 
O que você precisa saber sobre testes unitários
O que você precisa saber sobre testes unitáriosO que você precisa saber sobre testes unitários
O que você precisa saber sobre testes unitários
Filipe M. Silva
 
Testes unitários em angular com typescript
Testes unitários em angular com typescriptTestes unitários em angular com typescript
Testes unitários em angular com typescript
Filipe M. Silva
 
Testes em uma aplicação Angular com Typescript
Testes em uma aplicação Angular com TypescriptTestes em uma aplicação Angular com Typescript
Testes em uma aplicação Angular com Typescript
Filipe M. Silva
 
Testando uma aplicação angular 2
Testando uma aplicação angular 2Testando uma aplicação angular 2
Testando uma aplicação angular 2
Filipe M. Silva
 
Slides Node Conf Brasil 2016
Slides Node Conf Brasil 2016Slides Node Conf Brasil 2016
Slides Node Conf Brasil 2016
Filipe M. Silva
 

Mais de Filipe M. Silva (6)

Deploy com segurança com GitHub Actions
Deploy com segurança com GitHub ActionsDeploy com segurança com GitHub Actions
Deploy com segurança com GitHub Actions
 
O que você precisa saber sobre testes unitários
O que você precisa saber sobre testes unitáriosO que você precisa saber sobre testes unitários
O que você precisa saber sobre testes unitários
 
Testes unitários em angular com typescript
Testes unitários em angular com typescriptTestes unitários em angular com typescript
Testes unitários em angular com typescript
 
Testes em uma aplicação Angular com Typescript
Testes em uma aplicação Angular com TypescriptTestes em uma aplicação Angular com Typescript
Testes em uma aplicação Angular com Typescript
 
Testando uma aplicação angular 2
Testando uma aplicação angular 2Testando uma aplicação angular 2
Testando uma aplicação angular 2
 
Slides Node Conf Brasil 2016
Slides Node Conf Brasil 2016Slides Node Conf Brasil 2016
Slides Node Conf Brasil 2016
 

Breve história do javascript modularizado