The Jamstack

JavaScript, APIs and Markup as Tech Stack

Table of Contents

History of the Web
Growing pains of a software delivery platform

 

The Akward Phase
A write once, cry everywhere platform


 

The Jamstack
No product is an island.
 

🕷️
🤡🥪

🕷️ History of the Web

Growing pains of a software delivery platform

1996

1996

1996

<TABLE BGCOLOR="#CCCCFF" BORDER="10" ALIGN="CENTER">
  <TR>
    <TD>
      <H1 ALIGN="CENTER">
        <FONT SIZE="3" COLOR="red" FACE="arial">
          Welcome to the World Wide Web!
        </FONT>
      </H1>
    </TD>
  </TR>
</TABLE>

The End of User Input?

"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."

Dan Gillmor
We The Media (2006)

The End of User Input?

"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."

Dan Gillmor
We The Media (2006)

The End of User Input?

"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."

Dan Gillmor
We The Media (2006)

The End of User Input?

"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."

Dan Gillmor
We The Media (2006)

The End of User Input?

"Berners-Lee envisioned a read/write Web. But what had emerged in the 1990s was an essentially read-only Web on which you needed an account with an ISP (Internet service provider) to host your web site, special tools, and/or HTML expertise to create a decent site."

Dan Gillmor
We The Media (2006)

Web 2.0

The Future of Yesterday

"Since its first usage in 2004, Web 2.0 has often been dismissed as a catchphrase. Indeed, web applications that act like desktop programs and encourage collaboration and community have risen and fallen faddishly. [...] A new generation of web applications, technology and, most significantly, users are predicted."

The Future of Yesterday

"Since its first usage in 2004, Web 2.0 has often been dismissed as a catchphrase. Indeed, web applications that act like desktop programs and encourage collaboration and community have risen and fallen faddishly. [...] A new generation of web applications, technology and, most significantly, users are predicted."

The Future of Yesterday

"Since its first usage in 2004, Web 2.0 has often been dismissed as a catchphrase. Indeed, web applications that act like desktop programs and encourage collaboration and community have risen and fallen faddishly. [...] A new generation of web applications, technology and, most significantly, users are predicted."

The Future of Yesterday

"Since its first usage in 2004, Web 2.0 has often been dismissed as a catchphrase. Indeed, web applications that act like desktop programs and encourage collaboration and community have risen and fallen faddishly. [...] A new generation of web applications, technology and, most significantly, users are predicted."

The Roots

"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."

Darcy DiNucci

Print Magazine (1999)

"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."

Darcy DiNucci

Print Magazine (1999)

The Roots

"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."

Darcy DiNucci

Print Magazine (1999)

The Roots

"Even your grand-mother can recognize a Web page by its typical brochure-like displays of Times or Arial text, eye-grabbing graphics, and highlighted hyper-links. What we need to remember, though, is that the Web, as we know it now, is a fleeting thing. [...] The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens."

Darcy DiNucci

Print Magazine (1999)

The Roots

The OG Paper Form

"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."

Wikipedia
Form (Document)

The OG Paper Form

"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."

Wikipedia
Form (Document)

The OG Paper Form

"A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. [...] Forms have existed for a significant amount of time, with historians of law having discovered preprinted legal forms from the early 19th century that greatly simplified the task of drafting complaints and various other legal pleadings."

Wikipedia
Form (Document)

1999

1999

1999

2000

1999

1999

2000

1999

1999

2001

2000

2003

1999

1999

2001

2004

2000

2003

1999

1999

2001

2004

2000

2003

1999

1999

2005

2001

2004

2000

2003

1999

1999

2005

2006

2001

The Driving Engine

Luke Wroblewski
Web Form Design (2008)

"Want to join a fun new social network? Just fill in this form. Care to share this great video with a close friend? Just fill in a form. Want to respond to an interesting author’s blog post? You guessed it—a form. Just about everywhere people want to participate in social interactions online, forms get in the way [...] Forms suck. Design accordingly"

The Driving Engine

Luke Wroblewski
Web Form Design (2008)

"Want to join a fun new social network? Just fill in this form. Care to share this great video with a close friend? Just fill in a form. Want to respond to an interesting author’s blog post? You guessed it—a form. Just about everywhere people want to participate in social interactions online, forms get in the way [...] Forms suck. Design accordingly"

The Driving Engine

Luke Wroblewski
Web Form Design (2008)

"Want to join a fun new social network? Just fill in this form. Care to share this great video with a close friend? Just fill in a form. Want to respond to an interesting author’s blog post? You guessed it—a form. Just about everywhere people want to participate in social interactions online, forms get in the way [...] Forms suck. Design accordingly"

The Driving Engine

Luke Wroblewski
Web Form Design (2008)

"Want to join a fun new social network? Just fill in this form. Care to share this great video with a close friend? Just fill in a form. Want to respond to an interesting author’s blog post? You guessed it—a form. Just about everywhere people want to participate in social interactions online, forms get in the way [...] Forms suck. Design accordingly"

The Driving Engine

Luke Wroblewski
Web Form Design (2008)

"Want to join a fun new social network? Just fill in this form. Care to share this great video with a close friend? Just fill in a form. Want to respond to an interesting author’s blog post? You guessed it—a form. Just about everywhere people want to participate in social interactions online, forms get in the way [...] Forms suck. Design accordingly"

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

"It provides new strongly-typed input fields, new attributes for defining constraints, a repeating model for declarative repeating of form sections, new DOM interfaces, new DOM events for validation and dependency tracking, and XML submission and initialization of forms. It also standardises and codifies existing practice in areas that have not been previously documented, and clarifies some of the interactions of HTML form controls and CSS."

Web Forms 2.0

W3C
Web Forms 2.0 (2005)

MVC to the Rescue!

🤡 The Akward Phase

A write once, cry everywhere platform

Yehuda Katz
W3C and TC-39 Commitee Member

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] Design is now maturing — expect some awkwardness"

Digital Product Design

John Maeda
How to Speak Machine (2019)

John Maeda
How to Speak Machine (2019)

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] Design is now maturing — expect some awkwardness"

Digital Product Design

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] Design is now maturing — expect some awkwardness"

Digital Product Design

John Maeda
How to Speak Machine (2019)

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] Design is now maturing — expect some awkwardness"

Digital Product Design

John Maeda
How to Speak Machine (2019)

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] Design is now maturing — expect some awkwardness"

Digital Product Design

John Maeda
How to Speak Machine (2019)

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] Design is now maturing — expect some awkwardness"

Digital Product Design

John Maeda
How to Speak Machine (2019)

"Well, design is a messed up premise because it was made when there was only wood, metal, glass, and our hands. Whereas the computational world is using alien materials, and in a world of alien materials, the nature of products and design should change. [...] Design is now maturing — expect some awkwardness"

Digital Product Design

John Maeda
How to Speak Machine (2019)

r/theblunderyears

?

MVC

"Ease of authoring for authors who are familiar with commonly used languages such as HTML and ECMAScript but have limited knowledge about XML, data models, etc. [...] Simpler validation on the client side [...] Dynamic addition of fields (repeating structures) on the client side [...] but can instead use static pages with scripts that dynamically generate only the data part. [...] This specification should be implementable in full on devices"

The Dream

W3C
Web Forms 2.0 (2005)

"Ease of authoring for authors who are familiar with commonly used languages such as HTML and ECMAScript but have limited knowledge about XML, data models, etc. [...] Simpler validation on the client side [...] Dynamic addition of fields (repeating structures) on the client side [...] but can instead use static pages with scripts that dynamically generate only the data part. [...] This specification should be implementable in full on devices"

The Dream

W3C
Web Forms 2.0 (2005)

"Ease of authoring for authors who are familiar with commonly used languages such as HTML and ECMAScript but have limited knowledge about XML, data models, etc. [...] Simpler validation on the client side [...] Dynamic addition of fields (repeating structures) on the client side [...] but can instead use static pages with scripts that dynamically generate only the data part. [...] This specification should be implementable in full on devices"

The Dream

W3C
Web Forms 2.0 (2005)

"Ease of authoring for authors who are familiar with commonly used languages such as HTML and ECMAScript but have limited knowledge about XML, data models, etc. [...] Simpler validation on the client side [...] Dynamic addition of fields (repeating structures) on the client side [...] but can instead use static pages with scripts that dynamically generate only the data part. [...] This specification should be implementable in full on devices"

The Dream

W3C
Web Forms 2.0 (2005)

"Ease of authoring for authors who are familiar with commonly used languages such as HTML and ECMAScript but have limited knowledge about XML, data models, etc. [...] Simpler validation on the client side [...] Dynamic addition of fields (repeating structures) on the client side [...] but can instead use static pages with scripts that dynamically generate only the data part. [...] This specification should be implementable in full on devices"

The Dream

W3C
Web Forms 2.0 (2005)

"Ease of authoring for authors who are familiar with commonly used languages such as HTML and ECMAScript but have limited knowledge about XML, data models, etc. [...] Simpler validation on the client side [...] Dynamic addition of fields (repeating structures) on the client side [...] but can instead use static pages with scripts that dynamically generate only the data part. [...] This specification should be implementable in full on devices"

The Dream

W3C
Web Forms 2.0 (2005)

The Dream

"Ease of authoring for authors who are familiar with commonly used languages such as HTML and ECMAScript but have limited knowledge about XML, data models, etc. [...] Simpler validation on the client side [...] Dynamic addition of fields (repeating structures) on the client side [...] but can instead use static pages with scripts that dynamically generate only the data part. [...] This specification should be implementable in full on devices"

The Dream

W3C
Web Forms 2.0 (2005)

"The web’s governing body has taken XHTML 2.0 off life support. The World Wide Web Consortium, the group charged with overseeing the languages that power the web, has decided not to renew the charter of the XHTML2 working group, which is set to expire at the end of 2009."

The Nightmare

"The web’s governing body has taken XHTML 2.0 off life support. The World Wide Web Consortium, the group charged with overseeing the languages that power the web, has decided not to renew the charter of the XHTML2 working group, which is set to expire at the end of 2009."

The Nightmare

"The web’s governing body has taken XHTML 2.0 off life support. The World Wide Web Consortium, the group charged with overseeing the languages that power the web, has decided not to renew the charter of the XHTML2 working group, which is set to expire at the end of 2009."

The Nightmare

"The web’s governing body has taken XHTML 2.0 off life support. The World Wide Web Consortium, the group charged with overseeing the languages that power the web, has decided not to renew the charter of the XHTML2 working group, which is set to expire at the end of 2009."

The Nightmare

The Implosion

"Digital media time in the U.S. has exploded recently – growing nearly 50 percent in the past two years, with more than three-fourths of that growth directly attributable to the mobile app. Mobile has grown so fast that it’s now the leading digital platform, with total activity on smartphones and tablets accounting for 62 percent of digital media time spent, and apps alone now representing the majority of digital media time at 54 percent."

Death of the Web

XMLHttpRequest

MVC MVVM

"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."

MVC MVVM

"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."

MVC MVVM

"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."

MVC MVVM

"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."

MVC MVVM

"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."

MVC MVVM

"We want a loosely coupled architecture with functionality broken down into independent modules with ideally no inter-module dependencies. Modules speak to the rest of the application when something interesting happens and an intermediate layer interprets and reacts to these messages."

“You can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.”

Another Dream

Steve Jobs
WWDC 2007 (2007)

You can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.”

Another Dream

Steve Jobs
WWDC 2007 (2007)

“You can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.”

Another Dream

Steve Jobs
WWDC 2007 (2007)

“You can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.”

Another Dream

Steve Jobs
WWDC 2007 (2007)

“You can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.”

Another Dream

Steve Jobs
WWDC 2007 (2007)

“You can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.”

Another Dream

Steve Jobs
WWDC 2007 (2007)

“You can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today.”

Another Dream

Steve Jobs
WWDC 2007 (2007)

“But back then, the limitations of web apps, their lack of access to core functionality, their relatively poor performance compared to native apps, and the difficulties involved in charging for them proved to be insurmountable problems.”

Another Nightmare

iMore
App Store Year Zero (2018)

“But back then, the limitations of web apps, their lack of access to core functionality, their relatively poor performance compared to native apps, and the difficulties involved in charging for them proved to be insurmountable problems.”

Another Nightmare

iMore
App Store Year Zero (2018)

“But back then, the limitations of web apps, their lack of access to core functionality, their relatively poor performance compared to native apps, and the difficulties involved in charging for them proved to be insurmountable problems.”

Another Nightmare

iMore
App Store Year Zero (2018)

“But back then, the limitations of web apps, their lack of access to core functionality, their relatively poor performance compared to native apps, and the difficulties involved in charging for them proved to be insurmountable problems.”

Another Nightmare

iMore
App Store Year Zero (2018)

“But back then, the limitations of web apps, their lack of access to core functionality, their relatively poor performance compared to native apps, and the difficulties involved in charging for them proved to be insurmountable problems.”

Another Nightmare

iMore
App Store Year Zero (2018)

Front-end Gainz

"In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser."

Front-end Gainz

"In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser."

Front-end Gainz

"In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser."

From Fat to Holy Flip!

"Building interactive sites can involve sending JavaScript to your users. Often, too much of it. [...] Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways. [...] As much as I love JavaScript, it’s always the most expensive part of your site."

Addy Osmani
The cost of JavaScript (2018)

🥪 The Jamstack

Back to basics

Dammit Phil!

"Smashing Magazine went through constant iterations of its caching setup to avoid outages when an article went viral. Even after considerable efforts, the site still struggled to reach acceptable uptime and performance goals. This effort introduced a great many plug-ins, libraries, and dependencies for Wordpress, Rails, and Kirby, resulting in a constant uphill battle to keep numerous Wordpress plug-ins, Ruby Gems, and other libraries up to date without causing breakage to themes or functionalities."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Dammit Phil!

"Smashing Magazine went through constant iterations of its caching setup to avoid outages when an article went viral. Even after considerable efforts, the site still struggled to reach acceptable uptime and performance goals. This effort introduced a great many plug-ins, libraries, and dependencies for Wordpress, Rails, and Kirby, resulting in a constant uphill battle to keep numerous Wordpress plug-ins, Ruby Gems, and other libraries up to date without causing breakage to themes or functionalities."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Dammit Phil!

"Smashing Magazine went through constant iterations of its caching setup to avoid outages when an article went viral. Even after considerable efforts, the site still struggled to reach acceptable uptime and performance goals. This effort introduced a great many plug-ins, libraries, and dependencies for Wordpress, Rails, and Kirby, resulting in a constant uphill battle to keep numerous Wordpress plug-ins, Ruby Gems, and other libraries up to date without causing breakage to themes or functionalities."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Dammit Phil!

"Smashing Magazine went through constant iterations of its caching setup to avoid outages when an article went viral. Even after considerable efforts, the site still struggled to reach acceptable uptime and performance goals. This effort introduced a great many plug-ins, libraries, and dependencies for Wordpress, Rails, and Kirby, resulting in a constant uphill battle to keep numerous Wordpress plug-ins, Ruby Gems, and other libraries up to date without causing breakage to themes or functionalities."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Dammit Phil!

"Smashing Magazine went through constant iterations of its caching setup to avoid outages when an article went viral. Even after considerable efforts, the site still struggled to reach acceptable uptime and performance goals. This effort introduced a great many plug-ins, libraries, and dependencies for Wordpress, Rails, and Kirby, resulting in a constant uphill battle to keep numerous Wordpress plug-ins, Ruby Gems, and other libraries up to date without causing breakage to themes or functionalities."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Dammit Phil!

"Smashing Magazine went through constant iterations of its caching setup to avoid outages when an article went viral. Even after considerable efforts, the site still struggled to reach acceptable uptime and performance goals. This effort introduced a great many plug-ins, libraries, and dependencies for Wordpress, Rails, and Kirby, resulting in a constant uphill battle to keep numerous Wordpress plug-ins, Ruby Gems, and other libraries up to date without causing breakage to themes or functionalities."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Shortening the Stack

"Executing zero code will always be faster than executing some code [...] Critically though, the JAMstack removes tiers from that stack. It shortens that chain. Now operations on which teams used to spend large amounts of time and money to optimize in an effort to speed them up and make them more reliable don’t exist at runtime at all.​

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Shortening the Stack

"Executing zero code will always be faster than executing some code [...] Critically though, the JAMstack removes tiers from that stack. It shortens that chain. Now operations on which teams used to spend large amounts of time and money to optimize in an effort to speed them up and make them more reliable don’t exist at runtime at all.​

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Shortening the Stack

"Executing zero code will always be faster than executing some code [...] Critically though, the JAMstack removes tiers from that stack. It shortens that chain. Now operations on which teams used to spend large amounts of time and money to optimize in an effort to speed them up and make them more reliable don’t exist at runtime at all.​

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Shortening the Stack

"Executing zero code will always be faster than executing some code [...] Critically though, the JAMstack removes tiers from that stack. It shortens that chain. Now operations on which teams used to spend large amounts of time and money to optimize in an effort to speed them up and make them more reliable don’t exist at runtime at all.​

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Bring the Steamroller!

Tail Wagging the Dog

"We want to ensure that as we’re evaluating the reasons that monolithic apps are no longer serving the growth of the web, we’re careful not to insult the hundreds of thousands of development teams that chose to implement them. [...] The freedom to do good work—to design the exact experiences we want for our users—is regularly compromised by complex monolithic applications."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

"We want to ensure that as we’re evaluating the reasons that monolithic apps are no longer serving the growth of the web, we’re careful not to insult the hundreds of thousands of development teams that chose to implement them. [...] The freedom to do good work—to design the exact experiences we want for our users—is regularly compromised by complex monolithic applications."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Tail Wagging the Dog

"We want to ensure that as we’re evaluating the reasons that monolithic apps are no longer serving the growth of the web, we’re careful not to insult the hundreds of thousands of development teams that chose to implement them. [...] The freedom to do good work—to design the exact experiences we want for our users—is regularly compromised by complex monolithic applications."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Tail Wagging the Dog

"We want to ensure that as we’re evaluating the reasons that monolithic apps are no longer serving the growth of the web, we’re careful not to insult the hundreds of thousands of development teams that chose to implement them. [...] The freedom to do good work—to design the exact experiences we want for our users—is regularly compromised by complex monolithic applications."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Tail Wagging the Dog

Specialization of Labour

"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Specialization of Labour

"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Specialization of Labour

"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Specialization of Labour

"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Specialization of Labour

"In recent years, the complexity of frontend architectures has exploded as browser APIs have evolved and HTML and CSS standards have grown. However, it’s very difficult for the same person to be both an expert in client-side JavaScript performance and server-side development, database query constraints, cache optimization, and infrastructure operations. The size and complexity of a project’s architecture is directly proportional to the quantity of people and range of skills required to operate it."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Roundhay Garden Scene (1888)

Credited Crew: 7

Marvel Avengers: Endgame (2019)

Credited Crew: 497

Drawbacks

"At times, though, the effort has seemed to trade one goal for another. Wordpress, for example, became a revolution in making content easier to author—but anyone who’s scaled a high-traffic Wordpress site knows it also brings a whole set of new challenges in performance and security. Trading the simplicity of HTML files for database-powered content means facing the very real threats that sites might crash as they become popular or are hacked when nobody is watching closely."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Drawbacks

"At times, though, the effort has seemed to trade one goal for another. Wordpress, for example, became a revolution in making content easier to author—but anyone who’s scaled a high-traffic Wordpress site knows it also brings a whole set of new challenges in performance and security. Trading the simplicity of HTML files for database-powered content means facing the very real threats that sites might crash as they become popular or are hacked when nobody is watching closely."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Drawbacks

"At times, though, the effort has seemed to trade one goal for another. Wordpress, for example, became a revolution in making content easier to author—but anyone who’s scaled a high-traffic Wordpress site knows it also brings a whole set of new challenges in performance and security. Trading the simplicity of HTML files for database-powered content means facing the very real threats that sites might crash as they become popular or are hacked when nobody is watching closely."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Drawbacks

"At times, though, the effort has seemed to trade one goal for another. Wordpress, for example, became a revolution in making content easier to author—but anyone who’s scaled a high-traffic Wordpress site knows it also brings a whole set of new challenges in performance and security. Trading the simplicity of HTML files for database-powered content means facing the very real threats that sites might crash as they become popular or are hacked when nobody is watching closely."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Drawbacks

"At times, though, the effort has seemed to trade one goal for another. Wordpress, for example, became a revolution in making content easier to author—but anyone who’s scaled a high-traffic Wordpress site knows it also brings a whole set of new challenges in performance and security. Trading the simplicity of HTML files for database-powered content means facing the very real threats that sites might crash as they become popular or are hacked when nobody is watching closely."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

Drawbacks

"At times, though, the effort has seemed to trade one goal for another. Wordpress, for example, became a revolution in making content easier to author—but anyone who’s scaled a high-traffic Wordpress site knows it also brings a whole set of new challenges in performance and security. Trading the simplicity of HTML files for database-powered content means facing the very real threats that sites might crash as they become popular or are hacked when nobody is watching closely."

Mathias Billman & Phil Hawksworth

Modern Web Development on the Jamstack (2019)

The Jamstack

By Schalk Venter

The Jamstack

Javascript, API's and Markup as Tech Stack

  • 583