web 1.0: the era of CGI & Web documents

https://www.oreilly.com/library/view/cgi-programming-on/9781565921689/07_chapter-04.html

web 1.0: the era of CGI & Web documents

#!/usr/bin/perl -w

use strict;
print "Content-type: text/html\n\n";
print "<HTML>\n";
print "<TITLE>Simple Web Form</TITLE>\n";
print "<BODY>\n";
print "<b>Simple Web Form</b><p>\n";
print "<FORM ACTION=\"/cgi-bin/program.pl\">\n";
print "Name: <INPUT TYPE=\"text\" NAME=\"user\" SIZE=40><BR>\n";
print "Age: <INPUT TYPE=\"text\" NAME=\"age\"  SIZE=3 MAXLENGTH=3><BR>\n";
print "Password: <INPUT TYPE=\"password\" NAME=\"pass\" SIZE=10><BR>\n";
print "<INPUT TYPE=\"SUBMIT\" NAME=\"Submit\" VALUE=\"Submit\">\n";
print "</FORM>\n";
print "</BODY>\n";
print "</HTML>";

web 1.0: the era of CGI & Web documents

<HTML>
<TITLE>Simple Web Form</TITLE>
<BODY>
<b>Simple Web Form</b><p>
<FORM ACTION="/cgi-bin/program.pl">
Name: <INPUT TYPE="text" NAME="user" SIZE=40><BR>
Age: <INPUT TYPE="text" NAME="age"  SIZE=3 MAXLENGTH=3><BR>
Password: <INPUT TYPE="password" NAME="pass" SIZE=10><BR>
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">
</FORM>
</BODY>
</HTML>

web 1.0: the era of CGI & Web documents

#!/usr/bin/perl

print "Content-type: text/html\n\n";
print "Output of form:<P>\n";
while(<STDIN>)
  {
  chomp($_);
  print "$_<br>\n";
  }
print "<P>\n";

web 1.0: the era of CGI & Web documents

Web Browser

UI

HTTP request

HTML/CSS/JS

CGI

web 2.0: AJAX & Web Applications

https://www.webdesignerdepot.com/2009/09/25-examples-of-web-2-0-and-traditional-design-rules-coming-together/

web 2.0: AJAX & single page apps

web 2.0: AJAX & single page apps

Web Browser

AJAX

UI

XML HTTP Request (XHR)

XML/JSON/etc...

API Server

database

Single Page Application

Web Browser

UI

HTTP request

HTML/CSS/JS

Web Server

database

Traditional Web Site

web 3.0: The rise of Semantic Web 

https://semantic-web.com/2018/08/23/knowledge-graphs-connecting-dots-increasingly-complex-world/

the web of data

what is a

static web app?

a SWA is a  traditional spa

with superpowers!!

fast to load

fast to render

fast to use

+serverless

Static Web Apps are...

html, css, vanilla.js, angular, vue, jekyll, gatsby ...

Use your favorite tech. stack...

Web Browser

AJAX

UI

HTTP request

Static HTML/CSS/JS

XHR2/fetch

XML/JSON/etc...

Serverless API

Database

Static Content

Static Web Apps model...

Azure

static web apps

Azure static Web Apps...

build and host static web apps

authentication & authorization

serverless api (Azure Functions)

ci/cd (github actions)

custom domain + free SSL

Geo Distributed!

Azure swa supported auth providers

/.auth/login/twitter
/.auth/login/aad
/.auth/login/github
/.auth/login/facebook
/.auth/login/google
Push/Pull
request
GitHub Workflow
https://
Azure Function
Static content
Authn / Authz

Azure Static Web Apps flow

Azure Static Web Apps demo!!!!

Try it today!!!

Static Web Apps Examples Gallerycode-samples

Azure Static Web Apps documentation

Publish an Angular, React, Svelte, or Vue app and API

Learn more at aka.ms/ah-avocado-lab

Or contact @sherrrylst on Twitter

Azure Heroes Summer Badge: The Learner Badge

Azure Heroes recognises Azure practitioners from across Europe

 

The other digital badgers must be earned with verifiable acts of impact

 

Our digital badgers live on the blockchain and are verifiably scarce, so they require free blockchain wallet to safely store them

 

For more information visit: aka.ms/azure.heroes

(scan to get it)

The New Era of Static Web Apps

By Wassim Chegham

The New Era of Static Web Apps

The web has always been shaped by many trends and the emerging landscape has some surprises in store for us. We are currently witnessing a new era of Web Applications: Static and Serverless Web Applications (or Serverless Static Web Apps). These applications are designed to be fast, reliable, engaging while benefiting from the power, flexibility and scalability of "Serverless". Even if they are created with traditional JavaScript frameworks, such as Angular or Vue, they load and render instantly in your browsers. Join me in this session to find out how to create, configure and deploy your Static Web Apps in a Serverless and geo-distributed environment, while benefiting from a modern and complete CI / CD chain. Are you ready to enter the era of Serverless Static Web Apps?

  • 3,842

More from Wassim Chegham