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.

Como encarar o desenvolvimento front-end

2,274 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

×