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.


  • Basic front-end languages

  • HTML

    Free Web Website

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

     

    HTML icon
  • CSS

    Free Web Website

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

     

    CSS icon
  • JavaScript

    Free Mac Windows Linux Web Android ... iPhone Chrome OS BSD iPad AROS Haiku Website

    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. JavaScript was formalized in the ECMAScript language standard.

     

    JavaScript icon
  • 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).

  • React

    Free Mac Windows Linux Web Website

    A JavaScript library for building user interfaces.

     

    React icon
  • Next.js

    Free Self-Hosted React Website

    It's no secret that creating single-page JavaScript applications can be pretty challenging these days. Fortunately, there are some projects available which simplify things and help you build apps faster.

    Create React app is a very good example of that.

    Even still, there's a high learning curve before you can build a proper application. That's because you need to learn about client-side routing, page layout, and so on. If you'd like to perform server-side rendering for faster page loads, things can become even more difficult.

    So, we need something simple but customizable.

    Think about how web apps are created with PHP. You create some files, write PHP code, then simply deploy it. We don't have to worry about routing much, and the app is rendered on the server by default.

    That's exactly what we do with. Instead of PHP, we build the app with JavaScript and React.

     

    Next.js icon
  • React Native

    Free Mac Windows Linux Website

    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 anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

     

    React Native icon
  • GatsbyJS

    Free Self-Hosted React Website

    Modern web tech without the headache
    Enjoy the power of the latest web technologies – React.js, Webpack, modern JavaScript and CSS and more — all setup and waiting for you to start building.

    Bring your own data
    Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system & more directly into your pages using GraphQL.

    Scale to the entire internet
    Gatsby.js is Internet Scale. Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears. Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.

    Future-proof your website
    Don't build a website with last decade's tech. The future of the web is mobile, JavaScript and APIs—the JAMstack. Every website is a web app and every web app is a website. Gatsby.js is the universal JavaScript framework you’ve been waiting for.

    Static Progressive Web Apps
    Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

    Speed past the competition
    Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are.

     

    GatsbyJS icon
  • javascript build tools

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

  • Babel

    Free Mac Windows Linux Web Node.JS Website

    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.

    JavaScript as a language is constantly evolving, with new specs and proposals coming out with new features all the time. Using Babel will allow you to use many of these features years before they are available everywhere.

    Babel does this by compiling down JavaScript code written with the latest standards into a version that will work everywhere today. This process is known as source-to-source compiling, also known as transpiling.

     

    Babel icon
  • npm

    Free Web Website

    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.

     

    npm icon
  • Gulp.js

    Free Web Node.JS Website

    Automate and enhance your workflow
    A streaming build system

    gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

    Easy to use

    By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable.

    Efficient

    By harnessing the power of node's streams you get fast builds that don't write intermediary files to disk.

    High Quality

    gulp's strict plugin guidelines assure plugins stay simple and work the way you expect.

    Easy to Learn

    With a minimal API surface, you can pick up gulp in no time. Your build works just like you envision it: a series of streaming pipes.

     

    Gulp.js icon
  • Webpack

    Free Mac Windows Linux Website

    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 - to be loaded by the browser.

     

    Webpack icon
  • 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.

  • Figma

    Freemium Windows Linux Android iPhone Android Tablet ... iPad Software as a Service (SaaS) Website

    Figma is the collaborative interface design tool. Keep the team focused and on the same page with real-time communication and collaboration featuring commercial quality vector and raster graphic tools.

    FEATURES

    • Real-time collaboration for team and client communication.
    • Full-featured vector graphic manipulation.
    • Vector networks simplify edits by letting you drag-and-drop lines instead of individual vector points.
    • Visual versioning to quickly compare between versions.
    • Works in browser and on desktop with downloadable apps.
    • Easily preview designs on iOS devices with Figma Mirror.
    • Import projects from Small Sketch iconSketch

     

    Figma icon
  • Contentful

    Commercial Web Website

    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.

    Contentful is 1) a backend for content delivery, 2) an API for fetching and manipulating the content, and 3) a web app in which editors create and organize the content. The full stack for modern publishing.

    Contentful is different from the majority of established web CMSs, as it keeps content separated from its presentation and delivers content via an elegant RESTful JSON API, empowering developers to build highly custom user experiences.

     

    Contentful icon
  • 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!

  • Auth0

    Freemium Web Website

    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:

    • Custom credentials: username + passwords
    • Social network logins: Google, Facebook, Twitter, and any OAuth2, OAuth1 or OpenID Connect provider
    • Enterprise directories: LDAP, Google Apps, Office 365, ADFS, AD, SAML-P, WS-Federation, etc.
    • Passwordless systems: TouchID, one time codes on SMS, or email

     

    Auth0 icon
  • Disqus

    Freemium Web Wordpress Website

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

     

    Disqus icon
  • FormKeep

    Commercial Web Website

    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

     

    FormKeep icon
  • Foxycart

    Commercial Web Website

    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.

     

  • SendBird

    Commercial Android iPhone Website

    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.

     

    SendBird icon
  • Snipcart

    Commercial Web Website

    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.

     

    Snipcart icon
  • Stream

    Freemium Software as a Service (SaaS) Website

    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.

     

    Stream icon
  • Stripe

    Commercial Web Website

    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.

     

    Stripe icon
  • SurveyMonkey

    Freemium Windows Web Website

    With thousands of customers in over 40 countries, theres a good chance that someone you know already uses us. Free:Only 10 Questions and 100 Responses. SurveyMonkey is flexible and scalable enough to meet the needs of a wide range of people: whether youre managing HR for a multi-national organization, or youre simply trying to gather feedback for your blog.

    It is really quick and easy to design a professional looking, professional acting survey questionnaire. It's equally quick to give you the results.It's easy to get your data and it's easy to analyze results. SurveyMonkey gives you a powerful tool to learn what customers (and employees) want from you - and does it in about 80% less time.

     

    SurveyMonkey icon
  • swiftype

    Commercial Web Website

    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 include powerful relevance algorithms, customizable search result ordering, fast autocomplete with typo protection, real-time analytics and more. Exceptionally simple to integrate into your existing software, but also remarkably flexible, Swiftype can be extensively customized to match the specific needs of your business.

     

    swiftype icon
  • Twilio

    Freemium Web Website

    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.

     

    Twilio icon
  • Typeform

    Freemium Web Intercom MailChimp Trello Autopilot ... Slack Salesforce.com Google Drive - Sheets HubSpot Website

    Build conversational forms, surveys, quizzes, landing pages, and more. Typeforms are easy to make and refreshing to take.

     

    Typeform icon
  • Algolia

    Commercial Web Android SDK Ruby Python JavaScript ... AngularJS cURL Ruby on Rails Node.JS Objective-C Website

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

     

    Algolia icon
  • 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.

  • GitHub

    Freemium Mac Windows Web Android Windows S ... Android Tablet BSD Website

    GitHub is a web-based hosting service for projects that use the Small Git iconGit revision control system. It is written in Ruby on Rails by Logical Awesome developers Chris Wanstrath, PJ Hyett, and Tom Preston-Werner. GitHub offers both commercial plans and free accounts for open source projects.

    The site provides social networking functionality like feeds, followers and the network graph to display how developers work on their versions of a repository.

    GitHub also operates a pastebin-style site at gist.github.com, wikis for the individual repositories and web pages that can be edited through a git repository.

    GitHub has a built-in, highly functional Issue Tracker.

     

    GitHub icon
  • GitHub Pages

    Freemium Web Cloudron Website

    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.
    Previously all the code for your website must be made open-source unless you get a premium account on GitHub, but recently you can do it for free with some limits (currently 3 collaborators for private repositories). See github.com/pricing for more details.

     

    GitHub Pages icon
  • Amazon CloudFront

    Commercial Web Website

    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.

     

    Amazon CloudFront icon
  • Netlify

    Freemium Software as a Service (SaaS) Website

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

    A single, simplified workflow
    Get all the tools you need to deploy and manage your site. Replace your hosting infrastructure, continuous integration, and deployment pipeline with a single workflow.

    Performance from the ground up
    Run your site on a purpose-built, multi-cloud infrastructure that’s designed for speed, automated to scale, and intrinsically secure.

    Don’t stop at static
    Netlify’s tool-agnostic platform helps you go dynamic on your own terms: choose from built-in add ons, integrate a favorite tool, or roll your own.

     

    Netlify icon
  • 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.

  • GraphQL

    Free Mac Windows Linux JavaScript Website

    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.

     

  • Apollo Server

    Freemium Self-Hosted Software as a Service (SaaS) Website

    Apollo Server is the best way to quickly build a production-ready, self-documenting API for GraphQL clients, using data from any source.

     

    Apollo Server icon
  • Hasura

    Free Personal Mac Windows Linux Website

    Build & host powerful applications in minutes.
    A BaaS + PaaS for the container era.

     

    Hasura icon



Comments on xenmaster's jamstack

Echo echo ... Feels empty in here

Maybe you want to be the first to submit a comment?

Sign up to comment, it's simple!