Wassim Chegham PRO
Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev
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
The New Era of Static Web Apps (Dutch Angular Group)
By Wassim Chegham
The New Era of Static Web Apps (Dutch Angular Group)
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?
