deno.tar.gz

deno_code

deno_unit_test_author

deno_spa

deno_spa_5200

deno_spa_server

deno_compile

deno_install

deno_spa_copy1

deno_spa_copy2

deno_spa_copy3

Deno is a runtime environment for JavaScript and TypeScript. Since it’s built to improve upon the earlier version of Node.js, Deno offers significant upgrades to improve security and real-world performance while offering developers modern instrumentation.

In this course, you’ll discover Deno’s main features and explore its similarities and differences in relation with Node.js. You’ll then be led through a series of detailed project examples and practical code exercises to master its runtime.

By the end of the course, you’ll be ready to create professional, highly performant JavaScript or TypeScript applications with Deno.

Master the Deno JavaScript Runtime

The coding exercise below implements a complete REST API server. The server exposes some endpoints to manage fictional employee entities. With these APIs, our server will provide CRUD actions (C = Create, R = Read, U = Update, D = Delete) to any connected client. 

> **Note:** *For the sake of simplicity, authentication mechanisms have been omitted from the exercise.*

In the widget below, we can find the main project structure to realize our first Deno web server. This example lacks portions of code, and it is your task to complete them.

At the end of the exercise, you’ll have developed a fully functional web server with CRUD endpoints!


import { Application } from "https://deno.land/x/oak/mod.ts";
import { initDb } from './data/data.ts'
// TODO: you need to import remote and local scripts

import { getAllEmployees /* TODO: Add missing imports */ } from './api/employeeApis.ts';

const port = 8280;
const app = new Application();

const router = new Router();

router
    .get('/employees', getAllEmployees)
    // TODO: Add missing routes for:
    // Get employee details (GET) - id as request parameter
    // Update an employee (PUT) - id as request parameter & new data as request payload
    // Add a new employee (POST) - new data as request payload
    // Delete an employee (DELETE)- id as request parameter


app.use( /* TODO: add CORS middleware */);
app.use( /* TODO: add the Routes middleware */);
app.use( /* TODO: add the allowed methods */);

app.addEventListener("listen", ({ hostname, port, secure }) => {
    console.log(`\n--- Listening on: ${secure ? "https://" : "http://"}${hostname ?? "localhost"
        }:${port} ---`
    );

    console.log(`\n--> You can now navigate to http://${hostname ?? "localhost"
        }:${port}/employees`);
});

// Init in-memory DB
initDb();

await app.listen({ port });


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

# Project structure
Keeping a modular project structure separates responsibilities between the different project parts.

- `server.ts`: Contains the server implementation. Here, we create the Oak `Application` instance and define the routes for our endpoints.

- `model/employees.ts`: Contains a simple interface for the entity `Employee`. It is always a good practice to define types and interfaces when working with Typescript since it leverages all the benefits of strong typing.

- `api/employeeApi.ts`: Contains the business logic for the exposed endpoints.


- `data/data.ts`: Implements our data layer. A data layer abstracts the connection to a database or persistence solution. Deno implements the web storage API similarly to browsers. There are two objects available, `sessionStorage` and `localStorage`, for storing data in a key (string) and values format. The `sessionStorage` persists data only for the execution context, meaning a single session. Meanwhile, the `localStorage` maintains data between the following sessions. To keep the exercise simple, the persistence layer is represented by an instance of the `localStorage`, that stores the `Employees` as key/value pairs.
 

> **Note:** Be aware that 10MB is the storage limit.

**Architectural tip**: The data layer is independent of the other project components. None of them are aware of what kind of technology is used by the data layer. There are only some methods exposed to manage data transactions, but these are generic and promote *loose coupling*. With this approach, we can swap the current `data.ts` implementation details with another technology (e.g., Mongo DB - `https://deno.land/x/mongo` or similar) without the need for refactoring the code that interacts with the data layer. Of course, the exposed method names and parameters should remain the same.

> 💡 **Note:** Some of the APIs in the exercise use the ES6 destructuring assignment syntax. It allows unpacking objects' properties into distinct variables, ready to use.

Implement a complete REST API using Deno and Oak in this practical exercise.

__default

Exercise: Create a REST API