-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (60 loc) · 7.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Medusa - Install</title>
<link rel="stylesheet" href="style-light.css" />
<link rel="stylesheet" href="style-dark.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Karla:wght@300;500&display=swap" rel="stylesheet">
</head>
<body class="dark">
<button id="darkmode" onclick="toggleDarkMode()">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
<script type="text/javascript">
function toggleDarkMode() {
document.body.classList.toggle('dark');
const isDarkMode = document.body.classList.contains("dark");
let darkCode = document.getElementById("dark-code");
if(darkCode !== null) {
let lightCode = document.getElementById("light-code");
if(isDarkMode) {
darkCode.removeAttribute("disabled");
lightCode.setAttribute("disabled", "disabled");
} else {
darkCode.setAttribute("disabled", "disabled");
lightCode.removeAttribute("disabled");
}
}
}
if(!window.matchMedia || !window.matchMedia('(prefers-color-scheme: dark)').matches) {
toggleDarkMode();
}
</script>
<section id="container">
<h1>Medusa UI</h1>
<p class="lead">A framework for micro-frontends in Java built on Reactive Spring and Thymeleaf</p>
<p>Medusa is an open-source bidirectional micro-frontend framework built in Java, on top of <a target="_blank" href="https://spring.io/reactive">Spring Reactive</a> and <a href="https://www.thymeleaf.org/">Thymeleaf</a>. Blazingly fast, with a modern feel and simple to write.</p>
<h2>Getting started</h2>
<p>Start your exploration with the <a href="https://medusa-showcase.onrender.com/">component showcase</a>, a site which is set up to demonstrate and document every feature the framework provides.</p>
<p>Once you're ready to get started, read up on the <a href="https://medusa-showcase.onrender.com/install">install instructions</a>, and you'll be coding in no time.</p>
<p>If you are interested in digging into the internals of the stack, we have our source openly available in our <a href="https://github.com/medusa-ui">Github project repository</a> as well as <a href="https://medusa-ui.github.io/documentation/docs/category/internals/">thorough documentation</a> on how the internals of the framework operate.</p>
<h2>What is the Medusa Stack?</h2>
<img src="https://github.com/medusa-ui/phanes/raw/main/hydra-medusa-architecture.png" alt="Diagram of the medusa/hydra architecture. From left to right, a browser call goes through Hydra first. Hydra is marked as a combination API gateway, IDP and discovery service. It is public and would have DNS associated with it. It optionally connects to a user database and redis for discovery scaling. The graph then continues to the right, with different user flows connecting to seperate medusa instances. Each medusa instance provisions a part of the UI. Medusa services are deployed internally." style="width: 800px; margin-bottom: 15px;">
<p>The stack consists out of two major components:
<p><strong>Medusa</strong>, a UI framework that will allow you to extend Thymeleaf into a bidirectional setup with tight integration between view and controller. In other words, you'll write individual micro-frontends in Medusa.</p>
<p><strong>Hydra</strong>, a gateway with service discovery, load balancing, and JWT security. It is your public endpoint through which all traffic flows, taking the complexity out of combining front-ends together.</p>
<p>Individual micro-frontends are deployed modularly - and thus get developed and deployed over time, go offline, or need A/B testing to try out new features. Hydra routes the user to the correct places, loads in fragments from other services, keeps track of the security session, handles resource conflicts and so much more; making the experience seamless for users.</p>
<h2>What is bi-directionality?</h2>
<p>In a standard application, data only flows from the client to the server. With Medusa, you can also communicate at any point from the server to the client.</p>
<p>You may use this yourself for common patterns such as notifications, chat or live data. Internally, Hydra uses it to enhance the micro-frontend experience.</p>
<p>For example: A menu. The menu leads to different parts of your app, each handled by a different micro-frontend. If you deploy new functionality, the menu can be live updated. If a server goes down, the menu options disappear.</p>
<p>Taking it a step further is A/B testing: Hydra can route a % of users to an experimental micro-frontend, but keep most of the users on the proven and steady version. You can adjust at any time.</p>
<h2>Why micro-frontends?</h2>
<p>Microservice architectures are the norm on the back-end. Teams can fully own their own services, update them independently, and features can be rolled out with no downtime. But once you get to the front-end, you're often stuck with monolithic javascript fat clients or you need a complex setup to get micro-frontends working. We aim to fix this by providing a backend inspired stack to this problem, making the difference between front-end and back-end applications minimal and the experience for the user cohesive and seamless.</p>
</section>
</body>
</html>