• This repository has been archived on 01/Nov/2023
  • Stars
    star
    690
  • Rank 65,522 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

"Zero" Api / Type Safe / Fullstack Kit / Powerful Backend

Functional Fullstack Framework

"Zero" Api & Type Safe & Fullstack Kit & Powerful Backend
At Alibaba, 2800+ full-stack applications are developed based on Midway Hooks (2022.01)

English | 简体中文

Features

  • ☁️ Maximize productivity and developer experience, support fullstack development & API service
  • ⚡️ Fullstack kit that supports React/Vue/Svelte... and more frameworks
  • 🌈 "Zero" Api data layer, import functions from the backend to call the API directly, without the ajax glue layer
  • ⛑️ Type safe, use the identical type definition from frontend to backend, detect errors in advance
  • 🌍 Functional programming, using Hooks for frontend and backend
  • ⚙️ Support for Webpack / Vite based projects
  • ✈️ Deploy to Server or Serverless
  • 🛡 Based on Midway, a powerful Node.js framework that supports enterprise-level application development

🔨 Preview

Backend(Midway Hooks) Frontend(React)
// src/api/index.ts
import {
  Api,
  Get,
  Post,
  Validate,
  Query,
  useContext,
} from '@midwayjs/hooks';
import { z } from 'zod';
import db from './database';

export const getArticles = Api(
  Get(),
  Query<{ page: string; per_page: string }>(),
  async () => {
    const ctx = useContext();

    const articles = await db.articles.find({
      page: ctx.query.page,
      per_page: ctx.query.per_page,
    });

    return articles;
  }
);

const ArticleSchema = z.object({
  title: z.string().min(3).max(16),
  content: z.string().min(1),
});

export const createArticle = Api(
  Post(),
  Validate(ArticleSchema),
  async (article: z.infer<typeof ArticleSchema>) => {
    const newArticle = await db.articles.create(article);
    return {
      id: newArticle.id,
    };
  }
);
// src/pages/articles.tsx
import { getArticles } from '../api';
import { useRequest } from 'ahooks';
import ArticleList from './components/ArticleList';

export default () => {
  const { data } = useRequest(() =>
    getArticles({
      query: {
        page: '1',
        per_page: '10',
      },
    })
  );

  return <ArticleList articles={data} />;
};

// src/pages/new.tsx
import { createArticle } from '../api';
import Editor from './components/Editor';
import { useState } from 'react';

export default () => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (article) => {
    setLoading(true);
    const { id } = await createArticle(article);
    setLoading(false);
    location.href = `/articles/${id}`;
  };

  return <Editor loading={loading} onSubmit={handleSubmit} />;
};

🧩 Templates

Midway Hooks currently provide the following templates:

You can create applications quickly with templates:

npx degit https://github.com/midwayjs/hooks/examples/<name>

For example, create a fullstack application with react:

npx degit https://github.com/midwayjs/hooks/examples/react

Contribute

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

We use pnpm to manage the project.

  • install dependencies
$ pnpm install
  • build
$ pnpm build
  • watch
$ pnpm watch
  • test
$ pnpm test

Contributors

Thanks goes to these wonderful people (emoji key):

Lxxyx
Lxxyx

💻 🖋 🤔 👀 ⚠️ 📖
Gao Yang
Gao Yang

💻 🖋 ⚠️ 📖
狼叔
狼叔

📖
Eward
Eward

💻
Linbudu
Linbudu

📖
rojer
rojer

💻
Thetiso
Thetiso

📖

This project follows the all-contributors specification. Contributions of any kind welcome!

About

Alibaba Open Source

License

MIT

More Repositories

1

midway

🍔 A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 🌈
TypeScript
7,125
star
2

pandora

A Manageable, Measurable and Traceable Node.js Application Manager represented by Alibaba powered by TypeScript
TypeScript
3,084
star
3

midway-faas

🔱 A simple and lightweight serverless framework
TypeScript
390
star
4

injection

Injection is a powerful inversion of control container that is widely used in the midway framework and brings good user experience.
TypeScript
164
star
5

midway-examples

show midway examples
JavaScript
147
star
6

subway-station

Node.js 地下铁分享资料汇总
115
star
7

pandora-dashboard

A local GUI Dashboard for Pandora.js
JavaScript
52
star
8

sandbox

Sandbox is a Node.js application monitoring platform, which allows the application to be deployed in its own environment, combined with the data source to generate a comprehensive application report.
TypeScript
50
star
9

midway-serverless-examples

TypeScript
36
star
10

midway-boilerplate

midway 系列脚手架仓库
TypeScript
24
star
11

cli

midway cli, provide local develop, test, and deploy functions through the two commands 'mw' or 'midway-bin'.
TypeScript
20
star
12

light-generator

a light generator for generate a boilerplate
TypeScript
15
star
13

sandbox-docker

一份基于 Docker Compose 的 Sandbox 部署配置
TypeScript
14
star
14

mwts

☂️ TypeScript style guide, formatter, and linter.
TypeScript
10
star
15

module-hook

TypeScript
9
star
16

midway-component

midway components
TypeScript
9
star
17

pgo

PGO(Profile Guided Optimization),是一种根据运行时 Profiling Data 来进行优化的技术。
TypeScript
7
star
18

metrics-common

A basic metrics implementation package for data aggregation computing in different scenarios.
TypeScript
6
star
19

midwayjs.github.io

midwayjs site
JavaScript
5
star
20

luckyeye

TypeScript
4
star
21

mwcc

🏜 MidwayJS Compiler Collection
TypeScript
4
star
22

pandora-reporter-open-falcon

pandora metrics reporter for open-falcon
TypeScript
4
star
23

midway-locate

locate your midway or midway-* project
TypeScript
3
star
24

logger

midway logger
TypeScript
3
star
25

event-bus

TypeScript
3
star
26

perf-bot

JavaScript
3
star
27

bundle-helper

midway bundle helper
TypeScript
3
star
28

lb

Go
3
star
29

pandora-example

Pandora.js examples
JavaScript
2
star
30

midway-upgrade

Upgrade midway to the latest version with 1-click
TypeScript
2
star
31

pandora-hook

Deprecated and move to pandora package
JavaScript
2
star
32

pandora-component-sandbox-log-hub-reporter

Pandora.js Component Sandbox Log Hub Reporter
TypeScript
2
star
33

umi-plugin-faas

JavaScript
2
star
34

dorapan

A mirror client sdk for Pandora.js
JavaScript
1
star
35

debugger

Currency Debug
TypeScript
1
star
36

midway-demo-lib

Some dependencies set for midway demo
1
star
37

jsdom-service-worker

Service worker global environment in Node.js
JavaScript
1
star
38

vue-cli-plugin-faas

Vue CLI Plugin For Midway FaaS
JavaScript
1
star
39

midway-code-mod

midway code operation
TypeScript
1
star
40

midway-next-site

TypeScript
1
star
41

vue-cli-plugin-midway-hooks

Provide midway hooks dev pack options to vue-cli
TypeScript
1
star
42

grpc-helper

TypeScript
1
star
43

glob

TypeScript
1
star
44

egg-ts-helper

JavaScript
1
star
45

mwtsc

it's a tsc wrapper
JavaScript
1
star