Ynet.dev

This is a framework for HTML5 network apps; games and tools in particular.

Ynet internally handles dynamic loading of code modules (aka. JavaScript streaming), which also allows live code updates (aka. runtime code injection), speculative module fetching and seamless resuming after re-connection (without reloading any code, aka. lazy execution). Since it acts as a pre-compiler, some syntactic sugar is also included (see below).

Current version: 1.24.3.5 (that's major.y.m.d)

Topics

Capabilities

  • built-in debug console, supporting colored output
  • compact HTML tree notation
  • custom/complex HTML elements (eg. switch-box, ring, password field with revealer)
  • meaningful typeOf( var ) where null is "null" and "Ynet" is "string"
  • query and manipulate elements, classes, attributes, etc.
  • easy interface events (supporting click/tap/hold/drag & drop)
  • built-in authentication (Passkey / FIDO2, device / cookie, password, e-mail, QR code)
  • session handler (database or memory)
  • resource loader / progress display
  • handy geometry functions, curves/slopes/splines, vectors and matrix classes
  • n-dimensional typed arrays, unlimited 2D/3D maps, bsp/quad/oct trees, heaps
  • keyboard, mouse, touch and gamepad support
  • database access, including query helpers
  • heartbeat providing a stable "main loop" framerate, also fps measuring
  • tile maps, including A* path finding, terrain generation and more
  • voxel trees for endless worlds, supporting voxel tile maps for quick generation
  • 2D/Canvas rendering and drawing utilities, including image effects
  • 3D/WebGL rendering with shaders, covering pixels / sprites / polygons / voxels
  • sound and music playback, supporting multiple effects (pitch, reverb, distort, etc.)
  • sound sprites (multiple sounds in one file)
  • QR data transfer (ie. reader and generator)

Screenshots

Here are some random screenshots from various projects:

JS syntactic sugar

The delay( ms ) structure is a shortcut for setTimeout() calls:

delay( 1000 ) { doSomethingAfterOneSecond(); }


The measure( name ) structure stores the execution time of a certain code piece:

measure( "render" ) { doRenderingHere(); }

The duration will be available in core.stats.render.


The benchmark( num ) structure also measures time, but for multiple iterations:

benchmark( 1000 ) { doSomethingThousandTimes(); }

After 1000 iterations, the execution duration in ms will be printed to the Ynet console.


Easily translate values to strings:

var list = { dog:"bark", cat:"meow", bird:"chirp" }; var def = "ERR"; print( "Cat says " + select( "cat", list, default ) ); print( "Fish says " + select( "fish", list, default ) );

Prints Cat says meow and Fish says ERR.


Ynet supports multi-line strings in code:

var list = "/* This is a multi-line string. */";


Easily check arguments for their data type and range:

function printText( id, name, message, opacity ) { /// id = uint /// name = char (16) [a-z] /// message = text (2k) /// opacity = float (0-100) }

In this example id can be any positive integer, name must be a string of exactly 16 lowercase letters, message is a UTF8 string up to 2000 characters length and opacity can be any number from 0 to 100. Failing a test throws an error, providing name, data type, value and expected range of the argument.


Quickly print out debug information:

function start() { //> Now starting }

The text Now starting will be printed to the console.


Error handling and tracing:

tryce( "myEventName", 20 ) { foo = 1; }

Prints: myEventName, 20, ReferenceError: foo is not defined, and a stack trace.


Simplest counting loops:

for( var a to 5 ) print( a );

Prints: 0 1 2 3 4

for( var a from 5 ) print( a );

Prints: 4 3 2 1 0


Simple counting loops:

for( var a = 2 to 5 ) print( a );

Prints: 2 3 4

for( var a = 2 from 5 ) print( a );

Prints: 4 3 2


Stepped counting loops:

for( var a = 0 to 5 step 2 ) print( a );

Prints: 0 2 4

for( var a = 0 from 5 step 2 ) print( a );

Prints: 4 2 0


Iterating through array values:

var list = [ "The", "answer", "is", "42" ]; for( list as value ) { print( value ); }

Prints: The answer is 42


Iterating through array indices and values / also works on Map and map-like objects:

var list = [ "Ynet", ".", "dev" ]; for( list as index => value ) { print( index + " = " + value ); }

Prints: 0 = Ynet 1 = . 2 = dev


Alias syntax for often-used functions:

$client.getTile( x,y ) { // The actual function } $client.get => getTile; // Function alias

The getTile function can now be called through item.get( 0,0 );

HTML elements

Easily create HTML interfaces:

html( "/* <main.homescreen> <h1> Welcome <p#intro> This is a sample application. <p> Here's a list of cars: <ul.items> <li.grey> DeLorean DMC-12 <li.black> Batmobile <li.blue> Mach 5 <p.form> <input/text #txtName hint="Enter name" assign="onNameChange"> <input/int #txtNumber.right hint="Enter number" value="2"> <select id="lstCountry" hint="Select country"> <option content="Lothlorien"> <option content="Oceania"> <option content="Gilead"> <button assign="onButtonClick" content="Continue"> */" ).append();

There are multiple ways to define the id, class and content (eg. p#intro and p id="intro" is equivalent). Some special attributes (such as assign) will be recognized and assigned to the corresponding Ynet UI events. The final append() call adds this structure to the body.


Other namespaces (ie. svg and ynet) can be accessed through the colon sign.

The following code creates a SVG line element:

html( "<svg:line>" );


The ynet namespace simplifies the creation of everyday complex HTML elements.

html( "<ynet:knob>" ).text( "Enable dark theme" );

This creates your typical "on/off" switch button with a sliding bullet.


Similar to the knob switch, radio buttons can be assembled as follows:

html( "<options>" ) .assign( "selectAction" ) .addOption( "fruit", "Eat fruit" ) .addOption( "water", "Drink water" ) .addOption( "table", "Dance on table" );

Interacting with the radio buttons will trigger the selectAction event to handle this.value().


Run a CSS animation and hide the element afterwards:

myButton.ani( "myAnimation", "hide" );

CSS syntactic sugar

body { color:#000; } // Inline comment

CSS only allows /* block comments */ but Ynet fixes this stupid decision.

div { scroll:y; }

Allow scrolling in x, y or xy direction. Translates to a overflow and touch-action setup.

div { display:grid; cols:4 10em; }

Display as table grid with 4 columns (or less), retaining a minimum width of 10em per column.

div { display:grid; cols:5em 20% 2px; }

Display as table grid with a column size between 5em and 20%, seperated by a 2px gap.

border-left-right:1px solid;

border-top-bottom:1px solid;

Border setup for two opposite sides.

if( w < 200 )

if( h >= 10em )

Included if the screen width / height matches the condition.

if( ws )

if( hs )

Included if the screen is in landscape / portrait mode.

if( cursor )

if( touch )

Included if the primary input is the mouse cursor / touch screen.

button:hover { background:#FFF; }

Ynet automatically applies :hover styles only for mouse cursors.

button:ui { background:#FFF; }

The custom :ui selector applies to both, :focus and :hover. This allows easily setting up the same styles for mouse and keyboard interaction.

$red = #F00; body { color:$red; }

CSS variables made simple.

Conditional CSS

To avoid the limited CSS media queries and their weird syntax, Ynet offers custom CSS conditions:

$css( w < 200 || aspect < 1.0 || core.domain.indexOf( "m." ) == 0 ) { nav, main, footer { display:block; width:100%; } }

This style will be included in portrait mode (w / h < 1.0) or if the app domain starts with m.. Since this is simply evaluated JavaScript code, literally anything can be used, eg. custom variables or function calls. Common variables like w, h, aspect are pre-defined and can be used as shown.

Ynet modules

core Ynet core (server/client). 115 KB
html HTML (creation, manipulation, dragging, language translation). 44 KB
image Image (creation, manipulation, drawing, color effects) and color class (RGB/CMYK/HSL/Greyscale, alpha channel). 22 KB
audio Sound effects and music playback (sound sprites, volume/pitch variations, reverb/distortion effects, seamless looping, crossfading, equalizer). 10 KB
login Account manager (FIDO2, password, e-mail, device) and session handler. 30 KB
map 2D map class for editing (cut/copy/paste areas, insert/delete cols and rows, rotate/scale/flip/blur map, terrain generator) and tile-based games (wrap/endless mode, A* path finding). 17 KB
math Numerous math and geometry functions, randomization, vector / matrix classes. 25 KB
webgl WebGL 1+2 (shaders, textures, polygons, lights, shadows). 72 KB
voxel Voxel addon (loader, renderer, shaders). 44 KB
data Buffers (array_map, growbuffer, heap, ringbuffer) and interpolation (curve, slope, tween) 21 KB
+ Everything else (database, gamepad / keyboard, hashing, heartbeat / fps, resource loader) 34 KB

Complete chat example

The following code is a complete example running a simple console-based chat. Users can enter a name, get a list of all connected users, get notified when someone joins or leaves, and can broadcast plain text messages. For simplicity, a user counts as logged in if the username property is set (otherwise the user is connected but didnt' choose a name yet).

Note that the print event is built-in and text coloring is done through color tags (eg. <lr> means light red). The application is started by running node example/init.js on the server.


example/init.js

// Ynet starter require( "../core.js" ).start({ port:8000, includes:"chat" });

example/chat.js

// Create the Ynet $s/$c/$b scopes seen below core.createScopes( exports ); // $s means server code $s.module.init() { // Start listener core.listen(); } $s.core.onConnection( con ) { // Someone connected to the server // Add the username property con.username = null; // Now send the chat module (this file) and wait for input con.transmit( "chat" ); } $s.core.onDisconnect( con ) { // The connection to this user was lost var name = con.username; if( !name ) { return; // User was not logged in } // Logout by clearing the username con.username = null; // Broadcast who left (note that the "print" event is built-in) for( core.connections as c ) { if( c.username ) c.send( "print", "<lr>Left: " + name ); } } // $c means client code $c.module.create( initial ) { // The client module is ready if( initial ) { // Display a welcome message print( "<w>Welcome to the chat!" ); print( "<w>Enter your username first:" ); } } // And here's the beef, client sending and server receiving $c.core.onConsoleInput( data ) { // User pressed enter if( data.length < 1 ) { return; // Empty message } // Forward input to the server... core.send( "chatInput", data ); } $s.events.chatInput( data ) { // ...and here the server receives the input // Trim spaces and sanitize HTML first data = data.trim().hss(); if( data.length < 1 ) { return; // Empty message } // Check login state if( this.username ) { // Name present, forward the message game.doForward( this, data ); } else { // No name set, try to login first game.doLogin( this, data ); } } $s.game.doLogin( con, data ) { // Only allow basic letters and numbers var name = data.replace( /[^a-zA-Z0-9]/g, "" ); if( name.length < 1 ) { // No valid chars left return con.send( "print", "<lg>Only invalid characters!" ); } if( name != data ) { // Send what is left return con.send( "print", "<lg>Try this instead: " + name ); } // Set username, user is logged in con.username = name; // Broadcast who joined for( core.connections as c ) { if( c.username ) c.send( "print", "<lg>Joined: " + name ); } // Collect a list of all usernames... var list = []; for( core.connections as c ) { if( c.username ) list.push( c.username ); } // ...and send it to the new user con.send( "print", "<lb>Users: " + list.join( ", " ) ); } $s.game.doForward( con, text ) { // Add name in yellow, content in grey var msg = "<y>" +con.username+ ": <e>" +text; // Broadcast message to everyone else for( core.connections as c ) { if( c.username && c != con ) c.send( "print", msg ); } }

Complete checklist example

The following code is a complete example running a simple session-based checklist app. Users can add items and mark them as checked or unchecked. Data is stored within the user's session data (server-side) and restored when re-visiting the website (accessed through a session cookie).


example/init.js

// Ynet starter require( "../core.js" ).start({ port:8000, includes:"math math_random session html shared/reset shared/mains shared/bubbles shared/toggle_console shared/html_knob checklist" });

example/checklist.js

// Create the Ynet $s/$c/$b scopes seen below core.createScopes( exports ); $s.module.init() { // Start listener core.listen(); } $s.core.onConnection( con ) { // Serve all modules for( var name in core.modules ) con.transmit( name ); // Create list for this user if( !con.storage.checklist ) con.storage.checklist = []; // Send list on re-connect for( con.storage.checklist as item ) { con.send( "addItem", item ); } } $css.main() { // Some simple formatting body { color:#EEE; background:#081828; } main { position:absolute; left:0; top:0; right:0; bottom:0; scroll:y; } h1 { font-size:1.5em; } h2 { border-bottom:1px solid; } h1, h2 { font-weight:bold; margin:2rem; } p { margin:2rem; } main bubble { margin-left:2rem; } input, button { padding:0.5em 1em; color:#000; background:#EEE; border:1px solid; } } $cm.create( initial ) { // Attach HTML structure if( initial ) html ( "/* <main> <h1> Checklist <p> Welcome to your session-based checklist! <h2> Items list <p.itemList> <h2> Add item <p.addContent> <text.txtLabel ph="Enter caption" next="cmdAdd"> <button assign="cmdAdd"> Add */" ) .append(); } $ui.cmdAdd() { // Drop old errors game.clearBubbles(); // Get text input var text = html( "input.txtLabel" ).textValue(); if( !text ) { // Error bubble return game.fieldBubble( "p.addContent", "error", "Missing", true ); } // Send add request this.send( "addItem", text ); } $se.addItem( label ) { // Create item var item = { id:randString(), label:label, checked:false }; // Store item in session this.storage.checklist.push( item ); // Forward to client this.send( "addItem", item, true ); } $ce.addItem( item ) { // Create item create( "checklistEntry" ).setup( item ); // Clear input html( "input.txtLabel" ).value( "" ).focus( true ); } $se.updateItem( item ) { // Find item var current = this.storage.checklist.find_id( item.id ); if( !current ) { // Ignore invalid requests return; } // Update item applyData( current, item ); } // Checklist item class core.createClass( exports, "checklistEntry" ); $client.init() { var me = this; // Create element and setup toggle this.knob = html( "<ynet:knob>" ).append( ".itemList" ).click( function() { me.toggle(); return false; } ); } $client.setup( item ) { // Store item this.item = item; // Setup text and state this.knob.content( item.label ).checked( item.checked ); } $client.toggle() { var item = this.item; // Toggle state item.checked = !item.checked; // Update display this.knob.checked( item.checked ); // Notify server core.send( "updateItem", item ); }

Download

Not (yet) available to the public, sorry. This is a private project.

History

Ynet is the HTML5-based successor of the YDK framework, which was created around 2005 as a Visual Basic 6.0 convenience API. Large parts of the original YDK were DirectX wrappers, so one could easily render graphics (shapes, 2D images and later even 3D models), play sounds (variing pitch and volume), setup music (fading and looping automatically), handle input devices (including rumble effects) and many things more (networking, path finding, data encryption, scripting, etc.).

Unfortunately Microsoft decided to discontinue the DirectX extension for VB6 (the last version was DirectX 8.1) and even VB6 itself, in order to push their dotNet framework. After some roaming through the realms of early HTML5 (before WebGL was available), Java and even Flash, the final decision was to use HTML5 and a node.js server respectively. Finally, in the summer of 2020, the Ynet.dev project was born and here we are.

The lesson of this journey is to stick with standards, not companies.

Although I am very disappointed to see WebGL being discontinued in favour of the upcoming WebGPU API. I was strongly hoping to see geometry shaders in WebGL one day...