Why a React developer used Svelte to build his online arcade
May 19, 2022 by Rich Kurtzman, Brand Communications @ Fathym
And it shouldn’t come as a surprise. Once you learn a specific framework (or library, in the case of React), you know the ins and outs of it. You learn how to get things done in an efficient manner. You pick up the tips and tricks for fixing issues.
Of course, that was the case for frontend engineer, Jack Penhale.
Now, he may be a bit of a “Jack of all trades” when it comes to frameworks, but Jack also has a favorite, which is React. Most of what he builds is with React. However, this time around we asked him to step out of his comfort zone a little bit and use Svelte to create an Arcade.
But first, what makes React so great?
React and Svelte popularity
Interestingly, though, there’s a newcomer on the scene in SvelteJS.
Svelte was released in 2016 by Rich Harris and has been adopted by a great group of massive companies like Apple, Square, Spotify and more. And according to that same survey by Stackoverflow, Svelte is now the No. 1 most-popular framework out there. In fact, 71.47% of developers love using it.
What makes both Svelte and React similar are the wonderfully interactive, dazzling sites they can build. But it should be noted that the average app size when using Svelte is a mere 1.6Kb, whereas the smallest one can make a React app is 42.2Kb, which is with ReactDOM.
What does that mean in simple terms?
Svelte is what we consider “lightweight”, and it helps sites using it run incredibly fast. Where the performance of a React site is strong, Svelte sites are another step up into the “great” category.
Why he used Svelte instead of React
One of the reasons he used Svelte was because of its high-performance ability, as referenced above. He wanted a lightweight option which could run games in the browser with ease.
Jack designed the carousel-style display, as well as the landing page for all the games.
Of course, that’s part of the brilliance of micro frontends: Developers can use whichever frameworks, libraries or static site generators they want to build websites.
“With Fathym micro frontends, no matter what page on your site you can choose the framework you want,” Penhale explained. “If you wanted to make a landing page like I did here in Svelte, you could. Then you could write your docs using Docusaurus and launch an e-commerce store using React. The freedom to do all of that is nice, especially when you work in a team where individual devs have preferences for different frameworks.”
What the React developer liked about Svelte
Many in the developer community have raved about the shallow learning curve of Svelte, as well as its being lightweight in design. That’s a big reason why so many who have heard of the framework want to try to use it, as the following graphic illustrates.
Of course, since it was a new framework to him, there were some hurdles with using Svelte.
“One challenge I found is when to break my project into smaller components,” he said. “It was easy to just keep everything on one page until my main file was 500 lines long. Approaching this again I would have a more component based view.”
But, where there were challenges, the strong and extensive Svelte community helped him get back on track.
“A surprise I had with Svelte was how active the dev community is around it,” Penhale explained. “I was worried about not having a MUI component library, there was already one out there in Svelte Material UI. Any questions I had could be easily answered in the docs or on Stackoverflow.”
So, if you’re a new developer or a seasoned veteran, Fathym’s micro frontend architecture can help you in many ways.
First and foremost, it may be your initial foray into micro frontends. Once you give them a try, you may just fall in love with the simplicity of being able to use multiple frameworks and static site generators together.
Join Fathym today for free and scale up to a paid subscription when the time comes.