{"id":5707,"date":"2025-05-05T12:18:27","date_gmt":"2025-05-05T15:18:27","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=5707"},"modified":"2025-05-12T18:05:55","modified_gmt":"2025-05-12T21:05:55","slug":"svelte-o-framework-javascript-que-nao-e-um-framework","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/","title":{"rendered":"Svelte: o framework JavaScript que n\u00e3o \u00e9 um framework"},"content":{"rendered":"\r\n
\r\n

\u201cAh n\u00e3o, mais um framework JavaScript :(\u201d<\/em><\/p>\r\n Voc\u00ea, neste momento. <\/cite><\/blockquote>\r\n\r\n\r\n\r\n

A j\u00e1 consagrada sant\u00edssima trindade dos frameworks JavaScript<\/a><\/strong> para cria\u00e7\u00e3o de front-end \u00e9 composta por Angular, Vue <\/a><\/strong><\/em>e<\/a><\/strong> React<\/a><\/strong>. A\u00ed voc\u00ea me pergunta: o que o\u00a0Svelte<\/strong>\u00a0pode oferecer de diferente desses tr\u00eas gigantes?

E eu lhe respondo:<\/strong>\u00a0um bundle<\/em> final de 0kb.

Isso mesmo, o Svelte n\u00e3o \u00e9 um framework<\/em>, ele interpreta os arquivos \u201c.svelte\u201d\u00a0<\/em>e retorna um JavaScript<\/em> puro, sem depend\u00eancia de nenhum framework<\/em>.<\/p>\r\n\r\n\r\n\r\n

{\r\n   \"name\": \"svelte-app\",\r\n   \"version\": \"1.0.0\",\r\n   \"devDependencies\":{\r\n     \"npm-run-all\": \"^4.1.5\",\r\n     \"rollup\":  \"^1.10.1\",\r\n     \"rollup-plugin-commonjs\":  \"^9.3.4\",\r\n     \"rollup-plugin-livereload\":  \"^1.0.0\",\r\n     \"rollup-plugin-node-resolve\":  \"^4.2.3\",\r\n     \"rollup-plugin-svelte\":  \"^5.0.3\",\r\n     \"rollup-plugin-terser\":  \"^4.0.4\",\r\n     \"sirv-cli\":  \"^0.4.0\",\r\n     \"svelte\":  \"^3.0.0\"\r\n    },\r\n    \"scripts\": {\r\n     \"build\": \"rollup -c\",\r\n     \"autobuild\": \"rollup -c -w\",\r\n     \"dev\": \"run-p start: dev autobuild\",\r\n     \"start\": \"sirv public\",\r\n     \"start:dev\": \"sirv public --dev\"\r\n    }\r\n }<\/pre>\r\n\r\n\r\n\r\n
Nesse\u00a0package.json\u00a0<\/em>de um projeto\u00a0Svelte\u00a0<\/strong>inicial vemos que ele s\u00f3 usa depend\u00eancias de desenvolvimento (devDependencies<\/em>). N\u00e3o h\u00e1 nada nele que vai para o bundle<\/em> final, apesar de ter todas as fun\u00e7\u00f5es de um framework<\/em>.<\/p>\r\n\r\n\r\n\r\n
Calma, sei que \u00e9 dif\u00edcil de entrar na cabe\u00e7a agora, mas depois que voc\u00ea entender o que ele faz voc\u00ea vai ficar de queixo ca\u00eddo.<\/p>\r\n\r\n\r\n\r\n
Isso aqui \u00e9 um component\u00a0.svelte<\/em>:<\/p>\r\n\r\n\r\n\r\n
\r\n
\"\"<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n
Se voc\u00ea conhece\u00a0Vue <\/em>isso \u00e9 bem familiar para voc\u00ea, tirando um detalhe ou outro, n\u00e3o h\u00e1 nada de novo sob o sol. A diferen\u00e7a \u00e9 que esse arquivo, quando compilado pelo o\u00a0Svelte<\/em>, criar\u00e1 um arquivo em js (bundle.js<\/em>), que ir\u00e1 conter somente isso.<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
Na imagem acima o arquivo\u00a0bundle.js\u00a0<\/em>tem\u00a02,7KB<\/strong>. O resultado final tem somente o que \u00e9 necess\u00e1rio para aqueles dois arquivos (App.svelte<\/em>\u00a0e\u00a0Nested.svelte<\/em>) funcionarem 100%.<\/p>\r\n\r\n\r\n\r\n
Isso por s\u00ed s\u00f3 \u00e9 algo incr\u00edvel. Voc\u00ea s\u00f3 envia para o usu\u00e1rio o que ele vai precisar e tudo \u00e9 altamente otimizado para rodar o seu app.<\/p>\r\n\r\n\r\n\r\n
Uma coisa que os frameworks<\/em> fazem \u00e9 quebrar todas as suas funcionalidades b\u00e1sicas em arquivos separados, por exemplo o\u00a0flux<\/em>,\u00a0transitions \u00a0<\/em>ou\u00a0css transpiler<\/em>, para ter um bundle<\/em> final menor.\u00a0<\/p>\r\n\r\n\r\n\r\n
Se voc\u00ea for usar uma\u00a0transi\u00e7\u00e3o de anima\u00e7\u00e3o no React<\/a><\/strong>\u00a0voc\u00ea ter\u00e1 que instalar de um pacote separado. No\u00a0Svelte<\/strong>, voc\u00ea encontra tudo l\u00e1 dentro e no bundle<\/em> final s\u00f3 o que voc\u00ea realmente usou \u00e9 compilado.<\/p>\r\n\r\n\r\n\r\n
\r\n
\u201cO React n\u00e3o \u00e9 reativo de verdade. React \u00e9 s\u00f3 o nome.\u201d<\/em><\/p>\r\n ROLMES, Xeroque <\/cite><\/blockquote>\r\n\r\n\r\n\r\n
*pikachu_surpreso.jpeg*<\/em><\/p>\r\n\r\n\r\n\r\n
Se voc\u00ea j\u00e1 usou uma planilha do Excel <\/strong>voc\u00ea j\u00e1 usou algo que tem programa\u00e7\u00e3o reativa.<\/p>\r\n\r\n\r\n\r\n
Programa\u00e7\u00e3o reativa, em poucas palavras, \u00e9 uma vari\u00e1vel que tem seu valor atrelado a outra vari\u00e1vel, por exemplo uma c\u00e9lula no Excel<\/strong> que soma dois valores\u00a0c2 = SUM(a2, b2)<\/em>.<\/p>\r\n\r\n\r\n\r\n
S\u00f3 de voc\u00ea alterar o valor da c\u00e9lula\u00a0a2\u00a0<\/em>ou\u00a0b2<\/em> o valor da c\u00e9lula c2 \u00e9 atualizado instantaneamente.<\/p>\r\n\r\n\r\n\r\n
Simples, certo?<\/strong><\/p>\r\n\r\n\r\n\r\n
Isso \u00e9 um conceito bem antigo e \u00e9 usado na programa\u00e7\u00e3o h\u00e1 d\u00e9cadas, no JavaScript<\/em> n\u00e3o existe maneira simples e natural de se fazer isso.<\/p>\r\n\r\n\r\n\r\n
Os frameworks<\/em> resolveram esse problema com o gerenciamento de estado, no React <\/strong><\/a>n\u00f3s temos o\u00a0this.setState<\/em>.<\/p>\r\n\r\n\r\n\r\n
No Vue declaramos o objeto\u00a0data\u00a0<\/em>na configura\u00e7\u00e3o do componente e internamente ele verifica mudan\u00e7as com setters<\/em> e getters<\/em>. Acessamos essa vari\u00e1vel pelo objeto do componente usando o\u00a0this<\/em>.<\/p>\r\n\r\n\r\n\r\n
O\u00a0Svelte<\/strong>\u00a0coloca as vari\u00e1veis reativas em primeiro plano, s\u00f3 \u00e9 necess\u00e1rio declarar a vari\u00e1vel com\u00a0let<\/em>\u00a0ou\u00a0const,\u00a0<\/em>j\u00e1 que ela j\u00e1 \u00e9 reativa e est\u00e1 acess\u00edvel dentro do template, simples assim.<\/p>\r\n\r\n\r\n\r\n
Se voc\u00ea quiser que ela seja reativa com base em outra vari\u00e1vel, como no exemplo do Excel que eu citei, o\u00a0Svelte<\/strong>\u00a0nos d\u00e1 uma nova sintaxe que funciona como m\u00e1gica:<\/p>\r\n\r\n\r\n\r\n
\r\n
\"\"\r\n
Na linha 8 \u00e9 usado o s\u00edmbolo $:\u00a0<\/strong>\u2014\u201c$:\u201d \u00e9 uma instru\u00e7\u00e3o JavaScript v\u00e1lida, n\u00e3o se preocupe com linters<\/em> \u2014 para declarar a vari\u00e1vel reativa\u00a0sum,<\/em>\u00a0que sempre \u00e9 resolvida quando a vari\u00e1vel\u00a0numbers\u00a0<\/em>sofre alguma altera\u00e7\u00e3o.<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n
No\u00a0Vue<\/strong>\u00a0seria o equivalente a um objeto\u00a0computed.<\/em><\/p>\r\n\r\n\r\n\r\n
S\u00e9rio, olha como isso \u00e9 simples entender. Isso vai facilitar tantas coisas e resolver tantos problemas que voc\u00ea talvez nem saiba que tem.<\/p>\r\n\r\n\r\n\r\n
Se isso n\u00e3o \u00e9 a coisa mais linda que voc\u00ea viu nesse ano, eu n\u00e3o sei como te convencer de outra forma que o Svelte <\/strong>\u00e9 incr\u00edvel.<\/p>\r\n\r\n\r\n\r\n
>> Leitura Recomendada: <\/strong>Confira nossa linha do tempo do<\/em> Mercado Front-End<\/em><\/strong><\/a><\/p>\r\n\r\n\r\n\r\n\r\n\r\n
CSS no Svelte<\/strong><\/h2>\r\n\r\n\r\n\r\n
\/*\r\n   No princ\u00edpio Deus criou o c\u00e9u e a Terra,\r\n   por\u00e9m na Terra n\u00e3o havia forma nem vida\r\n   e um grande escurid\u00e3o cobria o mar,\r\n   ent\u00e3o Deus disse:\r\n *\/\r\n universo{\r\n display: none;\r\n   background-color: #000;\r\n   width: 100%;\r\n   height: 100%;\r\n }\r\n universo.luz{\r\n display: block;\r\n }\r\n universo.luz: :after {\r\n display: block;\r\n   position: absolute;\r\n   content: 'Big Bang';\r\n   background-color: white;\r\n   border-radius: 100%;\r\n   opacity: 1;\r\n   width: 100px;\r\n   height: 100px;\r\n }<\/pre>\r\n\r\n\r\n\r\n
O CSS<\/a><\/strong> no Svelte tem o escopo dentro do componente. Todo o css que voc\u00ea escrever s\u00f3 afetar\u00e1 aquele arquivo. Isso \u00e9 o padr\u00e3o dele, ele j\u00e1 trata o css como parte integral daquele componente, o que no React <\/strong>\u00e9 completamente negligenciado, tendo que recorrer a diversas ferramentas de terceiros.

Isso torna o desenvolvimento muito mais padronizado e limpo. Esse pensamento \u00e9 diretamente inspirado no Vue, que tamb\u00e9m tem o css integrado com o componente em um \u00fanico arquivo.<\/p>\r\n\r\n\r\n\r\n
>> Leitura Recomendada:<\/strong> Voc\u00ea sabe quais s\u00e3o <\/em>os principais erros de CSS<\/a><\/em><\/strong> que voc\u00ea n\u00e3o deve cometer?<\/em><\/p>\r\n\r\n\r\n\r\n\r\n\r\n
Status do Svelte<\/h2>\r\n\r\n\r\n\r\n
A vers\u00e3o 3 do Svelte \u00e9 muito recente (22\/03\/2019). A comunidade inteira est\u00e1 correndo para criar ferramentas para ele.<\/p>\r\n\r\n\r\n\r\n
O\u00a0Sapper<\/a><\/strong>\u00a0\u00e9 um framework<\/em> feito usando o Svelte<\/strong> para a cria\u00e7\u00e3o de SPA\u2019s<\/strong><\/a> e renderiza\u00e7\u00e3o no servidor. Ele \u00e9 inspirado no\u00a0Next.js<\/a><\/strong>.<\/p>\r\n\r\n\r\n\r\n
O\u00a0SvelteNative<\/a><\/strong>\u00a0\u00e9 um framework<\/em> para desenvolvimento de aplica\u00e7\u00f5es nativas Android<\/em> e iOS<\/em> inspirado no\u00a0NativeScript-Vue<\/a><\/strong>.<\/p>\r\n\r\n\r\n\r\n
Para testes automatizados temos o\u00a0s<\/strong><\/a>velte-testing-library<\/a><\/strong>\u00a0que tem todas \u00a0as fun\u00e7\u00f5es de teste do jest como describe, expect, test, etc.<\/p>\r\n\r\n\r\n\r\n
Tudo isso e v\u00e1rias outras novidades front-end<\/a><\/strong> est\u00e3o em desenvolvimento constante. Novas ferramentas surgem todo dia e o futuro do Svelte<\/strong> \u00e9 bem promissor \ud83d\ude42<\/p>\r\n\r\n\r\n\r\n
\r\n
 \u201cO JavaScript \u00e9 como uma caixa de chocolates. Voc\u00ea nunca sabe o que vai encontrar.\u201d<\/em><\/p>\r\n Forrest Gump \u2013 CEO da StartUp Camar\u00f5es Bubba Gump <\/em><\/cite><\/blockquote>\r\n\r\n\r\n\r\n
O\u00a0Front-end\u00a0<\/em>\u00e9 uma das \u00e1reas de desenvolvimento em que mais ocorrem mudan\u00e7as e isso \u00e9 o que a torna especial, te for\u00e7a a aprender coisas novas sempre.<\/p>\r\n\r\n\r\n\r\n
Essa sensa\u00e7\u00e3o de que a gente sempre est\u00e1 para tr\u00e1s o tempo todo, faz com a gente se debru\u00e7ar sobre horas em documenta\u00e7\u00f5es e v\u00eddeos no youtube tentando aprender a usar esse novo brinquedo que todo mundo est\u00e1 falando.<\/p>\r\n\r\n\r\n\r\n
Isso que me motiva a continuar estudando sempre. O Svelte <\/strong>\u00e9 a minha obsess\u00e3o agora, como h\u00e1 algum tempo foi o Vue<\/strong>, antes o React<\/strong>, antes o Angular e muito antes o jQuery<\/strong> (e antes ainda outras como Phaser JS<\/strong>, Three JS<\/strong>, Box2D JS<\/strong>, e a lista segue).<\/p>\r\n\r\n\r\n\r\n
Creio que em mais ou menos um ano o Svelte<\/strong> ter\u00e1 a mesma popularidade que o Vue<\/a><\/strong> tem agora (me cobrem sobre isso no futuro). Estar\u00e1 mais robusto e muitas empresas o ter\u00e3o como ferramenta principal de front-end.<\/p>\r\n\r\n\r\n\r\n
Temos um grande case de sucesso do Svelte aqui no Brasil, que talvez voc\u00ea j\u00e1 tenha usado e n\u00e3o sabe\u00a0\ud83d\ude09<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
Hoje existe mais de 200 mil maquininhas de pagamento de cart\u00e3o da empresa de pagamentos Stone espalhadas pelo Brasil, que est\u00e3o usando o Svelte<\/strong>, como o\u00a0@kaisermann<\/strong><\/a>\u00a0nos contou.

Ele testou com v\u00e1rios frameworks <\/em>e o Svelte<\/strong> foi o que teve melhor desempenho em um sistema de baixo processamento com linux embarcado, que s\u00e3o as m\u00e1quinas da Stone<\/strong>.

Isso pode ser um grande mercado em que o Svelte<\/strong> pode ter chances de dominar.<\/p>\r\n\r\n\r\n\r\n
Os dispositivos de baixo desempenho, como as j\u00e1 citadas, m\u00e1quinas de pagamento ou\u00a0SmartWatches<\/em>,\u00a0SmartTV\u2019s<\/em>,\u00a0Raspberry<\/em>, etc. Qualquer dispositivo que precise de alto desempenho e um c\u00f3digo moderno com baixo custo de processamento.

Tem muito mais coisas incr\u00edveis que ele faz que eu n\u00e3o me aprofundei nesse artigo, como fun\u00e7\u00f5es\u00a0async<\/em>\u00a0direto no template (async<\/em> dentro do html :O), props, gerenciamento global de estado (stores<\/em>), eventos do DOM<\/strong>, models, anima\u00e7\u00f5es, life cycles<\/em>, sugest\u00e3o de melhorias do c\u00f3digo na compila\u00e7\u00e3o, etc.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n
Agora \u00e9 sua vez de cair de cabe\u00e7a na\u00a0documenta\u00e7\u00e3o do Svelte<\/a><\/strong>\u00a0e come\u00e7ar a criar experi\u00eancias e aplica\u00e7\u00f5es com o Svelte\u00a0\ud83d\ude09<\/p>\r\n\r\n\r\n\r\n
Compartilhe esse artigo com os seus amigos front-ends e espalhe a palavra.<\/p>\r\n\r\n\r\n\r\n
\r\n
\u201cVoc\u00ea j\u00e1 ouviu falar da iniciativa Svelte?\u201d<\/em><\/p>\r\n Nick Fury, Vingadores <\/cite><\/blockquote>\r\n","protected":false},"excerpt":{"rendered":"
\u201cAh n\u00e3o, mais um framework JavaScript :(\u201d Voc\u00ea, neste momento. A j\u00e1 consagrada sant\u00edssima trindade dos frameworks JavaScript para cria\u00e7\u00e3o de front-end \u00e9 composta por Angular, Vue e React. A\u00ed voc\u00ea me pergunta: o que o\u00a0Svelte\u00a0pode oferecer de diferente desses tr\u00eas gigantes? E eu lhe respondo:\u00a0um bundle final de 0kb. Isso mesmo, o Svelte n\u00e3o […]<\/p>\n","protected":false},"author":167,"featured_media":5725,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-5707","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimiento-de-software"],"acf":[],"yoast_head":"\nSvelte: The Zero Bundle framework<\/title>\n<meta name=\"description\" content=\"Entenda o que diferencia o Svelte dos principais frameworks JavaScript para front-end: nenhum bundle final e nenhum framework necess\u00e1rio.\" \/>\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.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Svelte: o framework JavaScript que n\u00e3o \u00e9 um framework\" \/>\n<meta property=\"og:description\" content=\"\u201cAh n\u00e3o, mais um framework JavaScript :(\u201d Voc\u00ea, neste momento. A j\u00e1 consagrada sant\u00edssima trindade dos frameworks JavaScript para cria\u00e7\u00e3o de front-end \u00e9\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Geekhunter\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/geekhunterbr\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-05T15:18:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-12T21:05:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/06\/twitter-card.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Geekhunter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:site\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Geekhunter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/\"},\"author\":{\"name\":\"Geekhunter\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\"},\"headline\":\"Svelte: o framework JavaScript que n\u00e3o \u00e9 um framework\",\"datePublished\":\"2025-05-05T15:18:27+00:00\",\"dateModified\":\"2025-05-12T21:05:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/\"},\"wordCount\":1298,\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/twitter-card.png\",\"articleSection\":[\"Desenvolvimiento de software\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/\",\"name\":\"Svelte: The Zero Bundle framework\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/twitter-card.png\",\"datePublished\":\"2025-05-05T15:18:27+00:00\",\"dateModified\":\"2025-05-12T21:05:55+00:00\",\"description\":\"Entenda o que diferencia o Svelte dos principais frameworks JavaScript para front-end: nenhum bundle final e nenhum framework necess\u00e1rio.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/twitter-card.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/twitter-card.png\",\"width\":1000,\"height\":500,\"caption\":\"framework\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/svelte-o-framework-javascript-que-nao-e-um-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mundo TI\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desenvolvimiento de software\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/desenvolvimiento-de-software\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Svelte: o framework JavaScript que n\u00e3o \u00e9 um framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"name\":\"Blog de TI\",\"description\":\"Dicas para o RH e profissionais da \u00e1rea TI\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\",\"name\":\"GeekHunter\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"width\":300,\"height\":300,\"caption\":\"GeekHunter\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/x.com\\\/geekhunterbr\",\"https:\\\/\\\/www.instagram.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/geekhunter-brasil\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@GeekHunterOfficial\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\",\"name\":\"Geekhunter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"caption\":\"Geekhunter\"},\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/author\\\/matias\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Svelte: The Zero Bundle framework","description":"Entenda o que diferencia o Svelte dos principais frameworks JavaScript para front-end: nenhum bundle final e nenhum framework necess\u00e1rio.","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.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/","og_locale":"pt_BR","og_type":"article","og_title":"Svelte: o framework JavaScript que n\u00e3o \u00e9 um framework","og_description":"\u201cAh n\u00e3o, mais um framework JavaScript :(\u201d Voc\u00ea, neste momento. A j\u00e1 consagrada sant\u00edssima trindade dos frameworks JavaScript para cria\u00e7\u00e3o de front-end \u00e9","og_url":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/","og_site_name":"Blog Geekhunter","article_publisher":"https:\/\/www.facebook.com\/geekhunterbr\/","article_published_time":"2025-05-05T15:18:27+00:00","article_modified_time":"2025-05-12T21:05:55+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/06\/twitter-card.png","type":"image\/png"}],"author":"Geekhunter","twitter_card":"summary_large_image","twitter_creator":"@geekhunterbr","twitter_site":"@geekhunterbr","twitter_misc":{"Escrito por":"Geekhunter","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/#article","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/"},"author":{"name":"Geekhunter","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400"},"headline":"Svelte: o framework JavaScript que n\u00e3o \u00e9 um framework","datePublished":"2025-05-05T15:18:27+00:00","dateModified":"2025-05-12T21:05:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/"},"wordCount":1298,"publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/06\/twitter-card.png","articleSection":["Desenvolvimiento de software"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/","name":"Svelte: The Zero Bundle framework","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/#primaryimage"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/06\/twitter-card.png","datePublished":"2025-05-05T15:18:27+00:00","dateModified":"2025-05-12T21:05:55+00:00","description":"Entenda o que diferencia o Svelte dos principais frameworks JavaScript para front-end: nenhum bundle final e nenhum framework necess\u00e1rio.","breadcrumb":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.geekhunter.com/pt/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/#primaryimage","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/06\/twitter-card.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/06\/twitter-card.png","width":1000,"height":500,"caption":"framework"},{"@type":"BreadcrumbList","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/svelte-o-framework-javascript-que-nao-e-um-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.geekhunter.com/pt/blog\/"},{"@type":"ListItem","position":2,"name":"Mundo TI","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/"},{"@type":"ListItem","position":3,"name":"Desenvolvimiento de software","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/desenvolvimiento-de-software\/"},{"@type":"ListItem","position":4,"name":"Svelte: o framework JavaScript que n\u00e3o \u00e9 um framework"}]},{"@type":"WebSite","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","name":"Blog de TI","description":"Dicas para o RH e profissionais da \u00e1rea TI","publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.geekhunter.com/pt/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization","name":"GeekHunter","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","width":300,"height":300,"caption":"GeekHunter"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/geekhunterbr\/","https:\/\/x.com\/geekhunterbr","https:\/\/www.instagram.com\/geekhunterbr\/","https:\/\/www.linkedin.com\/company\/geekhunter-brasil\/","https:\/\/www.youtube.com\/@GeekHunterOfficial"]},{"@type":"Person","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400","name":"Geekhunter","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","caption":"Geekhunter"},"url":"https:\/\/www.geekhunter.com\/pt\/blog\/author\/matias\/"}]}},"_links":{"self":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/5707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/users\/167"}],"replies":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/comments?post=5707"}],"version-history":[{"count":0,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/5707\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media\/5725"}],"wp:attachment":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media?parent=5707"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/categories?post=5707"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/tags?post=5707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}