Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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-...
@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-w...
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://ww...
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
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Como encarar o desenvolvimento front-end
Upcoming SlideShare
Loading in …5
×

Como encarar o desenvolvimento front-end

2,241 views

Published on

A todo tempo surgem novas formas de pensar e estruturar interfaces para a Internet. Esta palestra toma um olhar crítico a respeito de ferramentas, técnicas e código front-end em geral. Nosso objetivo será aprender a direcionar esforços para alcançar melhores resultados.

Published in: Technology

Como encarar o desenvolvimento front-end

  1. 1. front-end como encarar o desenvolvimento
  2. 2. jcemer.com twitter.com/jcemer
  3. 3. globo.com talentos.globo.com
  4. 4. 2012 
 #1 palestra Eventos - do simples ao objeto
  5. 5. 2016a era pós 
 html5 e css3
  6. 6. 2016 ✤mobile ✤performance ✤components ✤motion ✤realidade aumentada
  7. 7. projetos web complexos são cada vez mais comuns
  8. 8. https://twitter.com/sstephenson/status/730039913052176384
  9. 9. desculpe não falarei de react e nem mostrarei código nesta palestra,
  10. 10. esta palestra contém apenas algumas dicas de um desenvolvedor
  11. 11. saiba que existem diferentes tipos de projetos
  12. 12. xdocumentos aplicações
  13. 13. documentos aplicações coletânea de páginas estados em uma única página
  14. 14. escopos globais são simples e eficazes 
 em documentos a { color: #454545; }
  15. 15. componentização e modularização são essenciais em aplicações ou portais de conteúdo
  16. 16. dependendo do projeto, as práticas serão distintas
  17. 17. pondere bem suas escolhas de projeto
  18. 18. 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
  19. 19. @brnnbrn em front trends
  20. 20. ✤jquery ✤zeptojs ✤backbone ✤angularjs ✤meteor ✤flight ✤react
  21. 21. find the perfect solution regardless of the buzz https://www.lullabot.com/articles/new-and-shiny-vs-good-old-software
  22. 22. out of style the philosophy of small, composable, single-purpose tools never goes
  23. 23. na maioria das vezes, a solução mais efetiva é a mais simples
  24. 24. 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
  25. 25. deixe seu projeto complexo apenas quando for necessário
  26. 26. preocupe-se com a qualidade e saúde do código
  27. 27. less satisfactory some programs must be continually adapted 
 or they become - Lehman, 1974
  28. 28. requisitos e ambiente das aplicações web mudam com frequência
  29. 29. complexityincreases unless work is done to maintain or reduce it - Lehman, 1974
  30. 30. código cria entropia e apodrece http://nomedojogo.com/2009/09/08/seu-codigo-esta-apodrecendo/
  31. 31. regra de ourodeixe o código melhor que quando você o encontrou
  32. 32. é inviável melhorar código que não tenha testes
  33. 33. ✤low test coverage ✤fear of refactoring ✤sloppy code ✤bad design http://blog.codeclimate.com/blog/2013/12/05/refactoring-without-good-tests/
  34. 34. em aplicações legadas, escrever testes é sempre uma boa ideia
  35. 35. mudanças na comunidade front-end apodrecem seu código
  36. 36. ✤prototype.js ✤script.aculo.us ✤mootools ✤knockoutjs ✤backbone
  37. 37. ✤correções de bugs? ✤melhorias de performance? ✤novas features?
  38. 38. alguém aqui lembra como escrever código utilizando prototype.js?
  39. 39. manter tecnologias ultrapassadas em um projeto é mancada
  40. 40. atualizar dependências aos poucos é melhor que fazer reescritas massivas
  41. 41. esteja disposto e pratique refactoring 
 de código
  42. 42. estude novos approaches e especificações
  43. 43. - Ted Nelson - Project Xanadu creator 
 bizarre structure [...] and it has a terrible programming language the web is a
  44. 44. html, javascript e a estilização da web nascerem até mesmo 
 sem especificações
  45. 45. simple enough [the web] succeeded because the technology was just https://adactio.com/articles/10887 - Jeremy Keith
  46. 46. universality the power of the web is in its - Tim Berners-Lee
  47. 47. flavor of HTML in '93 to '94, every browser had its own - Tim Berners-Lee
  48. 48. as especificações evoluíram para normalizar soluções e atender novas necessidades
  49. 49. a era do pixel perfect acabou faz algum tempo
  50. 50. é possível e oportuno aplicar progressive enhancement
  51. 51. flexbox I work for Booking.com, and we support IE 7, and I use - Zoe Mickley ~ CSS Day https://vimeo.com/131664957
  52. 52. http://www.slideshare.net/PatrickKettner1/making-modern-websites
  53. 53. 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
  54. 54. evolução dos approaches está mais próxima dos standards - Rodrigo Willrich
  55. 55. postcss permite experimentar o css do futuro hoje mesmo https://github.com/postcss/postcss
  56. 56. postcss ajuda no suporte a navegadores antigos
  57. 57. ecmascript
  58. 58. babel permite escrever código ecmascript e dar suporte a navegadores antigos https://babeljs.io/
  59. 59. não fique para trás, use novas features
  60. 60. não esqueça, o conteúdo é protagonista
  61. 61. usabilidade e acessibilidade são conceitos que não saíram de moda
  62. 62. http://jgthms.com/web-design-in-4-minutes/#content
  63. 63. content the purpose of design is to enhance the presentation of 
 the - Jeremy Thomas
  64. 64. foi um prazer obrigado

×