Concept Map
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 - VsCode
- Source control - Git
- Package manager - Npm
- Javascript technology - React
- Server - Node JS
- Middleware - Express
- ORM - Sequelize
- Database - Was SQL Server, now moving to Postgres
Writing Code
text editor - a text editor is where you write your code. These range from command line tools to fully featured tools
- VsCode - mainstream text editor. Has lots of add-ons to enable additional capability
- Sublime - slightly more lightweight than vscode
- Notepad++ - basic text editor with some neat addons.
- vim - command line text editor. More powerful than nano. Two modes, edit, and command mode.
- nano - command line text editor. simpler and less capable than vim.
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.
- git - this is the mainstream development tool. This runs on your own pc locally and connects to a cloud tool like github or gitlab.
- github - cloud service that is the source for sharing code.
Setting up a project
command line - a way to control the computer with out a graphical interface. A number of tools must be manipulated with the command line.
- bash - created in 1989, unix shell and command language.
- zshell - or zsh, created in 1990 is a unix shell with improvements over bash including the ability to use shell scripts. Comes as default language in macOS starting in Catalina.
- command shell - windows command line built to automate routine tasks
- powershell - windows command line built to extend command shell to run more sophisticated commands called cmdlets
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.
Using others code
package manager - package managers exist to help distribute all the pieces of code people have published. Using other peoples code makes writing code faster.
- npm - stands for Node Package Manager and is the default manager for NodeJS.
- yarn - stands for Yet Another Resource Navigator. Yarn was developed to overcome some issues npm had at the time, but both have kept pace with each other and are very similar in capability.
Running a server
virtualization - is done to make it easier to distribute an application to multiple hardware environments.
- docker - is an open platform for developing shipping and running applications. Docker uses a client server model. docs
- podman - is a daemonless, open source linux native tool designed to deploy applications using containers and images. Podman was designed to be more secure than docker.docs
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.
Javascript Packages
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.
- material UI - open source library that implements google's styling for html components docs
- redux - Redux is a key tool used in managing state across an application. This can be used with any web technology including React, Vue and Angular docs
- react tables - react tables is a library that exists for react that make creating tables easier. There are other competing libraries including one in material UI worth considering. docs
- bootstrap - toolkit for styling websites. Has lots of themes and capabilities. docs
- d3 - very power visualization library enabling dynamic visualizations. docs
For both front end and backend
- lodash - utility library enabling things like deep object comparison that aren't easy to do with javascript out of the box. docs
- package.json - file used for a number of things including saving your dependencies for both front and backend, so that your package manager can easily install the packages you need on another machine.
Backend only
- nodemon - enables automatic reload of your server after code change docs
- rimraf - enables easy deleting of server files including npm packages and optimized build filesdocs
Front End
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.
Networking
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
- ping - the most basic tool, that answers the question, "can I see a computer through a network?"
- browser network tab - a more advanced tool that can be used inside the developer tools in a browser. This will show data received and sent to the browser.
- wireshark - a very advanced network tool that allows you to see all the packet traffic in a network.
Back End
Server - a computer that provides functionality for other programs and devices called clients.
- nodeJS - the mainstream javascript server choice. docs
Middleware - middleware is the layer between the response and the request.
- express - one of the most popular middleware tools, lightweight and easy to learn. docs
- NestJS - opinionated more scalable, but harder to learn docs
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.
- Sequelize - modern Typescript and NodeJS ORM for Oracle, Postgres, MySQL, MariaDB, SQLite, SQL Server+docs
Typescript
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
Summary
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.
Top comments (4)
Thanks for the feedback. Definitely so much to learn! Good luck in your efforts!
@thebridge2, It is really great! A map of this messy arena is extremely helpful to navigate and setting mind up to a frame. It is utterly helpful for newbie like me. Keep up these good work. Inspired to do good like you in contributing to community.
A very nice idea. A concept map instead of a road map haha. I like it
Awesome 👍😎