WebForms Core 2 in NodeJS - Don't use React, Vue, or Angular

How to use WebForms Core technology? ## WebForms Core 2 ## Async Feature ## A Truly Multi-Language UI Technology ## More Than Features: A Coherent Architecture ## A Fair Comparison ## Final Thoughts The mental image most developers associate with server-driven frameworks is usually the same: slow, stateful, feature-poor, and tightly coupled with always-on online interaction. WebForms Core, a technology developed by Elanat, breaks this long-held stereotype at a fundamental level. Web development has gone through several major revolutions. The first was the AJAX revolution, which freed the browser from page reloads. The second was the rise of asynchronous servers, popularized by technologies like Nginx, which transformed backend scalability and performance. WebForms Core represents the larger of the two. This is not just another framework, nor is it an incremental improvement on existing models. It introduces a new paradigm in server-driven web development—one that moves the web away from the traditional state/UI retrieval cycle and toward a command-and-run model. Blazor Server is the most popular server-driven framework; it is a weak system compared to WebForms Core technology. Comparing WebForms Core and Blazor Server Two steps are required: 1- On the client side: Add the WebFormsJS script to your HTML page. Get the WebFormsJS script from the following link: https://github.com/webforms-core/Web_forms/blob/elanat_framework/web-forms.js 2- On the server side: Import the WebForms class for your programming language. Get the WebForms class associated with the server programming language from the following link: https://github.com/webforms-core/Web_forms_classes WebForms Core 2 has been released by Elanat in the past few days. This version includes over 50 powerful new features. At Elanat, we are converting the WebForms class from C# to other popular web programming languages. Yesterday we created the WebForms class for PHP and today for NodeJS. In the next two weeks, we will also try to create the WebForms class in other programming languages. Version 2 has many features such as: Service Worker, Custom Event, Async capability, Module loading, Web assembly execution, Format Storage, Master Pages, Front Back, Fetch escape, Queue management, Trigger Event, SSE, Update mechanism, Placeholder, External Template, Comment Mode, Retry Mechanism, Reflection capability, Automatic Gzip for sending data and files, Unit testing tool, JavaScript function assignment and many other powerful features. In this article, we are going to teach you the new Async feature using NodeJS in the form of an example. This code sets up a simple server with the Express framework running on port 3000 and using the WebForms class. In the main path (/), if the test_async parameter is present in the query, some initial messages are added to the form, then an asynchronous operation is started by calling form.async() and the result of loading the /delay address (the response of which is returned after 2 seconds) is added to the form, and then other messages are inserted; Finally, the output of the form is sent to the user. If the test_async parameter is not present, the user will be presented with an HTML button that, when clicked, will send the request with the ?test_async=true query. Also, the path /delay is defined, which can be used with setTimeout after 2 seconds of the text "Async in WebForms Core work fine!" returns the In this way, the example shows how to handle synchronous and asynchronous messages in WebForms and display the result in the HTTP response. The image below shows the page's behavior after clicking the button; all 6 messages are displayed immediately, but the message "Async in WebForms Core work fine!" is delayed by two seconds and executed last. Calling the command "form.async();" It causes the next command to be executed async. If the number of commands is more, we should use "startBracket" and "endBracket" methods. Note: WebForms Core technology consists of two parts: server and client. On the client side, there is a library called WebFormsJS with the file name "web-forms.js" and on the server side, there is a class called WebForms with the extension related to the server programming language; for example, for C#, the extension is .cs. Please note that the extension of NodeJS classes is .js and this class should not be confused with the WebFormsJS library. One of the most overlooked — yet revolutionary — aspects of WebForms Core is this: The same UI runtime works across multiple server languages. The exact same WebFormsJS engine can be driven by: The UI protocol is language-agnostic. Only the server-side authoring language changes. This alone places WebForms Core in a category that very few technologies occupy. Yes, WebForms Core can: All of that is impressive. But the async example proves something deeper: WebForms Core has a temporal model of UI. Time is not an afterthought. It is part of the UI DSL itself. This Node.js example is small. But its implications are large. It demonstrates that: WebForms Core is a powerful stateless server-side technology that provides full remote DOM control. It is an ambitious and radical technology that wants to dethrone React, Vue, and Angular. It is proposing something different: A language-independent, rule-driven, time-aware UI architecture. And that is not a trick. It is a new category. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: <script type="module" src="/script/web-forms.js"></script> Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: <script type="module" src="/script/web-forms.js"></script> CODE_BLOCK: <script type="module" src="/script/web-forms.js"></script> COMMAND_BLOCK: const express = require('express'); const bodyParser = require('body-parser'); const { WebForms, Fetch } = require('./WebForms'); const app = express(); const PORT = 3000; app.use(express.static("public")); app.use(bodyParser.urlencoded({ extended: true })); app.get('/', (req, res) => { const form = new WebForms(); if (req.query.test_async) { form.message("Message before Async 1"); // Previous command form.message("Message before Async 2"); // Previous command form.message("Message before Async 3"); // Previous command form.async(); form.message(Fetch.loadUrl("/delay")); form.message("Message after Async 4"); // Next command form.message("Message after Async 5"); // Next command form.message("Message after Async 6"); // Next command res.send(form.response()); } else { form.setGetEvent("<button>", "onclick", "?test_async=true"); res.send(` <!DOCTYPE html> <html> <head> <title>Using WebForms Core</title> <script type="module" src="/script/web-forms.js"></script> </head> <body> <button>Click me to test async</button> </body> </html> ` + form.exportToHtmlComment()); } }); app.get("/delay", (req, res) => { setTimeout(() => { res.send("Async in WebForms Core work fine!"); }, 2000); }); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); }); Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: const express = require('express'); const bodyParser = require('body-parser'); const { WebForms, Fetch } = require('./WebForms'); const app = express(); const PORT = 3000; app.use(express.static("public")); app.use(bodyParser.urlencoded({ extended: true })); app.get('/', (req, res) => { const form = new WebForms(); if (req.query.test_async) { form.message("Message before Async 1"); // Previous command form.message("Message before Async 2"); // Previous command form.message("Message before Async 3"); // Previous command form.async(); form.message(Fetch.loadUrl("/delay")); form.message("Message after Async 4"); // Next command form.message("Message after Async 5"); // Next command form.message("Message after Async 6"); // Next command res.send(form.response()); } else { form.setGetEvent("<button>", "onclick", "?test_async=true"); res.send(` <!DOCTYPE html> <html> <head> <title>Using WebForms Core</title> <script type="module" src="/script/web-forms.js"></script> </head> <body> <button>Click me to test async</button> </body> </html> ` + form.exportToHtmlComment()); } }); app.get("/delay", (req, res) => { setTimeout(() => { res.send("Async in WebForms Core work fine!"); }, 2000); }); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); }); COMMAND_BLOCK: const express = require('express'); const bodyParser = require('body-parser'); const { WebForms, Fetch } = require('./WebForms'); const app = express(); const PORT = 3000; app.use(express.static("public")); app.use(bodyParser.urlencoded({ extended: true })); app.get('/', (req, res) => { const form = new WebForms(); if (req.query.test_async) { form.message("Message before Async 1"); // Previous command form.message("Message before Async 2"); // Previous command form.message("Message before Async 3"); // Previous command form.async(); form.message(Fetch.loadUrl("/delay")); form.message("Message after Async 4"); // Next command form.message("Message after Async 5"); // Next command form.message("Message after Async 6"); // Next command res.send(form.response()); } else { form.setGetEvent("<button>", "onclick", "?test_async=true"); res.send(` <!DOCTYPE html> <html> <head> <title>Using WebForms Core</title> <script type="module" src="/script/web-forms.js"></script> </head> <body> <button>Click me to test async</button> </body> </html> ` + form.exportToHtmlComment()); } }); app.get("/delay", (req, res) => { setTimeout(() => { res.send("Async in WebForms Core work fine!"); }, 2000); }); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); }); CODE_BLOCK: ... form.message("Message before Async 3"); // Previous command form.async(); +form.startBracket(); form.message(Fetch.loadUrl("/delay")); form.addTag("<body>", "h1"); form.setText("<h1>", Fetch.method("heavyTask")); +form.endBracket(); form.message("Message after Async 4"); // Next command ... Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: ... form.message("Message before Async 3"); // Previous command form.async(); +form.startBracket(); form.message(Fetch.loadUrl("/delay")); form.addTag("<body>", "h1"); form.setText("<h1>", Fetch.method("heavyTask")); +form.endBracket(); form.message("Message after Async 4"); // Next command ... CODE_BLOCK: ... form.message("Message before Async 3"); // Previous command form.async(); +form.startBracket(); form.message(Fetch.loadUrl("/delay")); form.addTag("<body>", "h1"); form.setText("<h1>", Fetch.method("heavyTask")); +form.endBracket(); form.message("Message after Async 4"); // Next command ... - And any popular programming language on the web - No language-specific front-end frameworks - No duplicated UI logic - No rewriting UI behavior when switching backend stacks - Build real game loops - React to DOM mutations - Provide advanced offline storage - Perform client-side diffs - Trigger logic based on DOM conditions - Server-authored UI can be asynchronous - Async does not require client-side code - UI timing can be declarative - One runtime can serve many languages