xenmaster's jamstack

JAM (Javascript API Markup) stack sites are the new black in the web-development world, so if you are looking to try your hand at the latest trend, take a look at the best tools of the trade, right here in this list.

If you are confused about the value that can come from a JAMStack site, that is because JAMStack is one of the most poorly explained concepts on the web, specifically describing what problem it solves and what solutions it replaces. The purpose of JAMstack is essentially to create the same sort of website Drupal or Wordpress would build for you, but outsource the back-end functionality as much as possible, especially for static-sites, so that developers are focused on front end. This is done by using Javascript to define the front end behaviour, APIs to provide functionality to back-end hosted services, and Markup, which defines formatting. The rest of the stack can be outsourced to external infrastructure, whether it is CDNs for content delivery, back-end-as-service support like Firebase, and CMS used to define content like Contentful. Essentially, all you are left with is text files in a static respository like Github Pages, which is the basis for the site. No webserver is even required because the CDN serves the pages based on what is built from the Github Pages. This results in a significantly reduced attack surface and a super fast website loading time that doesn't rely on a central server for uptime.

Alex Ruiz
Alex RuizList by Alex Ruiz, last updated 
Copy a direct link to this comment to your clipboard
  1. Basic front-end languages

  2. HTML icon
     Like

    HTML is the standard markup language used to create web pages, and its elements form the building blocks of all websites.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • HTML
    HTML screenshot 1
  3. CSS icon
     Like

    Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
  4. JavaScript (sometimes shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but also used in many non-browser environments.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Online
    • Android
    • iPhone
    • Chrome OS
    • BSD
    • iPad
    • AROS
    • Haiku
    JavaScript screenshot 1
    JavaScript screenshot 1
  5. Javascript front-end tools and frameworks

    The actual building of the front end can be done with javascript with the React Framework. NextJS is the starting point for building static server-rendered sites on the front end, with Gatsby being used as a full fledged Static Site Generator. There are Vue tools that do the same thing, but they are not as mature (yet).

  6. React icon
     Like

    A JavaScript library for building user interfaces.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Online
    React screenshot 1
  7. Next.js icon
     Like

    Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Self-Hosted
    • React
    Next.js screenshot 1
    Next.js screenshot 1
  8. React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write...

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • BSD
    • Self-Hosted
    • React
  9. Gatsby icon
     Like

    Gatsby provides development teams an open source frontend framework for creating dynamic, optimized websites and a cloud platform for delivering them on a blazing fast edge network.

    Cost / License

    • Freemium
    • Open Source

    Application type

    Platforms

    • Self-Hosted
    • React
    • Software as a Service (SaaS)
    Gatsby screenshot 1
  10. javascript build tools

    Standard tools for building the front-end, including a task runner, transpiler, module builder, and package manager.

  11. Babel icon
     Like

    Babel is a generic multi-purpose compiler for JavaScript. Using Babel you can use (and create) the next generation of JavaScript, as well as the next generation of JavaScript tooling.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
    • Online
    • Node.JS
    Babel screenshot 1
    Babel screenshot 1
  12. npm icon
     Like

    npm is a package manager for Node.js that is run through the command line and manages dependencies for an application. It is the predominant package manager for Node.js.

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Online
    npm screenshot 1
  13. Gulp.js icon
     Like

    A toolkit to automate & enhance your workflow. Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Node.JS
    • Self-Hosted
  14. Webpack icon
     Like

    Webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles — often only one...

    Cost / License

    • Free
    • Open Source

    Application type

    Platforms

    • Mac
    • Windows
    • Linux
    • Self-Hosted
    Webpack screenshot 1
  15. Content and Design Management

    These tools will help you manage site design and content, similar to what Wordpress or Drupal do, except without the pesky backend or plugins that could be subject to attack and require constant updates. This service allows your designers to develop a good front-end and content creators to focus on what matters.

  16. Figma icon
     Like

    Web-based vector graphics editor with desktop apps, focusing on real-time collaboration and version control for UI/UX design.

    Cost / License

    • Freemium
    • Proprietary

    Platforms

    • Mac
    • Windows
    • Online
    • Chrome OS
    • Software as a Service (SaaS)
    • Android
    • Android Tablet
    • iPhone
    • iPad
    ,
    ,
    Figma screenshot 2
    +4
    Figma screenshot 3
  17. A content management system that enables cross-platform, multi-device online publishing. Businesses employ Contentful to publish editorial content for web apps, mobile apps, and, ultimately, any connected devices.

    Cost / License

    • Paid
    • Proprietary

    Application type

    Platforms

    • Online
    Contentful screenshot 1
    Contentful screenshot 1
    Contentful screenshot 2
    +2
    Contentful screenshot 3
  18. APIs

    From search engines to form hosts, discussion boards, and authorization management, the following APIs will plug your website into services that you would normally host yourself, but can function just as well hosted at third parties. Pick as many or as few as you want to add additional functionality to your static site!

  19. Auth0 icon
     Like

    You can connect any application (written in any language or on any stack) to Auth0 and define its Connection, the method used to authenticate the users of that application:

    Cost / License

    • Freemium
    • Proprietary

    Application type

    Platforms

    • Online
    Auth0 screenshot 1
    Auth0 screenshot 1
    Auth0 screenshot 2
  20. Disqus icon
     Like

    Disqus offers the best add-on tools for site owners to power discussions, increase engagement, and earn revenue.

    Cost / License

    • Freemium
    • Proprietary

    Application type

    Platforms

    • Online
    • Wordpress
  21. FormKeep icon
     Like

    No iframes, JavaScript embeds, or CSS overrides. FormKeep generates a URL to use as your form's endpoint. Just plug it in to your existing code and deploy. It's really that easyz

    Cost / License

    • Paid
    • Proprietary

    Platforms

    • Online
    FormKeep screenshot 1
  22.  Like

    FoxyCart, SEO Ecommerce, has been built from the ground up by webdesigners, for webdesigners. Easy to integrate. Unbelievably flexible. Full AJAX ecommerce +JSON support. Totally foxy.

    Cost / License

    • Paid
    • Proprietary

    Platforms

    • Online
  23. SendBird icon
     Like

    SendBird is messaging-as-a-service. It provides the client SDK, chat API, and the backend for apps enabling real-time communication among apps’ own users.

    Cost / License

    • Paid
    • Proprietary

    Platforms

    • Android
    • iPhone
    SendBird screenshot 1
    SendBird screenshot 1
    SendBird screenshot 2
    +1
    SendBird screenshot 3
  24. Snipcart icon
     Like

    Using simple HTML markup, turn any existing website into an extensive shopping cart platform. Snipcart allows payment processing, shipping estimates and order management without ever letting your customers leave your website.

    Cost / License

    • Paid
    • Proprietary

    Platforms

    • Online
    • Software as a Service (SaaS)
    Snipcart screenshot 1
    Snipcart screenshot 1
    Snipcart screenshot 2
    +3
    Snipcart screenshot 3
  25. Stream icon
     Like

    Scalable & Fast API for building social networks, activity feeds, news feeds and activity streams. Aggregated feeds, ranked feeds, analytics and personalization all help you improve your app's engagement, retention and conversion.

    Cost / License

    • Freemium
    • Proprietary

    Platforms

    • Software as a Service (SaaS)
    Stream screenshot 1
    Stream screenshot 1
  26. Stripe icon
     Like

    Stripe helps you create any type of payments flow—from e-commerce to recurring billing and everything in between. Stripe enables you to accept payments in minutes. Stripe makes recurring and subscription-based billing easy.

    Cost / License

    • Paid
    • Proprietary

    Platforms

    • Online
    • Software as a Service (SaaS)
    • Android
    • Android Tablet
    • iPhone
    • iPad
    Home
  27. Online survey platform enabling quick creation of professional questionnaires with free plan limits, customizable templates, simple result analysis, and real-time reporting.

    Cost / License

    • Freemium
    • Proprietary

    Platforms

    • Windows
    • Online
    SurveyMonkey screenshot 1
    SurveyMonkey screenshot 1
    SurveyMonkey screenshot 2
    +5
    SurveyMonkey screenshot 3
  28. swiftype icon
     Like

    The easiest way to add great search to your website

    Swiftype is a hosted software service that eliminates the need to create your own search software from scratch, making it possible for any website owner or mobile app developer to add great search to their product. Features inc.

    Cost / License

    • Paid
    • Proprietary

    Application type

    Platforms

    • Online
    swiftype screenshot 1
  29. Twilio icon
     Like

    Twilio is a web-service API that lets you use your existing web languages and skills to build voice and SMS applications. We focus on building a simple, powerful, pay-as-you-go communications platform so that you can focus on what you do best.

    Cost / License

    • Paid
    • Proprietary

    Application type

    Platforms

    • Online
    Triggering a function in Twilio Studio
    Building appointment reminders in Twilio Studio
  30. Typeform icon
     Like

    Creates interactive forms with engaging sliding questions, logic jumps, multimedia support, 3,000+ templates, and integration into sites, emails, or unique links.

    Cost / License

    • Freemium
    • Proprietary

    Platforms

    • Online
    • Intercom
    • MailChimp
    • Trello
    • Ortto
    • Slack
    • Salesforce
    • Google Sheets
    • HubSpot
    Typeform screenshot 1
    (Courtesy of: mevvy.com/)
    Typeform screenshot 2
  31. Algolia icon
     Like

    Algolia helps product teams connect their users with information by providing the building blocks they need to create fast, relevant, personalized search.

    Cost / License

    • Free Personal
    • Proprietary

    Platforms

    • Online
    • Android SDK
    • Ruby
    • Python
    • JavaScript
    • Angular
    • cURL
    • Ruby on Rails
    • Node.JS
    • Objective-C
    Home Page
    Algolia screenshot 1
    Algolia screenshot 2
    +3
    Algolia screenshot 3
  32. Hosting, Content Delivery, and Deployment

    Github is all you need to perform your development process. Github pages is used to host the actual content of your site. The CDN used to serve the page in place of a server like Apache is provided by Amazon while the deployment process is managed by Netlify, replacing CI tools like Jenkins.

  33. GitHub icon
     Like

    Web-based Git hosting service facilitating collaboration, with features like issue tracking, social networking, and wikis for project management.

    Cost / License

    • Freemium
    • Proprietary

    Platforms

    • Mac
    • Windows
    • Online
    • Android
    • iPhone
    • Android Tablet
    • iPad
    Homepage
    Organization profile view
    Repository Homepage
    +6
    Issues
  34. A web hosting service made by GitHub, for any static website hosted on GitHub. GitHub Pages doesn't support PHP, Node.js, Ruby on Rails, MySQL, or any other server-side service.

    Cost / License

    • Freemium
    • Proprietary

    Application type

    Platforms

    • Online
    • Cloudron
    GitHub Pages screenshot 1
    GitHub Pages screenshot 1
  35. Amazon CloudFront is a global content delivery network (CDN) service that accelerates delivery of your websites, APIs, video content or other web assets through CDN caching.

    Cost / License

    • Freemium
    • Proprietary

    Application type

    Platforms

    • Software as a Service (SaaS)
    • Amazon Web Services
    Amazon CloudFront screenshot 1
  36. Netlify icon
     Like

    An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS. And that’s just the beginning.

    Cost / License

    • Freemium
    • Proprietary

    Application type

    Platforms

    • Software as a Service (SaaS)
    Home
    Netlify screenshot 1
    Netlify screenshot 2
    +1
    Netlify screenshot 3
  37. Backends

    The following are platforms a user can use to define their backend, outsourced naturally to a third party service provider with API support delivered by the GraphQL technology.

  38. The goal of this library is to provide an easy and fast way to create a GraphQL, Relay compliant server, that can serve multiple projects.

    Cost / License

    • Free
    • Open Source

    Platforms

    • Mac
    • Windows
    • Linux
    • JavaScript
  39. Apollo is the best way to quickly build a production-ready, self-documenting API for GraphQL clients, using data from any source.

    Cost / License

    • Freemium
    • Open Source

    Platforms

    • Self-Hosted
    • Software as a Service (SaaS)
    Apollo GraphQL screenshot 1
  40. Hasura icon
     Like

    Hasura makes data access easy, by instantly composing a GraphQL API that is backed by databases and services so that the developer team (or API consumers) get immediately productive. The nature of GraphQL itself and Hasura’s dynamic approach makes integration and iteration easy.

    Cost / License

    • Free Personal
    • Open Source

    Application type

    Platforms

    • Online
    • Software as a Service (SaaS)
No comments so far, maybe you want to be first?
Gu