JamStack

These decisions include the following:

  • How you’ll manage the project/code
  • Where you’ll store your content
  • What software will build your site
  • How your build process will be automated
  • Where your site will be published
  • What services and APIs your live site will use

Best Practices

  • Entire Project on a CDN
  • Modern Build Tools
  • Automated Builds
  • Atomic Deploys: No changes go live until all changed files have been uploaded.
  • Instant Cache Invalidation: Making sure your CDN can handle instant cache purges.
  • Everything Lives in Git: Git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs.

History

LAMP(Linux, Apache, MySQL, PHP/Perl/Python) stack —> MEAN(MongoDB, Express.js, Angular/React/Vue, and Node.js) stack —> JAM(JavaScript, APIs and Markup) stack

The Fullstack React Framework

Blitz = Next.js + React Hook Form + Prisma.js 中文站

  1. Blitz is inspired by Ruby on Rails, and built on [[#NextJS|tag.NextJS]], [[#prisma|tag.prisma]], [[#SQLite|tag.SQLite]], [[#GraphQL|tag.GraphQL]]. Why use Blitz instead of Next.js?
  2. Fullstack instead of Frontend
  3. Data Layer: - You don’t need to build an API and do data fetching from the frontend. - Essentially, Blitz abstracts your API into a compile step. - You can continue doing data fetching via REST or GraphQL like you’ve always done. - Blitz doesn’t restrict this in any way.
  4. Built-in Authentication
  5. Conventions: Blitz brings a number of conventions for things like how to organize your files and how to structure your routes.
  6. Code Scaffolding not code generation, Blitz is a huge fan of code scaffolding and in the future will add your own custom scaffold templates.
  7. Recipes are one-line commands for scaffolding code into your project from an MDX recipe on npm or a git repository. They are written via MDX and can be composed like React components. - blitz install tailwind tailwind CSS 工具式 class 风格的 CSS 库 - blitz install material-ui MATERIAL-UI 中文版 Google 推出的 UI 组件库
  8. New App Development: Set up okay for eslint, prettier, husky git hooks, etc.
  9. Relaxed Restrictions: You can separate and organize your pages in any way you want. Examples: - app/pages/ could contain the homepage and pages like “about” - app/products/pages/ could contain all the pages related to products - app/admin/pages/ could contain all pages related to the backend admin section
  10. Building a fullstack React application with Blitz.js.

基于 Blitz 开发的项目

  • Awesome Blitz.js
  • Quirrel makes job queues simple as cake.
  • Flitz.dev 日本的一个微博客社区，源码：Github，需要 docker-compose 安装 PostgreSQL 数据库。
  • Recipe App 一个很简单的食谱 App，就三个字段：名称、描述和上传图片。
  • Kalle.app 一个会议管理的 App demo，源码： Github

RedwoodJS

Blitz.js vs. RedwoodJS

  • Blitz.js

    • Blitz.js enables you to request the database from the client itself using Prisma.
    • For data management on the client side, Blitz uses React Query under the hood
    • Blitz uses Prisma to manage the database connection and schemas.

  • Redwood.js

    • Redwood uses Prisma to connect with the database. Once it fetches the data, it returns to the client.
    • Redwood follows the monorepo pattern. To add any library to the client or server side, use the following command.
    yarn workspace web add react-query
yarn workspace api add jsonwebtoken

  • 结论： 作者更倾向于 Blitz.js，因为不限制使用 GraphQL，二者都可以快速开发。

React frameworks: Redwood vs Blitz

  • Redwood is built on React, GraphQL, and Prisma.
  • Blitz is built on top of Next.js (which is built on top of React)
  • What I noticed is Redwood using js, ts is development, but Blitz using ts.

Vue

Gridsome A Jamstack framework for Vue.js

Blitz.js 选择哪个 Form 框架呢？

结论：

  • Formik 不用考虑了，上面有些比较的文章已经说明不如 React Hook Form
  • Final Form 国内访问不到
  • React Hook Form 可以，且有中文