JAM Stack is modern web development architecture based on client-side JavaScript, reusable APIs, an prebuilt Markup. You can check it here: jamstack.org

1. CONTENT MANAGEMENT WITH
GATSBY . CONTENTFUL . NETLIFY
SPEAKER: NI NGO

2. AUDIENCE
Students/developers who knows
about web, static page but be new
to JAM Stack.

3. 1. All about JAM Stack
2. Sample Stacks
3. Demo
4. Q&A
AGENDA

4. “According to statistics From 40,000+
WordPress Websites in Alexa Top 1 Million,
more than 70% of WordPress installations are
vulnerable to hacker attacks.”
– EnableSecurity
4

5. – Tealeaf/Harris Interactive
5

6. TIMELINE
2015
2016
2017
2018
6

7. Modern web development architecture
based on client-side JavaScript,
reusable APIs, and prebuilt Markup.
JAM STACK
7

8. J A MJ A M
Javascript APIs Markup
8

9. 9

10. ● Better performance.
● Higher security.
● Cheaper, easier scaling.
● Better developer experience.
WHY USE IT?
10

11. ● A site built with a server-side CMS.
● The single page is kind of server
rendering (isomorphic).
● The page that contains architecture all
in one piece (monolithic).
WHEN NOT USING JAM?
11

12. WHO USE IT?
https://serverless.com/
https://www.smashingmagazine.com/
https://lodash.com/
12

13. ● Entire site on a CDN
● Atomic Deploys
● Instant Cache Invalidation
● Everything lives in Git
● Automated Builds
BEST PRACTICES
13

14. STATIC SITE GENERATOR
14

15. DATA SOURCES
BUILD
DEPLOY
Powered by GraphQL
HTML - CSS - REACT
CMS, Markdown,
Data,...
Amplify, Netlify,...
GATSBY -WHY & HOW IT WORK?
15

16. It is a CMS online tool that
allows to create and distribute
content to any platform.
CONTENTFUL - WHAT IS IT?
16

17. ● It is a great hosting service
ideal for static sites.
● Has a nice free plan, free CDN
● It is blazing fast.
NETLIFY - WHAT IS IT?
17

18. CMS
BUILD
CDN
Contentful
Graphql Gatsby
Netlify
HOW THEY WORK?
Fetch
content
W
ebhook
Deploy
Client
Request
18

19. DEMO
Live: https://jam-stack-devday.netlify.com/
Source: https://github.com/ningo-agilityio/jam-stack

20. REFERENCES
● https://jamstack.org/
● https://gatsbyjs.org
● https://contentful.com
● http://netlify.com
20

21. Q&A

22. THANK YOU!