SvelteKit 1.0
svelte.dev
svelte.dev
+ SvelteKit (could be Next, Nuxt, Solid or any other TypeScript framework)
+ tRPC (typed calls between frontend and backend, https://trpc.io)
+ trpc-sveltekit (glues SvelteKit and tRPC, https://github.com/icflorescu/trpc-sveltekit)
+ Prisma (ORM, https://www.prisma.io)
Anyway, the one place where Typescript isn't great in the fullstack approach is the Database stuff. We used Prismo for the better part of a year, until we eventually moved on to Mikro-orm which has been great so far.
I'm personally not a big fan of OOP or "over architecture", because I've seen how bad it can go too many times. Instead I favour functional programming and keeping things as simple as possible, even having "almost duplicate" code once in a while. So with this in mind, it may strike you as odd that we moved from Prisma to Mirko-orm, but Prisma just clashes with the way we want an ORM to work in so many ways.
Maybe this is by design. Prisma doesn't want to be a "real" ORM after all, but things like having to put everything in a single schema file is bothersome. Yes, you can put it in different files and then cat them together, but that leads to other issues. Like the VSC Prisma extension highlights not working outside the main Prisma.Schema file. More than that though. We like to have "ID, UpdatedAt, UpdatedBy, CreatedAt" sort of things on basically all our models, and since Prisma doesn't have the inheritance I almost never use, that means you need to duplicate it soooo many times. It's also hard to write generic methods for basic CRUD stuff because of the way Prisma uses the Prisma Client Classes it auto-generates to operate. On top of that, migrations can't go backwards in Prisma.
Some of these issues are on the Prisma road map, others aren't, and you're always going to bang heads with an ORM, but Prisma just didn't feel as mature as it's extremely excellent documentation (and marketing) might lead you to believe in my experience.
I can certainly see myself using it again, once their roadmap is a little further ahead though.
Sure, duplication isn't a goal, but DRY shouldn't hold back work as long as it has no meaningful consequence on performance. In some cases, duplication is a good thing, but your average programmer will address duplication by making a routing more complicated and further away from where it's being used. This is often a mistake.
Worse yet is when programmers DRY up tests. Tests are the worst place to be applying DRY. The point of testing isn't to write an entirely new application on top of your actual application. If you're DRYing up your tests a lot, you're probably writing a second application and should probably stop doing that.
We do this the other way around, by using Scala.js so we can use Scala on the frontend as well as the backend. It's very nice.
I've wondered about this approach for a while, but have yet to actually try it in any meaningful context. Do you use a framework like React via Scala.js, or are you doing something different?
It's not as good as EF by a long shot (nothing really is), but for most queries it works fine. You can also use SQL or stored procs for the exception cases which no ORM ever fully replaces anyways.
Do you know of any non-trivial open source projects using this stack?
It's nice there's type-safety between layers, but that's a bunch of layers that you don't even need. (A layer that doesn't exist takes is 100% type-safe and takes 0 hours to develop and maintain).
How are you ensuring your database accesses are type-safe in this case?
So I can't really claim I have nothing at the ORM level... However...
In my experience, when you pull in an off-the-shelf ORM and an off-the-shelf RPC framework you end up building app-level wrappers anyway to deal with the complexity and impedance mismatch between what you want your app to use for data access code and what layer provides.
So I think you might as well put your app-level database wrapper as directly around the database as you can manage (that probably means using the common, unopinionated client for your db... e.g., node-postgres for server-side javascript and postgres, or whatever the equivalent is for your backend/database).
App server has GC pauses of 50-80ms as a result of the memory usage.
I recently jumped over that "trying to minimize resources" hurdle myself because it's just not economically correct for me to spend even an hour of my time when I can host a few months worth of servers for that money
Hopefully the same way typed programming languages do it: parsing and type checking.
[0] - https://www.typescriptlang.org/docs/handbook/2/narrowing.htm...
https://github.com/OpenAPITools/openapi-generator
I chuckle every time I read claims about Go (or whatever) being amazingly productive. I don't think it's possible to beat this stack with regards to both productivity and ease of long-term support, at least without going to very niche technologies where you'll have other problems.
Database schema is generated from models described in C# (or reverse-engineered from an existing schema). You don't have to compromise your schema to satisfy the ORM (another claim I often read on HN), as it's very adaptable to your needs.
Migrations are generated automatically — change your models, ask it to generate migration code in C# + a SQL migration script, review the generated SQL, and apply.
The vast majority of database queries (pretty much everything besides reports) is written in type-safe LINQ, which makes it easy to refactor code, and also construct & combine queries at runtime. Unlike that specification abomination JPA expects you to use, LINQ queries look something like this:
var latestOrders = _db.Orders
.Where(ord => ord.CreatedAt >= DateTime.Today)
.Where(ord => !ord.Deleted)
.OrderByDescending(ord => ord.CreatedAt)
.Take(25)
.Select(ord => new {
OrderId = ord.Id,
Customer = ord.Customer.Name,
CreatedAt = ord.CreatedAt,
Products = ord.Products.Select(prod => new {
ProductId = prod.Id,
Title = prod.Title,
})
})
.ToList();
Everything you described in terms of easy migrations and querying is exactly what Prisma gives you in the stack the OP described.
Nothing about that is “full refresh” and you can use whichever frontend framework you like.
Microsoft has invested massively in modernizing .NET and C#.
It is also widely praised by devs - .NET is ranked 4th most loved framework in the SO 2022 dev survey.
You have built-in scaffolding to get a React + .NET app right from the CLI, with hot-reload and all the facilities you'd expect.
Hardly old school at all. Personally, if I had to build a website with a thin API layer I'd reach for NextJS (or equivalent) alone, but anything beyond that I'd go for .NET Core any time of day.
With ASP.NET, a React/Angular project is separate, there's a separate model layer, and you have to keep that in sync with the .NET models.
With Next, there's true code reuse between client and server. Next is smart about shipping your code where it needs to run, server, client, both. You can even mix and match from page to page: Server-side render one page per request; statically generate another at build time.
As much as I like ASP.NET, Next has leapfrogged it for web apps.
Look, I like NextJS as much as the next guy - I'd say it's my main working technology right now. And I've never built anything on .Net - I know its characteristics from watching tutorials and reading docs.
My take however is that "web apps" is a very broad world. NextJS gives you a thin API layer. There is no model layer to speak of. You're left fending for yourself in the wild, wild world of JavaScript.
.Net Core, on the other hand, offers a batteries-included, heavy-lifting, opinionated framework, with an immense toolbox and many conventions to guide you. There has to be a reason why people speak such wonders of it. If I had to build something enterprise-y with more than handful of devs it would probably be my choice.
The grass isn't greener. I've built in both - I have a .NET Core/Angular SaaS app that I created and sell, and I've been building greenfield in Next. I much prefer Next.
The duplication in .NET/Angular has never been worth it...not once. And having network calls for everything is unnecessarily painful.
I started the app in 2019, when RESTful SPAs were all the rage. I bought into the hype that you should have API endpoints for everything no matter what, because you'd soon have a mobile app and daemons and this and that.
Turns out, YAGNI. It would've been better to server-side render and only create API endpoints when necessary.
That's what I like about Next: Static generate where you can, server-side render per request where you can't, SPA where necessary - and the layers are as flat as can be. It's the best of all worlds.
That being said, I've worked in .NET for ~16 years now, and I like it more than JavaScript/TypeScript. But I'd still rather develop a web app in Next and put any background services elsewhere in .NET if needed.
Thanks for sharing your perspective.
I think we're essentially saying the same thing. I would start pretty much 99% of my projects in NextJS. But if I needed to reach for something doing complex logic and scaling to a larger team, I could always add a .Net service to that later.
The separation of models is indeed inevitable when there is JS on the client and not-JS on the server. That's a 'problem' common to all non-JS back-ends.
However there are three points I'd make.
1. That's often a good thing, not a flaw, in that it enforces a mapping boundary between what the server and the client know and therefore strongly discourages leakage of data.
2. Mapping requirements of this type are much too trivial to base a tech stack choice on. It's barely worth considering given that mappings only need doing once and updating once per change. They are also very good protection against accidentally exposing new stuff precisely because changes in models don't automatically impact the client.
3. If this model syncing was really an issue (it usually isn't) you could try Blazor. By doing C# on the client as well as the server you get to share the same code/models. As per point 2 I don't think that's a good enough reason to switch tech stacks, but Blazor also has its place.
That just sounds like mandatory busywork that may or may not prevent poor programming practices. I'd rather pick a framework for productivity.
> 2. Mapping requirements of this type are much too trivial to base a tech stack choice on.
Trivial for large corporations with money to burn, maybe. A huge time-waster for my startup.
> 3. If this model syncing was really an issue (it usually isn't) you could try Blazor.
Blazor is cool, but the bundle sizes are still too large right now, and it doesn't have the ecosystem of web components that JavaScript does. Sure, you can integrate, but you're just making life more complicated for yourself. It feels like too little, too late.
Mandatory busywork implies stuff with no real purpose. I specifically pointed out the purpose. You may not agree with the cost/benefit involved in doing it, but that's a preference and doesn't automatically make someone else's way of working busywork. And personally I find it increases productivity by eliminating a whole range of security concerns.
> Trivial for large corporations with money to burn, maybe. A huge time-waster for my startup.
This largely depends upon if you accept that the work itself is of benefit. If you believe it's just busywork, then whilst my own opinion differs, your conclusion is reasonable for your situation.
> Blazor is cool, but the bundle sizes are still too large right now, and it doesn't have the ecosystem of web components that JavaScript does.
You're right on the sizes and the ecosystem (though that is not Blazor-specific and is something no non-JS client-side tech will ever be able to compete with).
I do ASP.NET and Blazor (alongside Node, Go, Python, Rails etc) and TBH whilst personally I see great value in Blazor it feels like that's mostly for back-office or enterprise applications where you get the incredible productivity (that much is true) and don't need to worry about the sizes or, depending on how you implement it as this is optional, the need for a persistent web-socket connection.
Like I get a shared model being accessed "directly" for the things that the UI displays and manipulates. But once you click an Order button you have transactions to process, ledgers to update, notifications to dispatch.
That kind of code doesn't float between client and server, it needs to happen once the order has been received regardless of the client state.
You can offload that to other services, lambdas, etc. but that's the sort of thing that you can just do all-inclusive in a standalone backend be it Node, .NET, Go, etc.
dotnet new webapi -minimal
dotnet run
dotnet watch
Next isn't really like Angular in that you don't need an API layer (though you can have one if needed). It's more like ASP.NET Core MVC.
The difference is the frontend code is truly integrated with the backend. It all lives in the same project. It's just React components. You can render them statically on the server at build time, per request at runtime, or on the client. And you can mix and match. Next only ships the client the JavaScript it needs.
You don't need an API unless you want SPA parts of the app. Where you do want that, it's simple to implement, because you're already in JavaScript and all your other code plays nicely with it. It's a really nice way to organize and consolidate the different pieces of web dev IMO.
You can get the same'ish with Ent and Atlas
I am very slowly building a big glue between DB and front-end and making it pluggable into their underlying libs and native libs
Generating the schema from the models is easy mode, the ORM naturally won't generate anything it doesn't understand. The claim is that the ORM can't handle advanced schema features that it wouldn't generate. (Although in my experience most people claiming that just never bothered to learn the ORM).
With Blazor you just write both the reactive frontend and backend in C#. No need to write Javascript. Super productive, type safe all the way.
Today it has even support for hot reloading. Save your C# and see the changes in your browser.
https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blaz...
You either had to ship a big and bloated WASM file, which was at least 10x the size of competing JS frameworks, and in some cases 100X the size. Or you had to render all dynamic parts of your website on the server, which made latency a huge problem, since your website feels sluggish between each interaction.
It's also irrevocably attached to that specific dotnet framework? Want to evolve parts of your stack? Too bad.
* Server side needing a constant socket for everything presents it's own limitations.
* It has hot reloading, but it pales in comparison to the JS experience at best and in my own experience has a lot of edge cases leading to full rebuilds.
* C# tooling is fantastic; Razor however I've found to be slow and well behind the experience of popular JS libraries.
* When you do need JS interop (e.g. browser API's) the experience is, IMO, awful.
I feel Blazor's niche is internal, simple LOB apps and I can understand the appeal if you don't already know JS or have some serious regulatory requirements around vendors and need to avoid NPM.
Personally, I find the DX and quality of the end product in svelte kit trump the code sharing of Blazor.
Similarly in production do you use a reverse proxy for the asp server so that requests to like /api go to the asp server?
I have something similar: Kotlin on the server-side with my SQL DSL generated by jOOQ and Flyway running my schema migrations. I don't have any experience with LINQ--but it looks to be of a similar idea to jOOQ such that you get an autogenerated, injection-safe, type-safe, compile-time-checked SQL DSL.
If you like LINQ, you'd probably really like jOOQ. It's uber-powerful and the only queries that I've not been able to completely write in jOOQ are geo-spatial queries--and even for them, I can use string SQL for just the one where-clause predicate where I need to go off-the-rails--the rest of the query still being standard jOOQ. The thing I like most about it, is that the queries that I write in the DSL are sooo close-to-the-metal of pure SQL--I'm not even context-switching between SQL and jOOQ really. Check it out!
I’ve recently been migrating projects from jOOQ to SQLDelight. While not as feature complete, being able to write queries in sql and then generate type safe code has been amazing. My biggest issue with jOOQ has been joins where you lose some null safety and general issues with the generated POJO (which admittedly has improved over time). With SQLDelight, it has felt like the database just fades away when writing Kotlin.
It's easy to beat Open API, it adds friction, generates ugly code and has a suboptimal UI. If you use https://servicestack.net you don't to rely on an intermediary external tool, you can generate clean TypeScript DTOs directly from strong C# typed models, that only needs to generate the clean DTOs for your typed APIs (i.e. without the ugly client proxy) as all generated DTOs can be used with the smart generic Service Client, which works the same way across 9 popular languages [2], maximizing reusability and reducing any porting efforts if needing to support Mobile Apps in future. It works even better in .NET languages where if you properly design your Service Layer [3] into a impl-free project you can avoid code-gen entirely and share the DTOs that define your typed Service Contract with .NET clients enabling an end-to-end Typed API without code-gen, which dramatically improves Dev UX in C# clients like Blazor [4] since you can add/modify APIs whilst your Service is running.
We also maintain a better integrated and UX Friendly API Explorer [5] that Open API's Swagger UI which generates richer, validation bound customizable Forms directly from your Typed DTOs, better discovery and API docs and a "Code" tab which gives API consumers step-by-step instructions for how to easily call your Typed APIs in their preferred programming language [6].
As for productivity I'd say it's hard to beat the productivity of AutoQuery [7] where you only need to define your API's typed POCO contract, which ServiceStack uses to implement fully queryable APIs, that you can access immediately from an instant build-in UI https://locode.dev or rapidly create custom Blazor pages with Auto Form and AutoQueryGrid components [8].
[1] https://docs.servicestack.net/typescript-add-servicestack-re...
[2] https://servicestack.net/service-reference
[3] https://docs.servicestack.net/service-complexity-and-dto-rol...
[4] https://servicestack.net/blazor
[5] https://docs.servicestack.net/api-explorer
[6] https://docs.servicestack.net/api-explorer#code-tab
To everybody else reading this - mythz' tone deaf bullshit wasn't my favourite way to be reminded I have a gag reflex but the URLs are well worth a look.
LINQ makes things easy, but has traps.
I laugh at your slow running, resource wasting .net
+ Next.js
+ GraphQL Zeus / GraphQL Code Generator (typed calls between frontend/backend)
+ Hasura (generates GraphQL API for database)
Absolutely impressive how you are one of the first to find a approach that leads to a 100% bug-free development methodology.
Or, you still have bugs right, so sometimes things break? Maybe you meant something like: This is how I move fast and don't have a certain section of bugs anymore?
I have been using Google Sheets as a kind of hacky database. By defining the schemas in Zod I am able to automatically validate my sheets data and coerce the string cell values into their proper types.
Zod schemas can be used all over the stack, imported for form validation, and avoid heaps of duplication and tests.
I really like nextjs for its opinions on the frontend part, but it is lacking these strong, but great opinions on the backend. Wish love to see some design decisions from fastify adopted here. Matteo did really do some great stuff.
That at least keeps the blast radius of type-related bugs very limited, and makes it easier to figure out where the problem is.
Works a treat.
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
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.
It's an incredibly refreshing experience compared to other frameworks that create custom concepts for everything they do.
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
FWIW, I think that "it's much closer to being just javascript™" statement has absolutely held up over time (Angular, esp. the old angular.js is painful compared to React for this reason), AND that Svelte is likely a step closer again (which they can do because they have an entire compiler and aren't reliant on embedded a DSL inside of JavaScript).
If I `export let` a variable to be reactive over here, why isn't it reactive over there?
You can even create variables reactive to one another by declaring a variable like so:
$: y = x * 2
Using the export let x = default; option is for passing data from the parent component/page to a child. If you want variable changes in the child to be reflected in the parent, you can use a store ($ notation), or you can use bind like so:
<ChildComponent bind:x={someValue}>
In my opinion, all of this is much much easier than in competing frameworks.
On my page, I had a script tag pulling from the store. The variable was reactive within the script tag.
I export let that into the template via “data” props.
I changed the value of the variable within the script tag.
The template did not reflect the new value.
Also, maybe look into store subscriptions and/or reactive declarations for what you're trying to do.
Regardless, it sounds like you really need to just read the docs or do a tutorial.
The frontend is open source and available here if someone is interested what a complex SSR heavy SvelteKit application deployment looks like:
http://github.com/tradingstrategy-ai/frontend
The SSR server is a lightweight Node.js web server (Vite), but you can have it nicely along your backend API web server (Pyramid in our case). Both are reverse proxied behind the same domain using Caddy.
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.
This was initiated by Angular team, but I have seen it work for vue as well
SvelteKit - 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 - Jan 2022 (125 comments)
SvelteKit Is in Public Beta - https://news.ycombinator.com/item?id=26557886 - March 2021 (114 comments)
What's the Deal with SvelteKit? - https://news.ycombinator.com/item?id=24996750 - Nov 2020 (2 comments)
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
I believe this is what is meant.
SSR calls your backend APIs and renders templates.
Example from SvelteKit page.ts here:
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.
I tried htmx and so far i really like it and the + is i just have "one" backend.
Specifically: since it uses a templating system, you can't pass around interface definitions easily:
- https://github.com/sveltejs/svelte/issues/3480 (no dynamic slots)
- 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 },
]
I edited the comment to hopefully better reflect that.
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"
Solid uses fine-grained observability like Svelte and achieves similar performance [1]. SwiftUI uses static diffing, fine-grained observability, and avoids re-renders by comparing view dependencies [2]. It is performant even on watches.
[1]: https://krausest.github.io/js-framework-benchmark/current.ht...
[2]: https://developer.apple.com/videos/play/wwdc2021/10022/
the livestream and meta discussions around the launch are happening here https://www.youtube.com/watch?v=N4BRVkQVoMc
theres a full in browser tutorial as well: 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/ for the past year and it's now updated for 1.0. hope it helps someone get going!
For example the h2 headers appear literally as '## HEADER' on the website.
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/
Congratulations to the Svelte/SvelteKit team!
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.
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.
Though I expect the situation improve a bit soon, as now SvelteKit 1.0 release is out from the door.
Huge congratulations to Rich and team! Hope I'll be able to contribute to Svelte's growth someday.
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
Trading Strategy: https://tradingstrategy.ai
I'm based in the UK and the only companies I've heard of using Svelte are Decathlon, Apple and Spotify.
Jobs channel on the Svelte Discord https://discord.com/channels/457912077277855764/640884695890...
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.
+1 to this. I think Next.js made this mistake too and is now backtracking
app/page.tsx and app/path/page.tsx
[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.
"Fixing load, and tightening up SvelteKit's design before 1.0 #5748"
The fundamental problem is that folders are now being used for two different concerns, which will inevitably lead to conflicts (and developer pain).
Edit: oops, you're actually talking about the removal of the option to have routes defined by a file, so that a route must be defined by a folder. I'm completely fine with that. I don't know why people complain about that. All the interesting routes end up with more than one file anyway, and who needs a special extra-simple way to organize the uninteresting routes, which are already simple?
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)
- 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?
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.
> 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.
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
- It works in small and large applications
- Used in majority of new frontend apps
- Reasonably intuitive, especially if you stick to functional components and aren't messing around with low-level renders
That said, I enjoyed building a web app with Svelte. It's extremely simple and powerful. Its only disadvantage is it is new and has a fraction of the market share.
If you're learning a new framework and you're concerned about stability React is still definitely the way to go. I think both React and Svelte are good at depending on generalizeable front-end skills that can carry over to other frameworks though so if your career doesn't depend on it, I don't think learning Svelte is a waste of time at all
The headwinds against React are strong.
If it's for yourself: Svelte. Amazing community, very likely to be here in 5 years, but I don't think it's been proven to work at large scales yet.
If you want to twist everything upside down and see the full potential of what front-end dev work could be: Qwik or Elm (imho)
many pages and lots of functionality with lots of data floating around like Reddit, Twitter
literally everything/anything like Facebook, GitHub, etc
For simple apps, I'd go with a PWA if possible. For single, mostly informational, pages you usually just need a static site. For a company blog, some of these tools could be used to make the frontend for a CMS, but you can also just get away with Wordpress, Squarespace, etc most of the time unless they want some really custom functionality. Then there's also micro-frontends and Astro and other related tools if you're trying to do a lot of different things and wanna mix and match different solutions to different problems
It's got some cool db/sql stuff in there
By pretty much every metric,[^0] svelte is a tiny community still. A darling of the web dev community for sure, but has not yet gained the confidence of commercial products. Perhaps this has actually been good for Svelte and its development. It definitely seems like it's heading towards much wider adoption so I guess we'll see it tested soon enough
[^0]: https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d231...
In 2019: React.js 31.3%, Angular/Angular.js 30.7%, Vue.js 15.2%
I'm sure those number skew towards a certain kind of dev. Hopefully this gives you a better idea of how skewed it is. Also note: it's an online survey. Devs of niche frameworks can and often do encourage people to rate their framework higher
> but I don't think it's been proven to work at large scales
i basically have this saved now:
notable companies now using svelte not just for internal apps but customer facing, critical stuff:
- huggingface (for everything, including gradio)
- alaska airlines (entire customer flow)
- razorpay (payment dialogs)
- schneider electric (many things)
- ikea (entire ecomm experience)
- riot games (league of legends client)
- Brave (search page)
- Square (developer portal)
- several YC startups
- and basically every notable data journalism outlet on the planet (Bloomberg, the Economist, Reuters, Les Echos, german and japanese publications, pudding.cool, and of course the NYT)
Edit: and yeah you're right about Elm. Probably not a good choice for first timers. But it's a great example of what a FE that adheres to functional programming philosophies could look like. Given React's recent developments I think the skills gained from trying it out would definitely carry over to React and other emerging frameworks. Although it's famously stable and error-free, it's not been battle tested for very large and complex apps so it's likely only a good choice for sideprojects atm.
It's really close to svelte's style, of simplicity and principle of least astonishment. It also uses very explicit wrappers for reactive objects so that there's isn't as much magic happening. For me, vue's reactivity is order of magnitude simpler than things like svelte.
Vue also has a pretty well established community and a pretty solid foundation.
Just use: typescript, vite, and react.
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.
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-joy...
You shouldn’t need react-router or other routing-related third-party libraries because Next’s router (and its file-based navigation system) should be enough(?). I’d also say that React itself has powerful-enough state management options (useState hook plus React context, if needed).
The only annoyance I ran into was getting proper i18n working and integrated with Next (with i18next). There were some issues with Next’s newer releases and a redesigned i18n setup that broke a lot of things for me and I regretted the dependence of multiple libraries and frameworks needing to work together. (Storybook is another library that kept breaking.)
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.
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.
Yikes! No thanks.
Congrats to the team and thanks for all the hard work!
[1] 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.
Now that Kit 1.0 is out the door the team can turn their attention back to Svelte proper so now is the time.
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].
This way you wouldn't have to drop in and adopt the entire framework just to get one or two features.
For someone who hasn't followed svelte closely, How much JS sveltekit ship by default using SSR
and you have this choice on a per page basis rather than having to choose between a static site generator or a full SPA
The benefit is that for smaller apps, SvelteKit can be extremely lean, but the cost grows as the number of components and pages increases, since a number of attributes can’t draw from a larger, monolithic runtime (or set of runtimes).
You do have to build moderately large apps to hit the point at which it’s a drawback however.
Congratulations to the team, and keep up the good work!
Page refresh also seems to reset scroll position but that might be unrelated.
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
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.
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).
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.
and ofc huggingface gradio counts too https://www.svelteradio.com/episodes/gradio-with-pngwn
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.
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.
There's 327 intermediate versions up to this one and a considerable amount of breaking changes.
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?
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
The reason for my comment is that far too often these complaints are about some things that Chrome ships at neck-breaking speed.
If you go to MDN and click on multiple experimental APIs you'll find they do have a spec. And they are shipped in Chrome. And then you start reading the spec and it says "It is not a W3C Standard nor is it on the W3C Standards Track.": https://developer.mozilla.org/en-US/docs/Web/API
This has nothing to do with Sveltekit itself. You can download a demo repo, enter "npm run dev" and see that it works on Safari without any issues. Hell, I've deployed ecommerce sites using Sveltekit used by 500k people/month where 60% of visitors are on mobile Safari without any issues.
So when a product is posted that you are unfamiliar with, maybe try giving it more that 30 seconds of consideration before dismissing it due to something completely unrelated to the product itself.
I love svelte
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.
- 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/1589675637195042817On 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.
Similar meta frameworks exist for other js frameworks eg: Next(react), Nuxt(vue), Remix(react), rakkas(react), Solidstart(solid) etc.