{"id":7290,"date":"2019-06-14T11:55:59","date_gmt":"2019-06-14T14:55:59","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=7290"},"modified":"2019-06-14T11:58:11","modified_gmt":"2019-06-14T14:58:11","slug":"polyfill-css-javascript","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/polyfill-css-javascript\/","title":{"rendered":"Tenha suporte de novos recursos de CSS e JavaScript com Polyfill"},"content":{"rendered":"

Nem sempre a evolu\u00e7\u00e3o das linguagens \u00e9 seguida \u00e0 risca pelos os navegadores. E quando isso ocorre, temos que tomar a decis\u00e3o: se usaremos um novo recurso (sem suporte a determinados navegadores) ou se n\u00e3o usamos esse recurso nativo. O Polyfill \u00e9 um trecho de c\u00f3digo em JavaScript que ir\u00e1 dar suporte a determinado recurso em navegadores sem suporte a esses recursos.<\/p>\n

Com isso, voc\u00ea pode utilizar as novas API’s, mesmo em navegadores mais antigos. Isso ir\u00e1 se aplicar tanto para recurso de JavaScript, quanto de CSS<\/a>.<\/p>\n

Infelizmente existir\u00e3o projetos que voc\u00ea precisar\u00e1 dar suporte e talvez essa seja a maneira mais f\u00e1cil de manter compatibilidade, sem a necessidade de fazer if’s para verificar se d\u00e1 suporte ou n\u00e3o.<\/p>\n

Um exemplo \u00e9 API Fetch <\/strong><\/a>que voc\u00ea trabalhar com Ajax. Antes era feita pelo XMLHttpRequest<\/strong>, mas agora voc\u00ea tem algo mais enxuto para fazer essa trabalho.<\/p>\n

Exemplo Pr\u00e1tico com Polyfill<\/h2>\n

Vamos supor que voc\u00ea deseja fazer uma requisi\u00e7\u00e3o ass\u00edncrona (Ajax) para um arquivo qualquer. Ent\u00e3o, vamos utilizar o m\u00e9todo fetch<\/strong> para executar essa a\u00e7\u00e3o:<\/p>\n

<script type=\"text\/javascript\">\r\n\tvar url = 'resposta.html';\r\n\tvar config = {method : 'get'};\r\n\tfetch(url, config).then(function(resposta) { \r\n\t\t\t        return resposta.text(); \r\n\t\t\t}).then(function(conteudo) { \r\n\t\t\t\tconsole.log(conteudo);\r\n\t\t\t});\t \r\n\t\t\t\t\t\r\n<\/script><\/pre>\n
Nesse exemplo, ele faz uma requisi\u00e7\u00e3o a um arquivo chamado resposta.html e mostra no console do navegador o valor desse arquivo.<\/p>\n
Apesar de n\u00e3o ser o foco do artigo, \u00e9 interessante entender um pouco sobre esse processo criado agora com\u00a0fetch<\/strong>.<\/p>\n
O m\u00e9todo fetch\u00a0<\/strong>retorna uma Promisse<\/strong>, que \u00e9 um um objeto que representa um valor que pode est\u00e1 dispon\u00edvel em algum momento ou n\u00e3o. \u00c9 usado em um processo ass\u00edncrono.<\/p>\n
Quando retornado corretamente (resolvida), \u00e9 usado o m\u00e9todo da Promisse<\/strong> chamado then<\/strong>, para acessar o conte\u00fado associado a essa Promisse<\/strong>, que neste caso \u00e9 objeto Response,<\/strong> que por sua vez representa uma resposta de uma requisi\u00e7\u00e3o, que cont\u00e9m um conjunto de m\u00e9todos. E um desses m\u00e9todos \u00e9 o text()<\/strong>, que retorna tamb\u00e9m uma Promisse<\/strong>, usando novamente o then<\/strong> para acessar o conte\u00fado dela. Assim, \u00e9 mostrado no console do navegador com console.log.<\/strong><\/p>\n
No c\u00f3digo, \u00e9 definido a url<\/strong> da requisi\u00e7\u00e3o, o m\u00e9todo utilizado (que \u00e9 get<\/strong>) e de acordo com a resposta, ele mostra o valor no console.<\/p>\n
O m\u00e9todo fetch<\/strong> est\u00e1 dispon\u00edvel para ser utilizado a partir do firefox 39, e no Google Chrome 42, mas ainda n\u00e3o est\u00e1 dispon\u00edvel para o IE (conte uma novidade :D).<\/p>\n
Mas existe um Polyfill para resolver essa quest\u00e3o que pode ser acessado aqui: https:\/\/github.github.io\/fetch<\/a><\/p>\n
Basta incluir e utilizar o m\u00e9todo fetch para trabalhar com Ajax de forma “nativa”.<\/p>\n
Considera\u00e7\u00f5es<\/h2>\n
Os Polyfill’s s\u00e3o alternativas, mas claro que o ideal seria que os navegadores dessem suportes a essas op\u00e7\u00f5es, permitindo que f\u00f4ssemos menos dependentes de Frameworks ou bibliotecas. Enquanto isso n\u00e3o ocorre, podemos utilizar esses recursos para nos permitir trabalhar com as novas API’s.<\/p>\n
N\u00e3o h\u00e1 problema em utilizar frameworks, j\u00e1 que eles existem pra otimizar nosso trabalho, mas ter a possibilidade de ter recursos nativos \u00e9 ainda melhor.<\/p>\n
Quem sabe um dia essas novidades e navegadores andar\u00e3o juntos e poderemos utilizar esse recursos sem precisar dessas alternativas?<\/p>\n
Abra\u00e7os e at\u00e9 a pr\u00f3xima!<\/p>\n","protected":false},"excerpt":{"rendered":"
Nem sempre a evolu\u00e7\u00e3o das linguagens \u00e9 seguida \u00e0 risca pelos os navegadores. E quando isso ocorre, temos que tomar a decis\u00e3o: se usaremos um novo recurso (sem suporte a determinados navegadores) ou se n\u00e3o usamos esse recurso nativo. O Polyfill \u00e9 um trecho de c\u00f3digo em JavaScript que ir\u00e1 dar suporte a determinado recurso […]<\/p>\n","protected":false},"author":67,"featured_media":19671,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1233],"class_list":["post-7290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=7290"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/7290\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/19671"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=7290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=7290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=7290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}