{"id":1100,"date":"2020-03-04T11:41:09","date_gmt":"2020-03-04T11:41:09","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=1100"},"modified":"2021-10-24T19:28:21","modified_gmt":"2021-10-24T19:28:21","slug":"tipos-de-frontend","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","title":{"rendered":"Tipos de Frontend"},"content":{"rendered":"\n

A alguns anos atr\u00e1s escrevi um texto sobre o que \u00e9 o frontend<\/a>, tamb\u00e9m palestrei sobre o que \u00e9 frontend, a carreira do frontend<\/a> e os tipos de frontend que existem.<\/p>\n\n\n\n\n\n\n\n

Como minha vis\u00e3o sobre o assunto mudou bastante, resolvi revisitar esses materiais e escrever um parecer atualizado sobre os tipos de frontend que podemos identificar.<\/p>\n\n\n\n

Antes de come\u00e7armos, quero deixar claro que essa separa\u00e7\u00e3o que eu fa\u00e7o no texto n\u00e3o \u00e9 uma separa\u00e7\u00e3o de mercado<\/strong> (pelo menos n\u00e3o ainda). Quando voc\u00ea \u00e9 contratado como frontend, se espera que voc\u00ea execute todas as fun\u00e7\u00f5es<\/strong> que eu cito abaixo. <\/p>\n\n\n\n

Por\u00e9m, existe uma movimenta\u00e7\u00e3o, e conhe\u00e7o algumas vagas sim que s\u00e3o separadas de forma muito parecida com a minha descri\u00e7\u00e3o, mas isso \u00e9 excess\u00e3o e n\u00e3o regra<\/strong>. <\/p>\n\n\n\n

Hist\u00f3rico do desenvolvimento web<\/h2>\n\n\n\n

Quando tudo isso aqui era mato, tinha o designer e o web master. Designer respons\u00e1vel pelo layout e o webmaster por todo o resto.<\/p>\n\n\n\n

Esse resto era transformar o layout em HTML, CSS, fazer as anima\u00e7\u00f5es e intera\u00e7\u00f5es com Javascript\/jQuery, al\u00e9m de usar PHP e mySQL – por exemplo – para o lado do servidor.<\/p>\n\n\n\n

Aos poucos a complexidade foi aumentando e a divis\u00e3o aumentou, com o frontend e o backend. O backend era a pessoa que fazia tudo funcionar, configurava o servidor, modelava o banco de dados. E o frontend? <\/p>\n\n\n\n

O que \u00e9 frontend?<\/h2>\n\n\n\n

Anos atr\u00e1s, o frontend ficava no meio do processo de constru\u00e7\u00e3o de uma aplica\u00e7\u00e3o web, mas acabava n\u00e3o sendo dono de nada. Quem desenhava a interface era o designer e quem fazia a parte de l\u00f3gica da aplica\u00e7\u00e3o era o backend. Tanto que frontend nem era considerado programador na maioria das empresas.<\/p>\n\n\n\n

Com a evolu\u00e7\u00e3o da web, dos navegadores e dos dispositivos (computadores, celulares), os sistemas web come\u00e7aram a ficar mais complexos e o frontend come\u00e7ou a dividir mais responsabilidades com o backend. Nessa \u00e9poca come\u00e7aram a surgir v\u00e1rios frameworks para ajudar os backends a fazer requisi\u00e7\u00f5es usando Javascript, usar o modelo MVC entre outras coisas.<\/p>\n\n\n\n

At\u00e9 que em um determinado momento surgiram as APIs.<\/p>\n\n\n\n

A ado\u00e7\u00e3o das APIs web deixou bem claro o trabalho do frontend. O trabalho do frontend come\u00e7a em materializar o layout em HTML e CSS, garantir a acessibilidade, o funcionamento da aplica\u00e7\u00e3o em navegadores diferentes, a exibi\u00e7\u00e3o em dispositivos com tamanhos diferentes, al\u00e9m do desenvolvimento de l\u00f3gica no pr\u00f3prio frontend principalmente para exibir ou para enviar informa\u00e7\u00f5es para a API.<\/p>\n\n\n\n

Separa\u00e7\u00e3o das responsabilidades<\/h2>\n\n\n\n

Com o tempo, projetos grandes ficaram complexos demais para apenas um perfil de frontend conseguir resolver tudo. Assim come\u00e7aram a surgir termos (discut\u00edveis) para separar tipos de Frontend, mesmo que de forma n\u00e3o oficial. <\/p>\n\n\n\n

Grandes empresas entregam tipos de projetos com complexidades e necessidades diferentes. Isso cria a necessidade de profissionais com perfis diferentes. <\/p>\n\n\n\n

Frontend designer<\/h3>\n\n\n\n

O frontend designer, \u00e9 um frontend que manda muito bem no visual. Inclusive ele \u00e9 capaz de criar designs simples, ou evoluir layouts desenhados pelo time de design.<\/p>\n\n\n\n

\u00c9 um profissional que sabe da import\u00e2ncia de um HTML sem\u00e2ntico, que sabe que muitas coisas s\u00e3o poss\u00edveis com SVG, domina anima\u00e7\u00f5es com CSS, design responsivo entre outros. Gosta de trocar ideia com os designers e tem um pensamento bastante voltado pra usabilidade e visualiza\u00e7\u00e3o da aplica\u00e7\u00e3o.<\/p>\n\n\n\n

Frontend engineer<\/h3>\n\n\n\n

J\u00e1 um frontend engineer \u00e9 um profissional que n\u00e3o obrigatoriamente sabe muito sobre anima\u00e7\u00f5es com CSS, pois onde ele mais faz diferen\u00e7a \u00e9 trabalhando com Javascript seja com Angular<\/a>, React<\/a>, Vue.js<\/a>, Ember.js<\/a>, Node.js ou qualquer outro que voc\u00ea lembrar.<\/p>\n\n\n\n

\u00c9 um profissional que n\u00e3o \u00e9 backend, mas consegue interagir bastante com o backend at\u00e9 dominando o b\u00e1sico de uma ou outra linguagem de backend.<\/p>\n\n\n\n

Este tipo de frontend se preocupa bastante com a performance, seguran\u00e7a e escalabilidade do c\u00f3digo.<\/p>\n\n\n\n

Conclus\u00f5es<\/h2>\n\n\n\n

Obviamente, cada empresa ter\u00e1 realidades diferentes, mas quando no mesmo time voc\u00ea tem 2 ou 3 frontends, voc\u00ea consegue perceber nitidamente esses perfis e \u00e9 extremamente importante que leads<\/em> e gestores entendam essas diferen\u00e7as de perfis para que se aproveite da melhor forma poss\u00edvel as caracter\u00edsticas de cada tipo de frontend.<\/p>\n\n\n\n

Os melhores desenvolvedores frontend que eu conhe\u00e7o s\u00e3o desenvolvedores completos que conseguem criar layouts complexos e lidar com algoritmos tamb\u00e9m complexos no Javascript (seriam os Fullstack Frontends? hahaha).<\/p>\n\n\n\n

Mas sabendo agora desses tipos de frontend, veja com qual voc\u00ea se parece mais e foque em se aperfei\u00e7oar.<\/p>\n\n\n\n

N\u00e3o deixa de comentar caso voc\u00ea discorde, tenha alguma sugest\u00e3o de tema ou qualquer outra coisa.<\/p>\n","protected":false},"excerpt":{"rendered":"

A alguns anos atr\u00e1s escrevi um texto sobre o que \u00e9 o frontend, tamb\u00e9m palestrei sobre o que \u00e9 frontend, a carreira do frontend e os tipos de frontend que existem.<\/p>\n","protected":false},"author":1,"featured_media":1222,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[117,2,4,5],"tags":[52,114],"class_list":["post-1100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","category-dicas","category-geral","category-tecnologia","tag-front-end","tag-frontend"],"yoast_head":"\nTipos de Frontend - Blog do Andr\u00e9 Felizardo<\/title>\n<meta name=\"description\" content=\"Quais s\u00e3o os tipos de frontend atualmente e onde voc\u00ea se encaixa melhor? Quais s\u00e3o as principais responsabilidades de cada perfil?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tipos de Frontend - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"Quais s\u00e3o os tipos de frontend atualmente e onde voc\u00ea se encaixa melhor? Quais s\u00e3o as principais responsabilidades de cada perfil?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-04T11:41:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-24T19:28:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2251\" \/>\n\t<meta property=\"og:image:height\" content=\"1179\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"Tipos de Frontend\",\"datePublished\":\"2020-03-04T11:41:09+00:00\",\"dateModified\":\"2021-10-24T19:28:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/\"},\"wordCount\":791,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/andre-felizardo_tipos-de-frontend-1-1.png\",\"keywords\":[\"front-end\",\"frontend\"],\"articleSection\":[\"Dev\",\"Dicas\",\"Geral\",\"Tecnologia\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/\",\"name\":\"Tipos de Frontend - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/andre-felizardo_tipos-de-frontend-1-1.png\",\"datePublished\":\"2020-03-04T11:41:09+00:00\",\"dateModified\":\"2021-10-24T19:28:21+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"description\":\"Quais s\u00e3o os tipos de frontend atualmente e onde voc\u00ea se encaixa melhor? Quais s\u00e3o as principais responsabilidades de cada perfil?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/andre-felizardo_tipos-de-frontend-1-1.png\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/andre-felizardo_tipos-de-frontend-1-1.png\",\"width\":2251,\"height\":1179},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/tipos-de-frontend\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tipos de Frontend\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tipos de Frontend - Blog do Andr\u00e9 Felizardo","description":"Quais s\u00e3o os tipos de frontend atualmente e onde voc\u00ea se encaixa melhor? Quais s\u00e3o as principais responsabilidades de cada perfil?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","og_locale":"pt_BR","og_type":"article","og_title":"Tipos de Frontend - Blog do Andr\u00e9 Felizardo","og_description":"Quais s\u00e3o os tipos de frontend atualmente e onde voc\u00ea se encaixa melhor? Quais s\u00e3o as principais responsabilidades de cada perfil?","og_url":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2020-03-04T11:41:09+00:00","article_modified_time":"2021-10-24T19:28:21+00:00","og_image":[{"width":2251,"height":1179,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/#article","isPartOf":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"Tipos de Frontend","datePublished":"2020-03-04T11:41:09+00:00","dateModified":"2021-10-24T19:28:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/"},"wordCount":791,"commentCount":0,"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png","keywords":["front-end","frontend"],"articleSection":["Dev","Dicas","Geral","Tecnologia"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","url":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/","name":"Tipos de Frontend - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/#primaryimage"},"image":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png","datePublished":"2020-03-04T11:41:09+00:00","dateModified":"2021-10-24T19:28:21+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"description":"Quais s\u00e3o os tipos de frontend atualmente e onde voc\u00ea se encaixa melhor? Quais s\u00e3o as principais responsabilidades de cada perfil?","breadcrumb":{"@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/#primaryimage","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png","width":2251,"height":1179},{"@type":"BreadcrumbList","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/tipos-de-frontend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Tipos de Frontend"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"https:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2020\/03\/andre-felizardo_tipos-de-frontend-1-1.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-hK","jetpack-related-posts":[{"id":993,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/javascript-reduce\/","url_meta":{"origin":1100,"position":0},"title":"JavaScript – Reduce","author":"Andr\u00e9 Felizardo","date":"5 de abril de 2018","format":false,"excerpt":"JavaScript Reduce \u00e9 um dos m\u00e9todos recentes de programa\u00e7\u00e3o funcional que a linguagem possui. Ele foi definido no EcmaScript 2015, e \u00e9 um m\u00e9todo de arrays. Acesse aqui para entender um pouco mais dessa hist\u00f3ria do JavaScript. Se voc\u00ea n\u00e3o entende muito bem sobre programa\u00e7\u00e3o funcional, deixa um coment\u00e1rio que\u2026","rel":"","context":"Em "Dev"","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"Capa do blog para JavaScript reduce","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":668,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/manipulando-elementos-de-acordo-com-a-altura-da-janela\/","url_meta":{"origin":1100,"position":1},"title":"Manipulando elementos de acordo com a altura da janela","author":"Andr\u00e9 Felizardo","date":"30 de setembro de 2016","format":false,"excerpt":"Se voc\u00ea v\u00e1rias vezes j\u00e1 se pegou\u00a0manipulando elementos com JavaScript e jQuery nem precisa ler esse post, sei l\u00e1, vai ler sobre Ionic\u00a0:) Caso voc\u00ea esteja come\u00e7ando no mundo do Front-end\u00a0talvez voc\u00ea tenha tido esta d\u00favida. Como eu fa\u00e7o pra deixar um elemento (como uma div) da altura da janela?\u2026","rel":"","context":"Em "Curiosidades"","block_context":{"text":"Curiosidades","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/09\/javascript.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/09\/javascript.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/09\/javascript.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/09\/javascript.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":830,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/seja-grato-primeiro-app-na-loja\/","url_meta":{"origin":1100,"position":2},"title":"Seja Grato – Primeiro App na loja","author":"Andr\u00e9 Felizardo","date":"29 de junho de 2017","format":false,"excerpt":"No in\u00edcio de 2017 eu defini o objetivo de colocar tr\u00eas apps pr\u00f3prios at\u00e9 o fim do ano nas lojas de aplicativos. Quando chegou em maio, percebi que n\u00e3o tinha nenhum, ent\u00e3o decidi partir pra cima desse objetivo. A muito tempo eu vinha pensando num aplicativo (sem fins lucrativos) que\u2026","rel":"","context":"Em "Ionic"","block_context":{"text":"Ionic","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/ionic\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/06\/seja-grato.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/06\/seja-grato.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/06\/seja-grato.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/06\/seja-grato.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":3625,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/livro-14-habitos-de-desenvolvedores-altamente-produtivos\/","url_meta":{"origin":1100,"position":3},"title":"Livro: 14 h\u00e1bitos de desenvolvedores altamente produtivos","author":"Andr\u00e9 Felizardo","date":"12 de janeiro de 2026","format":false,"excerpt":"Eu acredito muito no poder dos livros, e agora que j\u00e1 faz 5 anos que eu trabalho 100% home office posso dizer at\u00e9 que os livros s\u00e3o meus melhores amigos. O Zeno Rocha \u00e9 um cara que eu admiro bastante, mesmo que a dist\u00e2ncia. Uns 15 anos atr\u00e1s assisti uma\u2026","rel":"","context":"Em "Tecnologia"","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"Foto do livro 14 h\u00e1bitos de desenvolvedores altamente produtivos na tela de um Kindle","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2026\/01\/livro-zeno.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2026\/01\/livro-zeno.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2026\/01\/livro-zeno.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2026\/01\/livro-zeno.jpeg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2026\/01\/livro-zeno.jpeg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2026\/01\/livro-zeno.jpeg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1020,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/comecando-com-ionic-3\/","url_meta":{"origin":1100,"position":4},"title":"Come\u00e7ando com Ionic 3","author":"Andr\u00e9 Felizardo","date":"10 de junho de 2018","format":false,"excerpt":"Ionic \u00e9 um framework para criar aplicativos mobile h\u00edbridos atrav\u00e9s de linguagens web (HTML, CSS e JS). Voc\u00ea pode aprender mais sobre o conceito do Ionic Framework aqui. Atualmente estamos no Ionic 3 (3.9.2 para ser exato), e o desenvolvimento do framework vem evoluindo bastante desde o lan\u00e7amento do Ionic\u2026","rel":"","context":"Em "Dev"","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"Come\u00e7ando com Ionic 3","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/06\/Group.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/06\/Group.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/06\/Group.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/06\/Group.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":981,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/jasmine-testando-seu-codigo-javascript\/","url_meta":{"origin":1100,"position":5},"title":"Jasmine – Testando seu c\u00f3digo JavaScript","author":"Andr\u00e9 Felizardo","date":"3 de fevereiro de 2018","format":false,"excerpt":"Conforme evolu\u00edmos na complexidade das aplica\u00e7\u00f5es de front-end que desenvolvemos, uma necessidade come\u00e7a a se tornar \u00f3bvia: testar o c\u00f3digo JavaScript. Jasmine \u00e9 um framework exatamente para resolver essa necessidade. Jasmine \u00e9 um framework de testes para o c\u00f3digo JavaScript, que adere aos conceitos de Behavior Driven Development. BDD Jasmine\u2026","rel":"","context":"Em "Dev"","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/02\/jasmine-logo.png?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/1100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1100"}],"version-history":[{"count":0,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/1100\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/1222"}],"wp:attachment":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}