![\"\"](\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/10\/image-1-astro-300x143.jpeg\")
<\/p>\nTodo mundo j\u00e1 enfrentou duvidas em qual framework web se usar para um projeto. Hoje no mercado temos dispon\u00edveis dos mais diversos, que abrangem quase todas as linguagens de programa\u00e7\u00e3o. O que antes se limitava a apenas Javascript e php, as linguagens web evolu\u00edram tanto, que trouxeram diversas outras consigo como c#, java e at\u00e9 mesmo python com o surgimento do Pyscript. E com tantas linguagens dispon\u00edveis \u00e9 not\u00f3rio que muitas pessoas tornem uma linguagem sendo a melhor para si e acabe fazendo parte dos programadores que s\u00f3 programam nessa linguagem, mas e se fosse poss\u00edvel juntar todos esses grupos?<\/p>\n
Ent\u00e3o essa \u00e9 apenas uma das coisas que Astro pode fazer, o qual \u00e9 uma ferramenta capaz de criar \u201cmulti page application\u201d que acabou de chegar a apenas alguns meses atr\u00e1s.<\/p>\n
<\/p>\n
\u00a0<\/p>\n
Astro surge com v\u00e1rias ideias bastante interessantes, partindo de um ponto de vista no \u201chigh-level\u201d, \u00e9 como um gerador de site est\u00e1tico que permite escrever suas p\u00e1ginas utilizando seu pr\u00f3prio sistema de arquivos. Ent\u00e3o ao rodar ele renderiza tudo para gerar static multi-page application.<\/p>\n
Para os templates ele tem a sua pr\u00f3pria linguagem chamada astro components, o que \u00e9 bem familiar ao que j\u00e1 conhecemos com frameworks de desenvolvimento. Mas o que realmente \u00e9 bem interessante \u00e9 que podemos trazer o seu framework preferido de desenvolvimento para dentro do astro. Ent\u00e3o isso quer dizer que podemos criar aplica\u00e7\u00f5es astro, utilizando, react, vue, spelt e por ai mais! E ele ent\u00e3o vai renderizar a UI no servidor, enquanto carrega muito pouco Javascript no navegador.<\/p>\n
\u00a0<\/p>\n
import UmComponenteAstro from ‘..\/components\/UmComponenteAstro.astro’;<\/span> \/\/ Acesse props passadas ao componente, como `<X titulo=”Ol\u00e1, Mundo!” \/>`<\/span> \u00a0<\/p>\n Javascript pelo que conhecemos \u00e9 o verdadeiro gargalo para performance em aplica\u00e7\u00f5es web devido a sua caracter\u00edstica de utilizar somente uma thread. Isso significa que com astro voc\u00ea n\u00e3o ser\u00e1 capaz de criar thread para Javascript mas sim diminuir o seu uso na sua aplica\u00e7\u00e3o. Mas voc\u00ea pode perguntar como um componente vai funcionar se a p\u00e1gina s\u00f3 possui HTML puro sem Javascript? \u00c9 a\u00ed que nesse momento astro brilha, se voc\u00ea deseja utilizar responsividade, reatividade e estados nas suas p\u00e1ginas, voc\u00ea pode adicionar \u201cislands\u201d de interatividade para o seu website, na perspectiva do desenvolvedor, astro providencia uma variedade de diretivas para a \u201chydration\u201d do seu site.<\/p>\n \/\/ Exemplo: Utilize um componente React din\u00e2mico na p\u00e1gina.<\/span> <MeuComponenteReact client:idle \/><\/span><\/p>\n <MeuComponenteReact client:visible \/><\/span><\/p>\n Se voc\u00ea quer carregar de uma vez a sua hydration utilize Load. Mas se preferir que o componente n\u00e3o seja interativo naquele momento utilize Idle ou visible se deseja mostrar o component assim que ele aparece na tela. Tudo isso que astro proporciona \u00e9 chamado de parcial hydration e todas essas caracter\u00edsticas s\u00e3o um grande diferencial quando se fala de performance. Menos Javascript para rodar significa p\u00e1ginas mais velozes e melhor tempo para pontua\u00e7\u00f5es de interatividade.<\/p>\n Tomado isso como conclus\u00e3o, se Astro conseguir se tornar uma single-page application seria o ultimato para todos os web frameworks existentes, pois iria abranger todo tipo de uso do Astro nessa tabela, n\u00e3o se limitando somente a isso voc\u00ea pode utilizar qualquer UI que preferir, nesse ponto se todo o desenvolvimento da linguagem conseguir engatar, vai finalmente por um fim a guerra das pessoas f\u00e3s de framework Javascript.<\/p>\n Refer\u00eancias: \u00a0<\/p>\n","protected":false},"excerpt":{"rendered":" Todo mundo j\u00e1 enfrentou duvidas em qual framework web se usar para um projeto. Hoje no mercado temos dispon\u00edveis dos mais diversos, que abrangem quase todas as linguagens de programa\u00e7\u00e3o. O que antes se limitava a apenas Javascript e php, as linguagens web evolu\u00edram tanto, que trouxeram diversas outras consigo como c#, java e at\u00e9 […]<\/p>\n","protected":false},"author":5643,"featured_media":3328,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[203,149,192],"class_list":["post-3329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-frameworks","tag-redacao","tag-web-e-front-end"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/5643"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3329"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3329\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3328"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
import UmComponenteReact from ‘..\/components\/UmComponenteReact.jsx’;<\/span>
import algunsDados from ‘..\/dados\/pokemon.json’;<\/span><\/p>\n
const { titulo } = Astro.props;<\/span><\/p>\n
import MeuComponenteReact from ‘..\/components\/MeuComponenteReact.jsx’;<\/span>
—<\/span>
<!– Este componente agora \u00e9 interativo na p\u00e1gina! <\/span>
O resto do seu website continua est\u00e1tico e com zero JS. –><\/span>
<MeuComponenteReact client:load \/><\/span><\/p>\n![\"\"](\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2022\/10\/image-2-astro-300x240.jpeg\")
<\/p>\nTela com um fundo cinza mostrando no seu topo esquerdo o n\u00famero 100 circulado de verde e logo em baixo escrito performance, mais abaixo temos 6 m\u00e9tricas escritas em ingl\u00eas com o seu tempo abaixo escrito em verde.<\/h6>\n
Para saber mais sobre astro.js acesse sua documenta\u00e7\u00e3o: https:\/\/docs.astro.build\/en\/getting-started\/
Se deseja por em pr\u00e1tica o que viu, saca s\u00f3 esse aqui: https:\/\/prismic.io\/blog\/astro-js-tutorial<\/p>\n