Como desenvolvedores Javascript tem criado módulos ao longo do tempo e o como usar as novidades dos módulos ES6 e interfaces do Typescript

1. Breve história do
Javascript
modularizado

2. <script type="text/javascript"
src="index.js">
</script>

3. • Separation
• Composability
• Dependency management
• Namespace management
• Consistent implementation

4. • Separação
• Reuso
• Gerenciamento de dependências
• Gerenciamento de nomes
• Implementação consistente

5. Object Literal
Pattern
IIFE CommonJS AMD UMD

6. Object Literal Pattern
const Person = {
name: 'Filipe'
};
const Author = {
getName: function() {
return Person.name;
}
};

7. Prós
• Fácil de entender
• Fácil de implementar

8. Contras
• Depende de uma variável global
• Baixa reusabilidade
• Variáveis e métodos não privados
• Conflitos entre módulos

9. IIFE
Immediately Invoked Function Expression
const Author = (function(newName) {
var name = newName;
function getName() {
return name;
}
return {
getName: getName
};
})('Filipe');

10. 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

11. Contras
• Continua dependendo de uma variável global
• Uma sintaxe feia e de difícil entendimento

12. CommonJS
Modularidade no server-side
module.export = function Person(newName) {
var name = newName;
return {
name: name
}
}
ou o que o node consolidou

13. var Person = require('./person.js');
module.exports = function Author() {
function getName() {
return Person('Filipe').name;
}
return {
getName: getName
};
};

14. Prós
• Sintaxe clara e influenciou o ES6
• Variáveis com escopo limitado
• Não é possível declarar uma variável global

15. Contras
• Não funciona bem assincronamente
• Lento e pesado em devices "fracos"

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

17. Prós
• É assíncrono
• Gerenciamento de nomes facilitados

18. Contras
• Sintaxe complicada
• Sintaxe feia

19. UMD
Combina o CommonJS com o AMD

20. Prós e contras
Combina os mesmo prós e contras

21. ES6
const Person = {
name: 'Filipe'
};
export default Person;

22. import * from './person.js';
class Author {
getName() {
return Person.name;
}
}
import { name } from './person.js';
class Author {
getName() {
return name;
}
}

23. import * as Person from 'person.js';
class Author {
getName() {
return name;
}
}

24. Typescript namespace
namespace Animals {
export class Cats {
types: [
'Persian ',
'Russian'
];
}
export class Cat {
getCat() {
const cats = new Cats();
return cats.types[1];
}
}
}

25. namespace Animals {
export class Dogs {
types: [
'Dachshund',
'Bulldog',
'Boxer'
];
}
export class Dog {
getDog() {
const dogs = new Dogs();
return dogs.types[0];
}
}
}

26. const dog = new Animals.Dog();
dog.getDog(); // Dachshund
const cat = new Animals.Cat();
cat.getCat(); // Russian

27. namespace Shapes {
export namespace Polygons {
export class Triangle { }
export class Square { }
}
}
import polygons = Shapes.Polygons;
let sq = new polygons.Square();

28. 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

29. Filipe M. Silva
Javascript software developer
na
Concrete Solutions
Twitter/Instagram
@flpms
Blog
https://flpms.me