web 1.0: the era of CGI* & Web documents
https://www.oreilly.com/library/view/cgi-programming-on/9781565921689/07_chapter-04.html
* Common Gateway Interface
#!/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
* Common Gateway Interface
<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
* Common Gateway Interface
#!/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
* Common Gateway Interface
Web Browser
UI
HTTP request
HTTP Response
CGI*
web 1.0: the era of CGI* & Web documents
* Common Gateway Interface
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
HTTP Response
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
Microsoft
Sr. Developer Advocate (JavaScript)
Wassim Chegham
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/Buffer/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
https://wassim.dev/.auth/login/aadhttps://wassim.dev/.auth/login/twitterhttps://wassim.dev/.auth/login/githubAzure Static Web Apps flow
Azure Function
Static content
Authn / Authz
Push Pull request
https://wassim.dev
@manekinekko
GitHub Workflow
Azure Pipelines
Web Browser
AJAX
UI
Static HTML/CSS/JS
XML/JSON/Buffer...
Serverless API
Database
https://wassim.dev
Static Content
Auth
GitHub
...
Azure Static Web Apps architecture
Azure Static Web Apps dev Tools
* Preview available at https://aka.ms/swa-cli
VS Code ext.
Azure Portal
Azure CLI
SWA CLI*
Azure Static Web vs code
Azure Static Web Apps portal
Azure Static Web Apps cli
demo!!!
Azure Static Web Apps SWA CLI
Azure Static Web Apps SWA PLayground
Azure Static Web Apps - auth demo
Azure Static Web Apps - api demo
Try it today!!!
Shoutout to my GitHub sponsors!
Join me and save the planet
