How do the well-known JavaScript frameworks differ? Where are their strengths, and where are their weaknesses? What are the areas of application and features of the frameworks? These questions were the main theme of the fourth Tech Meetup at Orbit. Our guest speakers WebDave (David Müllerchen), Markus Duffek, and René Schramowski addressed these questions in an evening filled with interesting insights, lively discussion, beer, and pizza, focusing on the frameworks Vue, React, Angular, SvelteKit, and Flutter.
The Big Three: Vue, React, and Angular
Vue, React, and Angular are the three renowned JavaScript frameworks which WebDave introduced us to. All these frameworks have in common that they offer developers a range of features, such as forms, authentication, backend connectivity, and routing, which are needed for typical web apps. Choosing the right framework is not easy and strongly depends on the requirements and preferences of the development team.
For getting started with development in Vue, React, and Angular, there are helpful tools like Vue CLI, Create React App, and Angular CLI. These not only provide the basic structure for the project but also a range of everyday tasks like testing and type-checking, which are essential for stable and secure development.
Another important aspect that WebDave addressed in his talk was the component structure of the frameworks. All three allow for the reuse of components, which improves both code quality and efficiency. Routing and navigation are also integral parts of the frameworks.
The part about lazy loading and dynamic importing was also interesting. Through this concept, applications can be designed to be more performant and resource-efficient. This is especially important for mobile apps.
In the context of component interaction, WebDave showed us the importance of Dependency Injection and the interplay of containers and contexts. They make it possible to share data and functions between components and thus manage an overarching state.
Despite all the similarities, the three frameworks have differences that should be considered when making a decision. Ultimately, WebDave emphasized that the choice of the appropriate framework always depends on the requirements of the project and the expertise of the development team.
The new Kid on the Block: SvelteKit
Markus is a Lead-Engineer at Orbit and uses mostly Vue.js and React for frontend projects. But this time, something different was in focus: Svelte and SvelteKit.
Svelte is a lean, open-source framework that has received a lot of support since its release in 2016. Compared to React, Svelte requires significantly less code and offers therefore a better developer experience.
Svelte does not use a Virtual DOM, which significantly improves its performance. In Markus’s opinion, Svelte offers clear syntax and high functionality. SvelteKit is the framework around Svelte that provides routing functionalities and server connections. It allows developers to use a Svelte application for server-side or client-side rendering.
Markus demonstrated how to use Svelte and Svelte Kit with an example project, a simple chat application.
Flutter: Cross-Platform Development also for the Web
René Schramowski brought his expertise in building digital products with Flutter to our Meetup. He organizes the Hamburg Flutter Meetup to connect people who love to build great software with Flutter/Dart.
Flutter, a product of Google, has been making waves in the developer community for its unique approach to cross-platform development. Unlike traditional web frameworks, Flutter allows developers to write a single codebase that can be used across various platforms. This means no more juggling between different projects for iOS, Android, or web!
Flutter's documentation is top-notch, resembling a "tour guide" that provides all the essential information. It's not just Google's effort; the community has contributed extensively, making the documentation rich and comprehensive.
One of Flutter's standout features is its ability to produce platform-specific code. While most frameworks rely heavily on the DOM and iframe, Flutter takes a different route. It's designed to directly address individual platforms and convert code into native projects. This ensures that apps built with Flutter can leverage the native features of the respective platforms, offering a seamless user experience.
No framework is without its challenges. While Flutter offers a lot of advantages, it also has its limitations. For instance, its restricted use of the DOM can pose challenges in creating SEO-friendly websites. However, for developers aiming to serve multiple platforms, Flutter remains a powerful option.
Conclusion and Take Away
The Meetup gave a comprehensive overview of several JavaScript frameworks namely Vue, React, Angular, SvelteKit, and Flutter. These frameworks have distinctive strengths, offering different features and usability to suit project requirements and the expertise of the development team. Key elements such as routing, performance, code reuse, and component structure were compared across the frameworks, stressing the importance of choosing the right framework based on specific project needs. SvelteKit and Flutter emerged as promising new players. Despite the advantages of these frameworks, they each have limitations which developers need to consider carefully. Ultimately, the choice of a framework should be aligned with the project's specific requirements and the proficiency of the development team.
We are really thankful for the experienced speakers and the super engaged audience. From our point of view, this Meetup brought everything that makes these events enjoyable: we had great presentations, fruitful discussions and not at least cold beer and fresh pizza.
