Why you will adopt it ?
Because you are fed up to load tons of modules, using hooks, effects, refs...
All you want is to code natively in javascript, without worrying about all the noisy tooling.
JurisJS allows this without sacrifying best coding patterns, like dependency injection.
Look carefully at this code Demo:
Do really need more ? Be honest with yourself, unless you are paid for it, there is absolutely no reason to use hyped frameworks at all.
After all, you are not building the next Facebook, are you ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JurisJS User Loader</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
#app {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
min-height: 400px;
}
h1 {
color: #2d3748;
font-size: 1.5rem;
margin-bottom: 1rem;
padding: 1rem;
background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
border-radius: 8px;
border-left: 4px solid #667eea;
transition: all 0.3s ease;
animation: slideIn 0.5s ease-out;
}
h1:hover {
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
button {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin-top: 1rem;
position: relative;
overflow: hidden;
}
button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
button:hover::before {
left: 100%;
}
button:active {
transform: translateY(0);
}
.loading {
opacity: 0.7;
cursor: not-allowed;
animation: pulse 1.5s infinite;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 0.9;
}
}
.empty-state {
text-align: center;
padding: 3rem 1rem;
color: #718096;
font-size: 1.1rem;
}
.empty-state::before {
content: '👥';
font-size: 3rem;
display: block;
margin-bottom: 1rem;
}
/* Responsive design */
@media (max-width: 768px) {
#app {
margin: 1rem;
padding: 1.5rem;
}
h1 {
font-size: 1.3rem;
padding: 0.8rem;
}
button {
padding: 0.8rem 1.5rem;
font-size: 1rem;
}
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/juris@0.5.2/juris.mini.js"></script>
<script>
const services = {
api: {
fetchUsers: async (ctx) => {
ctx.setState("loading", true);
try {
const req = await fetch("https://randomuser.me/api/?results=5");
const data = await req.json();
ctx.setState(
"users",
data.results.map((r) => r))
} catch (error) {
console.error("Failed to fetch users:", error);
ctx.setState("users", ["Error loading users"]);
} finally {
ctx.setState("loading", false);
}
},
},
};
const Card = (user) => {
const { name, picture } = user;
return {
div: {
style:{
display:"flex",
gap:"1rem",
width:"100%",
"align-items":"center",
"margin-bottom": "1rem"
},
children : [
{img: {style:{flex:0.25},src : picture.thumbnail}},
{h1: {style:{flex:1, position:"relative", top:"0.5rem"},text : name.first } },
]
}
}
}
const App = (props, ctx) => ({
div: {
children: () => {
const users = ctx.getState("users");
const loading = ctx.getState("loading");
const loader = {
div: {
className: "empty-state",
text: "Click the button to load random users!" }}
return [
users.length === 0 && !loading ? loader : users.map(Card),
{
button: {
text: loading ? "Loading..." : "Load Random Users",
className: loading ? "loading" : "",
onclick: () => {
if (!loading) {
ctx.api.fetchUsers(ctx);
}
},
},
},
];
}
},
});
new Juris({
services,
states: {
users: [],
loading: false
},
components: { App },
layout: { App },
}).render();
</script>
</body>
</html>```
See how services are injected in the component, awsesome
Top comments (0)