preface

Is it necessary to learn React and Node after learning Vue? , there is a wonderful feeling, because I started in the beginning of the front end, is also to Vue into the door, after “learning” Vue, I also have similar questions, but at that time I did not think much, think “skills do not pressure body”, anyway are the front end, certainly use later, that go to school –

As a result, I’ve been in the same state all the way up to now: seeing a new framework — looking at documentation and scenarios — HMMM, nice — learning! Although there are no special cause I also the direction of the in-depth, such as the 21st session of the bosses in engineering, micro front, AST, NodeJS, and so on direction have begun to agriculture, I also learned in chasing the new framework When my brother, but have to say, in the process of learning new things, you will gradually classifying these frameworks (for example, I classified the below), Extract the common ground, so that when you start learning something new, you usually have a reusable experience (for example, I have studied some decorators in the past, which makes it very quick to get started with Nest/Angular, etc.), so your learning ability will usually get stronger and stronger.

The main topic of this question is obviously the confusion that most students will encounter when they get into the front end: why this version is not finished and then see that which is the mainstream, why this version is not fully understood and then come a new version of break change, why the front end frame is so fast?

Quite simply, if you want to learn, learn. If you can’t learn, there is no need to stare at the front direction to learn (although the front network red circle is not blowing), do not be “2021 front essential! Don’t learn you out!” “If you learn this, you’ll get 30K a month!” This kind of title fan spent an eye, feel not to learn to be rolled dead. A resume that says “knows A, B, C, D, E, F” is better than one that says “Has in-depth knowledge of A principles, collaborator/ Maintainer of B architecture.”

But there is one thing to note: learning strength is not learning strength by dabbling in the current direction, but learning strength by going deep enough in the current direction

For those of you who don’t know what to learn, in the following part of this article, I will list the various orientation frameworks and tool libraries that I think are worth learning, and give a brief introduction to them.

Not for what I consider mainstream (like the Vue and React frameworks themselves).

Web

React

State management

  • Jotai has a much simpler API than Recoil. It supports better Suspense mode and can be used as an alternative to useContext + useReducer.
  • IceStore, a state management library produced by Ice team, is the state management program I use most in daily business. The highlight is to realize Immer immutable data. The overall use program is similar to Dva, state + Reducer + Effects, support React Hooks. TypeScript support is good.
  • XState, not just React, can be used with frameworks like Vue/Svelte/Ember, as well as with responsive libraries like RxJS. It does not define itself as state management, but as Finite State machines. It has not been used for the time being and will not be introduced.
  • SWR, React-Query, useRequest, network request state management, caching, race handling, etc.

ecological

  • GatsbyJS, static page generator based on React, very fast. The advantage is that there are many plugins and starter, and support for many CMS (such as Contentful, Neltify, etc.), suitable for those who like to write documents online. I am thinking of migrating my blog to GatsbyJS + CMS, so that I can write my blog on any computer.
  • React testing-library, React testing-library, personal feeling, and Enzyme represent two different directions, while RTL is more intuitive. RTL also provides a library for Hooks tests, Gelio.
  • AHooks, ali’s React Hooks library, which I use frequently in my daily development.
  • Huse, the Hooks library from The Baidu engineering performance team, is also very powerful, many of the implementations are hacks (heavy use of useRef, etc.), suitable for further reading.
  • Dumi, the React document generator from Ant.
  • Immer, clever data immutable scheme.

Presents!

  • Angular is the framework I’m learning recently. I actually rejected it before I started, but after writing two examples, IT smells good! You’ve probably heard about its downsides: clunky, expensive to learn, cliff-like updates… You’ve probably heard the good things about it: no need to pick your own routes, state management solutions, request libraries, etc. Dependency injection is nice for back-end programmers to get started quickly… . I was in this situation at the beginning, and until I finished the first demo with the official tutorial, I didn’t think I would learn Vue3 again for a while (sorry Utah). The overall feeling is very comfortable:

    • Module division. I like the idea of modularization very much (PERSONALLY, React is componentalized rather than modular). Each module is completely independent, and the structure is clear whether multi-level routing or complex data flow.

    • Template syntax, I don’t feel much better about template syntax when using Vue, probably because templates and logic in one file don’t feel pure. But in Angular, templates are placed in a separate HTML file and components are written in Class syntax, which somehow makes me feel better.

    • It’s easy for teams to customize (schematics, generators, builders), and specifications really ensure that you don’t have to write it all by yourself.

    • Learning cost, low EMOTIONAL intelligence: Learning TS and RxJS to learn Angular; Emotional Intelligence: Angular makes TS and RxJS possible!

      Digging into type TS programming suggests the other side of TypeScript I wrote earlier: type programming

  • If I don’t elaborate on the details, I can’t stop talking about amway Ng, so if you are interested, please try it.

Across the

  • Taro, produced by Jingdong Cave Lab, should be the cross-end framework I have seen the most support (but there are also many problems, this can not be done). Taro has not written a complete application, I will try if I have the opportunity.
  • Rax, produced by TAO Ice team, is lightweight, easy to use and high performance. It is also Amoy department to the group widely used cross-end solutions.
  • Remax, a cross-platform framework for small programs based on React, highlights run-time solutions (most cross-platform solutions are compile-time, and Rax supports both).
  • Ionic, one of the earliest cross-end solutions, initially supported only Angular, but now supports React and Vue. It has not been used yet. The current understanding is that there are performance and Vue support issues (hence Angular YES). Is it said to have been a standard training class?
  • Electron, no introduction.
  • NwJS, wechat apet developer tool is written with this, and is the same VCR as Electron (ZcBenz).
  • Flutter, no introduction.

NodeJS

  • NestJS, a large and comprehensive Node framework, is like Angular in NodeJS. In fact, the author is also influenced by Angular, and many decorators have the same name as Ng. You may also be hesitant to learn this, but here’s my advice: learn!

    Because it’s true that NodeJS currently doesn’t have a particularly comprehensive framework (although NestJS is a younger sibling to Spring). NestJS is built on Express (and with Fastify adaptation), with the same pre-built capabilities, and works well with the Express middleware ecosystem. The new project I’m working on is based on Angular + Nest, and the more I write, the better IT gets.

    If you plan to learn Both Angular and Nest, my advice is to learn Nest first, so that the learning path to Angular will be smoother.

    If you haven’t been exposed to dependency injection before, check out my previous post: Getting Close to MidwayJS: Getting to know TS Decorators and IoC mechanisms

  • MidwayJS, the Amoy Node framework, is also based on the decorator system, which you can understand as less complex and more complete than NestJS, but higher than Egg and Koa.

    • Midway-Serverless support for Alibaba Cloud/Tencent Cloud is the best Serverless framework to use at present, although Serverless support for wechat scan login is also very good.
    • Midway-Hooks, see introduction below

  • Ts-node-dev + tsconfig-paths, are you fed up with ts-Node configuration? Is it unbearable that you need to configure ts-Node for the Nodemon as the execution for automatic restart? Run the ts-node-dev -r tsconfig-paths/register XXX /index.ts command

  • TypeORM, one of the favorite ORMs (decorator YES), is currently one of the two most used orMs in the NodeJS community (the other is Sequelize, but TS support is only EMMM, and the community’s TS implementation is mediocre). Query Builder, cascading, dependency injection support, highly recommended.

  • PM2, NodeJS process management tool, zero downtime restart, support for fork and cluster mode, Blabla… 🐂 provides a geeky visual interface, as shown in the screenshot on my server:

  • Prisma, the next generation of ORM, is not just ORM. It’s a very new way to use it (I’m really seeing this for the first time), TS supports it very well, and the way Schema is defined is much clearer than the way ORM defines entities separately. If you’re interested, check out prisma-article Example

    Where is the article? Pigeons are writing, of course.

  • Serverless, I will not introduce it too much, but I will understand it naturally. (It’s highly recommended to at least check it out)

  • BFF, Backend For Frontend, is not described here.

GraphQL

Entrap time to GraphQL is where I go a little deeper, with more libraries.

Client

  • Apollo-client is from ApolloGraphQL, only the React version is maintained by the official team, the Vue version has been moved to the Vue team (VueUI was partly written based on Apollo-client-Vue), the Angular version seems to be a personal work. The power of GraphQL is to implement a cache scheme. (Unlike REST apis, GraphQL has only a single schema. To cache, the entire data structure must be leveled based on the schema, and then the cache is controlled based on each field.)
  • Relay, a FaceBook product, was also popular (I remember reading that the Relay team was already providing support for GraphQL’s changes as soon as they were drafted), but it wasn’t as easy to get started with as Apollo-Client.
  • GraphQURL, Hasura (see Engine below), never used.
  • Graphql-zeus, a small and beautiful GraphQL client, integrates code-Generator capabilities.

Server

  • Apollo – Server: ApolloGraphQL provides an implementation of the common Node frameworks (Koa/Express/Hapi/Fastify, etc.) with getMiddleware. It is possible to mount the entire GraphQL Server to a Node application as middleware. (THIS is how I used to provide both REST and GraphQL apis, but it is important to note that some middleware configurations need to ignore the mount path.)
  • Graphql-yoga, from Prisma, is based on Apollo-Server and encapsulates features that make it easier to use than Apollo-Server, but more powerful, such as native support for file uploads.

Libs

  • TypeGraphQL, one of the most popular GraphQL libraries, lets you define GraphQL Types with TS classes and decorators, which is very pleasant to use with TypeORM class-Validator (of course, you need a decorator that can accept a full screen). It also provides middleware (note the middleware distinction from the server framework), authentication (it is recommended that the GraphQL API only use what it provides for authentication), extensions, instructions, union types, and more. The authors are also good enough to provide their own integration packages with NestJS and Prisma.
  • GraphiQL is a GraphQL API debugging tool that allows you to visually view your Schema, initiate requests, and query queries.
  • Graphql-playground, similar but more aesthetically pleasing, supports Tracing request links and integration with the Apollo Federation plugin Query Plan.
  • GraphQL-Code-Generator, very powerful tools from.graphqlThe idea of method/type definitions that can be used directly from file to language is practically universal in languages such as Dart and Ruby. The main capability of the tool in TS is to generate TS type definitions, while the plugin architecture provides additional capabilities, such as the Apollo-Client plugin, which allows you to use the packaged version directlyuseXXXQueryAnd so on, the front end even query statements do not need to write; Or generate TypeGraphQL Class definitions based on Schema, this wave of reverse generation I directly good guy.
  • DataLoader: Solve the GraphQL N+1 problem caused by depth-first execution of GraphQL Resolver
  • Graphql-tools provides you with a bunch of methods to do whatever you want with GraphQL Schema, from Directive to Resolver to Schema. But I’ve only used it briefly to implement custom directives with TypeGraphQL, as described here

Engine

GraphQL Engine is actually a fantastic direction, kind of like the REST side of the various tools that automatically generate REST apis. Simply put, you provide a database, and GraphQL Engine gives you a database based structure (maybe that’s why PostgreSQL is currently supported?). Generate GraphQL Schema, API and the Query (Query/Mutation/Subscription support, and according to your Schema combination), etc., can be said to be very fierce.

  • Hasura supports PostgreSQL and MSSQL, provides authentication and triggers (similar to Serverless triggers), and manages the GraphQL API as well. The GraphiQL it provides is the enhanced version I mentioned above:

    Hasura also provides GraphQURL as a client, hasura-code-gen to generate TS code from the Hasura service, so you can basically use the Hasura ecosystem as a set of solutions. I’ve also seen some startups using Hasura (with enterprise-level support).

  • PostGraphile, which supports PostgreSQL only, benefits from performance and a plugin system for high customization, as well as database tools. As with Hasura, CRUD operations are automatically generated based on cascading relationships, as well as enterprise-level support.

engineering

Package/build tools

  • Webpack5, the new caching scheme and module federation are still worth checking out.
  • Vite, there are so many articles about Vite, I feel as long as the beginning of the front-end must have heard.
  • Parcel, which I’ve used for small to medium sized projects, has zero configuration. It’s great for small to medium scale and for scenarios where you just want to run a demo, and it’s fast. (No one would build a CRA project from scratch just to run a Demo.)
  • SnowPack, originally SkyPack, seems to have been the first packaging tool to apply ES Module features to development servers.
  • ESBuild, based on Go, is really fast. But there is no support for decorator syntax, so I use it sparingly.
  • SWC, based on Rust, is also fast, but unused.
  • Rollup by Rich Harris. I kind of like the idea. One of the most known uses is to package NodeJS libraries.

CI/CD

  • GitHub Actions: Workflow, Job, Task, step, done! Also, the Actions marketplace has a variety of actions that have been written by the gods so that you can quickly build a rigorous workflow. Such as: Write environment variables — use NodeJS 10/12/14, Windows/Linux/MacOS latest version, run the build process for each combination to make sure it builds successfully in each combination — run Lint+ unit tests, upload test coverage — run SSH Sync Action, Upload the build artifacts to your own server.
  • TravisCI
  • CircleCI
  • GitLabCI, GitLab’s biggest advantage is that it can be built by itself, Runner is also a good setting ~

Static page hosting

The most common way: use these services to host static pages and then resolve the domain name to its own.

  • Vercel (originally @zeit/now)
  • Surge
  • GitHub Pages
  • Netlify

Cloud platform

  • Heroku can be used to deploy your API
  • Apollo Studio, ApolloGraphQL API management tool, with Apollo-Server plug-in to achieve buried point statistics, visual analysis and other functions.
  • Vercel Functions are Serverless Functions that only need a Vercel account and do not require an F.ml configuration.
  • Netlify Functions, similar to the previous one, but charged.
  • Nx Cloud, the Cloud platform provided by Nx (detailed below), is designed to improve efficiency by avoiding the need for each developer to re-build a project locally when the project reaches a certain size and takes a long time to build. Instead, the built files are downloaded from the Cloud.

Monorepo

  • NxI’m using this as Monorepo management for business projects, and I’m having a good time so far, especially the Angular + Nest project, which generates TypeScript type definitions and functions (GraphQL-code-generator) based on GraphQL Schema on the back end. Front end directlyimport { QueryDocument } from "@app/graphql", great! It also supports React, Gatsby, NextJS, common Web applications, and even integrates Jest, Cypress, StoryBook, etc.
  • Lerna, I use this as Monorepo management for engineering projects.
  • Yarn Workspace, the Monorepo tool provided by Yarn, has seen the practice of using Lerna to manage versions. Yarn Workspace manages dependencies.
  • PNPM is actually a package management tool, but it has built-in Support for Monorepo. I also use this one (strong Amway).

Integration framework

An integrated framework means that your front-end and back-end projects reside in the same REPO (Node is the back-end), while the front-end calls the methods defined by the back-end, and the framework automatically converts the front-end to back-end method calls into HTTP requests at compile time. This is a very hot front end direction recently, the main Node-based integration framework is mainly as follows:

  • BlitzJSNextJS front end, Prisma back end, GraphQL in the middle, but actually you don’t have to write GraphQL Schema directly. You don’t need to define Resolver, ObjectType, etc. Because BlitzJS internally erases the call process with useQuery and useMutation (similar to, but not identical to, Apollo hooks where useQuery receives GraphQL Document and BlitzJS receives backend methods), Which will directlydb.entity.create()Write the database this way.
  • RedwoodJS, based on React + Prisma + GraphQL, is similar to Blitz in general, but much more fully documented, with detailed introduction to best practices, testing, migration, route planning, and even the origin of the framework’s name. But BECAUSE TypeScript support isn’t very good at the moment, I haven’t tried it. In short, it’s as much an innovator on the idea of JAMStack as BlitzJS.
  • Midway-Hooks, the work of Fan Yi, is also widely used in Amoy and ali Group. Serverless + Vue/React + Hooks Serverless + Vue/React + Hooks More intuitive API definition across front-end frameworks, across Serverless platforms, Hooks code for better maintenance and reuse (NextJS API Routes always feels a bit off).

general

  • RxJS, ReactiveX is actually a “concept”, has related implementation in various languages, such as RxDart, RxJava, RxPy, RxGo and so on, is a very helpful library for asynchronous processing, but there are certain learning costs, such as a large number of operators and operator combinations, It takes some experience, and I’m still getting started, to be able to skillfully match the operator combinations that are appropriate for the current scenario.

    • Redux-observable, Redux’s RxJS middleware.
    • Reactive.How, which vividly shows the flow of an RxJS Observable through an operator pipeline, works wonders when getting started.

  • NgRx is an Angular state management solution written like Redux and is a reducer (Action >>> State), so it is almost free to reducer. Integrating with Angular Router: @ngrx/router-store; For collection types: @ngrx/entity; Side effects management: @Ngrx/Effects, and the essential Schematics: @Ngrx/Schematics, etc. The biggest advantage is the deep integration with RxJS.

  • E2E testing: Cypress/Ourselves, in truth, it is rare to see a business project complete with unit and integration testing, let alone E2E testing, because it can take quite a bit of time. But I still recommend to know about it. After all, I personally like this kind of stable job, and I feel a sense of achievement after watching test cases pass.

  • StoryBook, a test library for UI components, features isolated sandboxes for testing components and supports most Web frameworks.

  • Babel, one of the next areas I’m going to start learning, because I want to use Babel to get a quick look at the AST in the front-end world.

  • Tailwind, the mastermind of atomized CSS, loves it.

  • Pre-commit Linter and prettier, commit-msg checks commit information, pre-push build, tag, package, run tests, etc.

  • LowDB, a common JSON database in demo, highlights in the use of Lodash API to operate the database.

  • Json-server, a quick REST API from JSON files, the same author as Husky and LowDB.

  • TypeStack, The TS library includes class-validator, class-Transformer, TypeDI, routing-controllers, and so on. All based on decorator system.

  • GenQL, which generates Query Builder from GraphQL Schema, is relatively new so it is not very popular yet.

  • Graphql-voyager, visualize your GraphQL API, such as my demo: Voyager.

  • Majestic, Jest’s GUI, visually view your test cases.

  • Scully, Angular’s static page generation framework (NgxtJS?)

So that’s my attention/contact/try/depth most frameworks and tools used by the library, if you learn spare capacity, just don’t know what to learn what, might as well just to look interested in from here, and then make an advertisement, my group (alibaba – tao technology – front-end architecture) is called the front end of the grade 2022 interns, If you are interested or know someone like this, please send your resume to my email: [email protected].