What is a web program?
What is a web program? How do we create a web program? Let's do a quick overview.
Web Program - Web app
A web server is a program that serves webpages to web browsers. A web program - web application - web app - is a program that runs in a browser. Different than traditional software programs that are installed, a web app is delivered over the internet and run in a browser. You can run web apps from any phone, tablet, laptop, or desktop with a browser and an internet connection. We use them everyday for social networking, e-commerce or access to dynamic information. The client provides the interaction with the user that access resources via the internet.
Client Server Architecture
Web apps follow a client-server architecture where the browser functions as the client which makes requests of the web server. The server processes the requests and responds.
Consider this example client-server architecture. The Airbnb client allows a user to view properties, select search criteria and make booking requests which are sent as http requests to a web server. The server responds to the requests and interacts with the database of properties.
Through this course, we'll be writing both the client code to run in the browser and the server code to process the requests. This is known as full-stack development - both the client-side and the server-side - making an end-to-end web application program.
The technology stack we'll use to build our full-stack web applications is:
Client-side - frontend
Frontend development focuses on user interaction - displaying an intuitive user interface, creating user interaction and responding to user events. Web program clients run in a browser. We'll use the React framework to develop our clients.
React
React is a JavaScript library for creating reusable components of HTML, CSS and JavaScript. So.... we'll need to userstand these pieces in order to write React.
JavaScript
JavaScript is the programming language of the web. The logic, interaction, and dynamic elements of web applications are created in JavaScript. While HTML provides structure and CSS determines the presentation, JavaScript makes web programs dynamic. TypeScript is a superset of JavaScript that adds static typing and is commonly used in React to make more robust React applications.
HTML
HTML (HyperText Markup Language) is the standard markup language used to create and structure content on the web. It defines the elements of a web page using tags for content like headings, lists, images, and links. HTML is not a programming language—it doesn’t perform logic or calculations—but rather a markup language used to describe the structure of a web page. Everything viewable in a browser is built with HTML. The HTML may be written directly as in a traditional website or generated by a framework like React. To write a web application that generates HTML, we need to understand how HTML structures a webpage.
CSS
CSS is a different markup that defines the visual style of web sites and web applications. CSS is where we control the layout of the page, colors, fonts, transitions, etc. It is also where we create what is know as responsive site - one that displays differently depending on the device size.
Server-side - backend
Node.js
As mentioned in the client side, JavaScript is the language of web applications. This is not only true for the client side running in a browser, but is also true for a Node.js server side. Node.js is a JavaScript runtime environment for servers - not browsers. Node.js enables non-blicking, event-driven I/O that can handle many simultaneous connections, for scalable network applications.
MongoDB
The client and server can interact and handle various requests but for the changes to remain even after the browser is closed or the server restarts, a persistent storage of data is needed. MongoDB stores data in JSON-like documents.
Middleware
Middleware oversees the connection between the client-side and the server-side. How are the requests from the client vetted? Middleware is the piece that checks whether the request coming from the client should be processed by the server. Should a non-admin user on an ecommerce site be able to change a price on an item in the inventory? Middleware is where such checks are performed.
Where are we going?
We cover the full stack in this course. Let's take a look at what we'll be learning that will get us to our goal.
