Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
November 8-9, 2019 Kyiv, Ukraine
JAMstack
by Alexandr Tovmach
What we already know?
SSR
2003
WordPress
Drupal
Joomla
React
Angular
Vue
Backbone
Hugo
Jekyll
Gatsby
2014
SPA
2016
JAM
SSR
Request
Client request
with
parameters
(query, route,
body)
Processing
Parsing,
validating,
analyzing,
formatting
requ...
SPA
Request
Client request
with
parameters
(query, route,
body)
Response
Response with
compiler,
templates and
other logic...
SPA vs. SSR
Wordpress vs. React
User interactions handling by server
Big TTI for each request
User interactions handling in browser
Big TTI just for the f...
Bad SEO
Part of business logic on client
JS turned off !== app works
Slow JS execution (especially for old devices)
Good S...
What we can do?
JAMstack solution
A small group of developers believe that static
sites don't have to be static and the term
"JAMstack" co...
PWA solution
PWA
Created to optimize SSR/SPA apps by
managing cache and metadata,
but all issues just hidden and still exist
2018
Headless Chrome vs PWA
Puppeteer it’s just another way for server side
rendering that’s based on Chrome engine,
but without any profit for perfor...
Performance optimization with Headless Chrome
Did you try a JAMstack before?
JAMstack
JAMstack in Ukraine
That is I’m writing first
article about JAMstack
What is JAMstack?
Apps with JavaScript, APIs, and prerendered Markup
JAMstack
Pre-build
Compile data
to static HTML
with
templates
Request
Client request
with
parameters
(query, route,
body)
...
JAMstack prerender
Pre-fetch Pre-build
JAM vs SSR vs SPA competition
1 month Stack Race (not Trace)
JAM vs SSR vs SPA competition results
For testing purposes we’ve implemented corporate blog (more 10k articles) in three w...
Where is JAMstack?
Advantages of JAMstack
In 2019 users closing
website after 1-2 seconds
looking on spinner
The speed of applications
is limited only by
connection...
Load-balancing
Scalability
Virtual machine resources
Simple and lowcost file
hosting + CDN
JAMstackProblem
Different
languages/frameworks for
client and server
development
One language/framework
JAMstackProblem
Old technologies with not
active community
(especially for SSR)
Hype tech stack with active
community
JAMstackProblem
Require additional steps to
make SEO optimization
SEO “from the box”
JAMstackProblem
Disadvantages of JAMstack
This stack is not universal solution and can’t
cover requirements for all web application
types
Apps with frequent data
updates like dashboard,
chat, forum
Apps with more or less
static content like blog,
docs, landing...
Apps that required quick
content updates like news,
weather websites
JAMstack
Apps where speed of
content updates is not
c...
To adopt the JAMstack for your next project,
your team will need to have a good mental
model of what the JAMstack means
Ne...
Change mindset before using
JAMstack is:
- static web pages
- interactive functionality only by microservices and external APIs
Example of JAMstack interactive
store.gatsbyjs.org is designed by Gatsby and include a full power of JAMstack. It’s only s...
Example of JAMstack interactive
For authorization and user session management using Auth0 services
Example of JAMstack interactive
Cart and orders management handling by shopify. For all custom API’s you should use
server...
Use JAMstack if:
- project has more or less static content like blog, docs, landing page
- speed of content updates is not...
JAMstack tools
Find best framework for your requirements, skills and
goals on staticgen.com
To choose CMS go to headlesscm...
Choose static site generator by:
- type of website
- programming language
- templating syntax
- speed
- developer tooling
Quick start with Gatsby
Recipe:
1. npm i --global gatsby-cli
2. gatsby new myproject
3. cd myproject
4. npm i
5. gatsby develop
Gatsby vs. React
How it looks?
Examples below provide the same data getting functionality.
For React classic way is to send request, set re...
How it looks?
If use the same data structure ― dumb components looks similar for React and Gatsby
Gatsby React
Build
Before
JSX component
After
Fully valid and standalone HTML page. All
used styles added in head + meta information,
images converted to base64 a...
File structure
Pre-build
*for demonstration purposes
.js, .css, .map files removed from structure
Deploy
Deployment
Copy paste project build in /public folder to any
static file hosting
Deploy
I’m falling in love with JAMstack and want to
try it on my real project.
How can I force my client to use this stack?
Business value of using JAMstack:
1. quickest user experience
2. low price hostings
3. co-marketing with JAMstack tool bra...
Step by step
ApplicationDatabase
CMSBlog/Docs
Server
Landing
page
Welcome to JAMstack community
That’s all
Questions?
This QR will be scanned only if:
- someone like to scan everything
- someone will try to make selfie with this slide on a ...
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
JS Fest 2019/Autumn. Александр Товмач. JAMstack
Upcoming SlideShare
Loading in …5
×

of

JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 1 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 2 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 3 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 4 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 5 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 6 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 7 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 8 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 9 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 10 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 11 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 12 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 13 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 14 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 15 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 16 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 17 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 18 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 19 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 20 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 21 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 22 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 23 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 24 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 25 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 26 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 27 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 28 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 29 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 30 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 31 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 32 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 33 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 34 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 35 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 36 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 37 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 38 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 39 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 40 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 41 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 42 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 43 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 44 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 45 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 46 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 47 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 48 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 49 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 50 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 51 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 52 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 53 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 54 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 55 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 56 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 57 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 58 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 59 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 60 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 61 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 62 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 63 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 64 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 65 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 66 JS Fest 2019/Autumn. Александр Товмач. JAMstack Slide 67
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

JS Fest 2019/Autumn. Александр Товмач. JAMstack

Вы уже слышали о JAMstack, который пришел на смену SSR и SPA? Подход, который оптимизирует веб приложения так, что они ограничены только скоростью вашего интернет соединения. Никаких просадок при рендере на клиенте, никаких падений серверов от нагрузки, только SEO-friendly приложения без проблем с масштабируемостью.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

JS Fest 2019/Autumn. Александр Товмач. JAMstack

  1. 1. November 8-9, 2019 Kyiv, Ukraine JAMstack by Alexandr Tovmach
  2. 2. What we already know? SSR 2003 WordPress Drupal Joomla React Angular Vue Backbone Hugo Jekyll Gatsby 2014 SPA 2016 JAM
  3. 3. SSR Request Client request with parameters (query, route, body) Processing Parsing, validating, analyzing, formatting request data Collect data Getting data from all resources (DB, external APIs, etc) Render Compiling data to HTML with templates Response Sending to client fully or partially rendered HTML page with requested data The most time-consuming operations
  4. 4. SPA Request Client request with parameters (query, route, body) Response Response with compiler, templates and other logic as JS-code chunks Render Compiling data to HTML with compiler templates directly in browser Collect data Getting data from all resources (DB, APIs) by AJAX requests from browser Re-render Re-rendering content in browser with a new data The most time-consuming operations
  5. 5. SPA vs. SSR
  6. 6. Wordpress vs. React
  7. 7. User interactions handling by server Big TTI for each request User interactions handling in browser Big TTI just for the first load Single Page ApplicationServer Side Rendering
  8. 8. Bad SEO Part of business logic on client JS turned off !== app works Slow JS execution (especially for old devices) Good SEO Business logic hidden from user on server JS turned off === app works Quick render Server Side RenderingSingle Page Application
  9. 9. What we can do?
  10. 10. JAMstack solution A small group of developers believe that static sites don't have to be static and the term "JAMstack" comes to life 2016
  11. 11. PWA solution
  12. 12. PWA Created to optimize SSR/SPA apps by managing cache and metadata, but all issues just hidden and still exist 2018
  13. 13. Headless Chrome vs PWA
  14. 14. Puppeteer it’s just another way for server side rendering that’s based on Chrome engine, but without any profit for performance Headless Chrome (puppeteer) 2018
  15. 15. Performance optimization with Headless Chrome
  16. 16. Did you try a JAMstack before?
  17. 17. JAMstack
  18. 18. JAMstack in Ukraine That is I’m writing first article about JAMstack
  19. 19. What is JAMstack? Apps with JavaScript, APIs, and prerendered Markup
  20. 20. JAMstack Pre-build Compile data to static HTML with templates Request Client request with parameters (query, route, body) Response Response with pre-rendered HTML The most time-consuming operations ...run only once with deploy Pre-fetch data Getting data from all resources
  21. 21. JAMstack prerender Pre-fetch Pre-build
  22. 22. JAM vs SSR vs SPA competition 1 month Stack Race (not Trace)
  23. 23. JAM vs SSR vs SPA competition results For testing purposes we’ve implemented corporate blog (more 10k articles) in three ways: JAM, SSR and SPA. Then we made audit and here is results.
  24. 24. Where is JAMstack?
  25. 25. Advantages of JAMstack
  26. 26. In 2019 users closing website after 1-2 seconds looking on spinner The speed of applications is limited only by connection speed JAMstackProblem
  27. 27. Load-balancing Scalability Virtual machine resources Simple and lowcost file hosting + CDN JAMstackProblem
  28. 28. Different languages/frameworks for client and server development One language/framework JAMstackProblem
  29. 29. Old technologies with not active community (especially for SSR) Hype tech stack with active community JAMstackProblem
  30. 30. Require additional steps to make SEO optimization SEO “from the box” JAMstackProblem
  31. 31. Disadvantages of JAMstack
  32. 32. This stack is not universal solution and can’t cover requirements for all web application types
  33. 33. Apps with frequent data updates like dashboard, chat, forum Apps with more or less static content like blog, docs, landing page JAMstacknot JAMstack
  34. 34. Apps that required quick content updates like news, weather websites JAMstack Apps where speed of content updates is not critical not JAMstack
  35. 35. To adopt the JAMstack for your next project, your team will need to have a good mental model of what the JAMstack means Next project with JAMstack 2019
  36. 36. Change mindset before using
  37. 37. JAMstack is: - static web pages - interactive functionality only by microservices and external APIs
  38. 38. Example of JAMstack interactive store.gatsbyjs.org is designed by Gatsby and include a full power of JAMstack. It’s only static catalog with list of items and their prices.
  39. 39. Example of JAMstack interactive For authorization and user session management using Auth0 services
  40. 40. Example of JAMstack interactive Cart and orders management handling by shopify. For all custom API’s you should use serverless functions
  41. 41. Use JAMstack if: - project has more or less static content like blog, docs, landing page - speed of content updates is not critical for your project - team confident with microservice and serverless architecture
  42. 42. JAMstack tools Find best framework for your requirements, skills and goals on staticgen.com To choose CMS go to headlesscms.org
  43. 43. Choose static site generator by: - type of website - programming language - templating syntax - speed - developer tooling
  44. 44. Quick start with Gatsby
  45. 45. Recipe: 1. npm i --global gatsby-cli 2. gatsby new myproject 3. cd myproject 4. npm i 5. gatsby develop
  46. 46. Gatsby vs. React
  47. 47. How it looks? Examples below provide the same data getting functionality. For React classic way is to send request, set result to state and re-render view. In Gatsby all content handling by GraphQL, providing as a props, and pre-rendering only once. Gatsby React
  48. 48. How it looks? If use the same data structure ― dumb components looks similar for React and Gatsby Gatsby React
  49. 49. Build
  50. 50. Before JSX component
  51. 51. After Fully valid and standalone HTML page. All used styles added in head + meta information, images converted to base64 and all content in layout.
  52. 52. File structure Pre-build *for demonstration purposes .js, .css, .map files removed from structure
  53. 53. Deploy
  54. 54. Deployment Copy paste project build in /public folder to any static file hosting Deploy
  55. 55. I’m falling in love with JAMstack and want to try it on my real project. How can I force my client to use this stack?
  56. 56. Business value of using JAMstack: 1. quickest user experience 2. low price hostings 3. co-marketing with JAMstack tool brands 4. modern tech stack === developer candidates
  57. 57. Step by step ApplicationDatabase CMSBlog/Docs Server Landing page
  58. 58. Welcome to JAMstack community
  59. 59. That’s all Questions?
  60. 60. This QR will be scanned only if: - someone like to scan everything - someone will try to make selfie with this slide on a background - someone will decide to add this to bookmarks and never open Contacts

Вы уже слышали о JAMstack, который пришел на смену SSR и SPA? Подход, который оптимизирует веб приложения так, что они ограничены только скоростью вашего интернет соединения. Никаких просадок при рендере на клиенте, никаких падений серверов от нагрузки, только SEO-friendly приложения без проблем с масштабируемостью.

Views

Total views

320

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×