Cybergate9.Net
Open the gate.. welcome to this dimension..
Open the gate.. welcome to this dimension..
This article is a bit of a deep dive into why web development is often overly complicated and sometimes just complete nonsense these days.
The original request-reply web model is good for many many use cases. It implies the basic user interaction case in a web browser - user clicks something, request is sent to server, server returns what's requested. Couldn't be simpler (this is known as the RESTful architecture).
Then with massive scale websites (Facebook, Twitter), and mobile, becoming ubiquitous the world seemed to go 'javascript bonkers'. Single Page Applications (SPAs) became the flavour of the month, and javascript on the both the server and the desktop became 'a thing' too. The trouble is that javascript, by common consensus, sucks. But there's nothing in technology history that stops 'technology that sucks' from becoming ubiquitous (we still have 'the IBM PC' do we not?..).
There is a use for javascript - it allows interactivity in the browser - but its use has gone way beyond its initial intent. Almost invariably today, you download 'a wad' of javascript per page and programmatically it 'constructs' the entirety of html you are viewing in your browser (and very often it could have simply been delivered as static html).
Many use cases (I'd argue most) can still elegantly and efficiently be delivered by server side rendering and delivering html straight to the browser - this web site is an an example where everything which needs to be done for a page is done 'server side' (by PHP) and the resultant, mostly plain, html is delivered to your browser.
If interactivity is required (e.g. a photo lightbox) then that javascript can be delivered and used, when required, on a page by page basis.
Another interesting development in this regard is extending html to be more 'hyperscript' like, using javascript to generically extend html providing many of the functions required during interactivity without turning the entire website/page into a 'javascript program' (which is what JS frameworks like react, angular etc. tend to do).
Below is an example using hyperscript to create a very simple interactive calculator.
The entire javascript+html required (on top of the hyperscript library) to achieve this is shown below:
<script type="text/javascript">
function calc(val, accum, op){
accum = parseFloat(accum);
val = parseFloat(val)
res = 0;
if(op == 'add'){ res = accum + val;} if(op == 'sub'){ res = accum - val;}
if(op == 'mul'){ res = accum * val;} if(op == 'div'){ res = accum / val;}
return parseFloat(res);
}
</script>
<style>
.calcblock {margin: 1px 1px 1px 1px; width: 300px; align-content: centre; display: block;}
.big-text {margin: 5px 5px 5px 5px; font-size: 40px; border: 1px solid grey; width: 300px;}
.debug {display: none;}
button {width: 30px; margin-top: 15px;}
</style>
<dvi class="calcblock">
<button _="on click put #current.innerText + 1 into #current.innerText">1</button>
<button _="on click put #current.innerText + 2 into #current.innerText">2</button>
<button _="on click put #current.innerText + 3 into #current.innerText ">3</button>
<button _="on click put 'add' into #op.innerText then put #current.innerText into #accum.innerText then put '' into current.innerText">+</button><br/>
<button _="on click put #current.innerText + 4 into #current.innerText">4</button>
<button _="on click put #current.innerText + 5 into #current.innerText">5</button>
<button _="on click put #current.innerText + 6 into #current.innerText">6</button>
<button _="on click put 'sub' into op.innerText then put #current.innerText into #accum.innerText then put '' into current.innerText">-</button><br/>
<button _="on click put #current.innerText + 7 into #current.innerText">7</button>
<button _="on click put #current.innerText + 8 into #current.innerText">8</button>
<button _="on click put #current.innerText + 9 into #current.innerText">9</button>
<button _="on click put 'div' into op.innerText then put #current.innerText into #accum.innerText then put '' into current.innerText">/</button><br/>
<button> </button>
<button _="on click put #current.innerText + 0 into #current.innerText">0</button>
<button _="on click put #current.innerText + '.' into #current.innerText">.</button>
<button style="" _="on click put 'mul' into op.innerText then put #current.innerText into #accum.innerText then put '' into current.innerText">*</button><br/>
<button _="on click put '0' into #current.innerText then put '' into #accum.innerText then put '' into #op.innerText">C</button>
<button> </button> <button> </button>
<button _="on click put calc(#current.innerText,#accum.innerText,#op.innerText) into current.innerText"><b>=</b></button>
<div class="big-text" id="current">0</div>
<div class="debug" id="accum">0</div>
<div class="debug" id="op" ></div>
</div>
</div>
Cybergate9.Net (on PHP Siteframework V2022.08.13)
