Best Deno Tutorials on YouTube

Deno Tutorial. Learn Deno online.

Deno is a secure runtime for JavaSript and TypeScript. It aims to replace Node.js which is the de-facto runtime when building modern JavaScript apps.

Deno was created by Ryan Dahl, who is also the creator of Node.js. According to Ryan in his famous conference speech, Node.js had few design flaws which became apparent as its usage exploded in the web development industry.

Some of the pain points of Node.js according to Ryan are

  • Lack of Promises support in the initial design which led to non standard implementation to handle async code (untill the arrival of async/await).
  • Security Issues by npm packages such as network access, file system access.
  • Unnecessary complex wrappers to its build system GYP.
  • Module system is poorly designed. Package.json and node_modules to manage dependencies is a well argued topic in the web development community.

He announced the alpha version of Deno on May 13, 2008. Today Deno is in stable release with version 1.1.x at the time of writing this post. Under the hood Deno is built with Rust upon Google’s V8 JavaScript runtime engine.

Github Repo

Some of the core features of Deno are

  • All async actions return a promise in Deno which is drastically different from Node.js
  • Improved Security. No file, network, or environment access, unless explicitly enabled.
  • TypeScript support without additional tooling or configuration.
  • Single executable file. No more npm, node_modules and package.json in the project.
  • Dependency Inspector and Code Formatter are built in.
  • Reviewed and Audited standard modules from deno.land/std or Deno Standard Library.
  • Common Js require() is replaced by import from ES Module syntax

npm ecosystem and node_modules to manage dependency has become a huge pain for JavaScript developers. There were a lot of security issues due to unsecure packages. Basically Deno offers a new take on dependency management for the apps.

Deno Packages

Third Party Deno packages or modules are available via url https://deno.land/x

All the third party packages are imported via this url.

For example, Oak is a middleware framework for Deno which is similar to Express or Koa for Node.js

To import Oak, we simply use following line in our file

import { Application } from "https://deno.land/x/oak/mod.ts";

It is important to note that Deno downloads and caches all the imported modules. Cached modules will not be re-downloaded unless we specifically ask for it.

Hello World using Deno

Deno Tutorials on YouTube

I have collected a bunch of great high quality youtube tutorials to learn back-end development with Deno.

Deno Tutorials on Udemy

Currently there is a full length Udemy Course by Andrie Neagoie. I hope there will more tutorials in the days to come.

Conclusion

Deno may become a serious contender to Node.js in the months to come. It has a long way to go before being used in production for serious web projects. It is an excellent and well designed JavaScript runtime environment. But Node.Js and npm ecosystem is not going away soon and may last for a decade or more.

Its good to have a basic understanding of Deno. This will be definitely a skill which may be demanded by employers once the ecosystem is mature enough to be used in production.

I hope to write more on Deno in the coming days and keep this list of tutorials updated. Thank you for reading and Have a great day !

Build Ecommerce Website (Amazon Clone) with Node and React Tutorial

Hello guys, I found a nice 5 hour long YouTube tutorial on how to build a Ecommerce website with Node and React by Coding with Basir.

By the end of the tutorial you will build a mini clone of Amazon using Node and React. This app is a Full Stack MERN App using MongoDB for database, Node + Express for APIs, front end is built with React (using Hooks) with Redux for state management. Finally the app is deployed on Heroku.

Course Contents

  • 00:02:00 Part 01- Introduction
  • 00:08:26 Part 02- Install Tools (VS Code, Chrome)
  • 00:12:36 Part 03- Website Template (HTML, CSS)
  • 00:29:47 Part 04- Products List (Grid, Flexbox)
  • 00:41:54 Part 05- Create Sidebar (JavaScript)
  • 00:52:39 Part 06- Create React App (React)
  • 01:01:09 Part 07- Render Products (JSX)
  • 01:06:30 Part 08- Product Details (React Router)
  • 01:30:53 Part 09- Create Node Server (Node.js)
  • 01:39:52 Part 10- Fetch Server Data (React Hooks)
  • 01:47:55 Part 11- Manage State With Redux (Redux)
  • 02:07:11 Part 12- Add Redux To Details (Redux with Hooks)
  • 02:29:23 Part 13- Shopping Cart Screen (Advanced React)
  • 03:08:11 Part 14- Connect MongoDB (Mongoose)
  • 03:21:35 Part 15- Sign In User (JWT Authentication)
  • 03:56:02 Part 16- Manage Products (React Modal)
  • 04:38:43 Part 17- Checkout Wizard (React Wizard)

Topic Covered

  1. HTML5 and CSS3: Semantic Elements, CSS Grid, Flexbox
  2. React: Components, Props, Events, Hooks, Router, Axios
  3. Redux: Store, Reducers, Actions
  4. Node & Express: Web API, Body Parser, File Upload, JWT
  5. MongoDB: Mongoose, Aggregation
  6. Development: ESLint, Babel, Git, Github,
  7. Deployment: Heroku

Demo – https://node-react-ecommerce-app.herokuapp.com/

Github – https://github.com/basir/node-react-ecommerce