Part 1<\/a><\/u><\/strong> will be dedicated to the theory<\/em><\/strong>. We will explore what \u2018backend\u2019 really is and how it differs from frontend, and we will lay out its essential concepts and key terminology.<\/p>\n\n\n\n
Part 2<\/u><\/strong><\/a> serves as a quick preface to the technology and languages that we\u2019ll use in part 3.<\/p>\n\n\n\n Part 3<\/u><\/strong><\/a> is a practical introduction<\/strong> to making a backend. We will get a backend program to print \u201cHello world!\u201d<\/p>\n\n\n\n In part 4<\/a><\/u><\/strong>, we finish up with some final pointers and advice about continuing your learning.<\/p>\n\n\n\n This is a guide to a specific topic and not to programming in general –\u00a0 which is why, in case you noticed, <\/a>the curriculum of our bootcamps in web and app development<\/a> looks different!<\/p>\n\n\n\n New programming topics can be confusing. If you are totally new to \u201cbackend\u201d, do yourself a favour, give the article some time, and maybe read it more than once. And by all means google a lot!<\/p>\n\n\n\n <\/p>\n\n\n\n I\u2019d like to start by trying to draw some lines between different ideas and terminology. All this technical language can be confusing, and even senior developers will mix these terms up.<\/p>\n\n\n\n As front-end developers we are usually boxed in… in this box. The browser. We write our HTML files and they show up in here.<\/p>\n\n\n\n Other front-end \u201cboxes\u201d exist too though, right?<\/p>\n\n\n\n There\u2019s Android apps, iOS apps, Windows apps etc. and they all have frontends too.<\/p>\n\n\n\n While developers making Windows or Android apps might be using different programming languages in different boxes, not writing in HTML and CSS, they\u2019re still all frontends.<\/p>\n\n\n\n \u201cThe things that the user can see, hear and interact with\u201d.<\/strong><\/p>\n\n\n\n I thought it worthwhile to clarify this point. The frontend isn\u2019t just a web thing.<\/strong><\/p>\n\n\n\n More often than not, a frontend usually needs something more<\/em>, some extra information, be it to download a video, or a user\u2019s new unread messages (and even confirm if that user is authorised to read messages in the first place). In a very broad sense, the backend is the stuff we don\u2019t see directly as users. The data and logic behind the visual experience. It could be getting data from a weather service for the weather widget.<\/p>\n\n\n\n The phone itself has no way of knowing what the current weather is like, so it talks to a \u201cbackend\u201d to get that data and show it to the user. When you push control+P in the browser, a little \u201cfrontend\u201d window pops up, and that window can talk to the printer plugged into your computer, behind the scenes (the backend!).<\/p>\n\n\n\n So these are all examples of frontends working with backends to provide a useful service or experience to the user.<\/p>\n\n\n\n \u201cA program (or a file) that a frontend <\/em>program can interact with to get additional information or functionality for the user\u201d.<\/strong><\/p>\n\n\n\n Let\u2019s zoom back in to what this means in practice, and specifically for a web developer. The backend of a website is usually a \u201cserver\u201d, that we talk to via its \u201cAPI\u201d.<\/p>\n\n\n\n When you go to youtube.com, your browser communicates with the YouTube server which will then send back an index.html file, which is the YouTube website. Your browser will then show that html file on the screen.<\/p>\n\n\n\n Then, when you click on a video on the website, the webpage will send a request to a YouTube \u201cAPI\u201d asking it to start sending the video to your webpage.<\/p>\n\n\n\n APIs are pretty simple code – YouTube.com\u2019s server looks like this:<\/p>\n\n\n\n URLs are like a universal language, used all over, in desktop apps, across the internet, in the web, in gaming, in blockchains, to make clear requests from one program to another to find resources and ask for things. APIs are made up of ROUTES,<\/strong> like the \u201c\/wiki\/\u201d and \u201c\/search\u201d above, which are like little URL-stubs leading to different places in the server with different features. This is how APIs are organised. (You can see the webpage you\u2019re on making all these API requests by typing CTRL-SHIFT-J and then clicking on the network tab. If you reload the page you\u2019ll see all the different resources for the page being requested).<\/p>\n\n\n\n The web, and many apps that you use daily, follow what is called the \u201cclient-server\u201d architecture pattern.<\/p>\n\n\n\n Let\u2019s try to see how the words are all related. You will hear people mixing \u201cclient\/frontend\u201d and \u201cserver\/backend\u201d together as their meanings are quite similar.<\/p>\n\n\n\n The frontend is a reference to the HTML app that you made, but might also be used more generally to reference your HTML, or the browser that is showing your HTML, or even your computer.<\/p>\n\n\n\n Software people don\u2019t think about this hardware side of things much though.. So \u201cbackend\u201d is more of an umbrella term for one\/many servers generally.<\/p>\n\n\n\n An API is the system through which your program talks to a server. APIs are how computer programs make requests to each other.<\/p>\n\n\n\n A server is a computer program that is usually running 24\/7, waiting for client applications to make requests. You communicate with servers through their APIs.<\/p>\n\n\n\n The backend refers to everything behind a frontend app (like a webpage) that helps the frontend function. The backend could consist of a single server, or 25 different servers!<\/p>\n\n\n\n For example, in the case of youtube.com, the frontend (the webpage) is probably communicating with the authentication API<\/strong> to log you in, the search API<\/strong> to search through all the videos in the database, the video streaming API<\/strong> to start streaming the video to your browser, etc. Those APIs are all most likely running on their own special servers.<\/p>\n\n\n\n Without turning this into an article about databases, the database is also part of the backend<\/em>, and usually one particular server will be responsible for communicating with the database, asking it to find \/ create \/ update \/ delete documents on behalf of the client.<\/p>\n\n\n\n Okay! That\u2019s enough confusing theory and new words. Part 1 is complete!<\/p>\n\n\n\n <\/p>\n\n\n\n Which programming language to use? There are literally hundreds of them out there, but for the majority of newcomers the choice should not be very difficult.<\/p>\n\n\n\n I\u2019d recommend only looking at JavaScript or Python, which, trust me, will help you sidestep many other steep learning curves with other languages. These two languages are light and won\u2019t get in your way as much as others.<\/p>\n\n\n\n (A common misconception is that the language of a server matters in relation to the front end. This is not true. Your frontend can be sending messages in JavaScript to a server that is written in C#, Swift, Rust, whatever. The requests themselves are commonly written in HTTP, URLs and JSON, which most programming languages can understand.)<\/p>\n\n\n\n If you are a frontend web developer already, or have an interest in also learning web development, I strongly recommend just focusing on using JavaScript in the frontend and backend<\/strong>. There\u2019s no reason to split your brain in half between languages at this stage. And speaking from experience (I\u2019m regularly working in a bunch of different languages, which can be a pain) no other language beats the flexibility or practicality of using a very modern non-compiled language that lets you write both front and backend.<\/p>\n\n\n\n To run JavaScript code outside of the browser, we use a program called \u201cNodeJS\u201d.<\/p>\n\n\n\n Hot Take: People put too much emphasis on NodeJS needlessly, as if it were some magical thing, but the truth is that every programming language has some tool to run its code.<\/p>\n\n\n\n For example, to run Python code, you type \u201cpython filename.py\u201d, \u201cpython\u201d being the tool which runs python files!<\/p>\n\n\n\n For Clojure programs you type \u201clein filename.clj\u201d, \u201clein\u201d being the tool that runs Clojure files.<\/p>\n\n\n\n For JavaScript you type \u201cnode filename.js\u201d, and \u201cnode\u201d will run your Javascript file.<\/p>\n\n\n\n NodeJS isn\u2019t a \u201cserver\u201d or a \u201cframework\u201d or whatever people are calling it these days, and it\u2019s unfortunate that people call it that, because it confuses everyone about JavaScript. NodeJS is just a tool to run your JavaScript files, like any other programming language has. That\u2019s the most helpful way of thinking about it in my opinion.<\/p>\n\n\n\n <\/p>\n\n\n\n Check if your computer already has NodeJS installed, by opening up If you don\u2019t see a node version number popping up, download and install NodeJS for you computer: https:\/\/nodejs.org\/en\/download\/<\/a><\/p>\n\n\n\n If you save this JavaScript file as \u201cindex.js\u201d\u2026<\/p>\n\n\n\n You can then run it from your terminal (go to the correct folder with \u201ccd\u201d command first) with \u201cnode index.js\u201d. Cool! You can now talk to that server program from any other program on your computer, like the browser for example. Go to http:\/\/localhost:8080\/<\/p>\n\n\n\n In your browser, it should say \u201cHello, World!\u201d<\/p>\n\n\n\n Congrats!<\/p>\n\n\n\n Let\u2019s try the same thing in Python. There\u2019s a good chance your computer has Python installed, but if \u201cpython -v\u201d doesn\u2019t give you a Python version number, download and install it from here: https:\/\/www.python.org\/downloads\/<\/a><\/p>\n\n\n\n The same simple server in Python, save it as index.py :<\/p>\n\n\n\n You can then run it from your terminal (go to the correct folder with \u201ccd\u201d command first) with \u201cpython index.py\u201d. Now, if you go to http:\/\/localhost:8081\/ you should see \u201cHello, World!\u201d<\/p>\n\n\n\n Wow, that was quick! Now you\u2019re a JavaScript and Python backend developer! There is no further \u201chidden knowledge\u201d, no secret handshake… Just keep practising!<\/p>\n\n\n\n These servers could in theory serve files (html, png, css, etc.) or deliver data from a database, let users log in, log out, deliver a user\u2019s calendar information, anything a server does.<\/p>\n\n\n\n Typically, developers try to avoid \u201creinventing the wheel\u201d. If you\u2019re making 2-3 new products a year, or a month, then you don\u2019t want to write everything from scratch. You\u2019re going to waste lots of time and probably make lots of unnecessary mistakes if you write everything from nothing each time.<\/p>\n\n\n\n For people making APIs there are API frameworks! These API frameworks make it easy to create and manage lots of different API routes, handling errors, dealing with permissions etc.<\/p>\n\n\n\n ExpressJS <\/strong>is easily the most popular JavaScript API framework.<\/p>\n\n\n\n Your next task is to install express and make a simple API with it.<\/p>\n\n\n\n Please make an API with these routes and return values: Google \u201chow to install expressJS\u201d, \u201cexpressJS example\u201d, \u201cexpress send JSON\u201d, \u201cexpress send HTML file\u201d, or \u201cexpress serve static\u201d to start getting to grips with what it can do.<\/p>\n\n\n\n (If you\u2019d like to do this framework step in Python, the simplest Python framework to use would be Flask<\/strong>. See how far you get!)<\/p>\n\n\n\n If you haven\u2019t heard this before, the reality of programming is spending 90% of your time googling keywords, finding and fixing weird bugs, or simply trying to get a clear picture of the task or problem at hand.<\/p>\n\n\n\n It\u2019s not your job to memorise and write code all day, but to become an adaptable and resourceful person that can find useful answers and good solutions to problems.<\/p>\n\n\n\n Memorising everything perfectly about your preferred language \/ framework might come as a side-effect<\/em> of experience, but I would never say it\u2019s the goal.<\/p>\n\n\n\n So get to it! Start practising your problem solving skills, and make the router with 4 routes as described above, using expressJS (or Flask for Python). This will involve 99% googling for examples and trying to fix bugs!<\/p>\n\n\n\n This concludes the practical part of the article! Congrats.<\/p>\n\n\n\n <\/p>\n\n\n\n Wow this has been a long guide. To avoid writing an infinitely long article, I\u2019ll instead leave some final notes and pointers.<\/p>\n\n\n\n You don\u2019t need to immediately read through this section, but if you\u2019ve got the energy, go for it!<\/p>\n\n\n\n Try googling these phrases to build your overview of technology!<\/p>\n\n\n\n You\u2019ve got the basic tools and knowledge to make a server, so keep going! As backend overlaps with other fields of programming, your choice on what to create is quite wide.<\/p>\n\n\n\n If you\u2019re looking for ideas on what kind of backends you can build, here is a list of useful examples<\/a> by Cory Althoff.<\/p>\n\n\n\n Pursue your own interests, think of the sort of projects that attracted you to backend in the first place, and don\u2019t be afraid to experiment. If you\u2019re feeling short of ideas, we recently published an article on where to go look for them<\/a>.<\/p>\n\n\n\n You\u2019ll eventually want to put your server on the internet for other people and programs to communicate with (we call this \u201cdeploying\u201d). I would recommend Heroku to start. Heroku is a \u201chosting\u201d service for running applications on the internet. You can upload your server code and it can run there for free (We call this \u201chosting\u201d. Heroku will \u201chost\u201d your program).<\/p>\n\n\n\n Just because a program is not frontend doesn\u2019t make it a server or backend.<\/p>\n\n\n\n \u201cBackend\u201d implies a relationship with a frontend that will consume data and talk to the backend. \u201cServer\u201d implies that you are delivering data to some other program.<\/p>\n\n\n\n You can<\/em> just write programs that run, do calculations, transfer files around a computer, clean up the harddrive, that don\u2019t have a frontend counterpart at all. Keep that in mind.<\/p>\n\n\n\n There are other types of APIs. For example, localStorage in the browser is an API built right into the browser that you can talk to with your javascript code. You don\u2019t use a URL to talk to it, but it is still a service that you communicate with in a specific way. localStorage.setItem(\u201cusername\u201d, \u201cbob\u201d) is asking the localStorage service of the browser to store some information. We would call this also an API.<\/p>\n\n\n\n It is common in modern web development to host your website(s) and server(s) separately, instead of serving the HTML files from the same server that handles data requests and database interactions. After all, the server might be serving data to a bunch of different apps. The server doesn\u2019t necessarily have anything to do with your website specifically.<\/p>\n\n\n\n For browsers, servers normally enforce a security policy called Same Origin<\/strong> Policy<\/strong>. This means if you are trying to talk to a server\u2019s API at http:\/\/localhost:8080 from your webpage which is on http:\/\/localhost:3000, then the server will probably reject any message that you send to it. In order to let your website communicate, if it\u2019s on a different server (aka origin) to your actual \u201cbackend server\u201d, you need to enable CORS <\/strong>(Cross-Origin Resource Sharing<\/strong>) on your server so the website can talk to the backend API.<\/p>\n\n\n\n To solve this issue in Express, just add 2 lines!<\/p>\n\n\n\n ***<\/p>\n\n\n\n This ends our dive into \u201cbackend\u201d. I really hope it helped paint a picture in your mind, on where all the pieces go and what some of the different terms mean. Christopher Shelley is a Senior Instructor<\/a> for the Web & App Development bootcamp<\/a>.<\/em> If you enjoyed his article on backend development, check out our introduction to Data Science too<\/a>, or take a look at our list of bootcamps<\/a>!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" An accessible, practical guide to start learning backend programming.<\/p>\n","protected":false},"author":4,"featured_media":46371,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[42,101],"tags":[],"class_list":["post-27191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-software-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/posts\/27191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/comments?post=27191"}],"version-history":[{"count":1,"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/posts\/27191\/revisions"}],"predecessor-version":[{"id":60810,"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/posts\/27191\/revisions\/60810"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/media\/46371"}],"wp:attachment":[{"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/media?parent=27191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/categories?post=27191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wbscodingschool.com\/de\/wp-json\/wp\/v2\/tags?post=27191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Part 1 – Let\u2019s look at some ideas and confusing words.<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.wbscodingschool.com\/wp-content\/uploads\/2022\/05\/1.-pic1.webp\")
<\/figure>\n\n\n\n![\"mix](\"https:\/\/www.wbscodingschool.com\/files\/2.-AdobeStock-by-mast3r_384959898-1024x367.jpeg\")
So, what is frontend? <\/h2>\n\n\n\n
All of this happens somewhere else. We typically call that somewhere else the \u201cBackend\u201d (or API, or server, we\u2019ll untangle that confusion later).<\/p>\n\n\n\n![\"Close-up](\"https:\/\/www.wbscodingschool.com\/files\/3.-AdobeStock-by-Andrey-Popov_122911027-1024x683.jpeg\")
When you boot up a computer game and it remembers your name and what level you are currently playing, it\u2019s reading that data from a file saved on your computer that contains all that information.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.wbscodingschool.com\/wp-content\/uploads\/2022\/05\/4.-pic4.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.wbscodingschool.com\/files\/5.-pic5-1024x492.png\")
<\/figure>\n\n\n\nSo, what is backend?<\/h2>\n\n\n\n
An API – or Application Programming Interface<\/strong> – is like the \u201cmenu\u201d part of a server program, and is how one computer program makes specific requests to another.\u00a0 Another way of thinking about the API is that it is the \u201cdoorway\u201d into the server.
<\/p>\n\n\n\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/<\/strong> -> \u201cI\u2019ll send them the index.html file\u201d
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/about<\/strong> -> \u201cI\u2019ll send them the about.html file\u201d
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/watch?v=dQw4w9WgXcQ<\/strong> -> \u201cI\u2019ll send them the video with ID dQw4w9WgXcQ<\/strong>\u201d<\/p>\n\n\n\n
You see this API usage all the time right? It\u2019s the URL!<\/h2>\n\n\n\n
This one\u2019s asking wikipedia.org\u2019s API to return an HTML file to us with information about a Cyclone:
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 https:\/\/en.wikipedia.org\/wiki\/Cyclone_Batsirai<\/a>
And this URL is asking google\u2019s search API to give us matches for our query \u201ceasy recipe ideas\u201d!
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 https:\/\/www.google.com\/search?q=easy+recipe+ideas<\/a>
<\/p>\n\n\n\n
A bit more on this later.<\/p>\n\n\n\nSo a backend is typically communicated with through its \u201cAPI\u201d, which is like a menu made up of \u201croutes\u201d. But where does the backend practically exist? Usually in a\u201cserver\u201d..<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.wbscodingschool.com\/wp-content\/uploads\/2022\/05\/6.-pic6.webp\")
<\/figure>\n\n\n\n
The backend is the \u201cserver\u201d part. The word \u201cserver\u201d can be used to reference the computer program \u201cserving\u201d the html \/ data to your frontend over the internet, but the word server also refers to the physical hardware, the computer running the server program. You know, these big computer things.<\/p>\n\n\n\n![\"network](\"https:\/\/www.wbscodingschool.com\/files\/7.-AdobeStock-by-.shock_37429195-1024x683.jpeg\")
So what\u2019s the difference between \u201cbackend\u201d and \u201cserver\u201d?
The backend of an application could be many server programs combined, for example one server for pictures, one for HTML files, one for logging-in\/out, one for sending\/retrieving messages etc.<\/p>\n\n\n\nSo once again, because this is confusing stuff\u2026<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.wbscodingschool.com\/wp-content\/uploads\/2022\/05\/8.-pic8-1.webp\")
<\/figure>\n\n\n\n![\"On](\"https:\/\/www.wbscodingschool.com\/files\/9.-AdobeStock-by-Andrey_451069748-1024x629.jpeg\")
Part 2 – Notes about Python, JavaScript and technology<\/h2>\n\n\n\n
What is the best language for backend development?<\/h2>\n\n\n\n
What is NodeJS and how does it relate to backend?<\/h2>\n\n\n\n
Part 3 – Let\u2019s make a server program<\/h2>\n\n\n\n
![\"abstract](\"https:\/\/www.wbscodingschool.com\/files\/10.-AdobeStock-by-Mykola-Mazuryk_339806569-1024x444.jpeg\")
First, how to make a server program in JavaScript.<\/h2>\n\n\n\n
\u201cGit Bash\u201d \/ \u201cCommand Prompt\u201d on Windows or \u201cTerminal\u201d on Mac\/Linux, and type \u201cnode -v\u201d.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.wbscodingschool.com\/wp-content\/uploads\/2022\/05\/code1-1.webp\")
<\/figure>\n\n\n\nNext, how to make the same server in Python.<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.wbscodingschool.com\/wp-content\/uploads\/2022\/05\/code2-1.webp\")
<\/figure>\n\n\n\nFrameworks – for more structured APIs.<\/h2>\n\n\n\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/<\/strong> -> serves an index.html file
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/about<\/strong> -> serves an about.html file
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/users\/1<\/strong> -> sends back some JSON {\u201cid\u201d:1, \u201cusername\u201d: \u201cbob\u201d}
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Every other route -> \u201c404 sorry this resource does not exist\u201d<\/p>\n\n\n\nI\u2019m not giving you the code for this final step with a framework intentionally.<\/h2>\n\n\n\n
Part 4 – Some final notes and pointers<\/h2>\n\n\n\n
![\"Relieved](\"https:\/\/www.wbscodingschool.com\/files\/11.-AdobeStock-by-auremar_51533969-1024x683.jpeg\")
\n
<\/li>\n<\/ol>\n\n\n\nMake a real app!<\/h2>\n\n\n\n
Putting your server program on the internet<\/h2>\n\n\n\n
A \u201cbackend\u201d app VS a regular app<\/h2>\n\n\n\n
Not all APIs are URL-based<\/h2>\n\n\n\n
Web developers, don\u2019t forget about CORS!<\/h2>\n\n\n\n
This Same Origin Policy<\/strong> is to protect consumers and companies against scammers, who could otherwise copy a bank\u2019s HTML website files, put it on the internet on a different server, and then trick people into logging in to the bank\u2019s real server from the fake website!
SOP<\/strong> means that the https:\/\/my-bank.com\/login API route can only be spoken to from a HTML page that was also served from that same \u201corigin\u201d, from https:\/\/my-bank.com\/ .<\/strong>This is a very good default behaviour I would say.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.wbscodingschool.com\/wp-content\/uploads\/2022\/05\/code3-1.webp\")
<\/figure>\n\n\n\n
Have fun coding! Now read the article again!<\/p>\n\n\n\n