首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

写在 2021: 值得关注学习的前端框架和工具库

XState[4],不止适用于React,可以和Vue/Svelte/Ember这样的框架一起,也可以和RxJS这样的响应式库一起用。...) GraphQL-Yoga[43],Prisma团队出品,基于Apollo-Server,封装了一些特性,因此比Apollo-Server更容易上手,但功能却更强,比如原生支持文件上传这种。...还提供了中间件(注意和服务端框架的中间件区分)、鉴权(推荐GraphQL API的鉴权只使用它提供的)、扩展、指令、联合类型等。作者也很厉害,提供了和NestJS以及Prisma各自的集成包。...和Hasura一样能自动基于级联关系生成CRUD操作,同样提供了企业级支持。 工程化 打包/构建工具 Webpack5[55],新的缓存方案和模块联邦还是值得了解下的。...,以及必不可少的schematics:@ngrx/schematics等,最大的优势是和RxJS的深度集成。

4.2K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    写在2021: 值得关注学习的前端框架和工具库

    XState,不止适用于React,可以和Vue/Svelte/Ember这样的框架一起,也可以和RxJS这样的响应式库一起用。...GraphQL-Yoga,Prisma团队出品,基于Apollo-Server,封装了一些特性,因此比Apollo-Server更容易上手,但功能却更强,比如原生支持文件上传这种。...还提供了中间件(注意和服务端框架的中间件区分)、鉴权(推荐GraphQL API的鉴权只使用它提供的)、扩展、指令、联合类型等。作者也很厉害,提供了和NestJS以及Prisma各自的集成包。...和Hasura一样能自动基于级联关系生成CRUD操作,同样提供了企业级支持。 工程化 打包/构建工具 Webpack5,新的缓存方案和模块联邦还是值得了解下的。...,以及必不可少的schematics:@ngrx/schematics等,最大的优势是和RxJS的深度集成。

    2.9K10

    使用 GraphQL 进行 API 设计:从入门到实战

    后来,我接触了 GraphQL,它的灵活性和高效性让我眼前一亮。今天,我就来和大家聊聊如何使用 GraphQL 进行 API 设计,并通过一个实际项目代码示例,让你轻松上手。什么是 GraphQL?...定义 GraphQL Schema在 GraphQL 中,Schema 是 API 的核心,它定义了数据的结构和查询方式。...关系清晰,User 关联 Post,Post 关联 Comment。2. 搭建 GraphQL 服务器我们使用 Node.js 和 Apollo Server 实现一个简单的 GraphQL 服务器。...安装依赖npm init -ynpm install apollo-server graphql创建 server.jsconst { ApolloServer, gql } = require('apollo-server...运行与测试node server.js然后,我们可以使用 Apollo Playground 或 Postman 进行查询,比如:query { posts { title author

    13210

    prisma后端框架基本使用

    prisma后端框架基本使用 重点 定义:GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义) prisma logout prisma...account prisma help Prisma API基于数据模型进行部署,并为该文件中的每个模型公开CRUD和实时操作。...prisma generate schema概念:**也是定义各种数据模型,有三个东西Query,Mutation,Subscribtion,决定resolver有哪些 datamodel概念:定义底层数据库模式和表...数据模型中的每种类型都映射到数据库表(或无模式数据库的等效结构),并且将CRUD操作添加到GraphQL schema中。 Relations描述类型之间的relationship关系。...请注意,无法将双向关系的两端都设置为”CASCADE”。

    1.7K10

    「首席架构师推荐」React生态系统大集合

    GraphQL规范 GraphQL工具 GraphQL教程 GraphQL实现 服务器集成 数据库集成 Relay 中继一般资源 中继教程 中继工具 Apollo Apollo综合资源 影片 重要会谈...一个现代客户端模型抽象库 imvvm - React的不可变模型 - 视图 - 视图模型 morearty.js - 在纯JavaScript中更好地管理React valuable - React的不可变数据存储...ClojureScript中的不可变数据库和Datalog查询引擎 immstruct - 不可变数据结构,具有基于组件的库(如React)中从上到下属性的历史记录 seamless-immutable...Prisma - 一个高性能的开源GraphQL ORM-like层,可以在GraphQL服务器中完成繁重的任务。...脚本,用于更新中继API Apollo 基于GraphQL的数据堆栈 阿波罗综合资源 阿波罗官方网站 Apollo GitHub 阿波罗博客 Apollo Slack Apollo工具 react-apollo-redux

    12.4K30

    用ServBay快速构建下一代GraphQL应用

    在本指南中,我们将深入探讨如何利用ServBay一站式环境和Docker,构建可扩展的GraphQL微服务。...GraphQL是由Facebook开发的一种数据查询和操作语言,用于API,并作为运行时用于执行这些查询的服务器端软件的一种方式。它提供了一种更高效、强大和灵活的替代REST的方法。...主要功能包括声明式数据获取:使用 GraphQL,客户端可以在查询中精确指定所需的数据,包括字段和关系。这消除了传统 REST API 经常出现的数据过度获取和获取不足的问题。...高效的类型系统: GraphQL 拥有强大的类型系统,可以在 API 中定义数据的结构和关系。高效的数据加载功能: GraphQL 使客户端能够在单个请求中检索多个资源。...});第5步:定义GraphQL模式GraphQL模式是你的数据和操作(查询和变更)的类型系统的描述。

    18700

    适用于Node.js和TypeScript的完整ORM —— Prisma

    一个对象关系映射的新范例 Prisma 是适用于 Node.js 和 TypeScript 的下一代开源ORM。...它包含以下工具: Prisma Client——自动生成且类型安全的数据库客户端 Prisma Migrate——声明式数据建模和可自定义的迁移 Prisma Studio——现代化的用户界面,可查看和编辑数据...Prisma Client 没有模型实例的概念。相反,它有助于制定始终返回纯 JavaScript 对象的数据库查询。多亏了生成的类型,可以为查询获得了自动补全功能。...列表查询 // Find all posts const posts = await prisma.post.findMany() 关系查询 // Find all posts and include...从 GraphQL 到数据库 自从我们开始构建开发人员工具以来,作为一家公司,在过去的几年中,我们经历了许多主要的产品迭代和发展过程: Prisma 是我们从成为 GraphQL 生态系统的早期创新者中学到的经验教训以及我们从小型创业公司到大型企业的各种规模的数据层获得的见解的结果

    1.8K50

    【译】适用于Node.js和TypeScript的完整ORM —— Prisma

    一个对象关系映射的新范例 Prisma 是适用于 Node.js 和 TypeScript 的下一代开源ORM。...它包含以下工具: Prisma Client——自动生成且类型安全的数据库客户端 Prisma Migrate——声明式数据建模和可自定义的迁移 Prisma Studio——现代化的用户界面,可查看和编辑数据...Prisma Client 没有模型实例的概念。相反,它有助于制定始终返回纯 JavaScript 对象的数据库查询。多亏了生成的类型,可以为查询获得了自动补全功能。...列表查询 // Find all posts const posts = await prisma.post.findMany() 关系查询 // Find all posts and include...从 GraphQL 到数据库 自从我们开始构建开发人员工具以来,作为一家公司,在过去的几年中,我们经历了许多主要的产品迭代和发展过程: Prisma 是我们从成为 GraphQL 生态系统的早期创新者中学到的经验教训以及我们从小型创业公司到大型企业的各种规模的数据层获得的见解的结果

    1.9K01

    30分钟理解GraphQL核心概念

    值得注意的是,GraphQL中可以通过Scalar声明一个新的标量,比如: prisma(一个使用GraphQL来抽象数据库操作的库)中,还有DateTime和ID这两个标量分别代表日期格式和主键 在使用...总之,我们通过对象模型来构建GraphQL中关于一个数据模型的形状,同时还可以声明各个模型之间的内在关联(一对多、一对一或多对多)。...这里又涉及一个新的概念Query,GraphQL中使用Query来抽象数据的查询逻辑,当前标准下,有三种查询类型,分别是query(查询)、mutation(更改)和subscription(订阅)。...首先,我们分别以REST和GraphQL的角度,以Article为数据模型,编写一系列CRUD的接口,如下: Rest 接口 GET /api/v1/articles/ GET /api/v1/article...同时,基于这一点,当你在对一些未使用GraphQL的系统进行迁移时(比如REST),可以很好的进行增量式迁移。

    2K40

    GraphQL到底怎么使?看看智联前端团队技术沉淀

    GraphQL 模型 一套运行中的 GraphQL 分为三层: 左侧是客户端和发出的 Document 和其他参数。...操作模型:GraphQL 规范中对数据的操作做了定义,有三种,query(查询)、mutation(变更)、subscription(订阅)。...几乎是 Apollo GraphQL: Apollo 提供的实现和 GraphQL 生态,内容丰富,不止一套引擎,还提供了纯客户端使用(不局限JavaScript)多种工具。...上手快;apollo 实现则使用结构和行为分离的方式定义,且使用了 SDL,结构和行为使用类名形成对应关系,有一定的理解成本,好处是 Schema 结构更直观,且使用 SDL 定义 Schema 更快。...声明式的获取数据:结构化的 Document 使得得到数据后,对数据的操作提供了一定便利(如果能打通服务端和客户端的类型公用,使得客户端在开发时提供代码智能提示更好)。

    2.3K20

    30分钟理解GraphQL核心概念

    值得注意的是,GraphQL中可以通过Scalar声明一个新的标量,比如: prisma(一个使用GraphQL来抽象数据库操作的库)中,还有DateTime和ID这两个标量分别代表日期格式和主键 在使用...总之,我们通过对象模型来构建GraphQL中关于一个数据模型的形状,同时还可以声明各个模型之间的内在关联(一对多、一对一或多对多)。...这里又涉及一个新的概念Query,GraphQL中使用Query来抽象数据的查询逻辑,当前标准下,有三种查询类型,分别是query(查询)、mutation(更改)和subscription(订阅)。...首先,我们分别以REST和GraphQL的角度,以Article为数据模型,编写一系列CRUD的接口,如下: Rest 接口 GET /api/v1/articles/ GET /api/v1/article...同时,基于这一点,当你在对一些未使用GraphQL的系统进行迁移时(比如REST),可以很好的进行增量式迁移。

    98620

    GraphQL 入门详解

    简介 定义 一种用于API调用的数据查询语言 核心思想 传统的api调用一般获取到的是后端组装好的一个完整对象,而前端可能只需要用其中的某些字段,大部分数据的查询和传输工作都浪费了。...graphQL提供一种全新数据查询方式,可以只获取需要的数据,使api调用更灵活、高效和低成本。...schema 接下来我们定义schema,schema意为‘模式’,其中定义了数据模型的结构、字段的类型、模型间的关系,是graphQL的核心。...新建schema.js文件,首先定义两个数据模型:LaunchType(发射)和 RocketType(火箭)。注意字段的数据类型需要使用GraphQL定义的,不能使用js中的基本数据类型。...react-apollo 是react视图层的集成,graphql 用于解析graphql的查询语句。

    2.1K20

    GraphQL 从入门到实践

    它定义了字段的类型、数据的结构,描述了接口数据请求的规则,当我们进行一些错误的查询的时候 GraphQL 引擎会负责告诉我们哪里有问题,和详细的错误信息,对开发调试十分友好。...一些常用的解决方案如 Apollo 可以帮省略一些简单的解析函数,比如一个字段没有提供对应的解析函数时,会从上层返回对象中读取和返回与这个字段同名的属性。...graph-pack 是集成了 Webpack + Express + Prisma + Babel + Apollo-server + Websocket 的支持热更新的零配置 GraphQL 服务环境...,详细用法可以参考 Prisma 文档 ?...} } Hello world 总是如此愉快,下面我们来进行稍微复杂一点的查询 查询入口 users 查找所有用户列表,返回一个不可空但长度可以为 0 的数组,数组中如果有元素,则必须为 User 类型

    2.5K31

    干货 | 万字长文全面解析GraphQL,携程微服务背景下的前后端数据交互方案

    面向领域模型的后端需求,跟面向页面呈现的前端需求,出现了不可调和的矛盾。 我们曾经试图用 RESTful 风格的无线 API 聚合层来解决问题。...Apollo-GraphQL 在官方 GraphQL 的基础上进行了带有他们自身理念特点的封装和设计。...我们主要使用的是 Apollo-GraphQL 的 graphql-tools 和 apollo-server-koa 两个模块,并在此基础上,进行了符合我们场景的设计和改编。...GraphQL-BFF 的开发模式,应该跟 service 的领域模型,有一一对应的关系。然后通过某种形式,多个 services 自然整合到一起。...在开发 GraphQL-BFF 时,我们的 GraphQL-Service 跟后端基于领域模型的 Service,具有总体上的一一对应关系。

    3.8K21

    GraphQL-BFF:微服务背景下的前后端数据交互方案

    面向领域模型的后端需求,跟面向页面呈现的前端需求,出现了不可调和的矛盾。 在这种背景下,本着谁受益谁开发的原则。...Apollo-GraphQL 在官方 GraphQL 的基础上进行了带有他们自身理念特点的封装和设计。...我们主要使用的是 Apollo-GraphQL 的 graphql-tools 和 apollo-server-koa 两个模块,并在此基础上,进行了符合我们场景的设计和改编。...GraphQL-BFF 的开发模式,应该跟 service 的领域模型,有一一对应的关系。然后通过某种形式,多个 services 自然整合到一起。...在开发 GraphQL-BFF 时,我们的 GraphQL-Service 跟后端基于领域模型的 Service,具有总体上的一一对应关系。

    3.8K72

    GraphQL-BFF:微服务背景下的前后端数据交互方案

    面向领域模型的后端需求,跟面向页面呈现的前端需求,出现了不可调和的矛盾。 在这种背景下,本着谁受益谁开发的原则。...Apollo-GraphQL 在官方 GraphQL 的基础上进行了带有他们自身理念特点的封装和设计。...我们主要使用的是 Apollo-GraphQL 的 graphql-tools 和 apollo-server-koa 两个模块,并在此基础上,进行了符合我们场景的设计和改编。...GraphQL-BFF 的开发模式,应该跟 service 的领域模型,有一一对应的关系。然后通过某种形式,多个 services 自然整合到一起。...在开发 GraphQL-BFF 时,我们的 GraphQL-Service 跟后端基于领域模型的 Service,具有总体上的一一对应关系。

    1.6K20

    声明式数据建模、定义简单易懂:下一代 ORM 助你效率倍增 | 开源日报 No.102

    :为 Node.js 和 TypeScript 自动生成的类型安全查询构建器 Prisma Migrate:声明式数据建模和迁移系统 Prisma Studio:用于查看和编辑数据库中数据的 GUI 界面...这可以是 REST API、GraphQL API、gRPC API 或其他需要数据库支持的项目。...声明式数据建模 & 迁移系统:通过简单易懂的定义来创建你想要表达出来信息。同时也提供了强大而灵活性高效率架构设计能力。 提供查看和编辑数据的视图。...将引导程序 (如无分类器指导) 与采样器分离,并且采样器独立于模型本身。 对自编码网络进行了清理和改进。...提供了交互式界面和忽略路径等功能。

    27810

    如何在纯 JavaScript 中使用 GraphQL

    这是因为许多教程和示例代码似乎都基于这样一个假设,也就是说如果你在使用 GraphQL,就需要使用这些库。 但是,一个对 GraphQL API 的查询只不过是一个定制格式的 HTTP 请求而已。...你的 GraphQL 请求可以发送三段数据:query、operationName 和 variables。 query 是必需的,并且包含了(你猜对了)GraphQL 查询。...由于 GraphQL 是通过单个端点运行的,因此端点响应的数据完全取决于你的查询。这个查询需要正确格式化 GraphQL。想知道如何构建查询吗?请查阅关于如何编写 GraphQL 查询的教程。.../prisma-labs/graphql-request 作者介绍 Brian Rinaldi 是 StepZen 的一位开发倡导者。...Brian 在 Progress Software 和 Adobe 等公司已有 10 多年的经验,一直致力于开发者社区和开发者关系工作。

    3.6K10

    GraphQL 基础实践

    什么是 GraphQL GraphQL 是一款由 Facebook 主导开发的数据查询和操作语言, 写过 SQL 查询的同学可以把它想象成是 SQL 查询语言,但 GraphQL 是给客户端查询数据用的...以及 Meteor 团队开发的 Apollo,同时开发了客户端和服务端,同时也支持流行的 Vue 和 React 框架。...数据模型! 借助 ThinkJS 强大的数据 模型功能,我们只需要以数据集合的名称作为文件名建立文件并定义模型即可使用,相比 mongoose 原生的操作更为简单。...本例中我们实现 actor 和 movie 两组数据,在 model 目录下分别建立 actor.js 和 movie.js,并在里面定义模型。...回忆前面的数据模型定义,里面的 movies 和 actors 字段是一组另一个集合中数据的引用,目的是方便建立电影和演员信息之间的关系以及维护,在 Resolver 运行之后,movies 和 actors

    12.8K20
    领券