Skip to content

Commit 97fd54c

Browse files
committed
add r1 to r3.4 for module 1
1 parent cc4dfdd commit 97fd54c

File tree

12 files changed

+683
-1
lines changed

12 files changed

+683
-1
lines changed

module1-introduction-to-backend/README.md

Lines changed: 0 additions & 1 deletion
This file was deleted.
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Introduction to Backend
2+
Welcome to your first lesson of the Backend Web Development Bootcamp! The objectives of this lesson are:
3+
1. To understand the roles of frontend developer vs backend developer vs fullstack developer
4+
2. To get familar with the basics of backend web architecture
5+
6+
Here we go!
7+
8+
## Front End Developer vs Back End Developer vs Fullstack Developer
9+
As of June 2021, it is estimated that the Internet contains more than 1.8 million websites. No doubt that this a great time to start a career as a web developer, the people who are responsible for coding, building, analyzing, and maintaining all those websites.
10+
11+
If you have some experience with web development or have been reading about it, then you already know that web development tends to break down into three main concentrations: front-end, back-end, and full stack.
12+
13+
### What is a Front-End Developer?
14+
The front-end of a website is the visible part that users interact with. It is also called the User Interface (UI). Everything that you see when you’re navigating around the Internet, from text, fonts and colors to buttons, dropdown menus,and sliders, is a combination of HTML, CSS, and JavaScript being rendered and controlled by your computer’s browser.
15+
16+
A front-end developer is responsible for writing and maintaining the code for the user interface of the website and the architecture and functionality for the user experience of the website. Front-end developers must be competent in HTML, CSS and Javascript as their foundation along with one or more modern frameworks like ReactJS, AngularJS, VueJS, EmberJS, BackboneJS, Foundation or Svelte. They also work with UI libraries like Sass, Bootstrap, Tailwind, React Bootstrap, Material UI, Ant Design and Semantic UI and tools like Babel, Webpack, Gatsby.
17+
18+
Front-end developers are sometimes seen as a combination of a user interface designer, user experience designer and software developer – someone who appreciates the aesthetic, usability as well as functionality of an application. They care about delivering the features and functionalities, but they also go the extra mile to ensure the user interface is aesthetically pleasing and the experience is seamless. A great front-end developer is not only proficient in programming but also good at empathising with the end users.<br/><br/><img src="https://drive.google.com/uc?export=view&id=1EiN2DOjCpmS05ZLyrT73kVhM34Ne0S5-"><br/><br/>
19+
20+
### What is a Back-End Developer?
21+
But where does all the data to be displayed on the front-end come from? How is a website personalized for the logged in user? This is where the back-end comes in. The back-end of a website consists of a server, an application, and a database.
22+
23+
A back-end developer builds and maintains the code that powers those components which together enable the user-facing side of the website to even exist in the first place. Back-end developers must be competent with one or more server-side languages such as NodeJS, Ruby, Python, PHP or Java, frameworks like ExpressJS, Ruby on Rails, Python Django and databases like MySQL, PostgreSQL or MongoDB. They are also familiar with Linux as a deployment environment and DevOps tools like AWS, GCP, Apache, Nginx, Docker and Kubernetes.
24+
25+
Back-end developers need to be able to navigate across larger codebases and not get lost in the complexities of what may seem like programming labyrinths. They also need to be very meticulous when making changes to not “break” anything as there are usually delicate dependencies. Finally, unlike front-end development where the written code translates directly to visual output one can see and interact with, back-end development of business logic is often hard to visualise. Therefore to be a good back-end developer, you need to be comfortable with dealing with abstracts.<br/><br/><img src="https://drive.google.com/uc?export=view&id=1PkIrF_pNnGbX1NiW-q1JIKokql1v4FI7"><br/><br/>
26+
27+
### What is a Full Stack Developer?
28+
A jack of all trades? Pretty much! Often there isn't a black-and-white distinction between front-end and back-end development. Front-end developers sometimes need to understand back-end concepts like how REST APIs work and back-end developers sometimes need to understand how components are rendered with data in their state.
29+
30+
The role of a full stack developer was popularized by Facebook’s engineering department. The idea is that a full stack developer can work cross-functionally on the full “stack” of technology, both the front-end and back-end. They are capable of performing both front-end and back-end tasks and have a complete understanding of how a web application works, and how the “front” and the “back” are connected. They can build a complete web application on their own. In the current digital economy, companies are looking for such cross-discipline developers or generalists.
31+
32+
To be a good full stack developer, you need to be comfortable with dealing with abstracts as well as empathising with end users. Good full stack developers also need to know when to wear which hat to work effectively and efficiently because there will always be division of responsibilities.<br/><br/><img src="https://drive.google.com/uc?export=view&id=13hdTlUW0tk0J91wV-r7ruPX7uATpt9pe"><br/><br/>
33+
34+
## Backend web architecture
35+
Let's start diving deeper into what do we mean when we say front-end and back-end. The front-end is the code that is executed on the client side. This code runs in the user’s browser and creates the user interface. The back-end is the code that runs on the server, that receives requests from the clients, and contains the logic to send the appropriate data back to the client. The back-end also includes the database, which will persistently store all of the data for the application.
36+
37+
### What are clients?
38+
The clients are entities that send requests to the back-end. They are often browsers that make requests for the HTML and JavaScript code that they will execute to display websites to the end user. However, there are many different kinds of clients: they might be a mobile application, an application running on another server, or even a web enabled smart appliance.
39+
40+
### What is a back-end?
41+
The back-end is all of the technology required to process the incoming request and generate and send the response to the client. This typically includes three major parts:
42+
- The server. This is the computer that receives requests.
43+
- The app. This is the application running on the server that listens for requests, retrieves information from the database, and sends a response.
44+
- The database. Databases are used to organize and persist data.
45+
46+
### What is a server?
47+
A server is simply a computer that listens for incoming requests. Though there are machines made and optimized for this particular purpose, any computer that is connected to a network can act as a server. In fact, you will often use your very own computer as server when developing apps.
48+
49+
### What kinds of responses can a server send?
50+
The data that the server sends back can come in different forms. For example, a server might serve up an HTML file, send data as JSON, or it might send back only an HTTP status code. You’ve probably seen the status code “404 - Not Found” whenever you’ve tried navigating to a URI that doesn’t exist, but there are many more status codes that indicate what happened when the server received the request.
51+
52+
> Okay I want to see some code now!
53+
54+
We heard you. In the next lesson, we will learn about Node.js which will be the primary server-side programming framework that we will be using throughout this bootcamp.
55+
56+
---
57+
## References
58+
- https://www.freecodecamp.org/news/front-end-developer-vs-back-end-developer-definition-and-meaning-in-practice
59+
- https://www.udacity.com/blog/2020/12/front-end-vs-back-end-vs-full-stack-web-developers.html
60+
- https://sg.alphacamp.co/2018/07/31/what-kind-of-web-developer-should-you-be/
61+
- https://www.codecademy.com/articles/back-end-architecture
Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Beginners guide to Node.js and NPM
2+
We will be working in the Node.js and NPM environment throughout this bootcamp. The objectives of this lesson are:
3+
1. Understanding the Node.js framework
4+
2. Advantages of Node.js and why this course is focussed on Node.js
5+
6+
## Introduction to Node.js
7+
Is it a programming language? Is it a library? No, it's Node.js. In simple words, Node.js is nothing but JavaScript running on the server-side and it’s awesome.<br/><br/><img src="https://drive.google.com/uc?export=view&id=1oaHgcGKcrKbW6G-gFsncV95WhVmc40M7"><br/><br/>
8+
9+
But to be specific, Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
10+
11+
And here is what a common Hello World code in Node.js would look like:
12+
13+
```
14+
const http = require('http')
15+
16+
const hostname = '127.0.0.1'
17+
const port = 3000
18+
19+
const server = http.createServer((req, res) => {
20+
res.statusCode = 200
21+
res.setHeader('Content-Type', 'text/plain')
22+
res.end('Hello World\n')
23+
})
24+
25+
server.listen(port, hostname, () => {
26+
console.log(`Server running at http://${hostname}:${port}/`)
27+
})
28+
```
29+
30+
Using the http module, one of many useful Node.js libraries, an HTTP server is created. The server is set to listen on the specified host name and port. When the server is ready, the callback function is called, in this case informing us that the server is running. Whenever a new request is received from a client, the request event is called, providing two objects: a request and a response. The first provides details of the request, although not used in this example, and the second is used to return data to the client.
31+
32+
### Some brief history first
33+
Node.js is only 12 years old, not a long time in tech. In comparison. JavaScript itself is more than 20 years old and we know that it is what runs in our browsers. JavaScript was created at Netscape, which also tried to create LiveWire, an attempt at server-side JavaScript. Unfortunately it wasn't very successful and server-side JavaScript did not grow in popularity until the introduction of Node.js in 2009.
34+
35+
One key factor that led to the rise of Node.js was the timing. Just a few years earlier, JavaScript had started to be considered as a more serious language, thanks to "Web 2.0" applications (such as Flickr, Gmail, etc.) that showed the world what a modern experience on the web could be like. JavaScript engines also became considerably better as many browsers competed to offer users the best performance. Development teams behind major browsers worked hard to offer better support for JavaScript and find ways to make JavaScript run faster. The engine that Node.js uses under the hood, V8 (also known as Chrome V8 for being the open-source JavaScript engine of The Chromium Project), improved significantly due to this competition.
36+
37+
When Ryan Dahl wrote Node.js, one of his motivations was the limited possibilities of the most popular web server in 2009, Apache HTTP Server, to handle a lot of concurrent connections and the most common way of creating code which either blocked the entire process or implied multiple execution stacks in the case of simultaneous connections. A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.
38+
39+
### Features of Node.js
40+
Firstly, though `.js` is the standard filename extension for JavaScript code, the name "Node.js" doesn't refer to a particular file in this context and is merely the name of the product.
41+
42+
1. Node.js is really fast: Having been built on Google Chrome's V8 JavaScript engine, its library is extremely fast for code execution.
43+
2. Node Package Manager (NPM): Node Package Manager has more than 50,000 bundles, so whatever functionality is required for an application can be easily imported from NPM.
44+
3. Node.js uses asynchronous programming: All APIs of Node.js library are asynchronous (i.e., non-blocking), so a Node.js-based server does not wait for the API to return data. The server calls the API, and in the event that no data is returned, the server moves to the next API. The Events module of Node.js helps the server get a response from the previous API call. This also helps with the speed of Node.js.
45+
4. Single-threaded: Node.js makes use of a single-threaded model with event looping. As a result, it can provide service to a much larger number of concurrent connections than traditional servers like Apache HTTP Server.
46+
5. Highly scalable: Node.js server responds in a non-blocking way, making it highly scalable in contrast with traditional servers, which create limited threads to handle requests.
47+
48+
Node.js is written with C, C++ and JavaScript and uses libuv underhood to handle asynchronous events. Libuv is an abstraction layer for network and file system functionality on the OS.<br/><br/><img src="https://drive.google.com/uc?export=view&id=18ys74BkK9tzQ6u8avgVw9seweoXY6GnA"><br/><br/>
49+
50+
### NPM and Packages in Node.js
51+
One of the major factors of Node's success is npm - its popular package manager, which allows JavaScript developers to share useful packages quickly and easily. NPM – or "Node Package Manager" – is the default package manager for JavaScript's runtime Node.js. NPM consists of two main parts:
52+
- a CLI (command-line interface) tool for publishing and downloading packages, and
53+
- an online repository that hosts JavaScript packages</br>
54+
55+
A package is nothing but a directory that contains a bunch of modules. Some popular npm packages are [lodash](https://lodash.com/) and [moment](https://momentjs.com/). Node.js has a wide community that develop good packages for everybody to use.
56+
57+
When we have a remote package in our project, it is called as a dependency since our project depends on it. We need to keep track of our dependencies or at least list them down somewhere. We list all our dependencies inside a `package.json` file which is a JSON file that contains some information about our project and dependencies it needs. This file is essential for NPM.
58+
59+
Node.js also ships with a collection of [built-in packages](https://nodejs.org/api/index.html) called as a Node Standard Library. These packages are essential to perform low-level operations like File System I/O and Networking. We do not have to install them using NPM.
60+
61+
### How much JavaScript should I know to use Node.js?
62+
As a beginner, it can be difficult to understand where does JavaScript end, and where Node.js begins, and vice versa. However, when you're writing code for a Node.js application you are writing JavaScript. So, it is important to grasp the fundamentals of JavaScript syntax such as:
63+
- Lexical Structure
64+
- Expressions
65+
- Types
66+
- Classes
67+
- Variables
68+
- Functions
69+
- this
70+
- Arrow Functions
71+
- Loops
72+
- Scopes
73+
- Arrays
74+
- Objects
75+
- Array and Object methods
76+
- Template Literals
77+
- Semicolons
78+
- Strict Mode
79+
- ECMAScript 6 or ES6
80+
81+
Also, as asynchronous programming is the core of Node.js it is important to understand concepts like:
82+
- [Asynchronous programming and callbacks](https://nodejs.dev/learn/javascript-asynchronous-programming-and-callbacks)
83+
- [Timers](https://nodejs.dev/learn/discover-javascript-timers)
84+
- [Promises](https://nodejs.dev/learn/understanding-javascript-promises)
85+
- [Async and Await](https://nodejs.dev/learn/modern-asynchronous-javascript-with-async-and-await)
86+
- [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
87+
- [The Event Loop](https://nodejs.dev/learn/the-nodejs-event-loop)
88+
89+
If you're interested to dive deeper into understanding Node.js, [here](https://nodejs.dev/learn/introduction-to-nodejs) is a learning path that you can follow.
90+
91+
## Why are we teaching Node.js in this bootcamp?
92+
From the previous lesson or previous experience, you might already be familar with other server-side languages like Python, PHP, Ruby or Java. So why did we choose to teach Node.js?
93+
94+
1. Node.js has been consistently growing in popularity since it's introduction. As per the [Stackoverflow developer survey of 2021](https://insights.stackoverflow.com/survey/2021), JavaScript is the most popular language for 9 years in a row and Node.js has moved up to be the 6th most popular technology. Many companies that we have got in touch with have expressed interest in hiring more Node.js developers.
95+
2. With the web being focussed more towards real-time user interaction, and serving web apps over websites, Node.js with its features is becoming the go-to choice for many tech companies.
96+
3. Even if you use another language on the backend, you will still be using JavaScript on the frontend. Following a "JavaScript everywhere" paradigm, that is both on the frontend and backend, Node.js has a lower learning curve. A JavaScript developer today is ready to become a full stack developer.
97+
4. Node.js and NPM has a great community with a vast and rich collection of packages and resources to learn and debug issues.
98+
5. Even though the assignments and code alongs in this course will be using Node.js, we will shed enough light on the core concepts of backend so that students can take a language agnostic approach and move to a different tech stack if required with ease. We believe that you must be proficient in programming, and not just a particular programming language.
99+
100+
Now that you have enough context on Node.js, let's prepare our coding environments on our computers. Coming up next is your first assignment of this course which will walk you through setting up your Node.js environment.
101+
102+
---
103+
## References
104+
- https://medium.com/jspoint/introduction-to-node-js-a-beginners-guide-to-node-js-and-npm-eca9c408f9fe
105+
- https://en.wikipedia.org/wiki/Node.js
106+
- https://www.simplilearn.com/tutorials/nodejs-tutorial/what-is-nodejs
107+
- https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/
108+
- https://nodejs.dev/learn/introduction-to-nodejs
109+
- https://medium.com/jspoint/how-javascript-works-in-browser-and-node-ab7d0d09ac2f
110+
- https://www.geeksforgeeks.org/top-8-reasons-to-learn-nodejs-in-2020/
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Getting ready with Node.js
2+
3+
Assignment repo link to be inserted

0 commit comments

Comments
 (0)