Age of multi-framework frontends

Multi-framework Frontend allows developers to choose from a variety of frameworks to build web applications, leading to a more flexible and modular approach. This talk explores the benefits and challenges of this approach, including strategies for maintaining code quality and consistency across projects. We'll discuss how to leverage the strengths of multiple frameworks to create innovative solutions and the importance of staying up-to-date with the latest trends and best practices. Learn how to thrive in the Age of Multi-Framework Frontends.

Transcript

1. Age of Multi-Framework Frontends Marko Arsić April 2023
2. Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Independent Tech Consultant Lecturer @ ReactWeek.dev Helping companies set up teams and standardize the development process github.com/marsicdev
3. Know the audience?
4. Overview • Need for frameworks • Combining frameworks • Multi-framework frontends • Tools and Ecosystem • Cross platform state management • Benefits and drawbacks
5. need for frameworks
6. Frameworks and libraries are a huge help to developers in designing and developing products
7. Frameworks provide an infrastructure that has already figured out the low-level details, allowing the developer to focus on the specific project details
8. Simple to understand, consistent, and easy to implement
9. Uses all the best practices from the past, with the ability to evolve in the future
10. Allows the developer to build components that are reusable
11. Developer has to write less code! 🏻
12. why combining frameworks?
13. With strengths of different frameworks, you can create a more robust and flexible application
14. Flexible application can easily adapt to changing requirements and meet the diverse needs of users
15. Multi-framework application can be a powerful and efficient way to create complex modular software
16. Of Course, you can archive the same thing with good architecture and modularity of single framework
17. tools and ecosystem
18. New frameworks emerging every day with the promise of revolutionizing the way we build for the web
20. Often apps are using one specific UI library (React, Vue, Svelte, etc.) to define components and build the experiences for the users
21. This has changed !
22. Vite Next Generation Frontend Tooling Get ready for a development environment that can finally catch up with you.
23. Astro Build the web you want Astro is the all-in-one web framework designed for speed. Powered by your favorite UI components and libraries.
24. Asto helps us optimize our applications by ensuring that we are not using more JavaScript than necessary
25. Astro allow us to combine different UI libraries into a single project
26. Using the Astro plugin system, we can build and enhance our websites the way that we want
28. islands architecture
29. Key differentiator between Astro and other frameworks relies on its architecture: islands architecture
31. “Island” refers to an interactive UI component on an otherwise static page of HTML
32. The islands architecture encourages small, focused chunks of interactivity within server-rendered web pages
33. The output of islands is progressively enhanced HTML, with more specificity around how the enhancement occurs
34. Rather than a single application being in control of full-page rendering, there are multiple entry points
35. The script for "islands" of interactivity can be delivered and hydrated independently, allowing the rest of the page to be just static HTML
36. Multiple islands can exist on a page, and an island always renders in isolation, which means that each island can use any UI framework
37. state management
38. Problem: share information between components since they are in different frameworks
39. React has the Context API, with a Provider / Consumer pattern
40. Vue provides a reactive API, following the conventions of Actions --> State --> View in a similar style to Redux
41. Svelte recommends using Stores, providing readable, writable, and derived containers for storing data
42. Solution: cross platform data flow
43. All of these are valid ways of fixing the state management issue we need a common solution that works for all the UI libraries
44. nanostores A tiny state manager for React, React Native, Preact, Vue, Svelte, and vanilla JS. It uses many atomic stores and direct manipulation.
45. The Nano Stores library allows you to author stores that any component can interact with
46. • They’re lightweight. bare minimum JS (less than 1 KB) with zero dependencies. • They’re framework-agnostic.
47. benefits and drawbacks
48. Frameworks are a one-size-fits-all solution yet have some restrictions
49. You can’t do anything and everything with a single framework Some may not be a good fit for certain applications
50. Use case: migration of legacy code
51. conclusion
52. Multi-Framework Frontends are here and on the rise
53. Astro React, Svelte, and Vue are just a few of the many options available
54. Careful planning can lead to successful multi-framework frontend projects
55. Q & A https://discord.gg/94uhCAkFKf
56. As everything good in life, knowledge is great only when shared
57. Thank you!