https://www.topskyll.com/_next/static/chunks/3609.4ed75f82f898446c.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3609],{381:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Settings",[["path",{d:"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",key:"1qme2f"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]])},3417:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("CodeXml",[["path",{d:"m18 16 4-4-4-4",key:"1inbqp"}],["path",{d:"m6 8-4 4 4 4",key:"15zrgr"}],["path",{d:"m14.5 4-5 16",key:"e7oirm"}]])},14186:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Clock",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16 14",key:"68esgv"}]])},23609:(e,a,t)=>{t.r(a),t.d(a,{default:()=>N});var s=t(95155),l=t(12115),r=t(94498),i=t(54213),n=t(71539),o=t(59964),d=t(3417),c=t(381),m=t(38564),h=t(53311),x=t(70463),p=t(62332),g=t(85690),v=t(34869),b=t(73314),f=t(40646),u=t(14186);let y=(0,l.lazy)(()=>t.e(1260).then(t.bind(t,51260))),j=(0,l.lazy)(()=>t.e(8508).then(t.bind(t,98508))),N=()=>{let e=[{icon:(0,s.jsx)(r.A,{className:"w-6 h-6"}),title:"No virtual DOM overhead—Svelte compiles components to highly efficient vanilla JavaScript"},{icon:(0,s.jsx)(i.A,{className:"w-6 h-6"}),title:"Smaller bundle sizes and faster load times out of the box"},{icon:(0,s.jsx)(n.A,{className:"w-6 h-6"}),title:"True reactivity: when data changes, the DOM updates immediately without diffing"}],a=[{year:"2016",version:"Svelte 1",title:"The Beginning",desc:"Svelte introduced by Rich Harris, initially focusing on simplicity and performance.",icon:(0,s.jsx)(o.A,{className:"w-8 h-8"}),color:"from-blue-400 to-cyan-500",bgColor:"bg-blue-500/10",borderColor:"border-blue-500/30"},{year:"2019",version:"Svelte 3",title:"Rewrite & Growth",desc:"Svelte 3 launched with a rewritten compiler, gaining massive traction.",icon:(0,s.jsx)(d.A,{className:"w-8 h-8"}),color:"from-green-400 to-emerald-500",bgColor:"bg-green-500/10",borderColor:"border-green-500/30"},{year:"2020-2021",version:"SvelteKit",title:"Official Framework",desc:"SvelteKit introduced, making production deployment and SSR easier.",icon:(0,s.jsx)(c.A,{className:"w-8 h-8"}),color:"from-yellow-400 to-orange-500",bgColor:"bg-yellow-500/10",borderColor:"border-yellow-500/30"},{year:"2022-2023",version:"High Satisfaction",title:"Developer Favorite",desc:" Recognition from the State of JS as the #1 framework in developer satisfaction.",icon:(0,s.jsx)(m.A,{className:"w-8 h-8"}),color:"from-purple-400 to-pink-500",bgColor:"bg-purple-500/10",borderColor:"border-purple-500/30"},{year:"2025",version:"Mainstream Adoption",title:"Future Forward",desc:"Widely used across startups, SaaS platforms, and e-commerce solutions; increasingly considered an alternative to React and Vue in enterprise projects.",icon:(0,s.jsx)(h.A,{className:"w-8 h-8"}),color:"from-red-400 to-pink-500",bgColor:"bg-red-500/10",borderColor:"border-red-500/30"}],t=[{title:"Svelte vs React",content:"React dominates market share but requires runtime overhead (virtual DOM). Svelte offers faster performance and smaller bundles, though the talent pool is smaller. For lean, high-performance apps, companies hire top Svelte developers over React experts.",advantages:["Faster Performance","Smaller Bundle Sizes","True Reactivity","Less Boilerplate"],icon:(0,s.jsx)(i.A,{className:"w-8 h-8"})},{title:"Svelte vs Angular",content:"Angular is a full-fledged framework with a steep learning curve. Svelte is lightweight, flexible, and developer-friendly.",advantages:["Lightweight & Flexible","Easier to Learn","Less Opinionated","Developer-Friendly"],icon:(0,s.jsx)(r.A,{className:"w-8 h-8"})},{title:"Svelte vs Vue",content:"Vue and Svelte both prioritize simplicity. However, Svelte’s compile-time model often delivers superior performance with less boilerplate.",advantages:["Superior Performance","Compile-Time Magic","Less Boilerplate","Simpler State Management"],icon:(0,s.jsx)(x.A,{className:"w-8 h-8"})},{title:"Svelte vs Vanilla JavaScript",content:" While vanilla JavaScript gives full control, Svelte automates much of the optimization, allowing faster development without sacrificing performance.",advantages:["Faster Development","Structured Code","Automated Optimization","Enhanced Tooling"],icon:(0,s.jsx)(d.A,{className:"w-8 h-8"})}],l=[{title:"Reactivity",description:"Variables in Svelte automatically trigger UI updates without extra libraries.",icon:(0,s.jsx)(n.A,{className:"w-8 h-8"}),gradient:"from-blue-400 to-cyan-500"},{title:"Stores",description:"Built-in state management for sharing data across components.",icon:(0,s.jsx)(i.A,{className:"w-8 h-8"}),gradient:"from-green-400 to-emerald-500"},{title:"Scoped CSS",description:"Styles are automatically encapsulated within components.",icon:(0,s.jsx)(p.A,{className:"w-8 h-8"}),gradient:"from-purple-400 to-pink-500"},{title:"Transitions & Animations",description:"Native support for fluid UI experiences.",icon:(0,s.jsx)(g.A,{className:"w-8 h-8"}),gradient:"from-yellow-400 to-orange-500"},{title:"SvelteKit (SSR & SSG)",description:"Enables server-side rendering, static site generation, and hybrid deployments for SEO-friendly apps.",icon:(0,s.jsx)(v.A,{className:"w-8 h-8"}),gradient:"from-red-400 to-pink-500"},{title:"Zero Virtual DOM",description:"Unlike React or Vue, Svelte eliminates the virtual DOM layer entirely, boosting speed and reducing complexity.",icon:(0,s.jsx)(b.A,{className:"w-8 h-8"}),gradient:"from-indigo-400 to-purple-500"}];return(0,s.jsxs)("section",{className:"relative max-con",children:[(0,s.jsxs)("div",{className:"text-center box-marginB",children:[(0,s.jsxs)("div",{className:"inline-flex items-center gap-2 px-4 py-2 rounded-full border-2 border-[#81004d4f] bg-gradient-to-t from-[#81004d4f] to-black mb-6",children:[(0,s.jsx)(d.A,{className:"w-5 h-5 text-white"}),(0,s.jsx)("span",{className:"text-white text-sm font-medium",children:"Modern JavaScript Framework"})]}),(0,s.jsxs)("h2",{className:"h1-text mb-6",children:["What is ",(0,s.jsx)("span",{className:"h1-high-text",children:"Svelte?"})]}),(0,s.jsx)("p",{className:"max-w-5xl mx-auto p2-text p-1",children:"Svelte is a modern JavaScript framework created by Rich Harris in 2016. Unl

1ike frameworks such as React or Vue, which run most of their logic in the browser at runtime, Svelte shifts that work to compile time. This unique approach means:"})]}),(0,s.jsx)("div",{className:"box-marginB",children:(0,s.jsxs)("div",{className:"grid lg:grid-cols-2 gap-8 items-center",children:[(0,s.jsx)("div",{className:"space-y-4",children:e.map((e,a)=>(0,s.jsxs)("div",{className:"flex flex-col sm:flex-row items-start gap-4 p-4 rounded-lg border border-gray-800 bg-gray-900/50 backdrop-blur-sm",children:[(0,s.jsx)("div",{className:"flex-shrink-0 p-2 rounded-lg bg-gradient-to-r from-[#81004D] to-[#fe5182]",children:e.icon}),(0,s.jsx)("div",{children:(0,s.jsx)("h4",{className:"h5-text mb-1",children:e.title})})]},a))}),(0,s.jsx)("div",{className:"relative",children:(0,s.jsxs)("div",{className:"box-con",children:[(0,s.jsxs)("div",{className:"text-center mb-6",children:[(0,s.jsxs)("div",{className:"flex flex-col items-center gap-2 text-white mb-4",children:[(0,s.jsx)("div",{className:"vio-org-grad p-2 rounded-lg w-16 h-16 flex justify-center items-center",children:(0,s.jsx)(o.A,{className:"w-8 h-8"})}),(0,s.jsx)("span",{className:"text-2xl font-bold",children:"Svelte"})]}),(0,s.jsx)("p",{className:"p5-text",children:"Why Businesses Prefer Svelte ?"})]}),(0,s.jsxs)("div",{className:"space-y-3",children:[(0,s.jsxs)("div",{className:"flex items-center justify-between p-3 bg-black/50 rounded-lg",children:[(0,s.jsx)("span",{className:"p5-text",children:"Faster page loads → higher SEO rankings and user retention"}),(0,s.jsx)(f.A,{className:"w-5 h-5 text-green-400"})]}),(0,s.jsxs)("div",{className:"flex items-center justify-between p-3 bg-black/50 rounded-lg",children:[(0,s.jsx)("span",{className:"p5-text",children:"Lower runtime overhead → reduced hosting costs."}),(0,s.jsx)(f.A,{className:"w-5 h-5 text-green-400"})]}),(0,s.jsxs)("div",{className:"flex items-center justify-between p-3 bg-black/50 rounded-lg",children:[(0,s.jsx)("span",{className:"p5-text",children:"Simpler syntax → faster developer onboarding."}),(0,s.jsx)(f.A,{className:"w-5 h-5 text-green-400"})]}),(0,s.jsxs)("div",{className:"flex items-center justify-between p-3 bg-black/50 rounded-lg",children:[(0,s.jsx)("span",{className:"p5-text",children:"Optimized for modern workflows with SvelteKit, its official app framework for SSR, SSG, and hybrid rendering."}),(0,s.jsx)(f.A,{className:"w-5 h-5 text-green-400"})]})]})]})})]})}),(0,s.jsxs)("div",{className:"box-marginB",children:[(0,s.jsxs)("div",{className:"text-center mb-6 sm:mb-16",children:[(0,s.jsxs)("div",{className:"inline-flex items-center gap-2 px-6 py-3 rounded-full border-2 border-[#81004d4f] bg-gradient-to-t from-[#81004d4f] to-black mb-8",children:[(0,s.jsx)(u.A,{className:"w-5 h-5 text-white"}),(0,s.jsx)("span",{className:"text-white font-medium",children:"Evolution Timeline"})]}),(0,s.jsxs)("h2",{className:"h2-text mb-8",children:[(0,s.jsx)("span",{className:"h2-high-text",children:"Brief History"})," of Svelte"]})]}),(0,s.jsx)("div",{className:"grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6",children:a.map((e,a)=>(0,s.jsx)("div",{className:"border-2 ".concat(e.borderColor," ").concat(e.bgColor," backdrop-blur-sm rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-white/5"),children:(0,s.jsxs)("div",{className:"flex flex-col sm:flex-row items-start gap-4",children:[(0,s.jsx)("div",{className:"w-14 h-14 rounded-2xl bg-gradient-to-r ".concat(e.color," flex items-center justify-center shadow-lg transition-transform duration-300 hover:scale-110"),children:e.icon}),(0,s.jsxs)("div",{className:"flex-1",children:[(0,s.jsxs)("div",{className:"flex items-center flex-wrap gap-3 mb-3",children:[(0,s.jsx)("span",{className:"text-xl font-bold bg-gradient-to-r ".concat(e.color," bg-clip-text text-transparent"),children:e.year}),(0,s.jsx)("span",{className:"text-gray-400",children:"|"}),(0,s.jsx)("span",{className:"text-white font-semibold",children:e.version})]}),(0,s.jsx)("h4",{className:"h4-text mb-3",children:e.title}),(0,s.jsx)("p",{className:"text-gray-300 leading-relaxed",children:e.desc})]})]})},a))})]}),(0,s.jsxs)("div",{className:"box-marginB",children:[(0,s.jsx)("div",{className:"text-center box-marginB",children:(0,s.jsxs)("h2",{className:"h2-text mb-8",children:["Svelte vs ",(0,s.jsx)("span",{className:"h2-high-text",children:"Other Technologies"})]})}),(0,s.jsx)("div",{className:"grid lg:grid-cols-2 gap-6",children:t.map(e=>(0,s.jsxs)("div",{className:"border-2 border-[#81004d4f] bg-gradient-to-t from-[#81004d4f] to-black rounded-2xl p-4 lg:p-6",children:[(0,s.jsxs)("div",{className:"flex flex-col sm:flex-row text-center items-center gap-4 mb-6",children:[(0,s.jsx)("div",{className:"p-3 rounded-xl bg-gradient-to-r from-[#81004D] to-[#fe5182]",children:e.icon}),(0,s.jsx)("h3",{className:"h3-text",children:e.title})]}),(0,s.jsx)("p",{className:"text-gray-300 text-lg leading-relaxed",children:e.content})]},e.title))})]}),(0,s.jsxs)("div",{className:"box-marginB",children:[(0,s.jsx)("div",{className:"text-center box-marginB",children:(0,s.jsxs)("h2",{className:"h2-text mb-8",children:["Core ",(0,s.jsx)("span",{className:"h2-high-text",children:"Svelte Concepts"})," Every Business Should Know"]})}),(0,s.jsx)("div",{className:"grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8",children:l.map((e,a)=>(0,s.jsx)("div",{className:"group cursor-pointer",children:(0,s.jsx)("div",{className:"h-full border-2 border-[#81004d4f] bg-gradient-to-t from-[#81004d4f] to-black rounded-2xl p-6 md:p-8 hover:scale-105 transition-all duration-500 hover:shadow-2xl hover:shadow-white/10",children:(0,s.jsxs)("div",{className:"flex flex-col items-center text-center",children:[(0,s.jsx)("div",{className:"w-16 h-16 md:w-20 md:h-20 rounded-2xl bg-gradient-to-r ".concat(e.gradient," flex items-center justify-center mb-4 md:mb-6 group-hover:scale-110 transition-transform duration-300"),children:e.icon}),(0,s.jsx)("h4",{className:"h4-text mb-3 md:mb-4",children:e.title}),(0,s.jsx)("p",{className:"text-gray-300 leading-relaxed text-sm md:text-base",children:e.description})]})})},a))})]}),(0,s.jsx)(y,{}),(0,s.jsx)(j,{})]})}},40646:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("CircleCheckBig",[["path",{d:"M21.801 10A10 10 0 1 1 17 3.335",key:"yps3ct"}],["path",{d:"m9 11 3 3L22 4",key:"1pflzl"}]])},53311:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Sparkles",[["path",{d:"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z",key:"4pj2yx"}],["path",{d:"M20 3v4",key:"1olli1"}],["path",{d:"M22 5h-4",key:"1gvqau"}],["path",{d:"M4 17v2",key:"vumght"}],["path",{d:"M5 18H3",key:"zchphs"}]])},54213:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Database",[["ellipse",{cx:"12",cy:"5",rx:"9",ry:"3",key:"msslwz"}],["path",{d:"M3 5V19A9 3 0 0 0 21 19V5",key:"1wlel7"}],["path",{d:"M3 12A9 3 0 0 0 21 12",key:"mv7ke4"}]])},59964:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Rocket",[["path",{d:"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z",key:"m3

1kijz"}],["path",{d:"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z",key:"1fmvmk"}],["path",{d:"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0",key:"1f8sc4"}],["path",{d:"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5",key:"qeys4"}]])},62332:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("FileCode",[["path",{d:"M10 12.5 8 15l2 2.5",key:"1tg20x"}],["path",{d:"m14 12.5 2 2.5-2 2.5",key:"yinavb"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["path",{d:"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z",key:"1mlx9k"}]])},70463:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Lightbulb",[["path",{d:"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",key:"1gvzjb"}],["path",{d:"M9 18h6",key:"x1upvd"}],["path",{d:"M10 22h4",key:"ceow96"}]])},71539:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Zap",[["path",{d:"M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",key:"1xq2db"}]])},73314:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Cpu",[["rect",{width:"16",height:"16",x:"4",y:"4",rx:"2",key:"14l7u7"}],["rect",{width:"6",height:"6",x:"9",y:"9",rx:"1",key:"5aljv4"}],["path",{d:"M15 2v2",key:"13l42r"}],["path",{d:"M15 20v2",key:"15mkzm"}],["path",{d:"M2 15h2",key:"1gxd5l"}],["path",{d:"M2 9h2",key:"1bbxkp"}],["path",{d:"M20 15h2",key:"19e6y8"}],["path",{d:"M20 9h2",key:"19tzq7"}

1],["path",{d:"M9 2v2",key:"165o2o"}],["path",{d:"M9 20v2",key:"i2bqo8"}]])},85690:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Play",[["polygon",{points:"6 3 20 12 6 21 6 3",key:"1oa8hb"}]])},94498:(e,a,t)=>{t.d(a,{A:()=>s});let s=(0,t(19946).A)("Layers",[["path",{d:"m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z",key:"8b97xw"}],["path",{d:"m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65",key:"dd6zsq"}],["path",{d:"m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65",key:"ep9fru"}]])}}]);