Εισαγωγή
Το JML (JSON-Inspired DSL-style Markup Language) είναι ένα νέο, ελαφρύ και αποδοτικό markup format που αναπτύχθηκε για το Ascoos OS, την πρώτη υλοποίηση WebAI (το διαδίκτυο ως νοητή οντότητα), με στόχο να προσφέρει μια πιο καθαρή, συνεκτική και σύγχρονη εναλλακτική στη συμβατική HTML. Βασισμένο σε αρχές JSON και DSLs, το JML επιτρέπει τη δημιουργία UI templates με τρόπο πιο δομημένο, πιο ασφαλή και σημαντικά πιο σύντομο.
Σε αντίθεση με την HTML, η οποία σχεδιάστηκε το 1997 για text + multimedia, το JML σχεδιάστηκε το 2025 για όλα τα formats του μέλλοντος, με πλήρη υποστήριξη UTF‑8, AST parsing, semantic macros και δυνατότητα εκτέλεσης σε browsers, editors και server‑side περιβάλλοντα.
Το JML σχεδιάστηκε για το WebAI όπως το ορίζουμε: αποκεντρωμένο, zero-trust, native AI/NLP/IoT, χωρίς εξωτερικές εξαρτήσεις. Προσφέρει καθαρή JSON-εμπνευσμένη σύνταξη, εγγενές AST, semantic macros και rendering χωρίς XSS — ιδανικό για αυτόνομα, προβλεπτικά και αυτοπροστατευόμενα web interfaces.
html {
head {
meta:charset('UTF-8')
link:rel('stylesheet'),href('https://cdn.ascoos.com/bootlib/css/bootlib.min.css')
}
body:class('dark-theme') {
h1{`Καλώς Ήρθατε στο JML!`}
p{`Ελαφρύ markup για το Ascoos OS.`}
}
}1. Γιατί δημιουργήθηκε το JML;
Το JML αναπτύχθηκε για να λύσει συγκεκριμένα προβλήματα της HTML:
1.1. Υπερβολικός boilerplate κώδικας
Η HTML σχεδιάστηκε για στατικές σελίδες του 199x–201x. Στο Web5/WebAI χρειαζόμαστε declarative UI χωρίς περιττό θόρυβο, ώστε ο πυρήνας AI να εστιάζει σε πρόθεση και όχι σε parsing.
Η HTML απαιτεί <html>, <head>, <body>, meta tags, attributes, κ.λπ. Το JML τα ενσωματώνει όλα σε μία καθαρή, JSON-styled δομή.
1.2. Έλλειψη συντακτικής συνέπειας
Η HTML έχει:
Το JML έχει ενιαία σύνταξη για tags, attributes και content.
1.3. Έλλειψη AST και semantic validation
Η HTML δεν έχει εγγενή AST.
Το JML βασίζεται εξ αρχής σε **Abstract Syntax Tree**, επιτρέποντας:
1.4. Μεγαλύτερη αποδοτικότητα
Σε πραγματικά παραδείγματα, το JML είναι 16–40% μικρότερο από το αντίστοιχο HTML. Βλέπε ενότητα 7.
2. Τι είναι το JML;
Το JML είναι ένα markup format που:
Είναι πλήρως UTF‑8 native και επιτρέπει emojis, ελληνικά, πολυγλωσσικό περιεχόμενο και ειδικούς χαρακτήρες χωρίς escaping.
3. Τι δεν είναι το JML
4. Γιατί JML στο WebAI
5. Πού χρησιμοποιείται σήμερα
6. Συντακτική Δομή του JML
6.1. Κανόνες
6.2. Tags
Για τον προσδιορισμό μιας ετικέτας, στην ονομασία των ονομάτων των HTML ετικετών μπορούμε να χρησιμοποιήσουμε μόνο γράμματα, αριθμούς καθώς και τους χαρακτήρες κάτω παύλα (_) και παύλα (-).
Το περιεχόμενο μιας ετικέτας πρέπει να εσωκλείεται μέσα σε αγκύλες { ...περιεχόμενο ετικέτας... }.
tagName { ... }
p {`Hello World`}6.3. Attributes
Μια ιδιότητα :attrName('value') ξεκινά με άνω-κάτω τελεία και για τον ορισμό της τιμής, χρησιμοποιούμε μια συμβολοσειρά μέσα σε απλά εισαγωγικά.
Πολλαπλές ιδιότητες πρέπει να διαχωρίζονται με κόμμα.
tag:attr('value')
tag:class('btn'),id('main')
a:rel('nofollow'),href('https://ascoos.com'){`Link`}6.4. Περιεχόμενο
Το κείμενο, είτε αφορά μια απλή γραμμή, είτε πολλαπλές γραμμές/ακατέργαστο περιεχόμενο, πρέπει να εσωκλείεται μέσα σε χαρακτήρες backticks `text`.
tag { `Κείμενο` }
div:class('container'){`Hello World`}
blockquote {
`Πολλαπλές
γραμμές
με backticks.`
}
style {
`.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}`
}
script {
`function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
if (name === "" || email === "") {
alert("Please fill out all fields!");
return false;
}
return true;
}`
}6.5. Void tags
Οι κενές ετικέτες, όπως meta, link, img κλπ., δεν μπορουν να περιέχουν μέσα τους υποετικέτες ή {}.
br
img:src('image.png'),alt('...')
link:rel('alternate'),hreflang('el'),href('https://os.ascoos.com/index.html')6.6. Nested blocks
Κάθε μη void ετικέτα, μπορεί να εμφωλιάσει μέσα σε {...} άλλες ετικέτες
html {
head {
meta:charset('UTF-8')
link:rel('stylesheet'),href('https://cdn.ascoos.com/bootlib/css/bootlib.min.css')
}
body:class('dark-theme') {
nav {
ul {
li{`Home`}
li{`About`}
}
}
main {
h1{`Καλώς Ήρθατε!`} // UTF-8 OK
p{`Περιεχόμενο.`}
}
}
}7. JML vs HTML – Η Απόλυτη Σύγκριση (2025)
| Χαρακτηριστικό | JML | HTML5 |
|---|---|---|
| Μέγεθος ίδιας σελίδας (minified) | 64 χαρακτήρες (Hello World) | 108 χαρακτήρες |
| Με meta + viewport + favicon | 177 χαρακτήρες | 212 χαρακτήρες |
| Μέση μείωση | 16–40% μικρότερο | – |
| Boilerplate | Κανένα | DOCTYPE, head, body, κλείσιμο tags |
| Ασφάλεια XSS | ασφαλές από προεπιλογή (AST validation) | Εξαρτάται από developer |
| Executable logic | Υποστηρίζει ήδη βασική λογική & επεκτείνεται (foreach, count, semantic macros κ.ά.) | Όχι |
| Μπορεί να κρυπτογραφηθεί | Ναι (πρότυπο WIC - Web Image Cryptography) | Όχι |
| Live editing | Ναι (Ascoos Code Editor) | Ναι |
| Εγγενής υποστήριξη browser | Όχι (χρειάζεται το επίσημο JML Extension) | Ναι |
| Εργαλεία & οικοσύστημα | Νέο / περιορισμένο | Τεράστιο |
| Καμπύλη μάθησης | Μέτρια–υψηλή | Χαμηλή |
Το JML είναι πιο σύντομο, πιο ασφαλές και πιο εκφραστικό.
7.1 Αδιάψευστα Παραδείγματα
7.1.1 Πολύ απλό Minified HTML
HTML – 108 χαρακτήρες
<!DOCTYPE html><html lang="en"><head><title>Hello JML</title></head><body><h1>Hello World</h1></body></html>Ίδιο σε JML (minified): 64 χαρακτήρες
html:lang('en'){head{title{`Hello JML`}}body{h1{`Hello World`}}}→ Αποτέλεσμα: 40.75% μικρότερο
7.1.2 Κλασικό HTML (minified, με meta viewport, charset, favicon): 212 χαρακτήρες
HTML – 212 χαρακτήρες
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Test</title><link rel=icon href=favicon.ico></head><body><h1>Hello</h1></body></html>Ίδιο σε JML (minified): 177 χαρακτήρες
html:lang('en'){head{meta:charset('utf-8')meta:name('viewport'),content('width=device-width,initial-scale=1')title{`Test`}link:rel('icon'),href('favicon.ico')}body{h1{`Hello`}}}→ Αποτέλεσμα: 16.51% μικρότερο
8. Το AST του JML
Το JML δεν είναι απλώς markup — είναι **DSL με AST**.
JML → Tokenizer → Parser → AST → Renderer → HTML → Browser
Ο tokenizer, parser και renderer του Ascoos OS μετατρέπουν το JML σε:
Αυτό επιτρέπει:
9. Παραδείγματα JML
9.1. Full Document Example
Το JML μπορεί να περιγράψει ολόκληρο HTML document:
Το αποτέλεσμα είναι ένα πλήρες, λειτουργικό web page.
<!DOCTYPE html>
<script type="text/jml" id="page-jml">
html:lang('en') {
head {
meta:charset('UTF-8')
meta:name('viewport'),content('width=device-width, initial-scale=1.0')
title {`Advanced Sample Page`}
style {
`.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
.header {
text-align: center;
color: #333;
padding: 10px;
border-bottom: 2px solid #000;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input, .form-group select {
width: 100%;
padding: 8px;
margin-top: 5px;
}`
}
script {
`function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
if (name === "" || email === "") {
alert("Please fill out all fields!");
return false;
}
return true;
}`
}
}
body {
div:class('container') {
div:class('header') {
h1 {`Welcome to Ascoos OS Demo`}
p {`This is a complex demo with nested elements and interactivity.
It also supports multi-line text.
`}
}
div:class('content') {
h2 {`User Registration`}
form:onsubmit('return validateForm()'),method('POST'),action('/submit') {
div:class('form-group') {
label:for('name') {`Name:`}
input:type('text'),id('name'),name('name'),required('')
}
div:class('form-group') {
label:for('email') {`Email:`}
input:type('email'),id('email'),name('email'),required('')
}
div:class('form-group') {
label:for('country') {`Country:`}
select:id('country'),name('country') {
option:value('us') {`United States`}
option:value('gr') {`Greece`}
option:value('de') {`Germany`}
}
}
button:type('submit') {`Submit`}
}
br
div:class('footer') {
p {`© 2025 Ascoos OS. All rights reserved.`}
br
a:href('https://ascoos.com') {`Visit our site`}
}
}
}
}
}
</script>
<!-- <script src="content-script.js"></script> -->9.2. Inline Block Example
Το JML μπορεί να ενσωματωθεί μέσα σε HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Sample Page</title>
<link rel="stylesheet" href="https://bootlib.ascoos.com/dist/bootlib-1.0.0a4.min.css">
<link rel="stylesheet" href="https://bootlib.ascoos.com/dist/bootlib-1.0.0a4.ext.min.css">
<style>>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
.header {
text-align: center;
color: #333;
padding: 10px;
border-bottom: 2px solid #000;
}
.footer {
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input,
.form-group select {
width: 100%;
padding: 8px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to Ascoos OS Demo</h1>
<p>This is a complex demo with nested elements and interactivity.
It also supports multi-line text.
</p>
</div>
<div> class="box">
<jml>
style {`.inner {font-size: 1.4em;}`}
div:class('inner') {
p:style('color: brown;') {`Το παράδειγμα αυτό υλοποιεί την δυναμική inline φόρτωση εγγράφων JML μέσα σε HTML block`}
br
p {
`test BR`
br
`OK`
}
}
</jml>
</div>
<div class="content">
<h2>User Registration</h2>
<form onsubmit="return validateForm()" method="POST" action="/submit">
<div class="form-group"><label> for="name">Name:</label><input type="text" id="name" name="name" required=""></div>
<div class="form-group"><label> for="email">Email:</label><input type="email" id="email" name="email" required=""></div>
<div class="form-group"><label> for="country">Country:</label><select id="country" name="country">
<option> value="us">United States</option>
<option> value="gr">Greece</option>
<option> value="de">Germany</option>
</select>
</div>
<button> class="blib-btn-primary blib-text-lg" type="submit">Submit</button>
</form><br>
<div class="footer">
<p>© 2025 Ascoos OS. All rights reserved.</p><br><a> href="https://ascoos.com">Visit our site</a>
</div>
</div>
</div>
<!-- <script> src="content-script.js"></script> -->
</body>
</html>Το browser extension ή το JML renderer το μετατρέπει σε HTML.
10. Το Οικοσύστημα του JML
Το JML συνοδεύεται από πλήρη εργαλειοθήκη:
10.1. JML Studio
10.2. Ascoos Kernel Classes
10.3. Semantic Macros
Επιτρέπουν advanced UI generation στο Ascoos OS.
11. Browser Extensions (Chrome, Edge, Firefox)
Τα επίσημα extensions του Ascoos OS επιτρέπουν:
Υποστηρίζονται:
Το extension εντοπίζει:
και τα μετατρέπει σε HTML.
12. Μετατροπές JML ↔ HTML
Το JML μπορεί:
Αυτό το καθιστά ιδανικό για:
13. Roadmap
14. Δοκιμάστε ή μάθετε περισσότερα για το JML
15. Συμπέρασμα
Το JML δεν είναι απλώς μια νέα markup γλώσσα.
Είναι μια σύγχρονη, ασφαλής, συνεκτική και επεκτάσιμη βάση για το οικοσύστημα Web5 και WebAI του Ascoos OS, όπου το web δεν είναι πια εργαλείο, αλλά ενιαία, αυτόνομη νοημοσύνη.
Μέσα από το Ascoos OS ανοίγει ο δρόμος για UIs που μαθαίνουν, προβλέπουν και αυτοπροστατεύονται — το markup του 2030, διαθέσιμο σήμερα.
Προσφέρει:
Αποτελεί το επόμενο βήμα στην εξέλιξη του markup και ανοίγει τον δρόμο για πιο έξυπνες, πιο ασφαλείς και πιο εκφραστικές web εφαρμογές.
Γράφτηκε από τον Χρήστο Δρογκίδη — Developer, στοχαστή και υπέρμαχο του λογικά καθοδηγούμενου σχεδιασμού λογισμικού.