Unlocking the Power of Interoperable Apps with Sveltris
In recent years, the rise of multi-framework projects has opened up new possibilities for web developers seeking increased flexibility and efficiency in their workflows. One such experimental framework, Sveltris, is gaining traction for building interoperable apps. In this article, we’ll explore Sveltris, its purpose, features, and benefits, as well as the advantages and drawbacks of using multiple frameworks in a single project.
What is Sveltris?
Sveltris is a relatively new framework that enables the seamless integration of React and Svelte in a single application. By leveraging the power of both frameworks, you can intermix UI primitives like components and state primitives like Hooks. Under the hood, Sveltris uses React and the React DOM to render the application, while utilizing the lightweight react-nil renderer for state primitives like Hooks.
Why Use Sveltris?
Sveltris offers enhanced flexibility and allows you to leverage the unique strengths of both React and Svelte frameworks, resulting in more efficient and tailored solutions. You can combine React’s virtual DOM and component-based architecture with Svelte’s small bundle size and runtime efficiency. Additionally, you can take advantage of React’s vast ecosystem of third-party libraries and components.
Getting Started with Sveltris
Sveltris allows you to integrate React into an existing Svelte app or vice versa. You can also configure it to work with React and Svelte applications built with esbuild, webpack, or Vite. To get started, create a new React application and install Sveltris and the Svelte Vite plugin as a dev dependency. Then, modify the vite.config.js file to import the Svelte and Sveltris plugins and make Svelte hydratable.
Creating a Svelte-in-React Application
To begin using Svelte in a React application, create a new Hello.svelte file and paste the code below into it. This code exports a heading component with the message “Hello from Svelte!” Next, replace the entire contents of the default src/App.jsx file with the code below, which imports the Hello Svelte component with an additional in-React query parameter.
Creating a React-in-Svelte Application
To start using React in a Svelte application, follow the same steps as above. First, create a new Svelte app and install Sveltris and the React Vite plugin as a dev dependency. Then, update your vite.config.js file to import the React and Sveltris plugins. To try things out, create a new Card.jsx file and paste the code below into it, which creates a React component that accepts title and content props and renders a styled card based on the data in the props.
Building an Interoperable Social App with Sveltris
We’ll build an interoperable social media dashboard using Sveltris, incorporating components created with Svelte and React. We’ll also utilize third-party packages from these libraries. The app will feature default posts by two authors, John and Jane, and include a button to generate random posts from either author. One section of the app will display all the generated posts, while another section will show a bar chart indicating the number of posts from each user.
Creating Post Cards and Toast Notifications
Let’s create a new post card and toast component in Svelte. First, create a file named PostCard.svelte inside the src/ folder and paste the code below, which generates a basic Svelte post-card component, along with a random image from Unsplash, accepting id, author, and content as props. Next, create a file named Toast.svelte and paste the following code, which creates a new toast component using the svoast package.
Listing and Adding Random Posts
Let’s replace the content of the default src/App.jsx file with the following code, which defines an array of initial posts and iterates through it in the markup, rendering the Svelte PostCard component we created earlier for each post. We also create an Add Random Post button that adds a new random post when clicked and displays the SVoast toast notification after a post is added.
Visualizing Post Counts with a Bar Chart
To add a bar chart displaying the number of posts for each user, we’ll add some code to the App.jsx file. First, define a new state called chartData with the following default data. Then, update the addRandPost() function to automatically update the chart data when a new post is added. Finally, update the JSX code to render the bar chart with the chartData.
This application demonstrates the strength of Sveltris in combining React and Svelte to build powerful applications. We created the Toast and PostCard components using Svelte, with the Toast component utilizing a third-party Svelte component. Additionally, we showcased the ability to share reactive data between Svelte and React in our App.jsx file, highlighting the power of Svelte’s interoperability.