Comparison of web front-end frameworks

[adulbrich]

A few frameworks to consider:

• Next/React
• Svelte/SvelteKit
• ViteVue

[stack461]

React is a popular JavaScript library for building user interfaces, known for its flexibility and extensive community support. Its component-based architecture encourages reusability and makes it easy to manage complex UIs. React's virtual DOM allows for efficient updates, resulting in fast performance. It can be overwhelming for beginners due to the need for additional libraries for state management and routing, which can lead to a steeper learning curve.

Svelte is a compiler-based framework that compiles components into optimized JavaScript at build time, resulting in good runtime performance. It has a simple syntax, making it an excellent choice for beginners. Svelte also features a novel approach to state management and animations, making development more intuitive. Its relatively new and that means there is a smaller ecosystem and fewer available third-party libraries compared to React or Vue. This can lead to more work in certain cases.

Vue offers a clear and well-documented structure for building applications, making it accessible to developers of varying skill levels. Vue's two-way data binding and easy integration with other projects are notable advantages. Its ecosystem is not as extensive as React's, and the framework's corporate backing, compared to open-source alternatives, might be seen as a potential downside by some developers.

I have previous experience with react but I am open to using another framework.

[adulbrich]

Some additional stats that might be worth checking out (for curiosity's sake): https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/

[stack461]

React and Riot are both front-end frameworks, but they have different design philosophies, features, and use cases. Here, I'll provide a comparison and explain why React is often considered a strong choice for building web applications. React has a vast and active community. It is used by numerous companies, ensuring constant development and support. Riot, while a capable framework, has a smaller community and fewer third-party libraries and resources. This can make it more challenging to find solutions to common problems. React is known for its component-based architecture, which promotes code reusability. Components are easy to create and nest. Riot also uses a component-based architecture, but it does not have as many features and is not as well documented as React's component system. React and Riot utilize a Virtual DOM to efficiently update the actual DOM. This results in better performance by minimizing unnecessary re-renders and updates. React offers a flexible and powerful state management system. You can manage state using React's built-in "useState" and "useReducer" hooks. Riot doesn't have as extensive a state management system. While you can manage state within components, React's state management options are more robust and well-documented. In summary, while Riot is a valid choice for certain scenarios, React is often considered the better option for most front-end development needs due to its extensive ecosystem, component architecture, state management options, performance optimizations, and a large user base. Here is a link to the repository with the two websites I created using each framework. I would encourage looking at the structure of each of the components as the structures are very different. In my opinion, Riot has an intuitive approach for just reusing regular HTML however I think its limited as well as hard to debug because it is placed in what looks to be a text file. For those reasons, I think React is the best option: https://github.com/stack461/Frameworks

[adulbrich]

After discussing with the team, we'll go with Next/React. Small proof-of-concept with Tauri/Svelte/TailwindCSS available here: https://github.com/adulbrich/hdr-image-viewer