Slide 1

Slide 1 text

How to build an ecommerce site on the JAMstack With Contentful and Commerce Layer December 5th 2019

Slide 2

Slide 2 text

Housekeeping ● This webinar is being recorded; we will share the recording and slide deck with all registrants ● Please leave your questions in the Q&A box, we’ll answer them after the presentation ● To get in touch, write to us at [email protected] Before we begin...

Slide 3

Slide 3 text

Shy Ruparel Developer Evangelist | Contentful @ShyRuparel 3 Filippo Conforti Founder | Commerce Layer @FilippoConforti

Slide 4

Slide 4 text

Static Ecommerce? 4 4

Slide 5

Slide 5 text

Static Websites A brief history 5 5

Slide 6

Slide 6 text

The first website was a static site 6

Slide 7

Slide 7 text

Let’s Develop like it’s 1991 ● Every website was static ● Layout wasn’t a thing ○ Vertical flow for everything ● Link management was manual ● 1991: 1.2 KB/s 7 7

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

First Web Search 9

Slide 10

Slide 10 text

First Web Comic 10

Slide 11

Slide 11 text

Things get Dynamic ● CGI was introduced in 1994 ● Rasmus Lerdorf releases his “Personal Home Page Tools” in 1995 ● Brendan Eich writes the prototype for JavaScript in 1995 ● 1994: 28 KB/s 11 11

Slide 12

Slide 12 text

12

Slide 13

Slide 13 text

E-Commerce becomes possible 13

Slide 14

Slide 14 text

It’s a business ● Microsoft ASP was releases in 1996, Sun JSP in 1999 ● Hosting a dynamic, CMS, based website became easy ● Microsoft FrontPage and Marcomedia Dreamweaver released in 1996 and 1997 ● 1996: 56 KB/s 14 14

Slide 15

Slide 15 text

15

Slide 16

Slide 16 text

Your own space 16

Slide 17

Slide 17 text

Apps on the Web 17

Slide 18

Slide 18 text

I got the power ● XMLHttpRequest was part of IE5 in 1999 ● SPA have been discussed since 2003 ● jQuery was published in 2006, AngularJS in 2009 ● 2006: 8 MB/s 18 18

Slide 19

Slide 19 text

Modern static site builders 19 19

Slide 20

Slide 20 text

20 GitHub

Slide 21

Slide 21 text

Jekyll 21

Slide 22

Slide 22 text

22

Slide 23

Slide 23 text

23

Slide 24

Slide 24 text

Static just makes things easier 24

Slide 25

Slide 25 text

This project is way too complex. Static sites just won’t cut it. 25 25

Slide 26

Slide 26 text

26 Common Requirements 1. “Our editors don’t know git, they need a GUI.” 2. “We have a lot of content, we need full-text search.” 3. “Our contact forms needs to send an email.” 4. “We’re running an online shop. You can’t do that with a static site.” 26

Slide 27

Slide 27 text

27 A cloud and an API walk into a bar AWS got started in 2002,Lambda added in 2014 Roy Fielding defines REST in his 2000 PhD dissertation Twilio was founded in 2007; Stripe in 2011 27

Slide 28

Slide 28 text

A need breed of Static Site Generators Seamlessly combining static sites and single page applications 28

Slide 29

Slide 29 text

How does that solve anything? With great services comes great responsibility 29 29

Slide 30

Slide 30 text

30 3 ways to access a service

Slide 31

Slide 31 text

Our editors don’t know git, they need a GUI. 31

Slide 32

Slide 32 text

We have a lot of content, we need full-text search. 32

Slide 33

Slide 33 text

Our contact forms needs to send an email. 33

Slide 34

Slide 34 text

We’re running an online shop. You can’t do that with a static site. 34

Slide 35

Slide 35 text

Contentful + API = ❤ 35

Slide 36

Slide 36 text

Bringing it all Together 36

Slide 37

Slide 37 text

Let’s dig into Ecommerce 37 37

Slide 38

Slide 38 text

38 Architecture and workflow

Slide 39

Slide 39 text

Contentful + Ecommerce API = 39

Slide 40

Slide 40 text

Static just makes things easier 40