Modularizando seu código com Requirejs

Charles Viegascharles.viegas@codate.com.br

@charlesviegas

Sobre mim

• Sócio e consultor da Codate• Mais de 10 anos de experiência• Conhecimentos– Javascript– Java– Arquitetura de Software– SOA e BPM

<script src="/assets/js/lib/jquery-1.7.1.min.js"></script><script src="/assets/js/lib/jquery-ui-1.8.17.custom.min.js"></script><script src="/assets/js/global.js"></script><script src="/assets/js/breaking-news.js"></script><script src="/assets/js/lib/jquery.colorbox.js"></script><script src="/assets/js/modal.js"></script><script src="http://use.typekit.com/did3rrm.js"></script><!--[if lt IE 9]> <script src="/assets/js/lib/cssSandpaper/EventHelpers.js"></script> <script src="/assets/js/lib/cssSandpaper/cssQuery-p.js"></script> <script src="/assets/js/lib/cssSandpaper/jcoglan.com/sylvester.js"></script> <script src="/assets/js/lib/selectivizr-min.js"></script><![endif]--><script src="/assets/js/lib/bgpos.js"></script><script src="http://w.sharethis.com/button/buttons.js"></script><script src="/assets/js/lib/yepnope.css-prefix.js"></script><script src="/assets/js/feature-carousel.js"></script><script src="/assets/js/dropdown.js"></script><script src="/assets/js/dropdown.js"></script><script src="/assets/js/dropdown.js"></script><script src="/assets/js/dropdown.js"></script>

Conhece?

Muitos módulos

• Um arquivo por módulo• Problemas de performance• Carregamento assíncrono?

Dependências complexas

• Qual a ordem de carregamento dos módulos?• Difícil de saber a ordem de cabeça

RequireJS

• Deixa claras as dependências• Evita globais• Reduz o acomplamento• Carrega scripts sobre demanda

Uso

<script src=“require.js” data-main=“main”></script>

main.js

require(["app"], function(app) { app.init();

});

app.js

define(["lib/account", "lib/session"], function (account, session) { return { init: function () {

// Faz alguma coisa }

}; });

Definindo um módulo

define( // Opcional, default é o nome do arquivo. nomeModulo, // Opcional, array com nome das dependências. dependencias, // Os parâmetros contém as refs das dependências. function(params){

});

Otimização

• Combina vários arquivos•Minify• r.js

https://github.com/charlesviegas/requirejs.git

www.codate.com.br/blogs

Obrigado!