The simple use of Deno | 🏆 technology project phase I

preface

Unconsciously Deno official version has been released for more than two months, I also saw it released after the official version was attracted by its highlights, the first time to start to experience. This article combines my experience of using Deno over the past two months and explains how simple it is to use Deno compared to the front end. Interested developers are welcome to read this article.

I met Deno

On May 13, 2020, I saw the news released by Deno, and I realized that it was another new work by the author of Node. The author made some mistakes in the design of Node, including security, build system, package.json, node_modules, index.js and so on. He said that the shortcomings of Node had led to serious bug problems that could not be avoided. Now JavaScript and the surrounding software infrastructure had changed so much that it was better to rewrite it than to change it, so he redesigned Deno, the scripting language. Let’s take a look at some of Deno’s new features, using a quote from the Deno website.

Deno secure runtime for JavaScript and TypeScript

Deno is a simple, modern, and secure runtime for JavaScript and TypeScript built into Rust using V8.

• Security. When developing a server program, you cannot access files, networks, or environments unless explicitly enabled.
• Support for TypeScript out of the box is also my favorite and the only reason I use it.
• Publish only one executable file, that is, after all back-end services are developed, it is packaged as an executable file and run directly on the server.
• There are built-in utilities, such as a dependency checker (representing information) and a code formatter (representing FMT).

Here are some of the features listed on Deno’s website. For me, the one thing I can use about Deno is its built-in TypeScript parser, which makes it painless to run TS code. This is the only place I can see the front end being used.

Of course if you say it can read and write files like Node, it has an API for network operations, it can develop interfaces, but I don’t think it’s a front end.

Windows environment

• Download the Windows installation package from deno’s Releases page on Github

• Unzip the downloaded package and you’ll get an executable named deno.exe

• Create a deno folder under C:\Program Files and put deno.exe in it

• Open the environment variables configuration panel and add a variable named deno under Path. Select the Path where we saved deno.exe

To ensure that our denO installation is up to date, we need to update brew first
brew update
# installation deno
brew install deno
Copy the code

Using Deno

Now that we’ve set up Deno’s environment, let’s take a look at how to use it.

• So let’s create a new TS file and put some TS code in there.

export class Graph {
    // Store the vertices of the graph
    private vertices: (number | string=) [] [];// Store the adjacencies table
    private adjList: Dictionary<string | number, (string | number> =) []new Dictionary();

    constructor(private isDirected: boolean = false) {
        console.log("Deno performed TS successfully");
    }

    // Add vertices
    addVertex(v: string | number) :void {
        Vertices do not exist in the graph
        if (!this.vertices.includes(v)) {
            // Add the vertex to the list of vertices
            this.vertices.push(v);
            // Set vertex v as the key in the adjacencies table, with the corresponding dictionary value as an empty array
            this.adjList.set(v, []); }}// Add lines to connect vertices
    addEdge(v: string | number, w: string | number) :void {
        // Before adding vertices, verify that vertices v and w are in the graph, and append them if they do not exist
        if (!this.adjList.get(v)) {
            this.addVertex(v);
        }
        if (!this.adjList.get(w)) {
            this.addVertex(w);
        }

        Add w to the adjacencies table of v, and we get an edge from vertex v to vertex w
        this.adjList.get(v)? .push(w);if (!this.isDirected) {
            // Add an edge from w to V if the graph is undirected
            this.adjList.get(w)?.push(v);
        }
    }

    // Get the list of vertices
    getVertices(): (string | number) [] {return this.vertices;
    }

    // Get the adjacencies table
    getAdjList(): Dictionary<string | number, (string | number) [] > {return this.adjList;
    }

    // Convert the graph to a string
    toString(): string {
        let s = "";
        for (let i = 0; i < this.vertices.length; i++) {
            s += `${this.vertices[i]}- > `;
            const neighbors = <Array<string | number>>this.adjList.get(this.vertices[i]);
            for (let j = 0; j < neighbors.length; j++) {
                s += `${neighbors[j]} `;
            }
            s += "\n";
        }
        returns; }}Copy the code

• Create a new JS file, import the TS file we just created, and instantiate the Graph class

import { Graph } from "./lib/Graph.ts";
let graph = new Graph();
let vertices = ["A"."B"."C"."D"."E"."F"."G"."H"."I"];
for (let i = 0; i < vertices.length; i++) {
    graph.addVertex(vertices[i]);
}
graph.addEdge("A"."B");
graph.addEdge("A"."C");
graph.addEdge("A"."D");
graph.addEdge("C"."D");
graph.addEdge("C"."G");
graph.addEdge("D"."G");
graph.addEdge("D"."H");
graph.addEdge("B"."E");
graph.addEdge("B"."F");
graph.addEdge("E"."I");
console.log("The graph corresponds to the following.");
console.log(graph.toString());
Copy the code

• Go to the directory where we created the js file and run the deno run command to execute the js file

deno run GraphTest.js
Copy the code

The result is as follows. We find that we have successfully executed the method in the TS file we imported in js.

Editor to add Deno support

The previous deno was executed by manually entering commands, which was too cumbersome, so we needed to install plug-ins to support it. Because I am a heavy user of WebStorm. When DENo was just released, I searched the WebStorm plugin store and found no deno plugins, but vscode already had relevant plugins next door. But I am a single-minded person and will not go to VSCode camp. I also joked that WebStorm does not support deno, and was told that it is under development.

• Search for Deno in the plugin store, as shown in the image below, which was developed by jet, and click install.

• After the installation is complete, restart the editor and search for deno in Settings, as shown in the picture below. Just check it

• If we open a JS file and right click on the code, we will find the Run “Deno: XXX “option.

• Of course, we can Debug the TS file as well. There is also a Debug file in the right-click menu above below the Run option. We just need to break the ts file and select Debug to open the Debug view of WebStorm

Write in the last

• Feel free to correct any mistakes in the comments section, and if this post helped you, feel free to like and follow 😊
• This article was originally published in Nuggets and cannot be reproduced without permission at 💌

🏆 technology project phase I | talk about Deno some thing…