Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end na vida real

Front-end na vida real

O que faz um front-end? Quais as principais tecnologias utilizadas nessa área, como está o mercado de trabalho e como podemos encontrar a comunidade? Vamos debater sobre assuntos legais pra que você fique com vontade de conhecer um pouquinho sobre esse maravilhoso mundo.

C66863aa3cc145cf7d5ff8e1c40a7db8?s=128

Simone Amorim

July 24, 2018
Tweet

Transcript

  1. front-end na vida real

  2. S Simone Amorim Mother, WWcode Leader, Organizer of FEMUGPE, Developer

    @samorim02 @simoneas02 simoneas02.github.io
  3. Mother

  4. I love running And bike riding!

  5. I’m CSS Evangelista

  6. O que é Front-End?

  7. Definição Client Side VS Server Side

  8. Definição Client Side

  9. Definição O que faz um desenvolvedor Front-End?

  10. Definição ou melhor… Front-End Engineer UI Developer Client Side Developer

  11. Definição Vamos focar mais na função e menos no nome!

  12. Cria interfaces rápidas, adaptáveis e interativas. “ - Afonso Pacifer

  13. Como Faz?

  14. Como?

  15. Espera… O que é mesmo Como?

  16. Como?

  17. Simples assim? Como?

  18. Marcação Estilo Comportamento

  19. Marcação!

  20. Markup w3.org/html/

  21. JSX WAI-ARIA Markup

  22. HTML WAI-ARIA microdados Open Graph Twitter Cards Template engine Validações

    Padrões HTML5.1 Markup
  23. Estilo!

  24. Style w3.org/Style/CSS/

  25. Style

  26. CSS Testes Lint Metodologias de organização pré-processadores Pós processadores Animações

    Padrões CSS Layouts Resets Modularização Grids UI Frameworks Style
  27. Comportamento!

  28. Behavior TC39 github.com/tc39

  29. babeljs.io/ Behavior

  30. Behavior Javascript Ecma 2015/ES6 Diversos Testes Padrões Frameworks MV* Bibliotecas

    TDD BDD Coverage de testes Modularização Transpilers pré-processadores
  31. WorkFlow!

  32. Workflow nodejs.org/ Ambiente!

  33. Workflow git-scm.com/ Controle de versão!

  34. Workflow yarnpkg.com/ Dependências!

  35. Workflow yeoman.io/ Scaffolding!

  36. Workflow gulpjs.com/ Task runner!

  37. Workflow mochajs.org/ Tests!

  38. Workflow developer.chrome.com/devtools Debug!

  39. Workflow travis-ci.org/ Integração Continua!

  40. Workflow Deploy!

  41. BuzzWords!

  42. Você não precisa saber tudo!

  43. Áreas que você pode gostar

  44. Accessibility Áreas Visual/Motora/Testes

  45. Adaptive Web Design Áreas RWD/Cross browser/Cross device

  46. SEO Áreas Pesquisa/ferramentas/testes

  47. Performance Áreas De 80% a 90% é Responsabilidade do Front-End

  48. Segurança Áreas Cross-Site Scripting

  49. Frameworks War!

  50. War X X

  51. #UseThePlatform War

  52. Front-End Power!

  53. Progressive Web Apps afonsopacifer.github.io/react-pomodoro/ Install (Web manifest) Offline First (Service

    Workers) Progressive
  54. The Physical Web google.github.io/physical-web

  55. Web VR developers.google.com/web/fundamentals/vr/ aframe.io

  56. App Híbridos electron.atom.io

  57. Compartilhe!

  58. github.com Contribua!

  59. codepen.io Divirta-se!

  60. Comunidade!

  61. Eventos facebook.com/femugpe/

  62. Eventos facebook.com/femugpe/

  63. Eventos codeinthedark.com.br/

  64. Mercado de Trabalho!

  65. Mercado github.com/frontendbr/vagas

  66. Como Começar?

  67. github.com/frontendbr/forum Baby steps

  68. github.com/training-center Mentoria! Baby steps

  69. Baby steps

  70. Baby steps github.com/kamranahmedse/developer-roadmap

  71. Jogue o jogo segundo as regras, não segundo as outras

    pessoas jogam. “ - Afonso Pacifer
  72. Não deixe o medo de jogar impedir que você jogue!

    “ - Raphael Amorim
  73. Obrigada! @samorim02 @simoneas02 simoneas02.github.io