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.

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

35 views

Published on

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

Published in: Education
  • Be the first to comment

  • 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

×