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 is the standard markup language used to create web pages and its elements form the building blocks of all websites.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to web documents.
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 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).
A JavaScript library for building user interfaces by Facebook.
Declarative
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.
Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Learn Once, Write Anywhere
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using React Native.
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.
Image Optimization
<Image> and Automatic Image Optimization with instant builds.
Internationalization
Built-in Domain & Subdomain Routing and Automatic Language detection.
Next.js Analytics
A true lighthouse score based on real visitor data & page-by-page insights
Zero Config
Automatic compilation and bundling. Optimized for production from the start.
Hybrid: SSG and SSR
Pre-render pages at build time (SSG) or request time (SSR) in a single project.
Incremental Static Regeneration
Add and update statically pre-rendered pages incrementally after build time.
TypeScript Support
Automatic TypeScript configuration and compilation.
Fast Refresh
Fast, reliable live-editing experience, as proven at Facebook scale.
File-system Routing
Every component in the pages directory becomes a route.
API Routes
Optionally create API endpoints to provide backend functionality.
Built-in CSS Support
Create component-level styles with CSS modules. Built-in Sass support.
Code-splitting and Bundling
Optimized bundle splitting algorithm created by the Google Chrome team.
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.
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.
Build anything you can imagine
Gatsby gives frontend teams the tools and technology they need to build world-class web experiences. From marketing sites, to eCommerce stores, to documentation. Gatsby can help you build it.
The hardest parts of the web, made simple.
Performance. SEO. Security. Integrations. Accessibility. We’ve got it covered for you. Gatsby makes the hardest parts of building an amazing digital experience simple, leaving you more time focusing on your business.
• Performance that's off the charts Gatsby automates code splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, and more to ensure your site is fully optimized. No manual tuning required.
• Scalability you can count on Gatsby sites don’t require complex scaling operations or expensive hosting. They scale when needed, but when traffic drops so does your usage — and your costs. Host at scale for pennies.
• Security out of the box Gatsby’s serverless rendering generates static HTML at build time. No server and no reachable database equals no malicious requests, DDOS attacks, or accidental exposure. A Gatsby site’s attack surface is nonexistent.
• Accessibility for everyone Recognized by WebAIM as the most accessible web framework, we build in best practices like accessible routing, progressive page enhancement and a built-in linting tool to find accessibility errors. Help make the web work for everyone.
Build, Preview, Deploy. All in just minutes with Gatsby Cloud.
Go from idea to production in less time with Starters, Themes, and over 2500 plugins that can help connect nearly any CMS, eCommerce platform, analytics tool, or other web service and get your website up and running in just minutes.
javascript build tools
Standard tools for building the front-end, including a task runner, transpiler, module builder, and package manager.
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.
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.
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.
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.
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 is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes in real-time on mobile devices. The feature set of Figma focuses on use in user interface and user experience design, with an emphasis on real-time collaboration.
Figma has a companion app for iOS and Android called Figma Mirror, which allows you to easily preview designs on mobile devices with Figma Mirror.
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.
- Import projects from Sketch
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.
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!
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
Engage your audience The internet's favorite comment plug-in makes it easy for publishers to bring their content to life, fuel colorful discussions, efficiently moderate comments, and build engaged communities.
Retain your readers Convert casual readers into regular contributors. Disqus helps publishers capture readers and keep them coming back for more with robust sign-in options, cross-site notifications and more.
Understand your success Audience Analytics provide actionable audience insights, helping publishers to understand their audience, monitor engagement, and optimize content strategy.
Monetize engagement Turn engagement into revenue with new inventory through Disqus and highly configurable ad serving from top demand partners on your site.
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
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 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.
Snipcart is a flexible shopping cart developers can easily integrate into any website in minutes. After injecting a snippet of JS to your project, you can define products directly in your HTML. All of your e-commerce logic can effectively be handled in the frontend, which makes it easy to integrate in web apps, static sites, or even old school CMS.
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.
Stripe makes it easy for developers to accept credit cards on the web. A set of unified APIs and tools that instantly enable businesses to accept and manage online payments.
With thousands of customers in over 40 countries, there's a good chance that someone you know already uses us. Free: Only 10 Questions and 10 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.
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.
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.
Typeform is a Barcelona-based online software as a service (SaaS) company that specializes in online form building and online surveys. Its main software creates dynamic forms based on user needs. Typeform's software has been used by Apple Inc., Airbnb, Uber and Nike, Inc. Typeform produces millions of forms every month.
Algolia provides a developer-friendly RESTful API for website and app instant search. Most web services and mobile apps, such as Spotify, Salesforce or Amazon need to provide a fast and meaningful access to database objects via a simple search box. People want to find songs, invoices, products in just a few keystrokes.
Algolia’s search API returns full results in less than 10ms in average, allowing as-you-type result display, “à la Google”, up to 200 times faster than other search technologies.
Our focus is on small database objects (such as contacts or products), so we designed new ranking rules built for this kind of data. We use new criteria to rank results, such as the popularity for a song, or, for a product, how many times it was put in a shopping cart.
This new engine design, optimized for databases, enables the apps and services who use our API to provide their users with meaningful and relevant results at the first keystroke.
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 is a web-based hosting service for projects that use the Git 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.
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.
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. It integrates with other Amazon Web Services products to give developers and businesses an easy way to accelerate content to end users with no minimum usage commitments.
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.
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.
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.
Source code : https://github.com/carlipa/aurora-graphql
Apollo Server is a community-maintained open-source GraphQL server. It works with pretty much all Node.js HTTP server frameworks. Apollo Server works with any GraphQL schema built with GraphQL.js, so you can build your schema with that directly or with a convenience library such as graphql-tools.
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.
