SlideShare uma empresa Scribd logo
Webpack
A evolução do asset pipeline
Aryel Tupinambá
FrontInVale 2016
O que é essa lightning talk?
SOBRE O QUE VOU FALAR:
- O que o Webpack faz
- O que ele não faz
- Por que você deve dar a mínima
- Quais os problemas com ele
- Links de onde correr atrás
SOBRE O QUE NÃO VOU FALAR
- Ensinar como usar o Webpack
- Dizer como fazer X ou Y com o Webpack
- Comparar o Webpack com outras
ferramentas
- Repetir trechos de documentação
O que é esse tal de Webpack?
"Module Bundler"; asset pipeline on steroids
src/math.js
src/increment.js
src/main.js
dist/output.js
src/math.js
src/increment.js
src/main.js
dist/output.js
Export no estilo CommonJS
Require indicando uma
dependência
Arquivo principal, carrega
uma dependência
Arquivo compilado pelo
Webpack, com as
dependências recursivas
compiladas na ordem correta
Permite carregar dependências de
Sass/CSS do NPM
Carrega arquivos e permite
que você customize, no
Webpack, regras de
otimização
Processa SVG em PNG
Empacota arquivos JSON em
dependências compatíveis
com "require"
Empacota e carrega fontes
Inclui um arquivo Sass no módulo
JS
Mas o Webpack faz...
… Sass?
… Compass?
… ES6?
… TypeScript?
… Spritesheets?
… JSON / XML?
… Less?
… Stylus?
… AngularJS?
… ReactJS?
… CoffeeScript?
… Jade?
… Markdown?
… Jinja?
… Smarty?
… Swagger?
… Twig?
… Bootstrap?
Mas o Webpack faz...
… Sass?
… Compass?
… ES6?
… TypeScript?
… Spritesheets?
… JSON / XML?
… Less?
… Stylus?
… AngularJS?
… ReactJS?
… CoffeeScript?
… Jade?
… Markdown?
… Jinja?
… Smarty?
… Swagger?
… Twig?
… Bootstrap?
Como funciona a mágica do Webpack?
Plugins
● Funcionalidades do
Webpack
● Acesso ao processo de
pipelining e packing
Ex: UglifyJS, BannerPlugin,
NgAnnotate, ImageMin,
HtmlMinify, AngularPlugin,
I18nPlugin ...
Loaders
● Extendem a capacidade do
Webpack de carregar e
processar arquivos
● Pode exigir o carregamento
de um plugin
Ex: script, file, url, json, base64,
xml, to-string, includes, combines,
image, svg-sprite, polymer, zip-it,
s3 ...
Entry-point da aplicação (deve
conter os requires de tudo que deve
ser "empacotado")
Loaders: formados por um test
("quais arquivos aplicar?") e uma
série de loaders ("quais loaders
processarão esses arquivos?")
Loaders podem ser enfileirados, da
direita para a esquerda, formando,
literalmente, um "pipeline"
Alguns loaders podem especificar
"queries", dizendo como processar
determinados assets
Por que eu deveria me importar?
É o ponto culminante da
evolução das ferramentas de
compilação e asset pipeline
Acaba com um grande overhead
mental de gerenciar o assets e
dependências de JS, SCSS, etc
Deixa o desenvolvimento web
divertido de novo, e tão fluído
quanto o back-end
Me interessei, onde eu vejo mais disso aí?
Webpack Module Bundler
http://webpack.github.io/
Recomendo a leitura do "Getting started" e dos tutoriais
para entender como editar o webpack.config e
configurar os loaders
Webpack Beginner's Guide por Nader Dabit
https://medium.com/@dabit3/beginner-s-guide-to-
webpack-b1f1a3638460
Leia esse cara antes de começar a montar seu
workflow, vai te salvar algumas boas horas de quebrar a
cabeça
Practical Examples by Julien Renaux
http://julienrenaux.fr/2015/03/30/introduction-to-
webpack-with-practical-examples/
Leia esse cara antes de começar a montar seu
workflow, vai te salvar algumas boas horas de quebrar a
cabeça
Webpack - List of Loaders
https://github.com/webpack/docs/wiki/list-of-loaders
Vale passar o olho aqui para ver tudo que dá pra fazer
com os loaders já bem maduros, antes de começar a
montar seu workflow.
Obrigado!
Now go and build something awesome!
E-mail / Hangouts:
aryel.tupinamba@lqdi.net
Facebook:
http://facebook.com/aryel.tupinamba
Twitter:
http://twitter.com/DfKimera
LinkedIn:
http://linkedin.com/in/aryeltupinamba
Slides da palestra:
http://slideshare.net/aryeltupinamba
http://lqdi.net

Mais conteúdo relacionado

Mais procurados

Dicas para Turbinar o servidor de Aplicações JBoss 7
Dicas para Turbinar o servidor de Aplicações JBoss 7Dicas para Turbinar o servidor de Aplicações JBoss 7
Dicas para Turbinar o servidor de Aplicações JBoss 7
Claudio Miranda
 
Desenvolvimento web em java com JSP e Servlets
Desenvolvimento web em java com JSP e ServletsDesenvolvimento web em java com JSP e Servlets
Desenvolvimento web em java com JSP e Servlets
Igo Coelho
 
Sqlite - Introdução
Sqlite - IntroduçãoSqlite - Introdução
Sqlite - Introdução
Joao Johanes
 
Web seminario varnish
Web seminario varnishWeb seminario varnish
Web seminario varnish
Dell Technologies
 
Frontend (RailsMG)
Frontend (RailsMG)Frontend (RailsMG)
Frontend (RailsMG)
Daniel Lopes
 
Otimizacao de websites em PHP
Otimizacao de websites em PHPOtimizacao de websites em PHP
Otimizacao de websites em PHP
Felipe Ribeiro
 
Cloud Mysql e MariaDB em alta performance
Cloud Mysql e MariaDB em alta performanceCloud Mysql e MariaDB em alta performance
Cloud Mysql e MariaDB em alta performance
Saveincloud
 
Desenvolvendo uma aplicacao Full Javascript
Desenvolvendo uma aplicacao Full JavascriptDesenvolvendo uma aplicacao Full Javascript
Desenvolvendo uma aplicacao Full Javascript
Denis Vieira
 
Instalação CakePHP 2.2.3
Instalação CakePHP 2.2.3Instalação CakePHP 2.2.3
Instalação CakePHP 2.2.3
Maurício Barfknecht
 
Principais Tecnologias WEB
Principais Tecnologias WEBPrincipais Tecnologias WEB
Principais Tecnologias WEB
Softdesign Agência Web
 
Entrega ebook-gratis
Entrega ebook-gratisEntrega ebook-gratis
Entrega ebook-gratis
Rodrigo Mattos
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
Daniel Brandão
 
Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5
Lucas Augusto Carvalho
 
Integrando sua App ao Mundo via REST/JSON
Integrando sua App ao Mundo via REST/JSONIntegrando sua App ao Mundo via REST/JSON
Integrando sua App ao Mundo via REST/JSON
Mario Guedes
 
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
Nícholas André
 
JBoss-WildFly - Avançado
JBoss-WildFly - AvançadoJBoss-WildFly - Avançado
JBoss-WildFly - Avançado
Adriano Schmidt
 
Introdução à Servlets e JSP
Introdução à Servlets e JSPIntrodução à Servlets e JSP
Introdução à Servlets e JSP
ledsifes
 
WildFly Avançado - TDC Floripa 2015
WildFly Avançado - TDC Floripa 2015WildFly Avançado - TDC Floripa 2015
WildFly Avançado - TDC Floripa 2015
Adriano Schmidt
 
PORTUGUESE SquashBrochure
PORTUGUESE SquashBrochurePORTUGUESE SquashBrochure
PORTUGUESE SquashBrochure
Andr Moura
 
PHP FrameWARks - CakePHP
PHP FrameWARks - CakePHPPHP FrameWARks - CakePHP
PHP FrameWARks - CakePHP
Marcio Albuquerque
 

Mais procurados (20)

Dicas para Turbinar o servidor de Aplicações JBoss 7
Dicas para Turbinar o servidor de Aplicações JBoss 7Dicas para Turbinar o servidor de Aplicações JBoss 7
Dicas para Turbinar o servidor de Aplicações JBoss 7
 
Desenvolvimento web em java com JSP e Servlets
Desenvolvimento web em java com JSP e ServletsDesenvolvimento web em java com JSP e Servlets
Desenvolvimento web em java com JSP e Servlets
 
Sqlite - Introdução
Sqlite - IntroduçãoSqlite - Introdução
Sqlite - Introdução
 
Web seminario varnish
Web seminario varnishWeb seminario varnish
Web seminario varnish
 
Frontend (RailsMG)
Frontend (RailsMG)Frontend (RailsMG)
Frontend (RailsMG)
 
Otimizacao de websites em PHP
Otimizacao de websites em PHPOtimizacao de websites em PHP
Otimizacao de websites em PHP
 
Cloud Mysql e MariaDB em alta performance
Cloud Mysql e MariaDB em alta performanceCloud Mysql e MariaDB em alta performance
Cloud Mysql e MariaDB em alta performance
 
Desenvolvendo uma aplicacao Full Javascript
Desenvolvendo uma aplicacao Full JavascriptDesenvolvendo uma aplicacao Full Javascript
Desenvolvendo uma aplicacao Full Javascript
 
Instalação CakePHP 2.2.3
Instalação CakePHP 2.2.3Instalação CakePHP 2.2.3
Instalação CakePHP 2.2.3
 
Principais Tecnologias WEB
Principais Tecnologias WEBPrincipais Tecnologias WEB
Principais Tecnologias WEB
 
Entrega ebook-gratis
Entrega ebook-gratisEntrega ebook-gratis
Entrega ebook-gratis
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5
 
Integrando sua App ao Mundo via REST/JSON
Integrando sua App ao Mundo via REST/JSONIntegrando sua App ao Mundo via REST/JSON
Integrando sua App ao Mundo via REST/JSON
 
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
WordPress Multisite: Desenvolvendo Portais com Sites Interligados.
 
JBoss-WildFly - Avançado
JBoss-WildFly - AvançadoJBoss-WildFly - Avançado
JBoss-WildFly - Avançado
 
Introdução à Servlets e JSP
Introdução à Servlets e JSPIntrodução à Servlets e JSP
Introdução à Servlets e JSP
 
WildFly Avançado - TDC Floripa 2015
WildFly Avançado - TDC Floripa 2015WildFly Avançado - TDC Floripa 2015
WildFly Avançado - TDC Floripa 2015
 
PORTUGUESE SquashBrochure
PORTUGUESE SquashBrochurePORTUGUESE SquashBrochure
PORTUGUESE SquashBrochure
 
PHP FrameWARks - CakePHP
PHP FrameWARks - CakePHPPHP FrameWARks - CakePHP
PHP FrameWARks - CakePHP
 

Destaque

Конкурсная работа «Столица событийного туризма»
Конкурсная работа   «Столица событийного туризма»Конкурсная работа   «Столица событийного туризма»
Конкурсная работа «Столица событийного туризма»
Светлана Воздвиженская
 
Canada student Visa
Canada student VisaCanada student Visa
Canada student Visa
Future Link Consultants
 
Vyziva a reprodukcia March 22 2010
Vyziva a reprodukcia March 22 2010 Vyziva a reprodukcia March 22 2010
Vyziva a reprodukcia March 22 2010 miloshaa
 
Pandey Classes Faculty Members
Pandey Classes Faculty MembersPandey Classes Faculty Members
Pandey Classes Faculty Members
pandeyclasses
 
Storyboard
StoryboardStoryboard
Storyboard
ZoeYanz
 
Using Mobility to Nurture Customer Loyalty
Using Mobility to Nurture Customer LoyaltyUsing Mobility to Nurture Customer Loyalty
Using Mobility to Nurture Customer Loyalty
SMART Service Desk
 
Wedding Invitation
Wedding InvitationWedding Invitation
Wedding Invitation
psychoticseph
 
Nuevas tics
Nuevas ticsNuevas tics
Nuevas tics
Diannitha Hoyos G
 
отчет за 2013 год
отчет за 2013 годотчет за 2013 год
отчет за 2013 год
Светлана Воздвиженская
 
English inmersion 2011
English inmersion 2011English inmersion 2011
English inmersion 2011
kenjabib
 
Technology in the classroom
Technology in the classroomTechnology in the classroom
Technology in the classroom
lonifife
 
20120717 role of dna to promote cdm
20120717 role of dna to promote cdm20120717 role of dna to promote cdm
20120717 role of dna to promote cdm
Tsendsuren Batsuuri
 
VRaptor4 & plugins
VRaptor4 & pluginsVRaptor4 & plugins
VRaptor4 & plugins
Leonardo Wolter
 
Confederation college ppt
Confederation college pptConfederation college ppt
Confederation college ppt
Future Link Consultants
 
English inmersion 2011
English inmersion 2011English inmersion 2011
English inmersion 2011
kenjabib
 
Test 2 study guide
Test 2 study guideTest 2 study guide
Test 2 study guide
Zhariff Zabidi
 
Public Lecture "City Identity and City Branding: Case of Kharkov"
Public Lecture "City Identity and City Branding: Case of Kharkov"Public Lecture "City Identity and City Branding: Case of Kharkov"
Public Lecture "City Identity and City Branding: Case of Kharkov"
Oleksiy Musiyezdov
 

Destaque (20)

Informe de gestión y acta de empalme
Informe de gestión y acta de empalmeInforme de gestión y acta de empalme
Informe de gestión y acta de empalme
 
Конкурсная работа «Столица событийного туризма»
Конкурсная работа   «Столица событийного туризма»Конкурсная работа   «Столица событийного туризма»
Конкурсная работа «Столица событийного туризма»
 
Canada student Visa
Canada student VisaCanada student Visa
Canada student Visa
 
рцо «арсенал»
рцо «арсенал»рцо «арсенал»
рцо «арсенал»
 
Vyziva a reprodukcia March 22 2010
Vyziva a reprodukcia March 22 2010 Vyziva a reprodukcia March 22 2010
Vyziva a reprodukcia March 22 2010
 
Pandey Classes Faculty Members
Pandey Classes Faculty MembersPandey Classes Faculty Members
Pandey Classes Faculty Members
 
Education Mela Canada
Education Mela CanadaEducation Mela Canada
Education Mela Canada
 
Storyboard
StoryboardStoryboard
Storyboard
 
Using Mobility to Nurture Customer Loyalty
Using Mobility to Nurture Customer LoyaltyUsing Mobility to Nurture Customer Loyalty
Using Mobility to Nurture Customer Loyalty
 
Wedding Invitation
Wedding InvitationWedding Invitation
Wedding Invitation
 
Nuevas tics
Nuevas ticsNuevas tics
Nuevas tics
 
отчет за 2013 год
отчет за 2013 годотчет за 2013 год
отчет за 2013 год
 
English inmersion 2011
English inmersion 2011English inmersion 2011
English inmersion 2011
 
Technology in the classroom
Technology in the classroomTechnology in the classroom
Technology in the classroom
 
20120717 role of dna to promote cdm
20120717 role of dna to promote cdm20120717 role of dna to promote cdm
20120717 role of dna to promote cdm
 
VRaptor4 & plugins
VRaptor4 & pluginsVRaptor4 & plugins
VRaptor4 & plugins
 
Confederation college ppt
Confederation college pptConfederation college ppt
Confederation college ppt
 
English inmersion 2011
English inmersion 2011English inmersion 2011
English inmersion 2011
 
Test 2 study guide
Test 2 study guideTest 2 study guide
Test 2 study guide
 
Public Lecture "City Identity and City Branding: Case of Kharkov"
Public Lecture "City Identity and City Branding: Case of Kharkov"Public Lecture "City Identity and City Branding: Case of Kharkov"
Public Lecture "City Identity and City Branding: Case of Kharkov"
 

Semelhante a FrontInVale 2016: Webpack - A evolução do asset pipeline (Lightning Talk)

Java Web Dev Introdução
Java Web Dev IntroduçãoJava Web Dev Introdução
Java Web Dev Introdução
Marcio Marinho
 
Desenvolvendo aplicações Web escaláveis
Desenvolvendo aplicações Web escaláveisDesenvolvendo aplicações Web escaláveis
Desenvolvendo aplicações Web escaláveis
elliando dias
 
De 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuáriosDe 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuários
Felipe Klerk Signorini
 
Curso de Java (Parte 7) Web Application
Curso de Java (Parte 7) Web ApplicationCurso de Java (Parte 7) Web Application
Curso de Java (Parte 7) Web Application
Mario Sergio
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Alexandre Tarifa
 
React nos Trilhos
React nos TrilhosReact nos Trilhos
React nos Trilhos
John Carneiro
 
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse VirgoModularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Regis Machado
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day Workshop
Diego Sana
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
iMasters
 
Cakephp 2.0 - O que mudou
Cakephp 2.0 - O que mudouCakephp 2.0 - O que mudou
Cakephp 2.0 - O que mudou
Felipe Vargas Rigo
 
Construindo sites e sistemas com WordPress
Construindo sites e sistemas com WordPressConstruindo sites e sistemas com WordPress
Construindo sites e sistemas com WordPress
Leo Baiano
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Arlindo Santos
 
Cake Php
Cake PhpCake Php
Cake Php
Laura Lopes
 
TDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoTDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direito
Cezinha Anjos
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
Guga Alves
 
Curso asp - basico
Curso   asp - basicoCurso   asp - basico
Curso asp - basico
Regisnaldo Alencar
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Daniel Makiyama
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
Rodrigo Urubatan
 
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação WebDjango Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
antonio sérgio nogueira
 
1409243945064
14092439450641409243945064
1409243945064
Fábio Junior
 

Semelhante a FrontInVale 2016: Webpack - A evolução do asset pipeline (Lightning Talk) (20)

Java Web Dev Introdução
Java Web Dev IntroduçãoJava Web Dev Introdução
Java Web Dev Introdução
 
Desenvolvendo aplicações Web escaláveis
Desenvolvendo aplicações Web escaláveisDesenvolvendo aplicações Web escaláveis
Desenvolvendo aplicações Web escaláveis
 
De 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuáriosDe 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuários
 
Curso de Java (Parte 7) Web Application
Curso de Java (Parte 7) Web ApplicationCurso de Java (Parte 7) Web Application
Curso de Java (Parte 7) Web Application
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
React nos Trilhos
React nos TrilhosReact nos Trilhos
React nos Trilhos
 
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse VirgoModularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
Modularidade na Web com Java: Desenvolvimento OSGI Web com Eclipse Virgo
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day Workshop
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
Cakephp 2.0 - O que mudou
Cakephp 2.0 - O que mudouCakephp 2.0 - O que mudou
Cakephp 2.0 - O que mudou
 
Construindo sites e sistemas com WordPress
Construindo sites e sistemas com WordPressConstruindo sites e sistemas com WordPress
Construindo sites e sistemas com WordPress
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
 
Cake Php
Cake PhpCake Php
Cake Php
 
TDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direitoTDC 2015 - Rails & Javascript: faça isso direito
TDC 2015 - Rails & Javascript: faça isso direito
 
Otimização Front-end para WordPress
Otimização Front-end para WordPressOtimização Front-end para WordPress
Otimização Front-end para WordPress
 
Curso asp - basico
Curso   asp - basicoCurso   asp - basico
Curso asp - basico
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação WebDjango Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
Django Módulo Básico Parte I - Desenvolvimento de uma aplicação Web
 
1409243945064
14092439450641409243945064
1409243945064
 

FrontInVale 2016: Webpack - A evolução do asset pipeline (Lightning Talk)

  • 1. Webpack A evolução do asset pipeline Aryel Tupinambá FrontInVale 2016
  • 2. O que é essa lightning talk? SOBRE O QUE VOU FALAR: - O que o Webpack faz - O que ele não faz - Por que você deve dar a mínima - Quais os problemas com ele - Links de onde correr atrás SOBRE O QUE NÃO VOU FALAR - Ensinar como usar o Webpack - Dizer como fazer X ou Y com o Webpack - Comparar o Webpack com outras ferramentas - Repetir trechos de documentação
  • 3. O que é esse tal de Webpack? "Module Bundler"; asset pipeline on steroids
  • 5. src/math.js src/increment.js src/main.js dist/output.js Export no estilo CommonJS Require indicando uma dependência Arquivo principal, carrega uma dependência Arquivo compilado pelo Webpack, com as dependências recursivas compiladas na ordem correta
  • 6. Permite carregar dependências de Sass/CSS do NPM Carrega arquivos e permite que você customize, no Webpack, regras de otimização Processa SVG em PNG Empacota arquivos JSON em dependências compatíveis com "require" Empacota e carrega fontes Inclui um arquivo Sass no módulo JS
  • 7. Mas o Webpack faz... … Sass? … Compass? … ES6? … TypeScript? … Spritesheets? … JSON / XML? … Less? … Stylus? … AngularJS? … ReactJS? … CoffeeScript? … Jade? … Markdown? … Jinja? … Smarty? … Swagger? … Twig? … Bootstrap?
  • 8. Mas o Webpack faz... … Sass? … Compass? … ES6? … TypeScript? … Spritesheets? … JSON / XML? … Less? … Stylus? … AngularJS? … ReactJS? … CoffeeScript? … Jade? … Markdown? … Jinja? … Smarty? … Swagger? … Twig? … Bootstrap?
  • 9. Como funciona a mágica do Webpack? Plugins ● Funcionalidades do Webpack ● Acesso ao processo de pipelining e packing Ex: UglifyJS, BannerPlugin, NgAnnotate, ImageMin, HtmlMinify, AngularPlugin, I18nPlugin ... Loaders ● Extendem a capacidade do Webpack de carregar e processar arquivos ● Pode exigir o carregamento de um plugin Ex: script, file, url, json, base64, xml, to-string, includes, combines, image, svg-sprite, polymer, zip-it, s3 ...
  • 10. Entry-point da aplicação (deve conter os requires de tudo que deve ser "empacotado") Loaders: formados por um test ("quais arquivos aplicar?") e uma série de loaders ("quais loaders processarão esses arquivos?") Loaders podem ser enfileirados, da direita para a esquerda, formando, literalmente, um "pipeline" Alguns loaders podem especificar "queries", dizendo como processar determinados assets
  • 11. Por que eu deveria me importar? É o ponto culminante da evolução das ferramentas de compilação e asset pipeline Acaba com um grande overhead mental de gerenciar o assets e dependências de JS, SCSS, etc Deixa o desenvolvimento web divertido de novo, e tão fluído quanto o back-end
  • 12. Me interessei, onde eu vejo mais disso aí? Webpack Module Bundler http://webpack.github.io/ Recomendo a leitura do "Getting started" e dos tutoriais para entender como editar o webpack.config e configurar os loaders Webpack Beginner's Guide por Nader Dabit https://medium.com/@dabit3/beginner-s-guide-to- webpack-b1f1a3638460 Leia esse cara antes de começar a montar seu workflow, vai te salvar algumas boas horas de quebrar a cabeça Practical Examples by Julien Renaux http://julienrenaux.fr/2015/03/30/introduction-to- webpack-with-practical-examples/ Leia esse cara antes de começar a montar seu workflow, vai te salvar algumas boas horas de quebrar a cabeça Webpack - List of Loaders https://github.com/webpack/docs/wiki/list-of-loaders Vale passar o olho aqui para ver tudo que dá pra fazer com os loaders já bem maduros, antes de começar a montar seu workflow.
  • 13. Obrigado! Now go and build something awesome! E-mail / Hangouts: aryel.tupinamba@lqdi.net Facebook: http://facebook.com/aryel.tupinamba Twitter: http://twitter.com/DfKimera LinkedIn: http://linkedin.com/in/aryeltupinamba Slides da palestra: http://slideshare.net/aryeltupinamba http://lqdi.net