Back-End Development

Definition: Back-end is the server-side on how the website works, updates and changes which cannot be seen by users.

• In Program C and D, we learned about HTML, CSS and Javascript which are important languages for Front-end Web Development (can only make static websites).

• Back-end Web Development is essential to make a dynamic website which can work with servers and databases.

• The table below shows the differences between front-end and back-end in general.

Front-end vs back-end

• To have a concrete example, we can think of a house.
• Front-end: Interior design, furniture, rooms, toilets, walls, lights, etc.
• Back-end: Wiring system, water system, Wifi, etc.
• The client-server-database model of web development.

What is Node.js

Definition: Node.js is a Javascript runtime environment to build back-end services.

• In Program D we learnt that JavaScript (JS) code is for web browsers only, but with Node.js, we can finally use JavaScript on the server and not just the browser!

• There are many programming languages that can be used to run the backend server but why not we use Node.js since it uses what we already learnt, which is JavaScript.

• Node.js creates a server to:

  • serve websites and web applications.
  • interact with other servers such as getting data or changing data.

• To use node.js in our projects, typically we would need to install node.js on our computer, then create our project folder and initialise node.js through the terminal. This is only the case if you're using a local offline IDE such as Visual Studio Code.

• For Glitch.com that we're going to use, it is an online IDE and so we don't have to install and initialise node.js on our own. The installation process has already been done for us on their servers.

• What we need is just a file called package.json to use node.js in our project:

• As you can see this is a json file that stores simple data structures and objects in JavaScript Object Notation (JSON) format similar to JavaScript objects. Node.js uses this file as the server settings for this project.

• You can change the name of your project, the version of your project and its description. There are many more you could add to the package.json file but we will learn more in the upcoming chapters.

JavaScript Framework

• When a web developer talks about building a web app, usually the conversation involves using a JavaScript framework.

• A framework provides developers with the basic foundation necessary for building JavaScript applications:

  • Quick on setup compared to starting from pure JavaScript.
  • Lots of features available for web development come built-in.
  • Saves time on mundane work and less repeated codes.

• Node.js is a runtime environment that allows us to use a framework on top of it.

• Some of the popular frameworks in recent years are:

  • React
  • Vue.js
  • Angular.js
  • Svelte

Svelte vs React

• As we know, there are many frameworks that can be used for web development.
• Each framework will have its own unique way on how to do a particular code.
• Let's take a look at the difference between React and Svelte.
• Here's a sample of a basic application made with Svelte:

<script>
let a = 1;
let b = 2;
</script>

<input type="number" bind:value=\{a\}>
<input type="number" bind:value=\{b\}>
<p>\{a\} + \{b\} = \{a + b\}</p>

• Below is a code snippet from the same application built with React:

import React, \{ useState \} from 'react';

export default () => \{
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) \{
    setA(+event.target.value);
  \}

  function handleChangeB(event) \{
    setB(+event.target.value);
  \}

  return (
    <div>
      <input type="number" value=\{a\} onChange=\{handleChangeA\} />
      <input type="number" value=\{b\} onChange=\{handleChangeB\} />
      <p>\{a\} + \{b\} = \{a + b\}</p>
    </div>
  );
\};

• Svelte vs React Comparison:

• Each framework has its own advantages and disadvantages.
• There doesn't appear to be a correct way to choose a framework. It is entirely dependent on the user's requirements.

What is Svelte

• Svelte is a compiler that turns .svelte files into HTML, CSS and JavaScript files.

• The main difference between a compiler versus a framework is that traditional frameworks like React and Vue do the bulk of their work in the browser, whereas Svelte shifts that work into a compile step that happens when you build your app, producing highly-optimized vanilla JavaScript.

• This allows Svelte to produce very simple and lightweight apps while also being able to cater to the developer experience with simple rules and syntax, making it more intuitive and fun to code web apps.

Key Concepts Summary

• Back-end development focuses on server-side functionality that users cannot see directly
• Node.js allows JavaScript to run on servers, not just in browsers
• JavaScript frameworks provide pre-built foundations for building web applications more efficiently
• Svelte is a compiler that produces optimized vanilla JavaScript, unlike traditional frameworks
• The choice between frameworks depends on project requirements and team preferences
• Back-end development enables dynamic websites with database and server interactions