#WEBWONDERS : Making web async easy
Even these Delphi developers who have only set the very first steps into web client development will realize that quite a few important functionalities in web clients are executed only asynchronously by the browser. Why asynchronous? First of all, why did the creators of browser implement certain functionality only asynchronously? The answer to this question is quite simple. For the developers behind the browser, the user experience comes first and a UI that freezes is a big no-go. At all times, the user interface should remain response. The user should never get the impression that the browser or the machine hangs while navigating on the internet. Now, several operations happening in the browser client application can by nature have a fairly unpredictable time to execute. So, no such function should stop the execution of user interface handling code in the browser. Traditionally, the browser developers solved this “issue” by JavaScript event handlers that are called asynchronously when the result of a certain operation is ready and meanwhile, any other code can continue to execute. This is no different in TMS WEB Core web client applications written in Object Pascal (but of course compiled to JavaScript by the pas2js compiler). Here, we typically solved this with the Object Pascal event paradigm. When a class instance method is invoked that can only have its result asynchronously, this class instance triggers an event handler when the underlying function completed. When the pas2js compiler also introduced support for anonymous methods, we offered for various such asynchronous operations, anonymous result handlers. To focus on this, let’s take the example of a TWebHttpRequest class. This class permits to invoke HTTP(s) requests from the web client application. Clearly, this is an operation with an unpredictable duration, hence, the result of the request should be asynchronously handled. Classic approaches Example 1: handling via an event: // method starting the HTTP request procedure TForm1.WebButton1Click(Sender: TObject); begin WebHttpRequest1.URL := ‘https://www.tmssoftware.com/sample.json’; WebHttpRequest1.Execute(); end; // TWebHTTPRequest event handler for OnResponse procedure TForm1.WebHttpRequest1Response(Sender: TObject; AResponse: string); var jo: TJSONObject; jv: TJSONValue; begin jo := TJSONObject.Create; try jv := jo.ParseJSONValue(AResponse) // do any further processing here on the parsed JSON finally end; end; Example 2: handling via an anonymous method: procedure TForm1.WebButton1Click(Sender: TObject); begin WebHttpRequest1.URL := ‘https://www.tmssoftware.com/sample.json’;WebHttpRequest1.Execute( procedure(AResponse: string; ARequest: TJSXMLHttpRequest) var jo: TJSOBject; jv: TJSONObject; begin jv := TJSONObject.Create; try jv.ParseJSONValue(AResponse); // do any further processing here on the parsed JSON finally end; end); end; Introducing promises Now, while the implementation using anonymous methods probably leads to fairly readable code, imagine needing to handle with multiple HTTP requests that depend on each other, which is in web development a fairly common use-case. While you can in theory invoke another http request from the anonymous method handler that is in turn also handled by a new anonymous method handler, you can see that it quickly becomes clumsy. In the JavaScript world, a more elegant solution was introduced in 2015 with the ES6 standard and by now, any modern browser adopted this and supports it. The good news is that the pas2js v2.0 compiler also embraced and adopted JavaScript promises and offers a Pascal styled equivalent. If you want to read all about JavaScript promises, there are many good resources, but this is a well-written and concise one. In a nutshell, with pas2js […]
