Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about what are the six tools to change JavaScript. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

I've been coding in statically typed languages for years. I started with assembly and then moved to C, through Visual Basic and JavaScript, but when I moved to JavaScript, all my understanding of the software changed.

Before giving me my current tool chain, I have a piece of advice: practice the language you want to master without any restrictions imposed, and after that, find a job that suits your preferences, otherwise, you may end up feeling very painful. because you will use your own tools wrong, and you will never realize your potential.

1. TypeScript

TypeScript

Introduction on the home page:

TypeScript is a typed superset of JavaScript that can be compiled to pure JavaScript.

What makes me use TypeScript in every project?

(1) compilation error

Finding errors at compile time is a good thing, stupid errors, inexplicable run-time errors, and the helplessness of showing errors too late reduces my love for the profession, but TypeScript brings joy again.

(2) Type

Expressiveness and compliance, intention and consistency, design and strength, types take time to master, but, kids, they are worth it. Every, Single, Time, I miss those types so much. TypeScript is compatible with both object-oriented and function types, which is great.

When you have types, you will save a lot of time for people trying to understand and use your code, you will become able to find the use of the entire library without looking at the manual, and because of type constraints, you can be sure that things will be used as they should.

Types in TypeScript still have a long way to go, but today's type system has brought a lot of powerful functionality to the front end. Without a type system, it feels like trying to run through a racing car with your feet. It gives a sense of engineering, which is what JavaScript lacks, I use types to design and enforce the correct interface usage, and every hour I spend writing types keeps me safe for a few days (well, that's mostly my opinion).

(3) ease my sense of frustration

With TypeScript, my hourly mistakes and my chances of feeling depressed are greatly reduced, and this part alone is worth it.

TypeScript is also getting better and better, and it quickly adopts the new ECMAScript functionality.

So, I gave up coding with ordinary JavaScript, and TypeScript has all the advantages of JavaScript.

2. Visual Studio Code

This is not an IDE, but a text editor, the best front-end text editor, an introduction from their home page:

Code editing. Redefine. It's free. Based on open source. It can run anywhere.

Why choose VSCode?

(1) running everywhere, everywhere

This is true. I have reliably used VSCode on every operating system I need to use. It is fast and has many advantages everywhere, without worrying about platform support.

(2) IntelliSense

It works very well in JavaScript, but in TypeScript, it is like God, fast, reliable, and can find errors before compiling! I think this is one of the best features of VSCode. I think this is one of the best features of VSCode. It's like having an extra pair of eyes.

(3) ease my sense of frustration

At that time, every plug-in in Sublime was slow, and the lack of IntelliSense,VSCode was very fast, and it was released faster and faster. To be honest, I was surprised that such good software was free.

Everything works as expected, it has all the functions I can think of, those should not be core, are extensions, to be honest, it is worth mastering it.

Finally, describe my VSCode code experience in one sentence: I don't have any complaints.

3. React

An introduction to their home page:

A JavaScript library for building a user interface

As mentioned earlier, I started using AngularJS, a fully powerful front-end framework, but switching to React is inevitable for me, here are the reasons.

(1) not a frame

Yes, it's not a framework, and it's one of my favorite things. I usually write small programs. I don't need a lot of frameworks. I just need a little help to build a small UI.

(2) embracing functional programming

The best selling point is that React accepts functional programming, in line with my new understanding of JavaScript.

I appreciate that React has made a great effort in terms of simplicity; React expresses complex concepts in minimal syntax, and things like useState and high-level components are an example of how it's better to have the right abstractions than to have a bunch of tools that may end up being wrong.

(3) add up to + TypeScript

The reason I don't use Svelte or Vue is that I don't like templates and I like types. In the template file, you don't have TypeScript, you don't have JavaScript, you have template scripts, some special tags that can help you do something, untyped, with different reasoning.

I really like the overall characteristics of React. In other words, I use JSS instead of HTML+JS instead of CSS, I use TSX, all CSS, HTML, JS are in a file TypeScript, I like it, everything has IntelliSense, compilation errors, types, no context switching.

In my opinion, small components are a mixture of CSS+HTML+JS, and it is good for me to merge them all into TypeScript.

What's the better side of it? Its performance is very good, and every new version is constantly improving, more JSS is migrated to static CSS, more TSX is optimized, and so on, so you can program with it, and over time, the output of the port will get better and better.

In the companies I've worked for, we create high-level concepts in small programs, not low-level things. I believe that most of the time, companies don't spend money on programmers to optimize anything. what they want is available, reliable, fast software.

4. Ramda

Ramda is a practical JavaScript functional programming library.

(1) Code reusability

I complained about the repetitive code above, most of the code is small utility functions, when I successfully own a folder, if I start another project, I have to rewrite them, so I have been looking for a good utility library.

Now, when I abstract functions, I hardly think of making them more reusable, because all general reusable functions are in Ramda and have a very powerful function-first interface.

(2) Pure function, no side effects and no change.

A utility should contain pure functions, which means that they need to have no side effects and treat the data as immutable. These things are inconsistent with the utility library, alas, even in JavaScript's built-in Array function, don't you believe me? Look at this:

The sort method of the native array changes the original data, while the sort method of Ramda does not.

(3) Converter (Transducers) /

Describe the converter realistically: the converter eliminates the performance loss of combining multiple array functions.

I think images are better than words, and the converter is difficult to understand:

Ramda is full of converter functions, which means that performance is very good, and you can stack multiple filter,map and 21 other functions, and it will only iterate through the array and apply it once instead of N times.

(4) shortcomings

Ramda is great, but all good things come at a price. If you are considering using TypeScript.

The complexity of Ramda's type, type reasoning, and type parsing is very high; in addition, the major contributors are not interested in TypeScript at all.

They seem to be a great group of developers who tame JavaScript without TypeScript and have zero interest in porting this amazing library to TypeScript.

Nonetheless, Ramda is still one of the most sophisticated utility libraries I like to use, and I was very moved by it when I tamed JavaScript.

5. FP-TS

Although Ramda is a good solution, as long as we stay in the field of JavaScript, once I fully adopt TypeScript, it will become. It's awkward to use, and type reasoning is not very good, so I'm looking for other solutions that take into account TypeScript, or preferably in TypeScript.

Fortunately, I found fp-ts on their home page, which is the miracle of the library, their home page:

Typed functional programming in TypeScript.

Fp-ts provides developers with popular patterns and reliable abstractions in typed functional languages in TypeScript.

To be honest, fp-ts is a masterpiece, it brings a lot of benefits to TypeScript, and in an unobtrusive way, its type is completely idiomatic.

Why do I use fp-ts in 100% of projects?

(1) Pipeline (Pipe)

I deliberately avoid talking about Ramda pipes, because type analysis is from left to right, and the fp-ts version is more... It's an idiom for TypeScript and IntelliSense.

This is the code without pipes:

In main, I need to use intermediate variables to allocate intermediate results, and in main2, it is awkward to read the execution order from right to left.

With pipes, we don't need intermediate variables, and all the data is flowing, but most of the time when TypeScript uses Ramda's pipes, an error occurs, because the input value comes last, so you can't infer what the first function of the input is, and so on, because TypeScript infers from left to right. For Ramda pipes to work, reasoning should be from left to right and from right to left. Ramda pipes are similar to the common features of type inference systems in functional languages such as Haskell, OCalm, and F#, but not in TypeScript, although it is not a problem at all in JavaScript.

Now take a look at the fp-ts version of the pipeline:

The difference is that fp-ts puts the input of pipe first, making TypeScript's reasoning very happy. In the JavaScript world, Ramdas's method is 100% effective idiomatic code, but TypeScript lacks right-to-left reasoning, which makes it "invalid" or generally difficult to use, so I generally prefer to use the fp-ts version of pipe rather than Ramda.

6. XState

Let me introduce XState, a library that should have replaced Redux. Introduction to the home page:

JavaScript and TypeScript finite state machines and state transitions for modern web.

For a long time, my Redux store lacked something. I tried to make some small middleware to help me tame Redux, but it felt like... It's incomplete. Until I find XState.

Why do I use XState in 100% React projects?

My problem is that Redux is half, and before I know it, I'm working on a small state machine in every React component, using Redux for extended state (or infinite state). Once I find XState, all design problems encounter valuable competitors.

Should a button be displayed? Enabled? Display text An or B? The specifications of all these "domains" are nothing more than a few states, limited and pre-specified; if such states are clearly written, it is a pleasure to read and upgrade components.

With AngularJS and templates, my state is made up of a bunch of intertwined variables that cannot be read. With React and Redux, all the data is in one place, but the state has no representation, which is an interpretation of the data, but with XState, my state is actually explicit.

These are the six tools for changing JavaScript shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.