网站详情页怎么做的,万网如何上传网站,低价网站建设渠道,怎么在主机上的建设网站前言最近在知乎看到了这么个问题#xff1a;学完Vue还有必要学习React和Node吗#xff1f;[1]#xff0c; 有很奇妙的感觉#xff0c;因为我在最开始入门前端时#xff0c;也是以Vue入的门#xff0c;在“学完”Vue之后#xff0c; 我也有了这个疑问#xff0c;但当时的… 前言最近在知乎看到了这么个问题学完Vue还有必要学习React和Node吗[1] 有很奇妙的感觉因为我在最开始入门前端时也是以Vue入的门在“学完”Vue之后 我也有了这个疑问但当时的我没多想觉得“技多不压身”反正都是前端以后肯定用得上那就学呗——结果我一路到现在都是处于这么一种状态看到一个新的框架—看看文档和场景—嗯哼不错—学 虽然这样也造成我目前没有特别深入的方向比如21届的大佬们在工程化、微前端、AST、NodeJS等等方向都已经开始深耕我还在当弟弟追着各种新框架学但不得不说在学习新事物的过程中你会逐渐对这些框架进行分类比如我下面进行的归类提取他们的共同点这样在开始学习一个新东西时你通常已经拥有了可复用的经验比如在之前我感兴趣的研究了一些装饰器相关使得后面入门Nest/Angular等都特别快所以你的学习能力通常会是越来越强的。这个问题的题主很明显遇到了大部分同学入门前端时会遇到的困惑怎么这个还没学完又看到说那个才是主流的怎么这个版本还没吃透又来了一个break change的新版本怎么前端出框架的速度这么快很简单如果学有余力学就是了。如果学不动了就完全没必要盯着前沿方向学虽然前端网红圈不是吹的不要被“2021前端必备再不学你就out了” “学会这些立刻月薪30k”此类的标题迷花了眼觉得不学就被人卷死了。就盯着一个方向甚至是一个框架吃透在简历上“了解过A、B、C使用过D、E、F” 绝对不如 “深入了解A原理精通B架构实现C的collaborator/maintainer之一”。但有一点请注意学有余力不是因为当前方向浅尝辄止而学有余力是在当前方向足够深入同时还学有余力~对于不知道学啥的同学就有了这篇文章我会在接下来罗列我深入/尝试/了解过的认为值得学习的各个方向框架与工具类库并且对它们做一个简要介绍。对于我认为较为主流的则不会包含如Vue与React框架本身这种~。WebReact状态管理Jotai[2]原子化的状态管理思路就像React官方的Recoil亮点是API比Recoil简洁很多对Suspense模式支持好可以考虑用来代替useContext useReducer。IceStore[3]淘系Ice团队出品的状态管理库我在日常业务中使用最多的一个状态管理方案亮点是基于Immer来实现数据不可变整体的使用方案类似Dvastate reducer effects支持React Hooks写法TypeScript支持好。XState[4]不止适用于React可以和Vue/Svelte/Ember这样的框架一起也可以和RxJS这样的响应式库一起用。它对自己的定义也不包含状态管理的字样而是有穷状态机( finite state machines[5] )。暂时没有使用过不做展开介绍。SWR[6]、React-Query[7]、useRequest[8]网络请求的状态管理、缓存、竞态处理等。生态GatsbyJS[9]基于React的静态页面生成器非常快。优点是有非常多的插件plugin和模板starter并且支持很多CMS如Contentful、Neltify等适合喜欢在线写文档的。我正在考虑把博客迁移到GatsbyJS CMS的方案这样随便找一台电脑就能写博客了。React-Testing-Library[10]React测试库个人感觉和Enzyme代表了两个不同方向而RTL更符合直觉。RTL还提供了Hooks的测试库给力奥。AHooks[11]阿里的React Hooks库我日常开发经常用到其中的Hooks。Huse[12]百度工程效能团队的Hooks库同样很强大里面的很多实现都比较hack大量使用了useRef等适合进阶阅读。Dumi[13]蚂蚁出品的React文档生成器。Immer[14]思路巧妙的数据不可变方案。AngularAngular[15] 是我最近正在学的框架在开始前我其实是拒绝的但写了两个例子之后我觉得真香你可能听过它不好的一面笨重、学习成本高、断崖式更新... 可能也听过它好的一面不需要再自己挑选路由、状态管理方案、请求库等、依赖注入很香适合后端程序员快速上手...。在最开始我就是处在这么个情况直到我跟着官方教程走完第一个demo我觉得我一段时间内不会再学Vue3了对不起尤大。整体的感受非常舒服模块划分我本人非常喜欢模块化的思想个人认为React的是组件化而不是模块化各个模块完全自己干自己的不管是多级路由还是复杂数据流都显得结构清晰。模板语法在用Vue的时候我没有感觉到模板语法有多好可能是因为模板和逻辑写在一个文件里总觉得不纯粹。但在Angular中模板被单独放一个html文件组件用Class的语法写我就莫名觉得爽快。大而全这一点见仁见智能接受的会觉得很舒服并且团队做定制也特别容易schematics、generators、builders各种规范是真的能确保不会一人一个写法。学习成本低情商学Angular还要学TS和RxJS高情商学了Angular我就会TS和RxJS了深入TS类型编程推荐我之前写的这篇 TypeScript的另一面类型编程[16]具体的不做展开介绍了真的让我滔滔不绝安利Ng这篇文章就收不住了所以有兴趣的同学欢迎去体验下。跨端Taro[17]京东凹凸实验室出品应该是我目前见到支持最多端的跨端框架但问题也不少这个没办法一直没有用Taro写过一个完整应用有机会会试试的。Rax[18]淘系Ice团队出品轻量、易用、高性能。同样是淘系到集团广泛使用的跨端方案。Remax[19]小程序跨端框架基于React亮点是运行时方案大部分跨端方案都是编译时还有Rax这种两套方案都支持的。Ionic[20]出现比较早的一个跨端方案最开始只支持Angular现在还支持了React和Vue暂时没有使用过。目前的了解是性能与Vue支持上存在一些问题所以Angular YES。据说是曾经培训班的标配Electron[21]不做介绍。NwJS微信小程序开发者工具就是用这个写的和Electron是同一个维护者(zcbenz[22])。Flutter[23]不做介绍。NodeJSNestJS[24]一个大而全的Node框架就像NodeJS里的Angular实际上作者也是受到了Angular的影响很多装饰器都和Ng中的同名。你可能同样在犹豫要不要学这玩意我的意见是学因为确实NodeJS中目前没有特别全面的框架虽然NestJS在Spring面前也是弟弟。NestJS基于Express也有Fastify的适配同样预置好了各种能力并且能很好的兼容Express中间件生态。我正在捣鼓的新项目就是基于Angular Nest越写越爽。如果你打算Angular和Nest都学我的建议是先学Nest这样入门Angular的学习路线会更平滑一点。如果你此前没有接触过依赖注入可以瞅瞅我之前写的这篇走近MidwayJS初识TS装饰器与IoC机制[25]MidwayJS[26]淘系Node架构出品整个阿里都在用的Node框架同样基于装饰器体系你可以理解为复杂度与完善性方面低于NestJS但是高于Egg和Koa。Midway-Serverless[27]支持阿里云/腾讯云的Serverless框架个人觉得是目前最好用的一个Serverless框架了虽然Serverless[28]框架不是真·Serverless支持微信扫码登录也很顶。Midway-Hooks[29]见下面的介绍ts-node-dev[30] tsconfig-paths[31]你是否受够了ts-node的配置是否难以忍受为了自动重启还需要为nodemon配置ts-node作为执行请使用ts-node-dev -r tsconfig-paths/register xxx/index.ts这一行命令即可~TypeORM[32]最爱的ORM没有之一装饰器 YES也是目前NodeJS社区使用最多的两个ORM之一另一个是Sequelize但是TS支持只能说emmm社区的TS实现也只能说一般。Query Builder、级联、支持依赖注入非常推荐试一试。PM2[33]NodeJS进程管理工具零宕机重启、支持fork和cluster模式、blabla...更????的地方在于提供了很geek的可视化界面如我的服务器上截图image-20210304101632590Prisma下一代ORM不仅仅是ORM。很新颖的使用方式我是真的第一次见TS支持非常好Schema定义的方式也比传统ORM各个实体定义分开的方式清晰很多有兴趣的可以瞅瞅我写的这个demoPrisma-Article-Example[34]文章在哪呢当然是鸽在写了。Serverless这个就不做过多介绍了懂的自然懂。强烈建议至少了解一下BFFBackend For Frontend这里不做介绍。GraphQL夹带私货时间到 GraphQL是我稍微比较深入一点的方向这里相关的类库也会多一些。ClientApollo-Client[35]来自ApolloGraphQL[36]的作品只有React版本是官方团队在维护Vue版本的被挪到Vue团队了(VueUI有一部分就是基于Apollo-Client-Vue[37]写的)Angular版本[38]的似乎是个人作品。强大的地方在于实现了一套GraphQL的缓存方案GraphQL不像REST API那样可以用URL作为缓存的key它只有单个schema要缓存必须基于Schema拍平整个数据结构然后再基于各个field进行缓存控制。Relay[39]FaceBook出品所以也比较受到推崇我记得看到过原因是这样GraphQL如果要改啥才刚进入草案Relay团队就已经提供了支持但上手没有Apollo-Client那么容易。GraphQURL[40]Hasura介绍见下面的Engine部分出品没使用过。GraphQL-Zeus[41]小而美的GraphQL客户端集成了Code-Generator能力。ServerApollo-Server[42]ApolloGraphQL出品提供了常见Node框架的实现Koa/Express/Hapi/Fastify等亮点是提供了getMiddleware这个方法可以把整个GraphQL Server以中间件的形式挂载到一个Node应用上我就是使用这种方式来同时提供REST和GraphQL两套API的但需要注意某些中间件的配置需要ignore掉挂载的路径GraphQL-Yoga[43]Prisma团队出品基于Apollo-Server封装了一些特性因此比Apollo-Server更容易上手但功能却更强比如原生支持文件上传这种。LibsTypeGraphQL[44]最爱的GraphQL工具库没有之一让你用TS的Class和装饰器来定义GraphQL Type和TypeORM Class-Validator一起用非常愉悦当然你需要能接受满屏的装饰器。还提供了中间件注意和服务端框架的中间件区分、鉴权推荐GraphQL API的鉴权只使用它提供的、扩展、指令、联合类型等。作者也很厉害提供了和NestJS以及Prisma各自的集成包。GraphiQL[45]可视化的GraphQL API调试工具直观的查看你的Schema、发起请求、查看问题有一个增强版本是支持通过点击单选框生成查询语句一时没找到。GraphQL-Playground[46]类似上一个但是更美观一些支持跟踪请求链路Tracing以及 Apollo Federation[47] 插件的集成Query Plan。GraphQL-Code-Generator[48]很强大的工具从.graphql文件到语言可以直接使用的方法/类型定义这个思想实际上各个语言都有如Dart和Ruby等。在TS中这个工具的主要能力就是生成TS的类型定义同时它的插件体系还提供了更多的额外能力如Apollo-Client的插件让你可以直接使用封装好的的useXXXQuery等前端连查询语句都不用写了又或者基于Schema生成TypeGraphQL的Class定义这一波反向生成我直接好家伙。DataLoader[49]解决GraphQL Resolver深度优先执行导致的N1问题详见GraphQL N1 问题到DataLoader源码解析[50]GraphQL-Tools[51]提供了一堆让你对GraphQL Schema为所欲为的方法从Directive到Resolver到Schema都给你安排的明明白白。但我只是比较简单的使用过用于和TypeGraphQL一起实现自定义指令详见 这里[52]EngineGraphQL Engine其实是一个非常神奇的方向有点像REST那边的各种自动生成REST API的工具。简单地说你提供一个数据库GraphQL Engine会为你基于数据库的结构可能这就是目前都支持PostgreSQL的原因生成GraphQL Schema、API、查询语句Query/Mutation/Subscription都支持并且是根据你的Schema组合来的等可以说是非常猛了。Hasura[53]功能比较全的一款支持PostgreSQL和MSSQL除了上面提到的以外还提供鉴权与触发器类似Serverless中的触发器以及把外部已经独立部署的GraphQL API也纳入管控。它提供的GraphiQL就是我上面提到的增强版本image-20210304104225150Hasura还提供了前面说的GraphQURL作为clienthasura-code-gen来从Hasura服务生成TS代码所以基本上可以用Hasura的生态做为一套方案了包括我也有看到过一些创业公司就在使用Hasura有提供企业级支持。PostGraphile[54] 只支持PostgreSQL优势在于性能与插件系统来实现高度定制还提供了数据库工具。和Hasura一样能自动基于级联关系生成CRUD操作同样提供了企业级支持。工程化打包/构建工具Webpack5[55]新的缓存方案和模块联邦还是值得了解下的。Vite[56]关于Vite的文章太多了我感觉只要入门了前端就肯定听说过。Parcel[57]最大的亮点是零配置我在一些中小型项目使用过很适合中小型规模以及只是想跑一下demo的场景速度也挺快。不会有人为了跑Demo还CRA从头建一个项目吧SnowPack[58]原SkyPack好像是最早应用ES Module特性到开发服务器的打包工具。ESBuild[59]基于Go是真的非常快。但不支持装饰器语法[60]所以我用的比较少。SWC[61]基于Rust同样非常快但是没用过。Rollup[62]前端轮子哥Rich Harris[63]的作品我还挺喜欢它的思想。了解到的比较多的用途是用来打包NodeJS的库。CI/CDGitHub Actions[64]个人觉得CI/CD只需要这个就够了上手也非常快workflow、job、task、stepdone而且actions市场有各种大神们已经写好的action让你可以快速搭建一个严谨的工作流。比如写入环境变量—使用NodeJS 10/12/14Windows/Linux/MacOS 最新版本每个组合跑一遍构建流程确保在每个组合都能构建成功—跑一遍Lint单元测试上传测试覆盖率—跑一遍ssh sync action把构建产物上传到自己服务器。TravisCI[65]CircleCI[66]GitLabCI[67]GitLab最大的优势是可以自建Runner也是不错的设定~静态页面托管最常见的方式使用这些服务托管静态页面然后域名解析到自己的。Vercel原zeit/now[68]Surge[69]GitHub Pages[70]Netlify[71]云平台Heroku[72]可以用来部署你的API白嫖YYDSApollo Studio[73]ApolloGraphQL提供的GraphQL API管理工具配合Apollo-Server的插件可以实现埋点统计、可视化分析等功能。Vercel Functions[74]可以理解为是只需要Vercel账号就能白嫖的Serverless Function并且不需要f.yml这种配置。Netlify Functions[75]类似上一个但是收费。Nx Cloud[76]Nx详细介绍见下面提供的云平台主要功能是在项目达到一定规模导致构建耗时较长时避免每个开发人员要重新在自己本地构建一次项目而是从云端下载已构建完成的文件以此来提高效率。MonorepoNx[77]我在用这个作为业务项目的Monorepo管理到目前感觉都挺好尤其是Angular Nest项目基于后端的GraphQL Schema生成TypeScript的类型定义和函数GraphQL-Code-Generator前端直接import { QueryDocument } from app/graphql, 爽还支持React、Gatsby、NextJS、普通Web应用等甚至集成好了Jest、Cypress、StoryBook等。Lerna[78]我用这个作为工程项目的Monorepo管理。Yarn Workspace[79]Yarn提供的Monorepo工具有看到实践是用Lerna来管理版本Yarn Workspace管理依赖。PNPM[80]实际上是包管理工具但内置了Monorepo支持我也在用这个强烈安利想要了解可以看看三元的这篇文章为什么现在我更推荐pnpm而不是 npm/yarn 一体化框架一体化框架指的是 你的前后端项目放在同一个repo里后端是Node同时前端直接调用在后端定义的方法由框架在编译时去自动的把前端对后端的方法调用转换成HTTP请求。这是最近前端还挺火热的一个方向主要的基于Node的一体化框架主要有这么几个BlitzJS[81]前端NextJS后端Prisma中间基于GraphQL但是实际上你不会直接去参与GraphQL Schema的编写不需要定义Resolver、ObjectType这些东西因为BlitzJS内部用useQuery和useMutation抹掉了中间的调用过程和Apollo的hooks类似但不完全相同Apollo的useQuery接收的是GraphQL DocumentBlitzJS中的则接收的是后端方法其中会直接db.entity.create()这样去写数据库。RedwoodJS[82]基于React Prisma GraphQL整体类似于Blitz但文档全面的多最佳实践、测试、迁移、路线规划都有非常详细的介绍甚至还介绍了框架名字的由来。但是由于暂时对TypeScript支持不是很好所以我还没体验过。简单来说它和BlitzJS一样都是在JAMStack这一理念上的革新者。Midway-Hooks[83]繁易[84] 学长的作品同样是淘系乃至阿里集团内广泛使用的框架。应该是三者中最适合国内场景的框架了Serverless Vue / React Hooks优势也不少跨前端框架、跨Serverless平台、Hooks代码更好维护与复用、更符合直觉的API定义 NextJS的API Routes[85]总感觉差了点什么。通用RxJS[86]ReactiveX实际上是一个“理念”在各个语言都有相关的实现如RxDart[87] RxJava[88] RxPy[89] RxGo[90] 等等在对于异步的处理上是非常有帮助的一个库但有一定的学习成本比如海量的操作符与操作符组合想要熟练的搭配出适合当前场景的操作符组合需要一定的使用经验我也还在入门阶段。Redux-Observable[91] Redux的RxJS中间件。Reactive.How[92]生动的展示RxJS Observable在操作符管道中的流动入门期间使用有奇效。NgRx[93]很好用的Angular的状态管理方案写法和Redux非常像也是action reducer state所以几乎可以没有什么成本的上手。秉承了Angular的思想提供了一整套的集成和Angular Router的集成ngrx/router-store对于集合类型的适配ngrx/entity副作用管理ngrx/effects以及必不可少的schematicsngrx/schematics等最大的优势是和RxJS的深度集成。E2E测试Cypress[94] / PlayWright[95]说实话很少能看到业务项目有完备的单元测试和集成测试更不要说E2E测试了因为的确要花不少时间。但还是推荐了解一下毕竟我个人是喜欢这种稳定性保障的工作的并且看着一个个测试用例通过也很有成就感。StoryBook[96]UI组件的测试库亮点在提供隔离的沙盒来为组件进行测试支持大部分的Web框架。Babel[97]我下一个准备开始学习的方向之一因为想通过Babel来简单了解一下前端世界中的AST。Tailwind[98]原子化CSS的集大成者喜欢的人爱不释手。Husky[99]快速配置Git Hooks多人团队协作中确保规范的重要手段通常会这样使用pre-commit执行linter和prettiercommit-msg检查commit信息pre-push构建、打tag、发包、运行测试等等。LowDB[100]demo中常用的JSON数据库亮点在使用Lodash的API来操作数据库。JSON-Server[101]写demo神器从JSON文件快速得到一个REST API和Husky、LowDB同一个作者。TypeStack[102]包括Class-Validator[103]校验、Class-Transformer[104]TS类与普通对象之间的转化、操作、TypeDI[105]一个实现极简的依赖注入库、Routing-Controllers[106]装饰器路由等一组TS工具库均基于装饰器体系。GenQL[107]从GraphQL Schema生成Query Builder比较新所以还不怎么火我挺看好这个库的。GraphQL-Voyager[108]可视化你的GraphQL API比如我的这个demo: Voyager[109]。Majestic[110]Jest的GUI直观的查看你的测试用例。scully[111]Angular的静态页面生成框架我原本以为会叫NgxtJS?以上就是我 关注/接触/尝试/深度使用 过的大部分框架与工具库了如果你恰好学有余力又不知道该学啥不妨就从这里找找感兴趣的最后再打个广告我所在的组阿里巴巴-淘系技术部-前端架构正在招2022级的前端实习生如果你有兴趣或恰好知道身边有这样的同学欢迎投递简历到我的邮箱linbuduqq.com。参考资料[1]学完Vue还有必要学习React和Node吗: https://www.zhihu.com/question/446723495/answer/1756515485[2]其余参考资料省略点击阅读原文可跳转你好我是若川江西人~(点击蓝字了解我)历时一年只写了一个学习源码整体架构系列 有哪些必看的JS库jQuery、underscore、lodash、sentry、vuex、axios、koa、redux关注若川视野回复pdf 领取优质前端书籍pdf回复1可加群长期交流学习我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以 分享、点赞、在看 呀^_^另外欢迎留言交流小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读也可以星标我的公众号便于查找
