Skip to content

Instantly share code, notes, and snippets.

@boriscy
Last active October 11, 2023 15:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save boriscy/bbd06bcbb4b5db84455220facf0b1e63 to your computer and use it in GitHub Desktop.
Save boriscy/bbd06bcbb4b5db84455220facf0b1e63 to your computer and use it in GitHub Desktop.

Svelte Native vs Sveltekit & Capacitor

We want to create a new mobile app that will replace our current Flutter app, the main reason is that we want to use the code that is in the current web app.

There are 2 options Svelte Native and Sveltekit & Capacitor both of these options would use svelte but in case of Svelte Native we would be using Native Script which brings new components that are similar to HTML.

Pros

Language

Svelte Native uses Typescript with NativeScript custom tags that look similar to HTML, the styling is very similar to the one found on HTML with small differences. Native Script uses webpack to bundle it's code and this could impact in the Developer Experience

Capacitor & Sveltekit uses Typescript/Javascript and HTML with CSS

Winner Capacitor & Sveltekit

Code reusability

Svelte Native: We can use stores and many parts of the logic from the webapp but we would have to look for different components to replace those ones that we use on the Webapp

Capacitor & Sveltekit: We can use large portions of the codebase including styles and components that we created as well as nodejs packages making our lives easier when we want to move the code to the mobile app

Winner Capacitor & Sveltekit

Up to date

Svelte Native has not been active in a long time if you see the code on github most of the code has not been updated for 2 years. NativeScript in the other hand has been constantly updated.

Capacitor & Sveltekit: Sveltekit is vibrant project that has received a lot of attention recently and has been up to date. Capacitor has been constantly updated with a lot of attention and support from the community

Here there is no clear winner as basically Svelte Native creates a wrapper to make it easier to start working with Native Script

Components and modules

Svelte Native has a lot of components that come from Native Script and are specifically created for the mobile emvironment, you can see that in their documentation that there are examples of how to use their components for Angular, React, Vue and Svelte

Sveltekit & Capacitor can use almost all node packages on the internet allowing us to reuse the same packages as the webapp

NativeScript for Capacitor

There is an option NativeScript for Capacitor which allows to use NativeScript inside Capacitor creating an isolated environment for NativeScript inside Capacitor

http://localhost:4000/login

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment