20 ms·

SvelteKit 1.0

919 points by theodorejb 4y ago

xiphias2 4y ago
Thanks for finally having a SvelteKit tutorial :) I was using SvelteKit, but I really need the tutorial to get better at it (also to adapt better to the changes that have happened).
onlyspaceghost 4y ago
Amazing!
swyx 4y ago
congrats team! the livestream and meta discussions around the launch are happening here https://www.youtube.com/watch?v=N4BRVkQVoMc https://www.youtube.com/watch?v=N4BRVkQVoMc theres a full in browser tutorial as well: https://learn.svelte.dev/ https://learn.svelte.dev/ I've been keeping a reference implementation of a SvelteKit blog, inspired by @leerob's nextjs site: https://github.com/sw-yx/swyxkit/ https://github.com/sw-yx/swyxkit/ for the past year and it's now updated for 1.0. hope it helps someone get going!
- jdthedisciple 4y ago
  I checked out the blog and it doesn't seem to be rendering the Markup correctly. For example the h2 headers appear literally as '## HEADER' on the website.
  - swyx 4y ago
    that is a stylistic choice on purpose - i actually add the #'s in with CSS - just makes headers stand out a little more :) i use h2, h3, and h4 often and just using font size alone makes it hard to tell which level of nesting the content is intended you can see this on my main blog https://www.swyx.io/ https://www.swyx.io/
asdfdelta 4y ago
I've been following Svelte since it first appeared on the State of JS survey. So cool to see it evolve over time and happy to see all the hard work pay off!
theonlytails 4y ago
congrats to everybody on the svelte team!
a3k 4y ago
Finally, I've been waiting for this moment for 2 years
KoljaL 4y ago
Great! Congrats to all the maintainers. I wish you will have a really really nice Christmas
wirahx 4y ago
don't forget to watch the livestream!
- pier25 4y ago
  https://www.youtube.com/watch?v=N4BRVkQVoMc https://www.youtube.com/watch?v=N4BRVkQVoMc
dimmke 4y ago
Congrats to the team for this! I have been building an application in SvelteKit and it's an incredible framework. I really believe it's going to become the dominant front-end framework in the next few years.
- pevey 4y ago
  I completely agree except that I would say "full stack framework" instead of "frontend framework." Just add a db and you are good to go. I tried it out when building a couple of non-critical internal apps for clients (basic CRUD apps, but with some pretty complex business rules). SvelteKit is beautifully designed. It makes things that used to be a bit of a pain super easy to understand and implement. You can use pretty much any NPM vanilla js/ts library. The timing here could not be better for me. I will definitely be using SK for my next project.
  - pier25 4y ago
    > Just add a db and you are good to go What about validation, CORS, cookies, encrypted sessions, etc? A backend (or full stack) framework should at the very minimum include those kind of things. It's a major gripe I have with all the new full stack frameworks. The focus is on rendering and dealing with requests but they are quite sparse in bread and butter backend features. Other than routing you're basically on your own. The community will probably start making third party plugins but I would rather have official plugins I can 100% trust like Fastify does.
    - pevey 4y ago
      It's full stack because you write the code that you want to run on the server AND the code that you want to be shipped to the browser both within SK. Not because it does everything. You would want to choose your favorite libraries for those things, e.g., zod is my fave for validation.
    - miohtama 4y ago
      SvelteKit ships with a SSR server (Vite) and file system based routing out of the box. It does most of things, though not all. SvelteKit = Svelte + SSR + integration layer. Though I expect the situation improve a bit soon, as now SvelteKit 1.0 release is out from the door.
oxff 4y ago
Why is there a new frontend-whatever-work / tool every week? Database stuff is fairly stable, so is backend stuff. Browser APIs seem stable to me too? Why can't you guys decide that this is how things are best done
- arxpoetica 4y ago
  SvelteKit is nothing new. It's been kicking around for 2+ years with tons of user satisfaction (and 3 years prior to that under another name), but this is the first major/stable release. - https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks - https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/ - https://twitter.com/Rich_Harris/status/1589675637195042817
- anon291 4y ago
  As someone who's written both a GUI framework and a database library for Haskell, the answer here is actually really obvious. There's only a small set of algorithms for database query execution, all of which are well understood. Thus, there are best algorithms that you can implement. On the other hand, there is no correct way to style, animate, interact with, etc a button. The design space for UX is much larger than that of databases, and existing libraries touch maybe a small percentage.
- didiraja 4y ago
  if you know what you were doing on front-end you wouldn't spelling this words aberration compilation
  - oxff 4y ago
    I really don't know, that's why I asked.
- rk06 4y ago
  Because it is a not a new js framework, but a higher level tool based on a js framework I. E. svelte. Similar meta frameworks exist for other js frameworks eg: Next(react), Nuxt(vue), Remix(react), rakkas(react), Solidstart(solid) etc.
torartc 4y ago
Congrats team. SvelteKit is a great experience.
arxpoetica 4y ago
The Sapper is dead! Long live the SvelteKit!
gsanderson 4y ago
Congratulations! Watching the live stream now.
johninvirtual 4y ago
Congrats to all the people behind this, thanks for your work. I love svelte
keyboards 4y ago
Thank you so much for this. I love Svelte to bits.
akmittal 4y ago
Congratulations to the team for releasing this. For someone who hasn't followed svelte closely, How much JS sveltekit ship by default using SSR
- swyx 4y ago
  its up to you - you can ship 0 kb of js if you want by turning off client side rendering https://kit.svelte.dev/docs/page-options#csr https://kit.svelte.dev/docs/page-options#csr and you have this choice on a per page basis rather than having to choose between a static site generator or a full SPA
  - akmittal 4y ago
    0kb is best size of JS. Curious if I do want JS, how much is extra framework overhead
    - crucialfelix 4y ago
      3kB
      - swyx 4y ago
        as compared to nextjs’ ~150kb baseline? (not a real number im just guesstimating)
        crucialfelix 4y ago
        79.46 kb which includes React. That's never where the bloat comes from.
        akmittal 4y ago
        How so, that 80 kb is bloat
        4y ago
joeconway 4y ago
Congratulations to the team, you’ve built something really excellent
adamnemecek 4y ago
Perfect timing! I literally started working on a project in Svelte after spending like two afternoons trying to do it in React. Svelte is such a God send. So much simpler and powerful than React. Not to mention the fact that React only handles the UI layer but is too unopinionated w.r.t. the application architecture.
pier25 4y ago
Bravo! Congrats!
jerriclynsjohn 4y ago
Been using Sveltekit and love what the community has done to the framework. Makes life of a developer very straightforward and I'm sure that Sveltekit will rise to be a dominant frontend framework soon.
samtp 4y ago
While the breaking changes were rough this year, the new structure is a huge improvement over before. It is now extremely clear the order that items are loaded, and what is loaded on the server vs client. Form actions are also amazing. Congrats to the team and thanks for all the hard work!
jmull 4y ago
I'm just completing a job using svelte/kit, tailwind, postgres, typescript. Actually, I was new to the entire stack, but it went smooth as butter. (Though I have plenty of experience with JS, HTML, CSS, other databases, etc.) IMO, svelte and sveltekit are well designed and have a great dev experience. LOL, as I was writing this he was apologizing on the stream for the breaking changes. That was a bit of a pain, but not really that bad. My only real gripe is using folders to organize both layout hierarchy and route hierarchy is going to turn out to be a mistake.
- culi 4y ago
  > My only real gripe is using folders to organize both layout hierarchy and route hierarchy is going to turn out to be a mistake. +1 to this. I think Next.js made this mistake too and is now backtracking
  - reducesuffering 4y ago
    How is Next backtracking? Their v13 released with the app/ in beta doing exactly this Svelte/Remix style layout/route folder heirarchy? app/page.tsx and app/path/page.tsx
- crucialfelix 4y ago
  Yes, it's easy to get confused with folders and folders of +page.svelte [slug].svelte would be better [slug]/index.svelte [slug]/[category].svelte Etc There is a vscode extension that helps a little bit, but it's still the one thing I am not fond of.
  - yencabulator 4y ago
    The src/routes/posts/[slug]/+page.svelte thing is pretty recent, it used to be just src/routes/posts/[slug].svelte. I'm not exactly thrilled with the new naming...
    - MentallyRetired 4y ago
hu3 4y ago
This is how I move fast and break nothing. By having fullstack type-safety from database all the way to the frontend with auto-completion. My current stack: + SvelteKit (could be Next, Nuxt, Solid or any other TypeScript framework) + tRPC (typed calls between frontend and backend, https://trpc.io https://trpc.io) + trpc-sveltekit (glues SvelteKit and tRPC, https://github.com/icflorescu/trpc-sveltekit https://github.com/icflorescu/trpc-sveltekit) + Prisma (ORM, https://www.prisma.io https://www.prisma.io)
- mitch3x3 4y ago
  How are you liking Prisma compared to a pure SQL approach?
  - qudat 4y ago
    When I used prisma a few years ago I was not impressed and it couldn't do a lot of what I needed so I had to dump into raw sql queries anyway. It was easier for me to use knex and get the types mostly right.
    - Trufa 4y ago
      A lot has changed in the past years of Prisma, it's a really great tool, to be honest, "raw sql" escape hatches to do anything raw when you need it, if you haven't tried it in years, I'd recommend you to try again since if you tried it years ago, it was a very different maturity level.
      - abraxas 4y ago
        Do they (Prisma) still rely on a Rust sidecar? This caused multiple issues with container deployment and the CI/CD pipeline of my employer.
        braden-lk 4y ago
        I believe the sidecar is optional now, and I think even the one that exists comes in the form of their paid service called Prisma Proxy. It doesn’t seem necessary for most use cases.
bkeating 4y ago
There is so much "let me just see if this works..." tap tapppy tap .... "no... NO WAY... OMG IT WORKED!" with Svelte. Very little surface area. It embraces your knowledge of plain ole CSS/JS/HTML and empowers you with reactivity and a means of if being able to add motion to your ui. Newbs and Pros alike can build fast with it. That speed + reactivity allows your software to better keep up with your converstaions that make it all so. Thats insanely powerful. It's soooo good. Congratulations to Richard Harris and everyone on the Svelte/SvelteKit Team! <3
- pier25 4y ago
  > It embraces your knowledge of plain ole CSS/JS/HTML Yeah that's one of the things I love about Svelte. It tends to enhance fundamental web knowledge rather than forcing you to think in convoluted ways. Features like actions put you close to the bare metal so to speak. I use those all the time.
  - samtp 4y ago
    Backing up how great it is that so much of Sveltekit is built using basic web standards. More often than not when I'm wondering what the shape of an object or function is in Sveltekit, I realize that it's exactly the same as you'd find on MDN documentation. It's an incredibly refreshing experience compared to other frameworks that create custom concepts for everything they do.
  - culi 4y ago
    This is what they said about React when it first blew up. Compared to Angular, it's much closer to being *just javascript™*. But I wonder how well that'll hold up after the honeymoon phase The builder.io team made a tool called Mitosis[^0] that lets you input a component written in almost any framework and automatically recreate that same component in any other framework including Vue, React, Qwik, Angular, Svelte, React Native, Lit, web components, and even Swift It's always interesting to try out different frameworks and compare the plain HTML version of certain components with this tool [^0]: https://mitosis.builder.io/ https://mitosis.builder.io/
Caged 4y ago
Svelte is such a pleasure to write and work with. It follows my mental model really well. Congrats to the team on this amazing milestone!
davjhan 4y ago
Congratulations to the team!
hedgehog 4y ago
"This app requires modern web platform features. Please use a browser other than Safari." Looks cool but not production ready.
- Kuinox 4y ago
  Safari is the new IE.
  - fncivivue7 4y ago
    We had to support ie.
  - rajasimon 4y ago
    Wish it is but it's crazy fast with M1
    - Kuinox 4y ago
      Any browser is fast with the last CPU node. Safari is becoming compatibility nightmare.
      - dmitriid 4y ago
        The tutorial used Web Containers which... aren't a standard and are very specifically Chrome-only. And it undoubtedly relies on a bunch of Chrome-only non-standards, too.
        Kuinox 4y ago
        > Web Containers which... aren't a standard The implementation doesn't use chrome specific API AFAIK, and it works on firefox. > are very specifically Chrome-only. And it undoubtedly relies on a bunch of Chrome-only non-standards, too. It does support all majors browers, except safari. The reason why it doesn't work on Safari is even listed: > Safari recently shipped support for SharedArrayBuffer and cross-origin isolation in a somewhat buggy state. In addition to this, it is still lacking a few other features which prevents us from shipping a working environment such as: > Atomics.waitAsync > Lookbehind in regular expressions > Note that none of above can be pollyfilled. These are not "Chrome-only non-standards" and are parts of the officials JS/HTTP specs
kenkunz 4y ago
Congratulations to the whole SvelteKit team! I've been using Svelte / SvelteKit for 1.5 years now – it is without comparison the most enjoyable and productive web f̵r̵a̵m̵e̵w̵o̵r̵k̵ language I've ever used. I'm lucky enough to work with Svelte / SvelteKit full-time. I'm gratified that the site I help build and maintain is included in the SvelteKit showcase: https://kit.svelte.dev https://kit.svelte.dev Trading Strategy: https://tradingstrategy.ai https://tradingstrategy.ai
- acqbu 4y ago
  That's amazing. Out of curiosity, how does one get to work for companies that use Svelte? I'm based in the UK and the only companies I've heard of using Svelte are Decathlon, Apple and Spotify.
  - dskwrite 4y ago
    A couple of spots I'm aware of that are Svelte specific .. https://sveltejobs.com https://sveltejobs.com Jobs channel on the Svelte Discord https://discord.com/channels/457912077277855764/640884695890133012 https://discord.com/channels/457912077277855764/640884695890...
    - acqbu 4y ago
      that's amazing, thanks a lot
lairv 4y ago
Great news and looking forward to how this goes. I still find it incredible that the frontend javascript ecosystem hasn't found a reliable and productive contender yet, a framework you could be sure would be still relevant without too much changes in 5+ years, something like what Ruby on Rails is for full-stack. Some would say that React/NextJS has this role but I have to disagree. When using React/NextJS you still have to rely on third party library for routing, state management, querying etc. like React-Query, React-Router, Redux (Next has a router but you still need libraries to do the rest). Some of these libraries change a lot, some become less relevant, new libraries emerge, and in the end when you start a React project you must go through the "library shopping" step.
- rglover 4y ago
  > you still have to rely on third party library for routing, state management, querying etc. Take a peek at Joystick [1]. I designed it as the exact antithesis to this. It's full-stack (Node.js back-end with a fully ssr'd component framework designed for the long-term) and doesn't introduce any special paradigms (i.e., vanilla HTML, CSS, and JavaScript—no attribute tricks/compilers needed). Everything is designed to be a fixed-API with the only changes being added functionality (i.e., no random "hey this is deprecated now" rug pulls). Philosophy is described here: https://github.com/cheatcode/joystick#what-distinguishes-joystick-from-other-frameworks https://github.com/cheatcode/joystick#what-distinguishes-joy... [1] https://github.com/cheatcode/joystick https://github.com/cheatcode/joystick
  - lairv 4y ago
    Will take a look at it, and good luck with building it, such projects requires effort and test of time
    - rglover 4y ago
      Thank you, appreciate that. If you have any questions feel free to contact me directly: ryan.glover@cheatcode.co.
- herrherrmann 4y ago
ericmsimons 4y ago
Congrats to Rich & team- SvelteKit is an amazing experience to develop with. Excited to use 1.0 on some new projects!
FractalHQ 4y ago
Sveltekit has been transformational for me. I can't express enough gratitude to the legendary team who made this happen. Congrats guys!!!
stephenstuder 4y ago
Its so freaking good, hope large orgs start using it
kretaceous 4y ago
SvelteKit 1.0 is the one release I was actually waiting for. I've seen a lot of flashy stuff launch in the frontend framework recently but this one feels...genuine? Huge congratulations to Rich and team! Hope I'll be able to contribute to Svelte's growth someday.
Ilasky 4y ago
Sveltekit has been an absolute DREAM to learn and use with my app! Been tracking their 1.0 progress closely and it's been incredible. Sveltekit + TailwindCSS + FastAPI has made it super easy to whip up functionality and have a fine-tuned approach as well. As someone else said, the "I CAN'T BELIEVE IT WAS THAT EASY" is an ongoing sentiment whenever I use it. Looking forward to seeing it grow and gain more popularity
- miohtama 4y ago
  SvelteKit SSR is a very good pair to Python backends, like FastAPI.
  - Labo333 4y ago
    Can you expand? I don't get how you can use SSR with another language than Node. I always thought one has to use the static adapter.
    - buttersbrian 4y ago
      the backend svelte (node) can actually make calls to the separate api server and render a 'fuller' page to the client on page load. I believe this is what is meant.
    - miohtama 4y ago
      Requests are routed reverse proxy (Caddy) -> Vite (SSR) -> Python (Pyramid). SSR calls your backend APIs and renders templates. Example from SvelteKit page.ts here: https://github.com/tradingstrategy-ai/frontend/blob/master/src/routes/trading-view/blockchains/%2Bpage.ts https://github.com/tradingstrategy-ai/frontend/blob/master/s... Some remarks - page.ts is routed by Vite for every HTTP request for SSR and then it will fetch() data over backend API - If rendered in the client, fetch() hits directly the backend API - Both cases the template is rendered using the same logic (Svelte HTML templating, CSS, JS) - You are going to need a template language any cases, like Django's one. Alternative way to think this is that SvelteKit is just a super powerful template engine.
- 4y ago
didiraja 4y ago
Congrats all Svelte team and community, highly antecipated project. Played a lot with the early releases. To me, Svelte suite is the best option for front-end applications.
sergiotapia 4y ago
Congratulations on the milestone! I'm a bit confused, does this mean I can use Prisma with Sveltekit out of the box? It's server side rendered like a typical expressjs app?
joeldrake 4y ago
Hurray!
nathias 4y ago
I'm a React expert, but whenever I can I choose Svelte, it really is a joy to use. I've been using SvelteKit for some time now, it's great to see it out of beta so I can shill it to more projects.
yamrzou 4y ago
There is a plethora of javascript frameworks: React, Vue, Svelte, Remix, etc. If I know nothing about front-end development, and would like to learn one that is: - Intuitive - Suitable for small projects as well as large projects. - That is here to stay, i.e. either adopted by many companies, or its adoption curve is going up. Which one should I pick? Would Svelte be a good choice?
- JonathanBeuys 4y ago
  Why do you want a framework and not just plain HTML, CSS and Javascript? I have been doing frontend dev for over a decade and I never needed a framework. When I want to template data client side, I use Handlebars.
  - veidelis 4y ago
    You've never ran into DOM performance issues? You use a lot of createDocumentFragment? Please share more.
- have_faith 4y ago
  > Suitable for small projects as well as large projects > That is here to stay, i.e. either adopted by many companies, or its adoption curve is going up. Arguably React for ecosystem and provability at every scale. > Intuitive Likely Svelte. React is mostly fine but hooks come with their footguns for newcomers.
- swyx 4y ago
  remix isnt like those others in that you’d also need React to do UI at this point React Vue and Svelte are all decent production choices, as for what is intuitive that really depends what YOU like, different strokes different folks svelte is probably the most fully integrated toolkit (animations, state mgmt, server side rendering, serverless api routes, etc) and ships the least javascript at this point tho if u want the quick sales pitch
  - slimebot80 4y ago
dang 4y ago
Related: SvelteKit - https://news.ycombinator.com/item?id=29902450 https://news.ycombinator.com/item?id=29902450 - Jan 2022 (3 comments) My Evaluation of SvelteKit for Full-Stack Web App Development - https://news.ycombinator.com/item?id=29806385 https://news.ycombinator.com/item?id=29806385 - Jan 2022 (125 comments) SvelteKit Is in Public Beta - https://news.ycombinator.com/item?id=26557886 https://news.ycombinator.com/item?id=26557886 - March 2021 (114 comments) What's the Deal with SvelteKit? - https://news.ycombinator.com/item?id=24996750 https://news.ycombinator.com/item?id=24996750 - Nov 2020 (2 comments)
omnibrain 4y ago
All the praise for SvelteKit in this thread peaked my interest. But where would I start? I'm currently looking around to find a modern "toolkit" to write a new webbased frontend for our traditional desktop app. It's goin to be more or less CRUD with lots of tables/grids. Currently I favour vue.js with Quasar because of all the tooling and ressources it offers. It looks like it's easy to start with a traditional "navigation on the left, content on the right" layout. I need nothing fancy, it's going to be business CRUD for a small circle of users. Deployed on premises at our customers sites.
- arxpoetica 4y ago
  You can start here: https://learn.svelte.dev/tutorial/welcome-to-svelte https://learn.svelte.dev/tutorial/welcome-to-svelte
  - encryptluks2 4y ago
    > Yikes! We couldn't start the app. Please ensure third party cookies are enabled for this site. Yikes! No thanks.
    - samtp 4y ago
      You can also just install the demo package and play around with it on your own computer.
    - swyx 4y ago
      or go incognito mode
  - cschmidt 4y ago
    It is a really wonderful interactive tutorial. So well done.
- theo-steiner 4y ago
  https://learn.svelte.dev/ https://learn.svelte.dev/ is a great place to start!
- 4y ago
efields 4y ago
Congrats to Svelte. More than a couple years ago, I gave my team the opportunity to go React, Vue or Svelte after giving them time to test them out. React was basically the legacy code that we were familiar with. This was right around the first hooks release and after using it for a while, and we had a nasty redux state manager, and nothing about React felt truly great for DX besides JSX, and that was everywhere already. I'm happy with Vue but every time I look at Svelte code I get a bit jealous. Its a very nice environment, one I would pick up for personal projects if that time was there, and I wish Svelte godspeed and a huge adoption curve.
stephenstuder 4y ago
Svelte is soooo good. Hope it starts to get used more in large orgs.
deleted 4y ago
[deleted]
newbieuser 4y ago
After a few minor versions, I hope they don't start to deprecate the newly added features.
dceddia 4y ago
Exciting to see this hit 1.0! The new tutorial site looks great and I love that the sidebar is searchable now. Also the Cmd-K search on the docs (https://kit.svelte.dev/ https://kit.svelte.dev/) is awesome to have as well. I've been really enjoying working with Svelte for the last year or so now. My main project is a video editor, running under Tauri and using plain client-side Svelte, but I've also used SvelteKit to throw together a few little admin dashboard-y things and it's been very quick to get started with. Right now those projects are pretty lightweight too, just SvelteKit with TypeScript, the pg-promise package to connect with Postgres, and a handful of handwritten SQL queries. Congrats to the team! Looking forward to see what the future holds for Svelte[Kit].
rohanrajpal 4y ago
Congrats team, we've built a HUGE SaaS with Sveltekit + NestJs and it has been a wonderful experience
Tade0 4y ago
As someone who wrote his first lines of JS in 2001, working with Svelte feels a lot like the good old days of JS when front-end was simple. To me the main selling point is that the stack trace is actually useful for a change - you especially can find in there the line which caused the re-render and subsequent error. JS frameworks/libraries by and large lost that feature a decade ago.
- rk06 4y ago
  Chrome has improved it a lot, now the stack traces can point to line of user code which caused this issue. This was initiated by Angular team, but I have seen it work for vue as well
batesy 4y ago
Well after reading the comments in this thread, I'm learning Svelte over the Holidays.
gedy 4y ago
I enjoy Svelte a lot and congrats on the release. However the job market for Svelte seems really weak, at least for US dev salaries. I hope Sveltekit increases adoption, as it's a nice alternative to NextJS
lewantmontreal 4y ago
How so people feel about client side navigation? Browsing svelte.dev it appears back/forward navigation now requires a request each time as browser cache is no longer usable. Page refresh also seems to reset scroll position but that might be unrelated.
- dcre 4y ago
  This appears to be deliberate depending on the page. Looking at the network inspector as I click around, I see cache-control: private, no-cache on the responses for docs content, but I do see caching on the blog pages.
- swyx 4y ago
  its just a setting now on sveltekit. clientside navigation is a single line of code
- Lukas_S 4y ago
  Sveltekit saves your scroll position in session storage so refresh and back/forward navigation feels like regular browser behavior. If your scroll position is resetting on refresh that may be a bug. Navigating back/forward will only make a new request if that page needs to fetch data in its +page.js component https://kit.svelte.dev/docs/load https://kit.svelte.dev/docs/load
qprofyeh 4y ago
While most of the comments here seem positive… A custom template language is like another programming language to learn (to make mistakes in). I prefer JSX/TSX which is closer to reusing HTML.
- dcre 4y ago
  Speaking as nearly-exclusively a JSX/TSX user, it is not really true that it is closer to HTML than Svelte's templating. People who like and use Svelte report the opposite.
  - ovao 4y ago
    Agree with this. Iterating with Array.map and returning nodes to compose, say, unordered lists in JSX is most decidedly un-HTML-like. I can see the drawback to learning yet another templating language, and on this point I’d just say “to each their own”. I feel like either approach is fine. Svelte’s templating is pretty minimal, so there isn’t much to learn.
- kalkr 4y ago
  IMO Svelte feels much more like HTML than JSX does.
- qudat 4y ago
  I don’t get why you’d want to try to emulate html. The syntax and closing tags are brutal on the eyes. I’d prefer a more lisp style syntax for representing html
- dawei67 4y ago
  the template "language" is learnable in 10mn and fit in a small cheat sheet. I personally think JSX as a template language make HTML horrifying to read
mattwoodnyc 4y ago
There are a handful of them here - https://trpc.io/docs/example-apps https://trpc.io/docs/example-apps
owlbynight 4y ago
If you're just learning SvelteKit, check this tool out: https://github.com/svelte-add/svelte-add https://github.com/svelte-add/svelte-add It will save you a ton of time by making it really easy to add integrations to your projects (like Tailwind, Bootstrap, Supabase, Jest, etc)
yawnxyz 4y ago
For anyone who might have missed the announcement hidden in the launch video, there's Svelte Auth now from the Vercel NextAuth team: https://vercel.com/blog/announcing-sveltekit-auth https://vercel.com/blog/announcing-sveltekit-auth
- doodlesdev 4y ago
  Wow that's huge. Might need to find something to try out SvelteKit now. Loved Svelte already and I was only waiting for a 1.0 of SvelteKit.
Chipshuffle 4y ago
Is Svelte and in extension SvelteKit somehow the next step in the evolution of frontend frameworks? From what I know it has more fine grained reactivity than for example React or Vue and should therefore just run more efficient? Or has the approach of Svelte also drawbacks that I am not aware of?
- grayrest 4y ago
  > Is Svelte and in extension SvelteKit somehow the next step in the evolution of frontend frameworks? I personally would say no. I like Svelte's dev experience but I don't like the output code and while it has smaller invalidation subsections than a full component there's not a 1 to 1 mapping between a piece of data changed and the exact piece of DOM getting updated. > Or has the approach of Svelte also drawbacks that I am not aware of? Svelte is superb for producing NYT infographics and other relatively lightweight experiences. I work on interface builders and when you're scaling up the number of components on a page and the complexity then having the reactivity code repeated in the components instead of shared in a library becomes a drawback. What pushed me off of of Svelte was a ~500 loc component that had ~40 reactions and resulted in a 4.1k LoC js file output. I looked through the output and didn't see any particularly egregious mis-compilations, just that the Svelte's approach resulted in verbose outputs. I don't think most people will have components this complex so I don't think Svelte is a bad choice and I do like the DX but that caused me to move on. Of the current options, I recommend Solid. It has fine grained reactivity all the way down, better perf, similar bundle size, and the community is generally performance obsessed. They're currently experimenting with islands/partial hydration/mixed server+client rendering and preliminary results are halving the delivered JS. As an example, their movies demo [1] is ~15k. [1] https://solid-movies.dev/ https://solid-movies.dev/
  - swyx 4y ago
    budibase is a notable interface builder in Svelte if anyone wants to compare https://github.com/Budibase/budibase https://github.com/Budibase/budibase and ofc huggingface gradio counts too https://www.svelteradio.com/episodes/gradio-with-pngwn https://www.svelteradio.com/episodes/gradio-with-pngwn
  - 4y ago
domakidis 4y ago
What would be the best route to upgrade a medium sized project from say `1.0.0-next.263`? There's 327 intermediate versions up to this one and a considerable amount of breaking changes.
- swyx 4y ago
  just start a new project and port each route over one by one. it doesnt take that long once you figured out the 4-5 api breaks you do have
moklick 4y ago
Congrats to the launch. This looks so good :)
SebastianKra 4y ago
While I like Svelte, I fear it looses some of the flexible API-building enabled by React. Specifically: since it uses a templating system, you can't pass around interface definitions easily: - https://github.com/sveltejs/svelte/issues/3480 https://github.com/sveltejs/svelte/issues/3480 (no dynamic slots) - https://github.com/sveltejs/svelte/issues/5381 https://github.com/sveltejs/svelte/issues/5381 (can't wrap children) You can always find workarounds for these cases, often using `<svelte:component>`, but React's Javascript/Typescript-centric design avoids such issues before they even occur. For instance, I can trivially define a tabbed interface by mixing strings, JSX, and components, without imposing any DOM-structure. The component that reads this definition can use it to build a tabbed-view on mobile, and a master-detail-view on desktop. It could even build a table of contents. In the definition, I can still work mostly with strings, but fall back to JSX in the rare case where I do need some advanced formatting: const tabs = [ { name: "Tab 1", icon: <img ... />, content: MainTab }, { name: <>Tab with <b>bold<b/> text</>, icon: <MyIconComponent ... />, content: SecondTab }, ] Again, I like Svelte, but I'm not yet sure whether the better syntax is worth the reduced expressivity.
- sesm 4y ago
  Not sure what you mean by `React's Typescript-centric design`, React used Flow from the very start and also had PropTypes for plain JS. Typescript support came much later.
  - SebastianKra 4y ago
    I was thinking about the full power of JavaScript while still being perfectly typesafe. I edited the comment to hopefully better reflect that.
- rk06 4y ago
  Jsx is expressive but it comes with a deviation from html. And loses optimization opportunities. Templates are closer to html, can be better optimized but lack expressiveness. Is there a third option which has both? Not yet for sure. Right now, you need to compromise somewhere. The only pragmatic option is to support both template and jsx (Vue approach) but then people complain about "complexity" and "multiple ways to do same thing"
foxbee 4y ago
I've been waiting for this for months! Credit to the team. Looking forward to the weekend to play around with it. Also, super excited for svelte 4
clairegraham 4y ago
I've been using SvelteKit since July of this year on downforeveryoneorjustme.com and it's easily my favorite Javascript framework at this point. I found Svelte made sense to me almost immediately and debugging issues has always been a breeze. Congratulations to the Svelte/SvelteKit team!
dhucerbin 4y ago
Fantastic news! Although I loathe writing libraries [1] in Svelte, I love writing apps and kit is great extension to server side. I like similar to Remix push for Web APIs, like forms for mutations etc. I like nested layouts with data endpoints. I like that most of the internal state is visible as reactive store. [1] Creating complex type definitions for more generic components is hard and require knowledge about internals.
- omgsean 4y ago
  >Creating complex type definitions for more generic components is hard and require knowledge about internals. This is what turned me off of Svelte initially. Usually when I make websites I start by defining some primitive components like <Button> or <TextInput>. I could not figure out how to type my <Button> component so that it takes every single attr and event that a regular <button> takes plus some extra attrs that I want to define (theme, size, etc.) This is trivial in React so I was surprised that it didn't really seem possible in Svelte.
  - pjmq 4y ago
    Auto-define exports of native properties for a child widget. This should be posted as an issue on the Svelte core repo. It would save a ton of time building components! Now that Kit 1.0 is out the door the team can turn their attention back to Svelte proper so now is the time.
topicseed 4y ago
Is Svelte eating Vue's lunch but not really eating React's?
- rk06 4y ago
  Hard to say. Svelte is getting traction for sure. Arguably, it is easier for a vue dev to transition to svelte than a react dev, because of heavy similarities in vue and svelte. However, react has more people. And most of newer devs are on react for job purposes. So svelte will get disproportionately higher react devs than vue devs.
drschwabe 4y ago
SvelteKit is nice to rapidly develop websites (after some initial training/familiarization/minor frustrations stage), I only wish it was a library w/ perhaps a separate CLI utility and the framework optional; ie- if they exposed some core features as re-usable functions or one-off CLI commands to build a static site with its clientside window.location/cached routing technique that makes sites feel blazing fast for example. This way you wouldn't have to drop in and adopt the entire framework just to get one or two features.
yewenjie 4y ago
I wish Svelte allowed easy usage of one-off React component - to take advantage of the huge ecosystem. Astro does this, does anything else do?
tmd83 4y ago
Is there any option if I want to do traditional (non JS) SSR but also want to share an API endpoint for both browser and other use cases? Seems like a JS frontend framework or a JS SSR is the only option for such use case. If SSR and API force a JS backend that leaves a lot of the benefit that other languages bring to the table and effectively limiting you to 1 (JS) or 2 (TS including) languages. Seems like a sad state of affair in that regard.
- kursus 4y ago
  You can have any kind of backend with Sveltekit, and call it from client or server (or both). You can even completely bypass sveltekit per request.
  - tmd83 4y ago
    You mean an API backend in any language and Sveltekit for client side JS based UI in Sveltekit?
tracerbuilt 4y ago
I’ve been using SvelteKit since very early beta, and it’s been amazing to watch it evolve along the way to 1.0. It is by far and away the most intuitive framework I’ve used and I can’t say enough good things about it. Congratulations to the team, and keep up the good work!
Sk012 4y ago
Add Comment
ramshorst 4y ago
Yayyyyy !
solumunus 4y ago
SvelteKit is the most pleasant web dev experience I've encountered in a long career.
wobedi 4y ago
Have been using svelte/sveltekit/sapper in production for two years now. Used React before and never looked back. Congrats on 1.0!

919 points by theodorejb 4y ago

Thanks for finally having a SvelteKit tutorial :) I was using SvelteKit, but I really need the tutorial to get better at it (also to adapt better to the changes that have happened).

onlyspaceghost 4y ago

Amazing!

swyx 4y ago

congrats team! the livestream and meta discussions around the launch are happening here https://www.youtube.com/watch?v=N4BRVkQVoMc https://www.youtube.com/watch?v=N4BRVkQVoMc theres a full in browser tutorial as well: https://learn.svelte.dev/ https://learn.svelte.dev/ I've been keeping a reference implementation of a SvelteKit blog, inspired by @leerob's nextjs site: https://github.com/sw-yx/swyxkit/ https://github.com/sw-yx/swyxkit/ for the past year and it's now updated for 1.0. hope it helps someone get going!

jdthedisciple 4y ago
I checked out the blog and it doesn't seem to be rendering the Markup correctly. For example the h2 headers appear literally as '## HEADER' on the website.
- swyx 4y ago
  that is a stylistic choice on purpose - i actually add the #'s in with CSS - just makes headers stand out a little more :) i use h2, h3, and h4 often and just using font size alone makes it hard to tell which level of nesting the content is intended you can see this on my main blog https://www.swyx.io/ https://www.swyx.io/

asdfdelta 4y ago

I've been following Svelte since it first appeared on the State of JS survey. So cool to see it evolve over time and happy to see all the hard work pay off!

theonlytails 4y ago

congrats to everybody on the svelte team!

a3k 4y ago

Finally, I've been waiting for this moment for 2 years

KoljaL 4y ago

Great! Congrats to all the maintainers. I wish you will have a really really nice Christmas

wirahx 4y ago

don't forget to watch the livestream!

pier25 4y ago
https://www.youtube.com/watch?v=N4BRVkQVoMc https://www.youtube.com/watch?v=N4BRVkQVoMc

dimmke 4y ago

Congrats to the team for this! I have been building an application in SvelteKit and it's an incredible framework. I really believe it's going to become the dominant front-end framework in the next few years.

pevey 4y ago
I completely agree except that I would say "full stack framework" instead of "frontend framework." Just add a db and you are good to go. I tried it out when building a couple of non-critical internal apps for clients (basic CRUD apps, but with some pretty complex business rules). SvelteKit is beautifully designed. It makes things that used to be a bit of a pain super easy to understand and implement. You can use pretty much any NPM vanilla js/ts library. The timing here could not be better for me. I will definitely be using SK for my next project.
- pier25 4y ago
  > Just add a db and you are good to go What about validation, CORS, cookies, encrypted sessions, etc? A backend (or full stack) framework should at the very minimum include those kind of things. It's a major gripe I have with all the new full stack frameworks. The focus is on rendering and dealing with requests but they are quite sparse in bread and butter backend features. Other than routing you're basically on your own. The community will probably start making third party plugins but I would rather have official plugins I can 100% trust like Fastify does.
  - pevey 4y ago
    It's full stack because you write the code that you want to run on the server AND the code that you want to be shipped to the browser both within SK. Not because it does everything. You would want to choose your favorite libraries for those things, e.g., zod is my fave for validation.
  - miohtama 4y ago
    SvelteKit ships with a SSR server (Vite) and file system based routing out of the box. It does most of things, though not all. SvelteKit = Svelte + SSR + integration layer. Though I expect the situation improve a bit soon, as now SvelteKit 1.0 release is out from the door.

oxff 4y ago

Why is there a new frontend-whatever-work / tool every week? Database stuff is fairly stable, so is backend stuff. Browser APIs seem stable to me too? Why can't you guys decide that this is how things are best done

arxpoetica 4y ago
SvelteKit is nothing new. It's been kicking around for 2+ years with tons of user satisfaction (and 3 years prior to that under another name), but this is the first major/stable release. - https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks - https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/ - https://twitter.com/Rich_Harris/status/1589675637195042817
anon291 4y ago
As someone who's written both a GUI framework and a database library for Haskell, the answer here is actually really obvious. There's only a small set of algorithms for database query execution, all of which are well understood. Thus, there are best algorithms that you can implement. On the other hand, there is no correct way to style, animate, interact with, etc a button. The design space for UX is much larger than that of databases, and existing libraries touch maybe a small percentage.
didiraja 4y ago
if you know what you were doing on front-end you wouldn't spelling this words aberration compilation
- oxff 4y ago
  I really don't know, that's why I asked.
rk06 4y ago
Because it is a not a new js framework, but a higher level tool based on a js framework I. E. svelte. Similar meta frameworks exist for other js frameworks eg: Next(react), Nuxt(vue), Remix(react), rakkas(react), Solidstart(solid) etc.

torartc 4y ago

Congrats team. SvelteKit is a great experience.

arxpoetica 4y ago

The Sapper is dead! Long live the SvelteKit!

gsanderson 4y ago

Congratulations! Watching the live stream now.

johninvirtual 4y ago

Congrats to all the people behind this, thanks for your work. I love svelte

keyboards 4y ago

Thank you so much for this. I love Svelte to bits.

akmittal 4y ago

Congratulations to the team for releasing this. For someone who hasn't followed svelte closely, How much JS sveltekit ship by default using SSR

swyx 4y ago
its up to you - you can ship 0 kb of js if you want by turning off client side rendering https://kit.svelte.dev/docs/page-options#csr https://kit.svelte.dev/docs/page-options#csr and you have this choice on a per page basis rather than having to choose between a static site generator or a full SPA
- akmittal 4y ago
  0kb is best size of JS. Curious if I do want JS, how much is extra framework overhead
  - crucialfelix 4y ago
    3kB
    - swyx 4y ago
      as compared to nextjs’ ~150kb baseline? (not a real number im just guesstimating)
      - crucialfelix 4y ago
        79.46 kb which includes React. That's never where the bloat comes from.
        akmittal 4y ago
        How so, that 80 kb is bloat
        4y ago

joeconway 4y ago

Congratulations to the team, you’ve built something really excellent

adamnemecek 4y ago

Perfect timing! I literally started working on a project in Svelte after spending like two afternoons trying to do it in React. Svelte is such a God send. So much simpler and powerful than React. Not to mention the fact that React only handles the UI layer but is too unopinionated w.r.t. the application architecture.

pier25 4y ago

Bravo! Congrats!

jerriclynsjohn 4y ago

Been using Sveltekit and love what the community has done to the framework. Makes life of a developer very straightforward and I'm sure that Sveltekit will rise to be a dominant frontend framework soon.

samtp 4y ago

While the breaking changes were rough this year, the new structure is a huge improvement over before. It is now extremely clear the order that items are loaded, and what is loaded on the server vs client. Form actions are also amazing. Congrats to the team and thanks for all the hard work!

jmull 4y ago

I'm just completing a job using svelte/kit, tailwind, postgres, typescript. Actually, I was new to the entire stack, but it went smooth as butter. (Though I have plenty of experience with JS, HTML, CSS, other databases, etc.) IMO, svelte and sveltekit are well designed and have a great dev experience. LOL, as I was writing this he was apologizing on the stream for the breaking changes. That was a bit of a pain, but not really that bad. My only real gripe is using folders to organize both layout hierarchy and route hierarchy is going to turn out to be a mistake.

culi 4y ago
> My only real gripe is using folders to organize both layout hierarchy and route hierarchy is going to turn out to be a mistake. +1 to this. I think Next.js made this mistake too and is now backtracking
- reducesuffering 4y ago
  How is Next backtracking? Their v13 released with the app/ in beta doing exactly this Svelte/Remix style layout/route folder heirarchy? app/page.tsx and app/path/page.tsx
crucialfelix 4y ago
Yes, it's easy to get confused with folders and folders of +page.svelte [slug].svelte would be better [slug]/index.svelte [slug]/[category].svelte Etc There is a vscode extension that helps a little bit, but it's still the one thing I am not fond of.
- yencabulator 4y ago
  The src/routes/posts/[slug]/+page.svelte thing is pretty recent, it used to be just src/routes/posts/[slug].svelte. I'm not exactly thrilled with the new naming...
  - MentallyRetired 4y ago

hu3 4y ago

This is how I move fast and break nothing. By having fullstack type-safety from database all the way to the frontend with auto-completion. My current stack: + SvelteKit (could be Next, Nuxt, Solid or any other TypeScript framework) + tRPC (typed calls between frontend and backend, https://trpc.io https://trpc.io) + trpc-sveltekit (glues SvelteKit and tRPC, https://github.com/icflorescu/trpc-sveltekit https://github.com/icflorescu/trpc-sveltekit) + Prisma (ORM, https://www.prisma.io https://www.prisma.io)

mitch3x3 4y ago
How are you liking Prisma compared to a pure SQL approach?
- qudat 4y ago
  When I used prisma a few years ago I was not impressed and it couldn't do a lot of what I needed so I had to dump into raw sql queries anyway. It was easier for me to use knex and get the types mostly right.
  - Trufa 4y ago
    A lot has changed in the past years of Prisma, it's a really great tool, to be honest, "raw sql" escape hatches to do anything raw when you need it, if you haven't tried it in years, I'd recommend you to try again since if you tried it years ago, it was a very different maturity level.
    - abraxas 4y ago
      Do they (Prisma) still rely on a Rust sidecar? This caused multiple issues with container deployment and the CI/CD pipeline of my employer.
      - braden-lk 4y ago
        I believe the sidecar is optional now, and I think even the one that exists comes in the form of their paid service called Prisma Proxy. It doesn’t seem necessary for most use cases.

bkeating 4y ago

There is so much "let me just see if this works..." tap tapppy tap .... "no... NO WAY... OMG IT WORKED!" with Svelte. Very little surface area. It embraces your knowledge of plain ole CSS/JS/HTML and empowers you with reactivity and a means of if being able to add motion to your ui. Newbs and Pros alike can build fast with it. That speed + reactivity allows your software to better keep up with your converstaions that make it all so. Thats insanely powerful. It's soooo good. Congratulations to Richard Harris and everyone on the Svelte/SvelteKit Team! <3

pier25 4y ago
> It embraces your knowledge of plain ole CSS/JS/HTML Yeah that's one of the things I love about Svelte. It tends to enhance fundamental web knowledge rather than forcing you to think in convoluted ways. Features like actions put you close to the bare metal so to speak. I use those all the time.
- samtp 4y ago
  Backing up how great it is that so much of Sveltekit is built using basic web standards. More often than not when I'm wondering what the shape of an object or function is in Sveltekit, I realize that it's exactly the same as you'd find on MDN documentation. It's an incredibly refreshing experience compared to other frameworks that create custom concepts for everything they do.
- culi 4y ago
  This is what they said about React when it first blew up. Compared to Angular, it's much closer to being *just javascript™*. But I wonder how well that'll hold up after the honeymoon phase The builder.io team made a tool called Mitosis[^0] that lets you input a component written in almost any framework and automatically recreate that same component in any other framework including Vue, React, Qwik, Angular, Svelte, React Native, Lit, web components, and even Swift It's always interesting to try out different frameworks and compare the plain HTML version of certain components with this tool [^0]: https://mitosis.builder.io/ https://mitosis.builder.io/

Caged 4y ago

Svelte is such a pleasure to write and work with. It follows my mental model really well. Congrats to the team on this amazing milestone!

davjhan 4y ago

Congratulations to the team!

hedgehog 4y ago

"This app requires modern web platform features. Please use a browser other than Safari." Looks cool but not production ready.

Kuinox 4y ago
Safari is the new IE.
- fncivivue7 4y ago
  We had to support ie.
- rajasimon 4y ago
  Wish it is but it's crazy fast with M1
  - Kuinox 4y ago
    Any browser is fast with the last CPU node. Safari is becoming compatibility nightmare.
    - dmitriid 4y ago
      The tutorial used Web Containers which... aren't a standard and are very specifically Chrome-only. And it undoubtedly relies on a bunch of Chrome-only non-standards, too.
      - Kuinox 4y ago
        > Web Containers which... aren't a standard The implementation doesn't use chrome specific API AFAIK, and it works on firefox. > are very specifically Chrome-only. And it undoubtedly relies on a bunch of Chrome-only non-standards, too. It does support all majors browers, except safari. The reason why it doesn't work on Safari is even listed: > Safari recently shipped support for SharedArrayBuffer and cross-origin isolation in a somewhat buggy state. In addition to this, it is still lacking a few other features which prevents us from shipping a working environment such as: > Atomics.waitAsync > Lookbehind in regular expressions > Note that none of above can be pollyfilled. These are not "Chrome-only non-standards" and are parts of the officials JS/HTTP specs

kenkunz 4y ago

Congratulations to the whole SvelteKit team! I've been using Svelte / SvelteKit for 1.5 years now – it is without comparison the most enjoyable and productive web f̵r̵a̵m̵e̵w̵o̵r̵k̵ language I've ever used. I'm lucky enough to work with Svelte / SvelteKit full-time. I'm gratified that the site I help build and maintain is included in the SvelteKit showcase: https://kit.svelte.dev https://kit.svelte.dev Trading Strategy: https://tradingstrategy.ai https://tradingstrategy.ai

acqbu 4y ago
That's amazing. Out of curiosity, how does one get to work for companies that use Svelte? I'm based in the UK and the only companies I've heard of using Svelte are Decathlon, Apple and Spotify.
- dskwrite 4y ago
  A couple of spots I'm aware of that are Svelte specific .. https://sveltejobs.com https://sveltejobs.com Jobs channel on the Svelte Discord https://discord.com/channels/457912077277855764/640884695890133012 https://discord.com/channels/457912077277855764/640884695890...
  - acqbu 4y ago
    that's amazing, thanks a lot

lairv 4y ago

Great news and looking forward to how this goes. I still find it incredible that the frontend javascript ecosystem hasn't found a reliable and productive contender yet, a framework you could be sure would be still relevant without too much changes in 5+ years, something like what Ruby on Rails is for full-stack. Some would say that React/NextJS has this role but I have to disagree. When using React/NextJS you still have to rely on third party library for routing, state management, querying etc. like React-Query, React-Router, Redux (Next has a router but you still need libraries to do the rest). Some of these libraries change a lot, some become less relevant, new libraries emerge, and in the end when you start a React project you must go through the "library shopping" step.

rglover 4y ago
> you still have to rely on third party library for routing, state management, querying etc. Take a peek at Joystick [1]. I designed it as the exact antithesis to this. It's full-stack (Node.js back-end with a fully ssr'd component framework designed for the long-term) and doesn't introduce any special paradigms (i.e., vanilla HTML, CSS, and JavaScript—no attribute tricks/compilers needed). Everything is designed to be a fixed-API with the only changes being added functionality (i.e., no random "hey this is deprecated now" rug pulls). Philosophy is described here: https://github.com/cheatcode/joystick#what-distinguishes-joystick-from-other-frameworks https://github.com/cheatcode/joystick#what-distinguishes-joy... [1] https://github.com/cheatcode/joystick https://github.com/cheatcode/joystick
- lairv 4y ago
  Will take a look at it, and good luck with building it, such projects requires effort and test of time
  - rglover 4y ago
    Thank you, appreciate that. If you have any questions feel free to contact me directly: ryan.glover@cheatcode.co.
herrherrmann 4y ago

ericmsimons 4y ago

Congrats to Rich & team- SvelteKit is an amazing experience to develop with. Excited to use 1.0 on some new projects!

FractalHQ 4y ago

Sveltekit has been transformational for me. I can't express enough gratitude to the legendary team who made this happen. Congrats guys!!!

stephenstuder 4y ago

Its so freaking good, hope large orgs start using it

kretaceous 4y ago

SvelteKit 1.0 is the one release I was actually waiting for. I've seen a lot of flashy stuff launch in the frontend framework recently but this one feels...genuine? Huge congratulations to Rich and team! Hope I'll be able to contribute to Svelte's growth someday.

Ilasky 4y ago

Sveltekit has been an absolute DREAM to learn and use with my app! Been tracking their 1.0 progress closely and it's been incredible. Sveltekit + TailwindCSS + FastAPI has made it super easy to whip up functionality and have a fine-tuned approach as well. As someone else said, the "I CAN'T BELIEVE IT WAS THAT EASY" is an ongoing sentiment whenever I use it. Looking forward to seeing it grow and gain more popularity

miohtama 4y ago
SvelteKit SSR is a very good pair to Python backends, like FastAPI.
- Labo333 4y ago
  Can you expand? I don't get how you can use SSR with another language than Node. I always thought one has to use the static adapter.
  - buttersbrian 4y ago
    the backend svelte (node) can actually make calls to the separate api server and render a 'fuller' page to the client on page load. I believe this is what is meant.
  - miohtama 4y ago
    Requests are routed reverse proxy (Caddy) -> Vite (SSR) -> Python (Pyramid). SSR calls your backend APIs and renders templates. Example from SvelteKit page.ts here: https://github.com/tradingstrategy-ai/frontend/blob/master/src/routes/trading-view/blockchains/%2Bpage.ts https://github.com/tradingstrategy-ai/frontend/blob/master/s... Some remarks - page.ts is routed by Vite for every HTTP request for SSR and then it will fetch() data over backend API - If rendered in the client, fetch() hits directly the backend API - Both cases the template is rendered using the same logic (Svelte HTML templating, CSS, JS) - You are going to need a template language any cases, like Django's one. Alternative way to think this is that SvelteKit is just a super powerful template engine.
4y ago

didiraja 4y ago

Congrats all Svelte team and community, highly antecipated project. Played a lot with the early releases. To me, Svelte suite is the best option for front-end applications.

sergiotapia 4y ago

Congratulations on the milestone! I'm a bit confused, does this mean I can use Prisma with Sveltekit out of the box? It's server side rendered like a typical expressjs app?

joeldrake 4y ago

Hurray!

nathias 4y ago

I'm a React expert, but whenever I can I choose Svelte, it really is a joy to use. I've been using SvelteKit for some time now, it's great to see it out of beta so I can shill it to more projects.

yamrzou 4y ago

There is a plethora of javascript frameworks: React, Vue, Svelte, Remix, etc. If I know nothing about front-end development, and would like to learn one that is: - Intuitive - Suitable for small projects as well as large projects. - That is here to stay, i.e. either adopted by many companies, or its adoption curve is going up. Which one should I pick? Would Svelte be a good choice?

JonathanBeuys 4y ago
Why do you want a framework and not just plain HTML, CSS and Javascript? I have been doing frontend dev for over a decade and I never needed a framework. When I want to template data client side, I use Handlebars.
- veidelis 4y ago
  You've never ran into DOM performance issues? You use a lot of createDocumentFragment? Please share more.
have_faith 4y ago
> Suitable for small projects as well as large projects > That is here to stay, i.e. either adopted by many companies, or its adoption curve is going up. Arguably React for ecosystem and provability at every scale. > Intuitive Likely Svelte. React is mostly fine but hooks come with their footguns for newcomers.
swyx 4y ago
remix isnt like those others in that you’d also need React to do UI at this point React Vue and Svelte are all decent production choices, as for what is intuitive that really depends what YOU like, different strokes different folks svelte is probably the most fully integrated toolkit (animations, state mgmt, server side rendering, serverless api routes, etc) and ships the least javascript at this point tho if u want the quick sales pitch
- slimebot80 4y ago

dang 4y ago

Related: SvelteKit - https://news.ycombinator.com/item?id=29902450 https://news.ycombinator.com/item?id=29902450 - Jan 2022 (3 comments) My Evaluation of SvelteKit for Full-Stack Web App Development - https://news.ycombinator.com/item?id=29806385 https://news.ycombinator.com/item?id=29806385 - Jan 2022 (125 comments) SvelteKit Is in Public Beta - https://news.ycombinator.com/item?id=26557886 https://news.ycombinator.com/item?id=26557886 - March 2021 (114 comments) What's the Deal with SvelteKit? - https://news.ycombinator.com/item?id=24996750 https://news.ycombinator.com/item?id=24996750 - Nov 2020 (2 comments)

omnibrain 4y ago

All the praise for SvelteKit in this thread peaked my interest. But where would I start? I'm currently looking around to find a modern "toolkit" to write a new webbased frontend for our traditional desktop app. It's goin to be more or less CRUD with lots of tables/grids. Currently I favour vue.js with Quasar because of all the tooling and ressources it offers. It looks like it's easy to start with a traditional "navigation on the left, content on the right" layout. I need nothing fancy, it's going to be business CRUD for a small circle of users. Deployed on premises at our customers sites.

arxpoetica 4y ago
You can start here: https://learn.svelte.dev/tutorial/welcome-to-svelte https://learn.svelte.dev/tutorial/welcome-to-svelte
- encryptluks2 4y ago
  > Yikes! We couldn't start the app. Please ensure third party cookies are enabled for this site. Yikes! No thanks.
  - samtp 4y ago
    You can also just install the demo package and play around with it on your own computer.
  - swyx 4y ago
    or go incognito mode
- cschmidt 4y ago
  It is a really wonderful interactive tutorial. So well done.
theo-steiner 4y ago
https://learn.svelte.dev/ https://learn.svelte.dev/ is a great place to start!
4y ago

efields 4y ago

Congrats to Svelte. More than a couple years ago, I gave my team the opportunity to go React, Vue or Svelte after giving them time to test them out. React was basically the legacy code that we were familiar with. This was right around the first hooks release and after using it for a while, and we had a nasty redux state manager, and nothing about React felt truly great for DX besides JSX, and that was everywhere already. I'm happy with Vue but every time I look at Svelte code I get a bit jealous. Its a very nice environment, one I would pick up for personal projects if that time was there, and I wish Svelte godspeed and a huge adoption curve.

stephenstuder 4y ago

Svelte is soooo good. Hope it starts to get used more in large orgs.

deleted 4y ago

[deleted]

newbieuser 4y ago

After a few minor versions, I hope they don't start to deprecate the newly added features.

dceddia 4y ago

Exciting to see this hit 1.0! The new tutorial site looks great and I love that the sidebar is searchable now. Also the Cmd-K search on the docs (https://kit.svelte.dev/ https://kit.svelte.dev/) is awesome to have as well. I've been really enjoying working with Svelte for the last year or so now. My main project is a video editor, running under Tauri and using plain client-side Svelte, but I've also used SvelteKit to throw together a few little admin dashboard-y things and it's been very quick to get started with. Right now those projects are pretty lightweight too, just SvelteKit with TypeScript, the pg-promise package to connect with Postgres, and a handful of handwritten SQL queries. Congrats to the team! Looking forward to see what the future holds for Svelte[Kit].

rohanrajpal 4y ago

Congrats team, we've built a HUGE SaaS with Sveltekit + NestJs and it has been a wonderful experience

Tade0 4y ago

As someone who wrote his first lines of JS in 2001, working with Svelte feels a lot like the good old days of JS when front-end was simple. To me the main selling point is that the stack trace is actually useful for a change - you especially can find in there the line which caused the re-render and subsequent error. JS frameworks/libraries by and large lost that feature a decade ago.

rk06 4y ago
Chrome has improved it a lot, now the stack traces can point to line of user code which caused this issue. This was initiated by Angular team, but I have seen it work for vue as well

batesy 4y ago

Well after reading the comments in this thread, I'm learning Svelte over the Holidays.

gedy 4y ago

I enjoy Svelte a lot and congrats on the release. However the job market for Svelte seems really weak, at least for US dev salaries. I hope Sveltekit increases adoption, as it's a nice alternative to NextJS

lewantmontreal 4y ago

How so people feel about client side navigation? Browsing svelte.dev it appears back/forward navigation now requires a request each time as browser cache is no longer usable. Page refresh also seems to reset scroll position but that might be unrelated.

dcre 4y ago
This appears to be deliberate depending on the page. Looking at the network inspector as I click around, I see cache-control: private, no-cache on the responses for docs content, but I do see caching on the blog pages.
swyx 4y ago
its just a setting now on sveltekit. clientside navigation is a single line of code
Lukas_S 4y ago
Sveltekit saves your scroll position in session storage so refresh and back/forward navigation feels like regular browser behavior. If your scroll position is resetting on refresh that may be a bug. Navigating back/forward will only make a new request if that page needs to fetch data in its +page.js component https://kit.svelte.dev/docs/load https://kit.svelte.dev/docs/load

qprofyeh 4y ago

While most of the comments here seem positive… A custom template language is like another programming language to learn (to make mistakes in). I prefer JSX/TSX which is closer to reusing HTML.

dcre 4y ago
Speaking as nearly-exclusively a JSX/TSX user, it is not really true that it is closer to HTML than Svelte's templating. People who like and use Svelte report the opposite.
- ovao 4y ago
  Agree with this. Iterating with Array.map and returning nodes to compose, say, unordered lists in JSX is most decidedly un-HTML-like. I can see the drawback to learning yet another templating language, and on this point I’d just say “to each their own”. I feel like either approach is fine. Svelte’s templating is pretty minimal, so there isn’t much to learn.
kalkr 4y ago
IMO Svelte feels much more like HTML than JSX does.
qudat 4y ago
I don’t get why you’d want to try to emulate html. The syntax and closing tags are brutal on the eyes. I’d prefer a more lisp style syntax for representing html
dawei67 4y ago
the template "language" is learnable in 10mn and fit in a small cheat sheet. I personally think JSX as a template language make HTML horrifying to read

mattwoodnyc 4y ago

There are a handful of them here - https://trpc.io/docs/example-apps https://trpc.io/docs/example-apps

owlbynight 4y ago

If you're just learning SvelteKit, check this tool out: https://github.com/svelte-add/svelte-add https://github.com/svelte-add/svelte-add It will save you a ton of time by making it really easy to add integrations to your projects (like Tailwind, Bootstrap, Supabase, Jest, etc)

yawnxyz 4y ago

For anyone who might have missed the announcement hidden in the launch video, there's Svelte Auth now from the Vercel NextAuth team: https://vercel.com/blog/announcing-sveltekit-auth https://vercel.com/blog/announcing-sveltekit-auth

doodlesdev 4y ago
Wow that's huge. Might need to find something to try out SvelteKit now. Loved Svelte already and I was only waiting for a 1.0 of SvelteKit.

Chipshuffle 4y ago

Is Svelte and in extension SvelteKit somehow the next step in the evolution of frontend frameworks? From what I know it has more fine grained reactivity than for example React or Vue and should therefore just run more efficient? Or has the approach of Svelte also drawbacks that I am not aware of?

grayrest 4y ago
> Is Svelte and in extension SvelteKit somehow the next step in the evolution of frontend frameworks? I personally would say no. I like Svelte's dev experience but I don't like the output code and while it has smaller invalidation subsections than a full component there's not a 1 to 1 mapping between a piece of data changed and the exact piece of DOM getting updated. > Or has the approach of Svelte also drawbacks that I am not aware of? Svelte is superb for producing NYT infographics and other relatively lightweight experiences. I work on interface builders and when you're scaling up the number of components on a page and the complexity then having the reactivity code repeated in the components instead of shared in a library becomes a drawback. What pushed me off of of Svelte was a ~500 loc component that had ~40 reactions and resulted in a 4.1k LoC js file output. I looked through the output and didn't see any particularly egregious mis-compilations, just that the Svelte's approach resulted in verbose outputs. I don't think most people will have components this complex so I don't think Svelte is a bad choice and I do like the DX but that caused me to move on. Of the current options, I recommend Solid. It has fine grained reactivity all the way down, better perf, similar bundle size, and the community is generally performance obsessed. They're currently experimenting with islands/partial hydration/mixed server+client rendering and preliminary results are halving the delivered JS. As an example, their movies demo [1] is ~15k. [1] https://solid-movies.dev/ https://solid-movies.dev/
- swyx 4y ago
  budibase is a notable interface builder in Svelte if anyone wants to compare https://github.com/Budibase/budibase https://github.com/Budibase/budibase and ofc huggingface gradio counts too https://www.svelteradio.com/episodes/gradio-with-pngwn https://www.svelteradio.com/episodes/gradio-with-pngwn
- 4y ago

domakidis 4y ago

What would be the best route to upgrade a medium sized project from say `1.0.0-next.263`? There's 327 intermediate versions up to this one and a considerable amount of breaking changes.

swyx 4y ago
just start a new project and port each route over one by one. it doesnt take that long once you figured out the 4-5 api breaks you do have

moklick 4y ago

Congrats to the launch. This looks so good :)

SebastianKra 4y ago

While I like Svelte, I fear it looses some of the flexible API-building enabled by React. Specifically: since it uses a templating system, you can't pass around interface definitions easily: - https://github.com/sveltejs/svelte/issues/3480 https://github.com/sveltejs/svelte/issues/3480 (no dynamic slots) - https://github.com/sveltejs/svelte/issues/5381 https://github.com/sveltejs/svelte/issues/5381 (can't wrap children) You can always find workarounds for these cases, often using `<svelte:component>`, but React's Javascript/Typescript-centric design avoids such issues before they even occur. For instance, I can trivially define a tabbed interface by mixing strings, JSX, and components, without imposing any DOM-structure. The component that reads this definition can use it to build a tabbed-view on mobile, and a master-detail-view on desktop. It could even build a table of contents. In the definition, I can still work mostly with strings, but fall back to JSX in the rare case where I do need some advanced formatting: const tabs = [ { name: "Tab 1", icon: <img ... />, content: MainTab }, { name: <>Tab with <b>bold<b/> text</>, icon: <MyIconComponent ... />, content: SecondTab }, ] Again, I like Svelte, but I'm not yet sure whether the better syntax is worth the reduced expressivity.

sesm 4y ago
Not sure what you mean by `React's Typescript-centric design`, React used Flow from the very start and also had PropTypes for plain JS. Typescript support came much later.
- SebastianKra 4y ago
  I was thinking about the full power of JavaScript while still being perfectly typesafe. I edited the comment to hopefully better reflect that.
rk06 4y ago
Jsx is expressive but it comes with a deviation from html. And loses optimization opportunities. Templates are closer to html, can be better optimized but lack expressiveness. Is there a third option which has both? Not yet for sure. Right now, you need to compromise somewhere. The only pragmatic option is to support both template and jsx (Vue approach) but then people complain about "complexity" and "multiple ways to do same thing"

foxbee 4y ago

I've been waiting for this for months! Credit to the team. Looking forward to the weekend to play around with it. Also, super excited for svelte 4

clairegraham 4y ago

I've been using SvelteKit since July of this year on downforeveryoneorjustme.com and it's easily my favorite Javascript framework at this point. I found Svelte made sense to me almost immediately and debugging issues has always been a breeze. Congratulations to the Svelte/SvelteKit team!

dhucerbin 4y ago

Fantastic news! Although I loathe writing libraries [1] in Svelte, I love writing apps and kit is great extension to server side. I like similar to Remix push for Web APIs, like forms for mutations etc. I like nested layouts with data endpoints. I like that most of the internal state is visible as reactive store. [1] Creating complex type definitions for more generic components is hard and require knowledge about internals.

omgsean 4y ago
>Creating complex type definitions for more generic components is hard and require knowledge about internals. This is what turned me off of Svelte initially. Usually when I make websites I start by defining some primitive components like <Button> or <TextInput>. I could not figure out how to type my <Button> component so that it takes every single attr and event that a regular <button> takes plus some extra attrs that I want to define (theme, size, etc.) This is trivial in React so I was surprised that it didn't really seem possible in Svelte.
- pjmq 4y ago
  Auto-define exports of native properties for a child widget. This should be posted as an issue on the Svelte core repo. It would save a ton of time building components! Now that Kit 1.0 is out the door the team can turn their attention back to Svelte proper so now is the time.

topicseed 4y ago

Is Svelte eating Vue's lunch but not really eating React's?

rk06 4y ago
Hard to say. Svelte is getting traction for sure. Arguably, it is easier for a vue dev to transition to svelte than a react dev, because of heavy similarities in vue and svelte. However, react has more people. And most of newer devs are on react for job purposes. So svelte will get disproportionately higher react devs than vue devs.

drschwabe 4y ago

SvelteKit is nice to rapidly develop websites (after some initial training/familiarization/minor frustrations stage), I only wish it was a library w/ perhaps a separate CLI utility and the framework optional; ie- if they exposed some core features as re-usable functions or one-off CLI commands to build a static site with its clientside window.location/cached routing technique that makes sites feel blazing fast for example. This way you wouldn't have to drop in and adopt the entire framework just to get one or two features.

yewenjie 4y ago

I wish Svelte allowed easy usage of one-off React component - to take advantage of the huge ecosystem. Astro does this, does anything else do?

tmd83 4y ago

Is there any option if I want to do traditional (non JS) SSR but also want to share an API endpoint for both browser and other use cases? Seems like a JS frontend framework or a JS SSR is the only option for such use case. If SSR and API force a JS backend that leaves a lot of the benefit that other languages bring to the table and effectively limiting you to 1 (JS) or 2 (TS including) languages. Seems like a sad state of affair in that regard.

kursus 4y ago
You can have any kind of backend with Sveltekit, and call it from client or server (or both). You can even completely bypass sveltekit per request.
- tmd83 4y ago
  You mean an API backend in any language and Sveltekit for client side JS based UI in Sveltekit?

tracerbuilt 4y ago

I’ve been using SvelteKit since very early beta, and it’s been amazing to watch it evolve along the way to 1.0. It is by far and away the most intuitive framework I’ve used and I can’t say enough good things about it. Congratulations to the team, and keep up the good work!

Sk012 4y ago

Add Comment

ramshorst 4y ago

Yayyyyy !

solumunus 4y ago

SvelteKit is the most pleasant web dev experience I've encountered in a long career.

wobedi 4y ago

Have been using svelte/sveltekit/sapper in production for two years now. Used React before and never looked back. Congrats on 1.0!