SlideShare uma empresa Scribd logo
1 de 35
Douglas Matoso • Front-end Developer • CI&T
A Evolução do Front-end
sli.do
#ciandttechsummit
DOUGLAS MATOSO
Front-end Developer na CI&T desde 2008
dmatoso.com
@doug2k1
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
90s: WEB SITES
Texto, imagens, links, formulários (processados no backend)
time.graphics/line/18834
LINHA DO TEMPO
Webmaster
● Layout
● Front-end
(HTML, pouco CSS, pitadas de JS)
● Backend
● Infra
● Deploy (subir no FTP?)
● Manutenção
MENINO(A) DO SITE
Dava para se safar com isto:
Este site é melhor visualizado no Internet Explorer,
com resolução 800x600 ou superior.
● 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
WEB APPLICATIONS
WEB SITES
LINHA DO TEMPO
Webdesigner Developer
A SEPARAÇÃO
Webdesigner
● Layout
● Front-end
○ HTML
○ Mais CSS
○ Mais JS
○ Flash
RESPONSÁVEL PELO VISUAL
● 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
LINHA DO TEMPO
Front-end
UX / UI
Designer
Back-end
MAIS ESPECIALIZAÇÃO
FRONT-END ROADMAP
github.com/kamranahmedse/developer-roadmap
JavaScript fora do navegador…
JavaScript no backend...
JavaScript everywhere!
NODE.JS
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
FRAMEWORKS JS… A LOT OF THEM
Adiciona novos recursos à escrita do CSS:
● Variáveis
● Funções
● Seletores aninhados
Gera CSS no final (com build tools)
CSS PRE-PROCESSORS
● Classes
● Módulos
● Arrow functions
● Iterators
● Template literals
● Promisses
● Default parameters
● Rest operator
● Destructuring
● ...
JS MODERNO - ES6/ES2015
CoffeeScript
TypeScript (tipagem estática no JS)
ClosureScript (Clojure para JS, funcional)
Elm
Kotlin
NOVAS LINGUAGENS
ES2015+, "JS do Futuro", TypeScript, Elm, etc...
ES5
(compatível com qualquer navegador)
TUDO VIRA ES5
Antes:
<script src=”jquery-1.2.1-min.js”></script>
Hoje:
“jquery”: “^1.2.1”
$ npm install
GERENCIAMENTO DE DEPENDÊNCIAS
modulecounts.com
NPM
● Relatório de cobertura
● TDD
● Integrado ao CI
Jest
TESTES AUTOMATIZADOS
● 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
FULL STACK NO MERCADO
blog.indeed.com/2017/03/21/best-jobs-united-states-2017/
DA WEB PARA OS APPS
Tecnologias web para desenvolvimento de apps mobile
(híbridos e nativos)
É 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
tableless.com.br/carreira-de-front-end-vai-morrer
Thank you!

Mais conteúdo relacionado

Mais procurados

Desenvolvimento Mobile
Desenvolvimento MobileDesenvolvimento Mobile
Desenvolvimento MobileElton Minetto
 
PXEless Discovery with Foreman
PXEless Discovery with ForemanPXEless Discovery with Foreman
PXEless Discovery with ForemanStephen Benjamin
 
Micro Frontend Platforms for Kubernetes
Micro Frontend Platforms for KubernetesMicro Frontend Platforms for Kubernetes
Micro Frontend Platforms for KubernetesEntando
 
Introdução ao Teste de Software - Uma abordagem prática
Introdução ao Teste de Software - Uma abordagem práticaIntrodução ao Teste de Software - Uma abordagem prática
Introdução ao Teste de Software - Uma abordagem práticaFabrício Campos
 
Sistema Operacional de Tempo Real (vx works)
Sistema Operacional de Tempo Real (vx works)Sistema Operacional de Tempo Real (vx works)
Sistema Operacional de Tempo Real (vx works)Jose Silva
 
Virtual machines and containers
Virtual machines and containersVirtual machines and containers
Virtual machines and containersPatrick Pierson
 
Micro frontend architecture_presentation_ssoni
Micro frontend architecture_presentation_ssoniMicro frontend architecture_presentation_ssoni
Micro frontend architecture_presentation_ssoniSandeep Soni
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoEduardo Bohrer
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com AngularElmano Cavalcanti
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebAnderson Luís Furlan
 
Introdução a Containers Docker
Introdução a Containers DockerIntrodução a Containers Docker
Introdução a Containers DockerMatheus Fidelis
 
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introduçãoAgrupamento de Escolas da Batalha
 
Programação orientada a objectos
Programação orientada a objectosProgramação orientada a objectos
Programação orientada a objectosValdinho Pereira
 
Server Virtualization
Server VirtualizationServer Virtualization
Server Virtualizationrjain51
 

Mais procurados (20)

Desenvolvimento Mobile
Desenvolvimento MobileDesenvolvimento Mobile
Desenvolvimento Mobile
 
PXEless Discovery with Foreman
PXEless Discovery with ForemanPXEless Discovery with Foreman
PXEless Discovery with Foreman
 
Micro Frontend Platforms for Kubernetes
Micro Frontend Platforms for KubernetesMicro Frontend Platforms for Kubernetes
Micro Frontend Platforms for Kubernetes
 
Introdução ao Teste de Software - Uma abordagem prática
Introdução ao Teste de Software - Uma abordagem práticaIntrodução ao Teste de Software - Uma abordagem prática
Introdução ao Teste de Software - Uma abordagem prática
 
Criação de Sites web Tutorial
Criação de Sites web TutorialCriação de Sites web Tutorial
Criação de Sites web Tutorial
 
Sistema Operacional de Tempo Real (vx works)
Sistema Operacional de Tempo Real (vx works)Sistema Operacional de Tempo Real (vx works)
Sistema Operacional de Tempo Real (vx works)
 
Virtual machines and containers
Virtual machines and containersVirtual machines and containers
Virtual machines and containers
 
Micro frontend architecture_presentation_ssoni
Micro frontend architecture_presentation_ssoniMicro frontend architecture_presentation_ssoni
Micro frontend architecture_presentation_ssoni
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Introdução a Containers Docker
Introdução a Containers DockerIntrodução a Containers Docker
Introdução a Containers Docker
 
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
 
Modelos de processos de software
Modelos de processos de softwareModelos de processos de software
Modelos de processos de software
 
Design de interação
Design de interaçãoDesign de interação
Design de interação
 
Programação orientada a objectos
Programação orientada a objectosProgramação orientada a objectos
Programação orientada a objectos
 
Server Virtualization
Server VirtualizationServer Virtualization
Server Virtualization
 
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
 
Informatica basica
Informatica basicaInformatica basica
Informatica basica
 

Semelhante a A Evolução do Front end

Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Leandro Nunes
 
Front-end o que é preciso saber?
Front-end o que é preciso saber?Front-end o que é preciso saber?
Front-end o que é preciso saber?João Praia
 
Front-End do Século XXI.I
Front-End do Século XXI.IFront-End do Século XXI.I
Front-End do Século XXI.ILuiz Oliveira
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações WebAnderson Aguiar
 
Apache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSFApache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSFBruno Borges
 
JavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistemaJavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistemaFabio Agostinho Boris
 
Performance na web, além do framework
Performance na web, além do frameworkPerformance na web, além do framework
Performance na web, além do frameworkAlexandre Cardoso
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UXEdu Agni
 
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
 
Drupal 8: desenvolvendo fora da ilha
Drupal 8: desenvolvendo fora da ilhaDrupal 8: desenvolvendo fora da ilha
Drupal 8: desenvolvendo fora da ilhaLuiz Filho
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
Web development - Como criar a web
Web development  - Como criar a webWeb development  - Como criar a web
Web development - Como criar a webHerson Leite
 
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout  Tempo Real Eventos - Javascript - Os Primeiros PassosHangout  Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout Tempo Real Eventos - Javascript - Os Primeiros PassosJackson F. de A. Mafra
 
Web Development em 2015
Web Development em 2015Web Development em 2015
Web Development em 2015Emanuel Santos
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Mozart Diniz
 

Semelhante a A Evolução do Front end (20)

Lightning Talk: Webdev who?
Lightning Talk: Webdev who?Lightning Talk: Webdev who?
Lightning Talk: Webdev who?
 
Front-end o que é preciso saber?
Front-end o que é preciso saber?Front-end o que é preciso saber?
Front-end o que é preciso saber?
 
Front-End do Século XXI.I
Front-End do Século XXI.IFront-End do Século XXI.I
Front-End do Século XXI.I
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Alta Performance em Aplicações Web
Alta Performance em Aplicações WebAlta Performance em Aplicações Web
Alta Performance em Aplicações Web
 
Apache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSFApache Wicket derruba o padrão JSF
Apache Wicket derruba o padrão JSF
 
JavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistemaJavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistema
 
Performance na web, além do framework
Performance na web, além do frameworkPerformance na web, além do framework
Performance na web, além do framework
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
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
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
 
Drupal 8: desenvolvendo fora da ilha
Drupal 8: desenvolvendo fora da ilhaDrupal 8: desenvolvendo fora da ilha
Drupal 8: desenvolvendo fora da ilha
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Web development - Como criar a web
Web development  - Como criar a webWeb development  - Como criar a web
Web development - Como criar a web
 
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout  Tempo Real Eventos - Javascript - Os Primeiros PassosHangout  Tempo Real Eventos - Javascript - Os Primeiros Passos
Hangout Tempo Real Eventos - Javascript - Os Primeiros Passos
 
Web Development em 2015
Web Development em 2015Web Development em 2015
Web Development em 2015
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?
 

A Evolução do Front end

Notas do Editor

  1. 0:01:00 evolução, estado atual, papel do profissional, sli.do
  2. 0:01:30
  3. 0:02:30 mesma página
  4. 0:03:30 web: repo de textos e imagens
  5. 0:05:00 primeiras versões das tecs e ferramentas
  6. 0:06:30 evolução da nomenclatura
  7. 0:07:00 conexão difícil, ainda poucos gastos (compras)
  8. 0:07:30 nuvem de termos
  9. 0:09:00 acesso mais fácil e rápido
  10. 0:09:30 webmails, mecanismos de busca, redes sociais, blogs
  11. 0:11:00 primeiros frameworks, browsers
  12. 0:11:30 front mais complexo, back também (mais dados, regras, usuários, segurança)
  13. 0:12:30 mais pro lado "designer", criação
  14. 0:12:45 outro marco, internet na palma da mão
  15. 0:14:15 sempre online
  16. 0:15:15 marcos: node e es6, explosão de ferramentas, evolução das tecnologias base
  17. 0:16:15 designer especialista em web, fronteiras não são bem definidas (+ designer ou + dev)
  18. 0:16:45 com o que o FE trabalha, o que ele precisa saber (base fundamental)
  19. 0:18:15 aprofundando
  20. 0:19:15 divisor de águas, JS no backend, mas causou grandes mudanças no FE
  21. 0:20:45 node permitiu todo um ferramental para o front
  22. 0:21:45 "busca de tornar o JS organizado, escalável. FWs MVC, Componentes. Piada. Está se estabilizando, com alguns frameworks apoiados por grandes empresas"
  23. 0:23:15 css evoluiu, além da própria linguagem, mas também com pre-process...
  24. 0:24:45 maior upgrade do JS, facilidades, mais OO e mais funcional, plano de evolução anual
  25. 0:26:15 influenciando na própria evolução do JS. Mas, peraí, roda no navegador?
  26. 0:27:45 Permite usar até JS do futuro (não lançado) muitas features já suportadas, evolução rápida dos navegadores
  27. 0:28:45 ex: plugin jquery de carrossel. npm install?
  28. 0:30:15 Veio junto com o Node. CLI e repositório. Módulos de front e back.
  29. 0:31:15 FE mais complexo, mais regras. e2e (Selenium, Cucumber) e unitários
  30. 0:32:15 Existe full stack? Polêmica. JS no servidor permite profissional expandir atuação.
  31. 0:33:15 Levantamento Indeed melhores jobs. Existe demanda
  32. 0:34:15 Outro caminho para o profissional atuar.
  33. 0:35:15 está em alta
  34. 0:36:45 "Provocação. Título ""click bait"". Artigo fala que tarefas repetitivas (recortar layout, conectar a uma API) serão automatizadas. Vai mudar muito (como vimos aqui), pode até mudar de nome, mas não é motivo para preocupação."
  35. 0:37:15