Showing posts with label mern. Show all posts
Showing posts with label mern. Show all posts

MERN: Workshop - Session 1a - Introduction

February 02, 2023

Welcome to the first session of the MARN Workshop and in specific 1a of the today's session. This is a day long session where we'll talk/learn about the following topics.

  • Introduction
  • JavaScript
  • ES6
  • Node
  • NPM
  • Basics of Express

You can consider these topics as the sub-sections of today's session. We'll talk about the particular topic and then will give you some space to do the practice or ask questions in form of discussion.


This is an introductory session. We're going to touch these mentioned topics in introductory way, without going more details. The plan with this introductory session is to get you started with MERN and more specifically with Node. Learning each and everything at one go make this session boring and distracting! We're going to learn/talk MERN like child learn natural language, just start to use without knowing the exact details of pronunciations and grammar! Don't worry, we have enough sessions in this workshop to cover the details to make you expert programmer.

Ready? Let's get started with Introduction.


Introduction

In this sub-session, we're going to welcome you and give you a brief introduction on what MERN stack is and why it is popular while confirming the prerequisites for the workshop.

Welcome to the MERN Workshop. I'm Kiran and I'm your instructor for this workshop. In this sub-session, we're going talk about MERN as acronym, what it is popular, and why you should consider MERN as serious option for your career as web developer.

Before we start, following are the assumption we already made about all of you.

  • You have installed the all needed software mentioned previously.
  • You're web developer.
  • You know JavaScript.

Okay! So, M-E-R-N or MERN, what is it and what it stands for? Anybody know? Yeah, right -

  • MongoDB
  • Express
  • React
  • Node

But not in this particular order! I mean we're not going to learn these technologies in this mentioned order.

Let me ask you another question after knowing what MERN stands for - Why MERN only, what not P (of PHP) or D (of DotNet)? I mean one can easily create an application using PHP and React or DotNet and MongoDB. But, still these options are less popular (like acronym) than compare to MERN. You'll not hear PRM (PHP, REACT, MySQL) or DRM (DotNet, React, MonogoDB). Why? Anybody know?

The reason is JavaScript. Take a section look at the stack.

  • MongoDB
  • Express
  • React
  • Node

You see the common thing between all these four technologies? Yes, all these mentioned technologies use JavaScript as the language to write the code (directly or indirectly).

If you take a look at the agenda of this session then you'll find that we'll start with JavaScript even though we have made assumption about you that you know JavaScript! Because, we think JavaScript is essential for this workshop and covering a little bit JavaScript in the first session wouldn't hurt!

With this we just mark the end of first sub-session "Introduction" of today's session. After a small break we'll start second sub-session "JavaScript". Question?

MERN: Workshop - Before We Start

January 07, 2023

JavaScript delenda est — Comment from HN

Long time ago, I gave the workshop on MERN stack with colleagues. Here, I'm publishing the notes based on that workshop with modifications to suit them as blog post.


You're currently reading the circulated pdf that we passed to team who are planning to attend the workshop. The pdf was circulated a week ago before the first session in this workshop to better prepare them.


The workshop is a seven weeks long workshop where we're going to talk/learn the MERN. Here, MERN means MongoDB, Express, React, and Node. Yes, we're going to talk/learn about all these technologies but not in this particular order. This workshop is live workshop where you're going to do the coding with us. That is the reason why you need couple of software on your computer in order to do the mentioned coding challenges. 

Following are the list of essential software need for the first session of the workshop. In future, we'll install more software as needed.

  • Node
  • NPM or Node Package Manager
  • Text Editor

Node & NPM

We're going to install the Node and NPM using Node Version Manager or NVM. With NVM, you can install multiple version of Node on your computer side-by-side without a problem.

Mac or GNU/Linux

If you're Mac or GNU/Linux, open the Installing and Updating and copy either curl or wget URL in terminal.

This will install the NVM on your computer. You need to re-start the terminal and run the following command to confirm the installation of NVM.

$ nvm --version
0.39.3

If you get some version as the output of this command, you've successfully installed the NVM on your computer.

Next we need to install Node and NPM using this NVM. It is quite simple as running following command.

$ nvm install node

This command will install the latest version of Node (with NPM) on your computer. After the installation is done, run following two commands to confirm the installation of Node and NPM.

$ node --version
v19.3.0

$ npm --version
9.2.0

Windows

If you're using Windows system, you need to nvm-windows. You can download the exe from release page and then you can easily install the exe on your Windows computer.

Once the installation is done, open the Command Prompt or PowerShell and run the following command to confirm the installation of NVM.

> nvm --version
1.1.10

Next we need to install Node and NPM using this NVM. It is quite simple as running following command.

> nvm install latest

This command will install the latest version of Node (with NPM) on your computer. After the installation is done, run following two commands to confirm the installation of Node and NPM.

> node --version
v19.3.0

> npm --version
9.2.0

Text Editor

We need text editor to write the code! We've many options including vim and emacs. But, we're going to use Visual Studio Code for this workshop and we suggest you to use even if you already have your favorite text editor.

You can easily download the Visual Studio Code from the official website for your operating system.

Prerequisites

Finally, these are the prerequisites for the works and all sessions.

  • You know HTML, CSS and JavaScript.
  • You know some server-side programming.
  • You know how to write and run terminal commands in Terminal or Command Prompt.
  • You know a little git.

You need to attend this and all following sessions, if you are planning to learn React.js, Vue.js or Angular. You are now ready for the workshop.