Apresentado no 1º CI&T Tech Summit

1. Douglas Matoso • Front-end Developer • CI&T
A Evolução do Front-end
sli.do
#ciandttechsummit

2. DOUGLAS MATOSO
Front-end Developer na CI&T desde 2008
dmatoso.com
@doug2k1

3. EVOLUÇÃO DO QUÊ?
Front-end web development is the practice of producing HTML,
CSS and JavaScript for a website or Web Application so that a
user can see and interact with them directly. The challenge
associated with front-end development is that the tools and
techniques used to create the front end of a website change
constantly and so the developer needs to constantly be aware of
how the field is developing.
en.wikipedia.org/wiki/Front-end_web_development

4. 90s: WEB SITES
Texto, imagens, links, formulários (processados no backend)

5. time.graphics/line/18834
LINHA DO TEMPO

6. Webmaster
● Layout
● Front-end
(HTML, pouco CSS, pitadas de JS)
● Backend
● Infra
● Deploy (subir no FTP?)
● Manutenção
MENINO(A) DO SITE

7. Dava para se safar com isto:
Este site é melhor visualizado no Internet Explorer,
com resolução 800x600 ou superior.

9. ● Conteúdo gerado pelo usuário
● Layouts mais complexos
○ Animações (Flash), interações mais complexas,
usabilidade
● Áudio e vídeo
● Múltiplos navegadores
● Performance
● SEO
● Acessibilidade
2000s: WEB 2.0

10. WEB APPLICATIONS
WEB SITES

11. LINHA DO TEMPO

12. Webdesigner Developer
A SEPARAÇÃO

13. Webdesigner
● Layout
● Front-end
○ HTML
○ Mais CSS
○ Mais JS
○ Flash
RESPONSÁVEL PELO VISUAL

15. ● Popularização de smartphones, tablets
○ Ambiente mais fragmentado
● Público mais exigente
● Evolução das tecnologias
○ Touch
○ Geolocalização
○ Câmera, microfone
○ Notificações
○ HTML 5 / CSS 3
2010s: MOBILE REVOLUTION

16. LINHA DO TEMPO

17. Front-end
UX / UI
Designer
Back-end
MAIS ESPECIALIZAÇÃO

18. FRONT-END ROADMAP
github.com/kamranahmedse/developer-roadmap

20. JavaScript fora do navegador…
JavaScript no backend...
JavaScript everywhere!
NODE.JS

21. Código de desenvolvimento ⇒ código de produção
● Análise estática (JSHint, ESLint, StyleLint)
● Minificação
● Pré-processadores de CSS
● Transpilação de JS
BUILD TOOLS

22. FRAMEWORKS JS… A LOT OF THEM

23. Adiciona novos recursos à escrita do CSS:
● Variáveis
● Funções
● Seletores aninhados
Gera CSS no final (com build tools)
CSS PRE-PROCESSORS

24. ● Classes
● Módulos
● Arrow functions
● Iterators
● Template literals
● Promisses
● Default parameters
● Rest operator
● Destructuring
● ...
JS MODERNO - ES6/ES2015

25. CoffeeScript
TypeScript (tipagem estática no JS)
ClosureScript (Clojure para JS, funcional)
Elm
Kotlin
NOVAS LINGUAGENS

26. ES2015+, "JS do Futuro", TypeScript, Elm, etc...
ES5
(compatível com qualquer navegador)
TUDO VIRA ES5

27. Antes:
<script src=”jquery-1.2.1-min.js”></script>
Hoje:
“jquery”: “^1.2.1”
$ npm install
GERENCIAMENTO DE DEPENDÊNCIAS

28. modulecounts.com
NPM

29. ● Relatório de cobertura
● TDD
● Integrado ao CI
Jest
TESTES AUTOMATIZADOS

30. ● MEAN: MongoDB, Express, Angular, Node.js
● MERN: MongoDB, Express, React, Node.js
Server side rendering
● React: ReactDOMServer
● Ember: Ember Fastboot
● Vue: Vue SSR
● Angular: Angular Universal
FULL STACK

31. FULL STACK NO MERCADO
blog.indeed.com/2017/03/21/best-jobs-united-states-2017/

32. DA WEB PARA OS APPS
Tecnologias web para desenvolvimento de apps mobile
(híbridos e nativos)

33. É web, mas:
● tem ícone na home screen
● roda em tela cheia
● tem splashscreen
● funciona offline
● manda notificações
● tem acesso ao hardware
PROGRESSIVE WEB APPS

34. tableless.com.br/carreira-de-front-end-vai-morrer

35. Thank you!