If you are a React developer and want to jump straight to my followup article about React, you can find it here: https://email@example.com/essential-terms-for-a-react-developer-feb88be0206b
This article represents a list of the key terms and concepts that are particularly useful for a web developer to get to grips with. There is a lot of technical jargon and acronyms that can be incredibly daunting for anyone who is new to web development.
Definitions found in official documentation are often too verbose and not friendly to new developers. I have provided a short description for each of these terms. As an engineer who has recently transitioned to software development, this is the terminology cheatsheet I wish I had when I started.
To experienced developers, please pass on to the junior developers as this may help them more than you think! To junior devs and students, don’t worry if any of these concepts seem daunting, the best way to learn is to gain hands on experience with them.
Disclaimer: The following definitions are based on my own interpretation, and may not necessarily match formal definitions.
A server often refers to a computer or program that provides data to send to a client or other servers.
Server-side rendering means that the HTML is generated on the server, sent to the user through a HTTP request and rendered directly on the browser.
Because server-side rendered web pages are pre-generated, they are more easily found by the web crawlers such as Google’s, and leads to higher search ranking than rendering client side using React.
URL (Uniform Resource Locator, a subset of URI)
The address of the web page, eg: https://www.example.com
DNS (Domain Name System)
DNS is used to assign an IP address to a URL which is easier for people to type, eg. assigning 126.96.36.199 to www.example.com
HTTP (Hypertext Transfer Protocol)
HTTP is the standard for sending information over the internet, in a way that allows web browsers to understand and display on a web page. Most commonly, when you type a URL into the browser, a HTML page is sent in response and rendered by the client as a web page.
HTTPS (Hypertext Transfer Protocol Secure)
HTTPS uses TLS (Transport Layer Security) to encrypt information sent through a HTTP request. Data sent over HTTP only can be easily intercepted, therefore any sensitive data must be sent over HTTPS.
TLS (Transport Layer Security)
TLS is the primary protocol to secure web pages over HTTPS, and replaces SSL (Secure Sockets Layer) which is now deprecated. Services such as Cloudflare or LetsEncrypt can be used to set up encryption for custom domains.
API (Application programming interface)
An API provides a way for two computer programs to interact with each other. This often uses an agreed standard such as JSON, XML, or HTML to represent the data. The standard way to share data over the internet is to use a REST API.
REST API (Representational State Transfer, aka RESTful API)
A website can use a REST API to share data with other websites or programs. This uses HTTP requests, with common ones being:
- GET to return data
- POST to send data
- PUT to update data
- DELETE to delete data
Public parameters can be included as part of the url, often called Query Parameters or a Query String, eg: https://www.google.com/search?q=cats
XML (Extensible Markup Language)
XML is a language to represent data, and uses a similar notation to HTML. XML uses angle brackets to hold blocks of information, and looks like this:
<person firstName="John" lastName="Doe">
<pet name="Fluffy" type="Dog"/>
YAML(YAML Ain’t Markup Language, Yet Another Markup Language)
Yet Another Markup Language to represent data, commonly used for configuration files. YAML uses indentation to represent hierarchy and dashes to denote blocks, and looks like this:
Cookie (HTTP cookie)
Cookies are used to store data in the user’s browser, and remains even after restarting the browser. They are often used to store authentication tokens to check if the user is logged in. For private data, recommended settings are:
- Secure: only allows cookie to be transmitted through HTTPS.
- Expires: sets the time for the cookie to expire.
Tracking cookies can be used by 3rd party adverts on websites to build a browsing history of the user. As a user, this can be prevented by enabling ‘block third-party cookies’ in browser settings (enabled by default in Safari). As a developer, you should design pages to work without relying on third-party cookies.
Local storage can be used by web browsers to store data from websites in key/value pairs, and is permanently persisted until deleted. Cookies are recommended over local storage for private data as local storage does not much security protection.
Session storage is similar to local storage except the data is removed for new sessions, such as closing and reopening the browser or new tabs.
JWT (JSON Web Token)
JWT is a standard that is often used for authentication on websites. JWT contains a header, payload and signature, and uses an agreed private key to verify the owner’s identity. The main benefit is that it does not require a database to validate the token (sometimes called stateless), as the JWT standard provides the means of coding based on the private key and signature.
As JWT does not need to be checked against a database, it can have performance benefits as it does not require as many database calls to implement. However JWT has greater security risks than a server-side sessions approach, and be wary of using third-party libraries as they often do not implement the standards safely.
Server-Side Sessions (Session-based authentication, bearer token)
A sessions based approach to authentication generally involves checking a hashed password against a database. If the hashed password matches, a session ID is generated and stored on the client as a cookie for that domain. This cookie can be checked on any pages that require authentication.
To avoid a lot of database lookups for the session ID, it is recommended to use an in-memory (RAM based) data store such as Redis or Memcached for sessions data.
CORS (Cross-Origin Resource Sharing)
CORS is a standard that restricts what information can be sent between a server and client (typically). This is to ensure the data is being sent and received from trusted sources only.
The main setting to get right is ‘Access-Control-Allow-Origin’ which is used to check that the data is coming from a trusted domain, which should be the address of your web server, or external APIs when using them. Using ‘Access-Control-Allow-Origin: * ’ means any domain can send data to your website, and is not recommended for production websites.
- Components on the page can update without having to reload the page
- User can navigate to different ‘pages’ inside the domain without actually triggering a page refresh (as it is a Single Page App — SPA will be explained in Part 2)
- The same component can be reused on other pages, and even other websites
- Only the components that need to change have to be redrawn, much more efficient than reloading everything on the page every frame
- The ‘state’ can be stored and reused within the app, eg. text in an input box can be saved when moving between pages within the React App
Angular and Vue offer similar functionality to React, and each has a slightly different approach.
React is designed primarily to be run in the client, such as a web browser like chrome. Electron can be used to run React as a desktop app in Windows, MaxOS and Linux. React Native uses a similar syntax to React but is designed to run on both Android and iOS platforms to create apps for the app store. It is possible to render React pages on a server, using a library such as Next.js or Gatsby.
I hope this article has been useful. As an engineer coming into the software world without a computer science background, I believe it’s important to understand the principles and use cases rather than memorize definitions from official documentation.
If this has been useful, then give it a like and please share. You can find the follow up article focusing on React here: https://firstname.lastname@example.org/essential-terms-for-a-react-developer-feb88be0206b
Ho-Wan is the founder of Spandraw, a web app to mark-up PDFs, generate load takedowns, and to generate 3D IFC models from PDF files. He is an experienced structural engineer, turned software developer.