An Introduction to Web Development in 2018
An overview of web development and how to understand the changing landscape
This article is part 1 of an 9-part series of articles.
This report is more of a guide for the prospective web developer, and therefore it’s not necessary to read the all of it in its entirety. It’s possible to just read the chapter or section that is relevant to the problem you are trying to solve. Keep this in mind.
The topics covered in this report can be broken down into three categories:
- Core competencies (languages, data)
- Intermediate competencies (testing, git)
- Soft skills (editors, deployment)
There are more topics relevant to a developer than this report covers, however these are, in my opinion, all the competencies and skills that a good developer needs to know, regardless of their stack. The web development field (primarily for JavaScript and Node developers) is in a very chaotic state with new frameworks and tools coming out on a daily basis, something that we will get further into later. Because of this turmoil, this report will try to focus on the current “standards” even though these might will likely change in the future. Still, the principle and reasons behind these tools and skills will last much longer.
There are also individual links provided throughout the report for more in-depth reading on different topics when necessary. Furthermore, this report will focus slightly more on JavaScript as opposed to other famous web development languages such as PHP due to JavaScript being the most popular language in the StackOverflow 2018 Developer survey, along with the top three libraries and frameworks being for JavaScript. Not to mention JavaScript is the second most wanted language, with React and Node being the two most wanted libraries or frameworks.
It is the goal of this report to provide you with a far better understanding of what web developers are talking about, what tools they use, and what you will need to do to become one. This list might seem daunting at first, but it’s been broken down into a manageable 3-step guide on how to setup, build, and deploy a website or web application.
Glossary: Rapid-fire buzzwords
Quick list to tick off to help you understand the jargon.
- App, Application: An application is a program that runs on a computer that is built to do specific tasks to the benefit of the user.
- Web Application: A web application is the same as a regular application, but runs on a server instead. The advantage of this is that your application is now accessible to anyone with a web browser, without them having to download it on their computer.
- Frontend, Client-side: The user interface or client side of an application is what the user interacts with, which is also referred to as “frontend” as it has a lot to do with the appearance, experience, and interface of the application.
- Backend, Server-side: The server side of an application is where all the business logic and authentication logic happens. “Server-side” is also called the “backend” of the app so there’s not necessarily any interface here to interact with.
- Stack: These are our language, tools, utilities, frameworks, networks and services used to run an app.
- Full-stack: A full-stack developer is a developer who can program both an application’s frontend and its backend. This is a reasonably complicated skill to master as frontend programming is very different from backend programming and each requires a unique way of thinking.
- HTTP(S), SSL, TLS: HTTP is a protocol for transferring data through the use of a web browser, SSL and TLS two popular protocols used on top of HTTP to make HTTP into HTTPS, and therefore a secure protocol for transferring data.
- API: API’s are sets of functions and procedures that allow the creation of applications. An API enables access to the features or data of an operating system, application, or another service.
- AJAX: With AJAX, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.
- JSON: JSON is an open-standard file format that uses human-readable text to transmit data objects consisting of key–value pairs and array data types.
- YAML, yml: YAML is a human-readable data serialization language. It is commonly used for configuration files but could be used in many applications where data is being stored or transmitted. It is also a superset of JSON since YAML 1.2.
- ENV: An environment variable is a dynamically named value that can affect the way running processes will behave on a computer. This is used for, e.g., storing secret access keys and passwords.
- Node Modules (node_modules): This is a folder in most modern web applications where various mini-frameworks and utility tools are located. More on this later in the Node chapter.
- Package.json: This is a file in the root directory of most modern web applications. It details the dependencies used in the applications and the steps to start run it.
- CI/CD: This refers to the combined practices of continuous integration (merging every developer on the team’s copy of the application into a main project at least once per day) and continuous delivery (the practice of working in very small increments that you can continuously release, instead of one big release every few months).
- Functional Programming: a programming paradigm (the style of building programs) that treats the processing of data as absolute and avoids changing both state and mutable data. This is becoming very trendy at the moment.
- Static or Dynamic Typing: This could be an article on its own, so here is a good one. This refers to declaring variables with a type (ie. string, boolean, etc) before running the code or allowing it be changed during execution.
- Markup and Markdown: Markup is a generic term for describing languages that describe the format of a document, whereas Markdown is one of these specific languages.
- Cross-platform: These are applications and programs that can run on different operating systems (MacOS, Windows, Linux) without having to write platform-specific code.
- Native vs. PWA vs. Hybrid: These are different types of smartphone applications. A native application is written specifically for one platform, most commonly Java for Android and Swift for iOS respectively. Progressive Web Apps (PWAs) are a very new method to create smartphone apps where a web application runs on a smartphone without any installation required. Lastly, hybrid applications are applications which are written for the web but then passes through a program that uses that code and outputs native code (e.g., Cordova).
Plug-and-play
This is a very brief section for those of you who would rather not do much (or very minimal) development and setup, and would rather have something up and running in a few short minutes or hours.
Squarespace
This software-as-a-service company allows you to start a website, edit all the content, designs it for you, handles all your domain needs, and hosting requirements for a small monthly fee. Currently, for out-of-box websites, this is your best bet. A quick search online will also reveal discount codes for your first few months.
Website builders
While these services are relatively inexpensive, you could get away with far better for the same price. If a blog is what you’re after, Wordpress themselves provides an excellent and (optionally free, plans start at €48/y) minimal hosting service, or you could use Siteground for higher needs. Moreover, there’s also 000webhost a free version of the hosted cPanel service that allows you to serve up files on an Apache server. This is also free. However, you will have a shared host (e.g. multiple people using the same server) which means that if one individual’s application goes down, the entire server will also go down, so be sure to keep that in mind.
Several other companies offer cheap hosting services through the use of cPanel: Hostgator, BlueHost, Hostinger, and GoDaddy are some notable ones. These services provide you with shared server space and an FTP (file transfer protocol) interface where the user can merely dump their website files into it, and the host does the rest by serving those documents up to your corresponding IP. These services sometimes also have so-called “Website Builders” integrated into them which provides the user with a Wordpress or Joomla one-click-install. This is usually carried out by a different service or plugin, usually Installatron.
In the next article in the series, we’ll cover many of the languages that power web development in 2018, including an in-depth look at JavaScript, and high level information on PHP, Ruby, Python, and Golang.
Next article: Languages →
