Facundo Giuliani
Web fgiuliani.com
Twitter @facundozurdo
GitHub @fgiuliani
Software Engineer
Lead Web Developer @ MultiTracks.com
Auth0 Ambassador - GitKraken Ambassador
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
Tim Berners-Lee
Slide 5
Slide 5 text
http://info.cern.ch/hypertext/WWW/TheProject.html
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
http://spacejam.com
Slide 9
Slide 9 text
Static Web Page
A web page that is delivered to the user's
browser exactly as stored
Slide 10
Slide 10 text
Dynamic Web Page
A web page where some of the content is
generated dynamically, when needed
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Server Side Rendering
The HTML content is generated by the
Web Server
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Single Page Application
A web application that interacts with the
user by dynamically rewriting the current
web page with new data from the server
Slide 18
Slide 18 text
Client Side Rendering
The HTML content is rendered directly in
the browser using JavaScript
Slide 19
Slide 19 text
Client Side Rendering
PROS CONS
◆ Richer interactions.
◆ Faster rendering after initial
page load.
◆ Lower server load.
◆ Reusable UI components.
◆ Slower initial page load.
◆ Low SEO If not implemented
correctly.
◆ Dependency on external
libraries.
Slide 20
Slide 20 text
Server Side Rendering
PROS CONS
◆ Faster initial page load.
◆ Better SEO / Social Media
Optimization.
◆ More secure (server-side
code).
◆ Lower user device load.
◆ Busier web servers.
◆ Overall slow page rendering.
◆ Full page reload after route
changes.
◆ The page is viewable sooner,
but it’s not interactive.
Slide 21
Slide 21 text
One Step
Forward Backward
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
◆ Fast
◆ Cheap
◆ Easy to maintain
Static Web Pages
◆ Secure
◆ Easy to scale
◆ Stable
Slide 25
Slide 25 text
Jamstack
Slide 26
Slide 26 text
Jamstack
A new way of building websites and apps
that delivers better performance, higher
security, lower cost of scaling, and better
developer experience.
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Generating cacheable, static assets
at build time whenever is possible
Slide 29
Slide 29 text
Deploying those assets to CDNs
Slide 30
Slide 30 text
Use client-side JavaScript to call
third-party APIs and serverless
functions for dynamic interactions
and data
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Static Site Generator
Software that produces and deploys a
static website using data sources and
templates
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Content Management
System
Application or set of related programs
that are used to create and manage
digital content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Headless CMS
A CMS where the content repository is
separated or decoupled from the
presentation layer
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Build, Deployment & Hosting
Service to build, integrate, deploy and
host the application
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
◆ Serverless Apps: AWS Lambda, Azure Functions, Google Cloud
Functions
◆ Form Service: Formspree, Typeform, Netlify Forms
◆ Database: FaunaDB, Firebase, Supabase
◆ Authentication: Auth0, Firebase Authentication
API Services
Slide 42
Slide 42 text
◆ Search Engine: Algolia, Azure Search
◆ e-Commerce: Snipcart, Shopify
◆ Comments: Commento, Mouthful
◆ Image and Video Management: Cloudinary
API Services
Slide 43
Slide 43 text
◆ Better Performance
◆ Cheaper Servers
◆ Better Caching
Jamstack
◆ More Security
◆ Easy to scale
◆ Better SEO
PROS
◆ Better Developer Experience
Slide 44
Slide 44 text
Jamstack
PROBLEMS
◆ Different costs to evaluate
◆ External dependencies
◆ Atomic build time
◆ Hard for content editors
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Thank you!
Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani