The full stack web development world and javascript keep moving at a tremendous pace. This is my attempt to capture some of the higher level concepts, languages and tools that a beginner and intermediate developer should be aware of.
Note - I included some other technologies that are not in my primary stack, but these are the ones I am most familiar with:
text editor - a text editor is where you write your code. These range from command line tools to fully featured tools
source control - this is of utmost importance in todays distributed development environment. Even with a single developer, source control allows careful control over change and the ability to revert back to known working states when things go wrong.
command line - a way to control the computer with out a graphical interface. A number of tools must be manipulated with the command line.
build tools and bundlers - are tools to create your web application
-webpack - is a tool that takes your source code from your project and converts it to a bundle that can be loaded properly by your browser.
-create react app - (CRA) is a tool used to create a number of files as a starting point for the project and packages it for deployment. CRA also uses a webpack under the hood, but the user doesn't have to understand these details.
package manager - package managers exist to help distribute all the pieces of code people have published. Using other peoples code makes writing code faster.
virtualization - is done to make it easier to distribute an application to multiple hardware environments.
environment variables - are used primarily to store data the application needs but should not be stored in the source code like user name and password for user and database logins.
People write code to solve problems. The common problems everyone solves over and over end up in packages that everyone ends up re-using. Don't be afraid to use other peoples code. This is just a small sampling of available packages.
Front end only - These packages are designed to run in your browser not on the backend server.
For both front end and backend
Backend only
Also referred to as the client. The front end is what runs in your browser and can be run on many different computers at the same time.
Document object model - connects web pages to scripts by representing the structure of the page in memory. docs
Structure - the structure of your webpage is important
HTML - (HyperText Markup Language) is the code used to structure a web page and its content. docs
Styling - The difference between a webpage that looks great and one that looks outdated is almost always the styling.
CSS - Cascading Style Sheet allows you to format your webpage with color, size, spacing. docs
Images - A picture is worth 1,000 words, using image on a webpage is key to rich content.
SVG - Uses geometric shapes to render graphics. Resolution independent. docs
XML - stands for Extensible Markup Language and is similar to HTML but has no predefined tags to use. SVG stores its data in XML. docs
Canvas - Canvas uses pixels. Gets blurry when resized. Can be more performant. docs
Javascript in the browser
React - react is a library that gives developers an application programming interface (API) to manipulate the DOM (this is React's ReactDOM package). React uses components and JSX to make building reusable code easier. docs
JSX - is a syntax extension for React Javascript code that lets you write HTML-like markup in a javascript file. This makes it easier to write reusable HTML. docs
State - a key react concept that guides setting and storage of data between renders. docs
Hooks - a key react concept for logic triggered by state change docs
Vue - is a framework for building web interfaces. Vue is lightweight and best for small projects prioritizing speed over functionality. doc
Angular - web development framework. Angular is best for dynamic more feature rich sites. docs
Note: React vs Vue/Angular - The key difference between React and Vue/Angular is that react is a library not a framework and therefore requires you to do more work to build your project in library and tool selection. Vue/Angular are frameworks with reduced choices for project setup. Vue/Angular should generally be easier to learn but less flexible than React which is harder to learn but much more flexible.
To connect the front end with the backend you have to have some understanding of networking.
Ip addresses - IP stands for internet protocol. An ip address is a string of characters that identifies each computer on a network.
localhost - is the ip address of the current system you are developing on. This is the ip address used most commonly in development. The address 'localhost' and 127.0.0.1 are equivalent.
DNS - stands for Domain Name System which is a lookup table between domains we know like google.com and IP addresses like 104.234.123.11.
IPV4 - is the 4th generation of the internet protocol. IPv4 is in the format X.X.X.X where each X can be any value between 0 and 255. IPv4 has 4.29 billion possible combinations (which has now been reached)
IPV6 - is the 6th generation of the internet protocol. The key change is to create more available addresses. Using 128-bit addresses vs IPv4s 32 bit addresses, IPv6 can support 2^128 internet addresses, which is a lot. IPv6 format is xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx.
port - a port is the connection point of network connections. Each port is associated with a specific process or service. If you don't have the right ip addresses and ports, you will not be able to access your front end via the browser and your front end won't connect to the backend.
Subnet mask - a subnet mask is used to identify which network an IP address belongs to. Subnet masks can be created to create subnetworks that can't see each other. Often if networking issues happen, one needs to understand subnet masks to make sure two computers are on the same network.
Networking tools
Server - a computer that provides functionality for other programs and devices called clients.
Middleware - middleware is the layer between the response and the request.
ORM - stands for object relational mapping. This enables you to write less SQL and makes Create, Read, Update, Delete (CRUD) operations much faster for a developer to implement.
Typescript can be used in both the front end and the back end and gives strong typing to javascript for easier error prevention. The learning curve can be difficult at times but the benefits are worth it! docs
This took me a while to build these concepts and relationships in my head. Hopefully they are helpful for some of you still trying to understand the fundamentals of full stack web development.
Let me know if there are more concepts you think I should include. Obviously at some point this becomes more advanced. I did introduce some advanced concepts, but I think you have to hear about things several times before you make the effort to learn them.