SlideShare une entreprise Scribd logo
1  sur  71
Télécharger pour lire hors ligne
front-end
como encarar o
desenvolvimento
jcemer.com
twitter.com/jcemer
globo.com
talentos.globo.com
2012 

#1 palestra
Eventos - do
simples ao objeto
2016a era pós 

html5 e css3
2016
✤mobile
✤performance
✤components
✤motion
✤realidade aumentada
projetos web
complexos são cada
vez mais comuns
https://twitter.com/sstephenson/status/730039913052176384
desculpe
não falarei de react
e nem mostrarei
código nesta
palestra,
esta palestra
contém apenas
algumas dicas de
um desenvolvedor
saiba que
existem
diferentes
tipos de
projetos
xdocumentos
aplicações
documentos
aplicações
coletânea de páginas
estados em uma
única página
escopos globais são
simples e eficazes 

em documentos
a {
color: #454545;
}
componentização e
modularização são
essenciais em
aplicações ou portais
de conteúdo
dependendo do
projeto, as
práticas serão
distintas
pondere bem
suas escolhas
de projeto
quando as
necessidades não
estão bem definidas,
é difícil escolher
boas soluções
https://www.lullabot.com/articles/new-and-shiny-vs-good-old-software
@brnnbrn em front trends
✤jquery
✤zeptojs
✤backbone
✤angularjs
✤meteor
✤flight
✤react
find the perfect
solution regardless
of the buzz
https://www.lullabot.com/articles/new-and-shiny-vs-good-old-software
out of style
the philosophy of
small, composable,
single-purpose
tools never goes
na maioria das
vezes, a solução
mais efetiva é a
mais simples
don't need it
you’ll know when
you need flux
if you aren’t sure if
you need it, you
https://github.com/petehunt/react-howto
deixe seu projeto
complexo apenas
quando for
necessário
preocupe-se
com a qualidade
e saúde do
código
less satisfactory
some programs must
be continually adapted 

or they become
- Lehman, 1974
requisitos e ambiente
das aplicações web
mudam com
frequência
complexityincreases
unless work is done to
maintain or reduce it
- Lehman, 1974
código cria
entropia e
apodrece
http://nomedojogo.com/2009/09/08/seu-codigo-esta-apodrecendo/
regra de ourodeixe o código
melhor que quando
você o encontrou
é inviável melhorar
código que não
tenha testes
✤low test coverage
✤fear of refactoring
✤sloppy code
✤bad design
http://blog.codeclimate.com/blog/2013/12/05/refactoring-without-good-tests/
em aplicações
legadas, escrever
testes é sempre
uma boa ideia
mudanças na
comunidade
front-end
apodrecem
seu código
✤prototype.js
✤script.aculo.us
✤mootools
✤knockoutjs
✤backbone
✤correções de bugs?
✤melhorias de
performance?
✤novas features?
alguém aqui lembra
como escrever
código utilizando
prototype.js?
manter tecnologias
ultrapassadas em
um projeto é
mancada
atualizar dependências
aos poucos é melhor
que fazer reescritas
massivas
esteja disposto
e pratique
refactoring 

de código
estude novos
approaches e
especificações
- Ted Nelson - Project Xanadu creator


bizarre structure [...]
and it has a terrible
programming language
the web is a
html, javascript e a
estilização da web
nascerem até mesmo 

sem especificações
simple enough
[the web]
succeeded because
the technology was
just
https://adactio.com/articles/10887
- Jeremy Keith
universality
the power of the web
is in its
- Tim Berners-Lee
flavor of HTML
in '93 to '94, every
browser had its own
- Tim Berners-Lee
as especificações
evoluíram para
normalizar soluções
e atender novas
necessidades
a era do pixel perfect
acabou faz algum
tempo
é possível e
oportuno aplicar
progressive
enhancement
flexbox
I work for
Booking.com,
and we support IE 7,
and I use
- Zoe Mickley ~ CSS Day
https://vimeo.com/131664957
http://www.slideshare.net/PatrickKettner1/making-modern-websites
navegadores
é possível utilizar as
mais novas features e
atender o mais antigo
dos
- Patrick Kettner ~ Modernizr
http://www.slideshare.net/PatrickKettner1/making-modern-websites
evolução dos
approaches está
mais próxima dos
standards
- Rodrigo Willrich
postcss permite
experimentar o css do
futuro hoje mesmo
https://github.com/postcss/postcss
postcss ajuda no
suporte a navegadores
antigos
ecmascript
babel permite escrever
código ecmascript e
dar suporte a
navegadores antigos
https://babeljs.io/
não fique para
trás, use novas
features
não esqueça,
o conteúdo é
protagonista
usabilidade e
acessibilidade são
conceitos que não
saíram de moda
http://jgthms.com/web-design-in-4-minutes/#content
content
the purpose of design
is to enhance the
presentation of 

the
- Jeremy Thomas
foi um prazer
obrigado

Contenu connexe

Tendances

O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endDiego Eis
 
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsWilliam Oliveira
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endDiego Eis
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?RC Comunicação
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignDiego Eis
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das GaláxiasDavidson Fellipe
 
Gutenberg: O que esperar das próximas fases
Gutenberg: O que esperar das próximas fasesGutenberg: O que esperar das próximas fases
Gutenberg: O que esperar das próximas fasesGuga Alves
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Sérgio Vilar
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front endDouglas Matoso
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
 
Construindo um Servidor Web com GO
Construindo um Servidor Web com GOConstruindo um Servidor Web com GO
Construindo um Servidor Web com GOBeto Muniz
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com PolymerStefan Horochovec
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.Edmo Jeova
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performanceAnderson Solano
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"Stefan Horochovec
 

Tendances (20)

O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Testes Automatizados
Testes AutomatizadosTestes Automatizados
Testes Automatizados
 
Você não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web appsVocê não precisa de uma sopa de letrinhas para criar web apps
Você não precisa de uma sopa de letrinhas para criar web apps
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
Gutenberg: O que esperar das próximas fases
Gutenberg: O que esperar das próximas fasesGutenberg: O que esperar das próximas fases
Gutenberg: O que esperar das próximas fases
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
A Evolução do Front end
A Evolução do Front endA Evolução do Front end
A Evolução do Front end
 
Clean Architecture
Clean ArchitectureClean Architecture
Clean Architecture
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Construindo um Servidor Web com GO
Construindo um Servidor Web com GOConstruindo um Servidor Web com GO
Construindo um Servidor Web com GO
 
SPA com CSharp
SPA com CSharpSPA com CSharp
SPA com CSharp
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
 
Engenharia de front end de alta performance
Engenharia de front end de alta performanceEngenharia de front end de alta performance
Engenharia de front end de alta performance
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 

En vedette

Trabalho Remoto Desmistificado – Front In BH 2016
Trabalho Remoto Desmistificado – Front In BH 2016Trabalho Remoto Desmistificado – Front In BH 2016
Trabalho Remoto Desmistificado – Front In BH 2016dballona
 
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React NativeTadeu Zagallo
 
Thinking metrics on React apps
Thinking metrics on React appsThinking metrics on React apps
Thinking metrics on React appsJean Carlo Emer
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)Gustavo Zimmermann
 
Material de Apoio de Algoritmo e Lógica de Programação
Material de Apoio de Algoritmo e Lógica de ProgramaçãoMaterial de Apoio de Algoritmo e Lógica de Programação
Material de Apoio de Algoritmo e Lógica de Programaçãorodfernandes
 

En vedette (6)

Trabalho Remoto Desmistificado – Front In BH 2016
Trabalho Remoto Desmistificado – Front In BH 2016Trabalho Remoto Desmistificado – Front In BH 2016
Trabalho Remoto Desmistificado – Front In BH 2016
 
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native
 
Web & Mobile
Web & MobileWeb & Mobile
Web & Mobile
 
Thinking metrics on React apps
Thinking metrics on React appsThinking metrics on React apps
Thinking metrics on React apps
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
 
Material de Apoio de Algoritmo e Lógica de Programação
Material de Apoio de Algoritmo e Lógica de ProgramaçãoMaterial de Apoio de Algoritmo e Lógica de Programação
Material de Apoio de Algoritmo e Lógica de Programação
 

Similaire à Como encarar o desenvolvimento front-end

[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...iMasters
 
Muita gestão e pouca engenharia, por onde anda o XP?
Muita gestão e pouca engenharia, por onde anda o XP?Muita gestão e pouca engenharia, por onde anda o XP?
Muita gestão e pouca engenharia, por onde anda o XP?Cristiano Schwening
 
O futuro do arquiteto e das arquiteturas Java Enterprise
O futuro do arquiteto e das arquiteturas Java EnterpriseO futuro do arquiteto e das arquiteturas Java Enterprise
O futuro do arquiteto e das arquiteturas Java EnterpriseGlobalcode
 
Conhecimentos para tomar atitude e migrar sua aplicação para asp.net core
Conhecimentos para tomar atitude e migrar sua aplicação para asp.net coreConhecimentos para tomar atitude e migrar sua aplicação para asp.net core
Conhecimentos para tomar atitude e migrar sua aplicação para asp.net coreRodrigo Kono
 
Simple singleton pattern
Simple singleton patternSimple singleton pattern
Simple singleton patternDennis Calazans
 
Introdução às metodologias ágeis de desenvolvimento de software
Introdução às metodologias ágeis de desenvolvimento de softwareIntrodução às metodologias ágeis de desenvolvimento de software
Introdução às metodologias ágeis de desenvolvimento de softwareJaime Schettini
 
Não deixe seu projeto só nas mãos do framework
Não deixe seu projeto só nas mãos do frameworkNão deixe seu projeto só nas mãos do framework
Não deixe seu projeto só nas mãos do frameworkGiuseppe Lopes
 
Introdução às metodologias ágeis
Introdução às metodologias ágeisIntrodução às metodologias ágeis
Introdução às metodologias ágeisComunidade Tá safo!
 
Introdução a Modelagem
Introdução a ModelagemIntrodução a Modelagem
Introdução a ModelagemRodrigo Branas
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
Encontrando equilíbrio do DDD enquanto sua aplicação cresce
Encontrando equilíbrio do DDD enquanto sua aplicação cresceEncontrando equilíbrio do DDD enquanto sua aplicação cresce
Encontrando equilíbrio do DDD enquanto sua aplicação cresceCarolina Karklis
 
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ...
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ....NET Core + Docker: containers e seus benefícios no deployment de aplicações ...
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ...Renato Groff
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3André Luiz Forchesatto
 
Dextra Sistemas: A linguagem PHP no modelo de Fábrica de Software
Dextra Sistemas: A linguagem PHP no modelo de Fábrica de SoftwareDextra Sistemas: A linguagem PHP no modelo de Fábrica de Software
Dextra Sistemas: A linguagem PHP no modelo de Fábrica de SoftwareDextra
 
Mapa de aprendizado Front End
Mapa de aprendizado Front EndMapa de aprendizado Front End
Mapa de aprendizado Front EndCaio Vaccaro
 
.NET Core + Docker: containers e seus benefícios no deployment de aplicações
.NET Core + Docker: containers e seus benefícios no deployment de aplicações.NET Core + Docker: containers e seus benefícios no deployment de aplicações
.NET Core + Docker: containers e seus benefícios no deployment de aplicaçõesRenato Groff
 
Frameworks de desenvolvimento web
Frameworks de desenvolvimento webFrameworks de desenvolvimento web
Frameworks de desenvolvimento webArlindo Santos
 
O que vi na QCon 2012 São Paulo
O que vi na QCon 2012 São PauloO que vi na QCon 2012 São Paulo
O que vi na QCon 2012 São PauloIsmael
 

Similaire à Como encarar o desenvolvimento front-end (20)

[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...
 
Muita gestão e pouca engenharia, por onde anda o XP?
Muita gestão e pouca engenharia, por onde anda o XP?Muita gestão e pouca engenharia, por onde anda o XP?
Muita gestão e pouca engenharia, por onde anda o XP?
 
O futuro do arquiteto e das arquiteturas Java Enterprise
O futuro do arquiteto e das arquiteturas Java EnterpriseO futuro do arquiteto e das arquiteturas Java Enterprise
O futuro do arquiteto e das arquiteturas Java Enterprise
 
Conhecimentos para tomar atitude e migrar sua aplicação para asp.net core
Conhecimentos para tomar atitude e migrar sua aplicação para asp.net coreConhecimentos para tomar atitude e migrar sua aplicação para asp.net core
Conhecimentos para tomar atitude e migrar sua aplicação para asp.net core
 
Simple singleton pattern
Simple singleton patternSimple singleton pattern
Simple singleton pattern
 
Introdução às metodologias ágeis de desenvolvimento de software
Introdução às metodologias ágeis de desenvolvimento de softwareIntrodução às metodologias ágeis de desenvolvimento de software
Introdução às metodologias ágeis de desenvolvimento de software
 
Não deixe seu projeto só nas mãos do framework
Não deixe seu projeto só nas mãos do frameworkNão deixe seu projeto só nas mãos do framework
Não deixe seu projeto só nas mãos do framework
 
Introdução às metodologias ágeis
Introdução às metodologias ágeisIntrodução às metodologias ágeis
Introdução às metodologias ágeis
 
Introdução a Modelagem
Introdução a ModelagemIntrodução a Modelagem
Introdução a Modelagem
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Aula01 introducao
Aula01 introducaoAula01 introducao
Aula01 introducao
 
Encontrando equilíbrio do DDD enquanto sua aplicação cresce
Encontrando equilíbrio do DDD enquanto sua aplicação cresceEncontrando equilíbrio do DDD enquanto sua aplicação cresce
Encontrando equilíbrio do DDD enquanto sua aplicação cresce
 
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ...
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ....NET Core + Docker: containers e seus benefícios no deployment de aplicações ...
.NET Core + Docker: containers e seus benefícios no deployment de aplicações ...
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
 
Dextra Sistemas: A linguagem PHP no modelo de Fábrica de Software
Dextra Sistemas: A linguagem PHP no modelo de Fábrica de SoftwareDextra Sistemas: A linguagem PHP no modelo de Fábrica de Software
Dextra Sistemas: A linguagem PHP no modelo de Fábrica de Software
 
Mapa de aprendizado Front End
Mapa de aprendizado Front EndMapa de aprendizado Front End
Mapa de aprendizado Front End
 
.NET Core + Docker: containers e seus benefícios no deployment de aplicações
.NET Core + Docker: containers e seus benefícios no deployment de aplicações.NET Core + Docker: containers e seus benefícios no deployment de aplicações
.NET Core + Docker: containers e seus benefícios no deployment de aplicações
 
Frameworks de desenvolvimento web
Frameworks de desenvolvimento webFrameworks de desenvolvimento web
Frameworks de desenvolvimento web
 
O que vi na QCon 2012 São Paulo
O que vi na QCon 2012 São PauloO que vi na QCon 2012 São Paulo
O que vi na QCon 2012 São Paulo
 

Como encarar o desenvolvimento front-end