JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais

Slide 1

Slide 1 text

O perfil do Desenvolvedor Front End das atualidades mais atuais Vai ter JavaScript sim! E se reclamar vai ter até React! - Não, pera...

Slide 2

Slide 2 text

William de Oliveira Desenvolvedor Front End no Viva Decora (VivaReal) Não gosto de MacBook. http://woliveiras.com.br/about/

Slide 3

Slide 3 text

Motivação “Outra coisa que tem dado o que falar são as vagas que cobram muito mais JS do que qualquer outra tecnologia de Front, o que acham de sentarmos para conversar sobre isso?” William Oliveira - http://abc.femug.com/t/o-perfil-do-desenvolvedor-front-end-atual/

Slide 4

Slide 4 text

Meu objetivo Tentar te convencer que JS é coisa do Front Ender sim e você precisa aprender urgente (se ainda não sabe). Desmistificar o que um Back Ender faz. Te convencer que você não é o fodelão, pica das galáxia (erro proposital) por ter muito conhecimento em JavaScript. William Oliveira - http://abc.femug.com/t/o-perfil-do-desenvolvedor-front-end-atual/

Slide 5

Slide 5 text

Por que diabos as empresas querem um cara que manje tanto de JavaScript?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Vamos voltar um pouco no passado - rapidinho, prometo

Slide 8

Slide 8 text

Como funcionava uma página web antigamente?

Slide 9

Slide 9 text

E se o usuário clicasse em um link ou desejasse consumir mais conteúdo?

Slide 10

Slide 10 text

O que tinhamos com isso?

Slide 11

Slide 11 text

Páginas lentas (culpa do Banco de Dados ou do Back End) http://imasters.com.br/banco-de-dados/databasecast-65-front-end-back-end-e-dba

Slide 12

Slide 12 text

Maior consumo de banda/trafego https://d36cz9buwru1tt.cloudfront.net/AWS_Pricing_Overview.pdf

Slide 13

Slide 13 text

Esse tipo de coisa

Slide 14

Slide 14 text

Mas ai veio um tal de Ajax sarvá nois! ;P https://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)

Slide 15

Slide 15 text

Muita magia cara…

Slide 16

Slide 16 text

Curiosidade para os amantes (SQN) da Microsoft Em 1998, o primeiro componente XMLHTTP foi implementado no Outlook Web O Google só veio utilizar Ajax no Gmail em 2004. https://en.wikipedia.org/wiki/Ajax_(programming)#History

Slide 17

Slide 17 text

Slide 18

Slide 18 text

JavaScript === Menos consumo de banda quando um usuário acessa pelo 3G

Slide 19

Slide 19 text

JavaScript === Páginas que não precisam ser recarregadas a toda iteração

Slide 20

Slide 20 text

Mas onde entra o Front End Developer nessa história?

Slide 21

Slide 21 text

O Front é o cara que cuida do desenvolvimento Client Side de um projeto

Slide 22

Slide 22 text

Hoje em dia temos mais JavaScript do que HTML! - E se o seu CSS for bem feito, vai ter mais JS do que CSS também. Porém o JS estará cuidando dos dados e não dos efeitos, afinal CSS animations já está ai né fio(a)? Pelamor. https://css-tricks.com/almanac/properties/a/animation/

Slide 23

Slide 23 text

Hoje em dia não escrevemos mais HTML como antigamente http://jade-lang.com/ https://docs.angularjs.org/guide/templates https://facebook.github.io/react/docs/reusable-components.html

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Mas isso ai (JS) é coisa de programador!

Slide 26

Slide 26 text

Tá, pera… Vamos voltar mais uma vez...

Slide 27

Slide 27 text

Mercado antigo Web Designers - Caras que criavam as telas e não codavam tanto. Em sua maioria formados em Design. Web Masters - Caras que codavam mais do que desenhavam tela. Em sua maioria caras formados em Ciências da Computação.

Slide 28

Slide 28 text

Front End developer - O cara que manja tudo sobre desenvolvimento no Client Side. Antigo Web Designer/Master, só que agora com foco no desenvolvimento para o navegador. Mercado atual http://pt.slideshare.net/marloscarmo/a-revoluo-do-frontend

Slide 29

Slide 29 text

Se hoje em dia até o CSS é gerado com lógica de programação $class-slug: for !default @for $i from 1 through 4 .#{$class-slug}-#{$i} width: 60px + $i http://thesassway.com/intermediate/if-for-each-while

Slide 30

Slide 30 text

O Front Ender não é programador?

Slide 31

Slide 31 text

OK, mas JAVASCRIPT é coisa de Back Ender!

Slide 32

Slide 32 text

Back End vs Front End

Slide 33

Slide 33 text

O Back End manda os dados pro banco de dados, o Front End manda os dados para o Back End. Ambos são desenvolvedores de Software, porém um mexe com tela preta e outro com a tela que o usuário vê. https://pt.wikipedia.org/wiki/Interface_de_programa%C3%A7%C3%A3o_de_aplica%C3%A7%C3%B5es

Slide 34

Slide 34 text

Qual dos dois é mais complicado?

Slide 35

Slide 35 text

O perfil do Desenvolvedor Front End atual, das atualidades mais atuais.

Slide 36

Slide 36 text

O que é Pessoa formada ou com conhecimento equivalente em Tecnologia Conhecimento em programação Ninja em JavaScript. Porém, os bons de verdade sabem o valor de um bom código HTML e uma boa estruturação CSS Controle de versão (Git <3) Arquitetura de aplicações Client Side (SPA’s, HTTP, Navegadores, Mobile, Padrões, Build tools, etc)

Slide 37

Slide 37 text

Mas e o cara que conhece menos sobre JavaScript? Esse é menos Front Ender?

Slide 38

Slide 38 text

NÃO!!!11ONZEONZE

Slide 39

Slide 39 text

Ele tem a mesma importância, porém as vagas para esse perfil estão a cada dia mais escassas.

Slide 40

Slide 40 text

E, apesar de eu não concordar com o perfil do cara que só sabe lógica de programação no Front End, não podemos reclamar da falta de vagas para quem não conhece o mínimo de JS.

Slide 41

Slide 41 text

Algumas pessoas já vinham avisando sobre essa mudança no mercado a anos...

Slide 42

Slide 42 text

DAVIDSON FELLIPE - 2012 http://fellipe.com/blog/mercado-de-front-end-o-que-mudou-de-dois-anos-para-ca/ LEANDRO ORIENTE - 2013 https://leandrooriente.com/como-me-tornar-um-desenvolvedor-front-end/ DIEGO EIS - 2013 http://tableless.com.br/tornar-dev-front-end/ WILLIAM OLIVEIRA - 2014 http://woliveiras.com.br/posts/guia-de-estudos-desenvolvedor-front-end-iniciante/ WILLIAN JUSTEN - 2015 http://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/

Slide 43

Slide 43 text

Desde 2004 o mercado procura por JavaScript! http://www.google.com.br/trends/explore#q=%2Fm%2F02p97&cmpt=q&tz=Etc%2FGMT%2B3

Slide 44

Slide 44 text

Depois veio a busca pelo Front End Developer http://www.google.com.br/trends/explore#q=frontend%20developer&cmpt=q&tz=Etc%2FGMT%2B3

Slide 45

Slide 45 text

Em 2010 já tinha gente escrevendo que o mercado estava mudando “a dois anos”. Estamos em 2016 e ainda temos dúvidas de que o Front End precisa saber o mínimo de JavaScript?

Slide 46

Slide 46 text

Como se preparar para uma vaga de trampo que pede muito sobre JavaScript?

Slide 47

Slide 47 text

Primeiro você precisa aprender a programar, se não souber… Somente conhecer uma linguagem (JS) não vai ajudar muito. Lógica de programação é a chave para qualquer linguagem. A linguagem é só uma ferramenta.

Slide 48

Slide 48 text

Você precisa saber HTML, CSS, Pré Processadores, Acessibilidade, Ferramentas de Build, etc. Estou falando somente de JS nessa apresentação, porém, essas outras, são tecnologias mais que essenciais para o Front Ender.

Slide 49

Slide 49 text

Não seja desses Fronts medíocres que pouco ligam para o HTML + CSS. Você é o cara (ou a moça) que vai cuidar do que o usuário vai consumir. Procure não ser um(a) escroto(a).

Slide 50

Slide 50 text

Lógica de Programação Opções pagas ● https://www.caelum.com.br/curso-logica-de-programacao/ ● https://www.casadocodigo.com.br/products/livro-programacao Opções gratuitas ● http://www.cursoemvideo.com/course/curso-de-algoritmos/ ● http://www.softblue.com. br/site/curso/id/6/CURSO+LOGICA+DE+PROGRAMACAO+BASICO+ON +LINE+LO06

Slide 51

Slide 51 text

JavaScript <3 Opções pagas ● https://www.caelum.com.br/cursos-web-front-end/ ● http://blog.da2k.com.br/curso-javascript-ninja/ => Foda Opções gratuitas ● https://www.codecademy.com/ ● https://www.codeschool.com/

Slide 52

Slide 52 text

JavaScript é uma boa linguagem para aprender a programar? http://wtfjs.com/

Slide 53

Slide 53 text

Outros conhecimentos necessários para o Front P1K4 das galaxia ● Performance JavaScript: https://developers.google. com/speed/articles/optimizing-javascript ● Organização de código: http://blog.caelum.com.br/organize-seu-codigo- javascript-de-maneira-facil/ ● Padrões de projeto: http://blog.da2k.com.br/2014/03/18/meu-workflow- javascript-com-module-pattern/ ● E um pouco mais: http://jstherightway.org/pt-br/ <= Feito pelo William Oliveira, mas não o mesmo dessa talk. ;P

Slide 54

Slide 54 text

Dicas de livros http://www.vitorbritto.com.br/blog/the-book-is-on-the-table/

Slide 55

Slide 55 text

Programar preciso é. JavaScript preciso é. Cobrar isso o mercado de trabalho vai, mas não se engane com isso aqui...