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