prepack VS SvelteKit

Hello HN,

I'm considering the development of a new programming language, drawing inspiration from Rust's strengths, with a focus on compiling to JavaScript. Here what I'm considering are some key features:

Strict Type System

Algebraic Data Types

*Unsafe Mode for JS/TS Interaction*: Facilitate direct interaction with existing JavaScript and TypeScript code.

No Null Usage: Option/Result patterns to avoid null.

Trait Implementation

Backend Development Priority: Initially targeting server-side applications.

Efficient Compiler Design: Including features like dead-code elimination and partial evaluation, similar to the approach of Prepack[0] (by Facebook).

I believe this approach could bring significant benefits, especially with recent advancements like Uint8Array and worker threads.

Would this be of interest to the community? Looking forward to your insights and discussion.

[0] https://github.com/facebookarchive/prepack

You can still do optimisations based purely on Javascript semantics. This is similar to the first example you give with dead function elimination, and many minifiers do some amount of this already, but you can take it to some extremes. One example of this is the (no longer maintained) Prepack project from Facebook. The core idea is to evaluate as much Javascript as possible at compile time, with the expectation that the result will probably be smaller (albeit less human readable) than the initial code.

It's no longer maintained, but I think prepack is roughly what you're looking for.

i've had code where it intentionally relied on the wrong behavior (missing hook dependencies) and when I fixed it it caused an unintentional bug (hook fired too often or sometimes infinite rerendering). Yes it is more of a bug in the code rather than React hooks issue but it is also really hard to fix/rewrite. while i'd love to jump on the hype train projects like https://github.com/facebookarchive/prepack and how concurrent mode is still experimental after five+ years doesn't give me a lot of confidence.

Some real examples in JavaScript can be seen on Prepack[2]. Consequently it is natural to wonder whether we can AOT compile components of client side frameworks, to achieve a reduction in the final bundle size, but also to increase application execution speed.

Less or more it’s likely to happen, and could have been expected 2-3 years ago.

Especially with https://github.com/facebook/prepack. They want to eventually ship pre-compiled components rather than React.createElement() to end user

https://github.com/facebook/react/issues/7324

I also think this is why facebook had been investing in `prepack` - https://github.com/facebook/prepack

Svelte React Vue Learning curve Easiest to learn. Steepest learning curve due to its syntax, JSX, and ecosystem. Gentle learning curve. Performance Excellent performance. Svelte's performance is particularly noticeable in smaller applications and animations. React is the least performant of the three. It uses VDOM. It is best suited to larger scale apps. Vue's performance is generally considered to be good, especially for small to medium-sized applications. It uses the VDOM. Features Svelte has many out-of-the-box features that other frameworks don't such as advanced state management, animations, motion primitives, and a plugin system. You don't need to go searching for third-party solutions often. [SvelteKit](https://kit.svelte.dev/) is the official application framework. React sees itself as more of a library. Its focus is on building stateful UIs. You need to use third-party libraries for solutions related to styling, advanced state management, and other concerns. Application frameworks such as Next.js to provide everything you need to make web apps. Vue has a Single-File Component format similar to Svelte. It comes with scoped styling. It has official libraries for routing (Vue Router) and state management (Pinia). It has application frameworks such as Nuxt to provide everything you need to make web apps. Bundle size Smallest bundle size. Largest bundle size. Moderate bundle size. Integrations Svelte has all the base covered. What you find is that you don't need to reach for as many libraries as React and Vue, and that wrapper libraries are often not necessary because Svelte favors writing idiomatic JavaScript. However, overall the options are not as extensive as React's or Vue's. The popularity of React ensures a wide range of developer tools and a vast collection of community-driven libraries and frameworks are available. Vue has a comprehensive ecosystem that rivals React's. Support Svelte is backed by Vercel with Rich Harris as a full-time employee. It is also supported by its open-source community. It is well supported but not as strongly as the other two. React is supported by Facebook. It has the strongest support. Vue has full-time resources on its [core team](https://vuejs.org/about/team.html) that is funded by its open-source community. Community Svelte has a growing community that is passionate about the framework. While not as large as React's or Vue's community, Svelte's community is active and supportive. React has one of the largest and most active communities among JavaScript frameworks. It has been adopted by many large companies and has a vast number of contributors and maintainers. Vue is the second most widely used framework. It has a strong community. Documentation Svelte has great documentation. React's documentation was lagging. It has improved a lot and now is of a good standard. Vue's documentation is the gold standard. It has always had high quality documentation.

Only, if you're going to write a fullstack app and have server rendered or statically rendered pages, you'll most likely use a meta framework like NextJs, Remix, SvelteKit, SolidStart.

I was working on a SvelteKit based local cloud project. I know that there are already solutions out there that work out of the box, but I want to try and build my own version from scratch. One of the key features is the file uploading and I had a tough time collecting all the information piece by piece. So, I hope that you find my solution helpful.

This article is all about simplifying your path to web development. We will build amazing websites with as little effort as possible with SvelteKit, a tool akin to your coding friend. We will quickly set things up, create a basic site with little coding, and easily turn it into a Progressive Web App (PWA).

SvelteKit: https://kit.svelte.dev

- The starter template is like a collection of web dev best practices.

- The community is great. Beginners should ask a lot of questions, and the Svelte community is pretty good at trying to help them.

- The DX is wonderful.

I'm building this with Kit: https://weather-sense.leftium.com

The only caveat: if your goal involves finding employment choose React (Next.js) because there are way more openings.

Everything you need to build a Svelte project, powered by create-svelte.

Svelte is a JavaScript framework that can be used to build a full-scale application or small bits of other applications. The core principle of Svelte is based on running the code at compile time; this is different from frameworks like React and Vue, which perform most of the operations in the browser while the app is running without a virtual DOM. This makes developing Svelte applications faster, bundles smaller, and performance better. Svelte is also easier to write and learn. It basically entails coding in HTML, CSS, and JavaScript with the addition of a few extensions. However, Svelte has a framework called SvelteKit which allows the implementation of more complex functionalities and features such as routing and server-side rendering. The main features of Svelte include:

Sveltekit doesn't natively support WebSockets, and even though it does support server-sent events, it does so in a clumsy way. Express supports both nicely. As a result, I used svelte-sse for server-sent events. One somewhat annoying quirk I ran into is that since svelte-sse returns a Svelte store, which my app wasn't subscribing to (the app doesn't need to read the value, just to trigger a pull as I described above), the whole thing was just optimized away by the compiler. I was initially scratching my head about why messages were not coming through. I ended up having to implement a workaround for that behavior. I don't blame the author of the library; they assumed a meaningful value would be sent to the client, which is not the case with 'poke'.

CryptoFlow is a full-stack web application built with Axum and SvelteKit. It's a Q&A system tailored towards the world of cryptocurrency!