NgSysV2-1.1: A Young Person’s Guide to Systems Development in the Age of AI

This post series is indexed at NgateSystems.com. You'll find a super-useful keyword search facility there too.

Last reviewed: Nov '24

1. Introduction

Hello and welcome! I hope you find what you're looking for here.

This post is intended for complete beginners. It covers everything I'd have liked to know myself when I first started to tinker with websites and databases. Perhaps you are still at school, or older and considering a change of career, or maybe retired (though still young at heart) and just curious. The important thing is that you have a young mind - one that is open to new ideas and quick to appreciate opportunities. You'll need this because the sheer number of new ideas you'll need to absorb is almost overwhelming. Modern Information System practice is a perfect jungle of tools and techniques. Worse still, this jungle is evolving at a dizzying rate. Where on earth should you start?

This series aims to minimise your difficulties by proposing a particular route through this jungle - one that delivers quick and useful results but also develops skills and concepts to enable you to go your own way subsequently.

Amazingly (and I've never ceased to be amazed by this), most of the tools and technologies I describe here are free. The only thing you will need to invest is your personal time. Unfortunately, this will not be an insignificant factor but, as they say, "no pain, no gain!

As further encouragement, however, let me also say that you now have a tremendous free ally - the general-purpose chatBot. This series includes some absurdly long posts full of tedious instructions. Nevertheless, they would be even longer if I'd attempted to describe the steps in the detail that you deserve. I can now be confident that wherever you might feel I've left you behind, you can call upon the bot to get you back on track. Before the release of chatGPT and other bots in 2022, I wouldn't have dreamt this to be possible. Now, everything has changed. See Post 4.1 for an introduction to your digital tutor. Currently, I recommend that you use chatGPT40 on its free tier.

All that said, here's a statement of the overall objective of this series and an outline of the route it proposes to follow.

2. Objectives

The assumption is that you aim to develop software that will read some information into a computer, process it in some purposeful way and then display the results on a screen. Oh, and additionally, you'd like anyone, anywhere in the world to be able to use your handiwork. This should be easy enough surely ...

In the world of IT, there are myriad ways of achieving this simple task. But in my experience, the simplest option is to use an internet browser such as Chrome or Safari as the "launchpad" for your application. This may seem odd, you might say. Isn't everybody using freestanding "apps" on their mobile phones?

Here's one reason: you want your application to be available to users working through every conceivable device - laptop, tablet, desktop computer etc. Browsers provide an excellent way of achieving this by insulating your application from differences in hardware and operating systems. They also give you a sophisticated and practical environment to support the logic of your application. Apps, on the other hand, are tied to particular hardware platforms and are mired in complexity.

Here's another reason: you want your application's information to be available to users anywhere in the world. Browsers are already positioned on the Internet, whose whole purpose is to facilitate information sharing. This is why major operations such as Amazon and Facebook are very happy to use web browsers as platforms for their systems.

So, the route I suggest leads to what is now generally known as a "webapp", a piece of software activated by simply entering the webapp's "address" into a web browser. This webapp will be capable of maintaining persistent data stores ("databases") and will provide security for this data via a "sign on" feature. Browser-based Chatbots provide an excellent example of the use of webapp technology.

Here's an outline of the tools and technologies you'll need to master to build a modern webapp:

1. HTML - Hypertext Markup Language - this is the "language" used to tell a browser how to format a webapp's output on a computer screen
2. An IDE - an Interactive Development Environment - this is the editing tool you use to create your code - Microsoft's VSCode is the IDE I'll be using here.
3. A Programming Language- this translates your application's "concept" into its digital implementation. The language I'll be using in this course is JavaScript
4. Browser Tools - these enable you to inspect and debug a webapp as it runs. I'll be using the toolset in Google's Chrome browser.
5. A Development Framework - this is best understood as a toolset that enables you to apply JavaScript efficiently to the particular requirements of webapp development. The framework I'll be using is called SvelteKit.
6. A Server - this is the remote host that will deliver your webapp code to your users. It will also provide storage for its data and may run selected elements of its code. I'll be using Google's Firebase on App Engine servers. Other platforms are available, but Google Cloud offers a particularly generous "free tier".

OK, buckle up, here we go ... Since you're reading this post online, I will assume that you are already reasonably accustomed to the online world. For this course, you'll need access to a desktop computer and, for simplicity, I've assumed that this will be a Microsoft Windows laptop. I'm sure that, where this isn't the case, you'll be able to adapt my instructions as appropriate.

2.1 HTML (Hypertext Markup Language)

You're developing software to display text in a web browser. You want this text to be displayed in various elegant configurations of position, colour, size etc. Web browsers enable you to specify these configurations by surrounding text content with "markup" codes that determine how the content should be displayed. This simple arrangement delivers surprisingly powerful results.

You can create a sample by typing the instructions into a text file in a simple editor like Microsoft's Notepad. Try this simple exercise:

Type the following line into your favourite text editor (eg the Windows Notepad utility) and then save it as a file with an HTML extension (eg "my-first-app.html"):

<h1>Hello there</h1>

When you "open" the file by "double-clicking" on its entry in Windows Explorer, Windows should respond by opening your default browser and displaying a screen displaying the words "Hello there". Congratulations, you've written your first webapp (albeit one that nobody but you can see, but we'll fix that later).

If things don't quite work out as expected here, this would be a good time to ask ChatGPT to help you fix the problem. The procedure described above relies on device configuration. Tell ChatGPT what you don't understand or what's not working on your particular device, and it will tell you exactly what you need to do to fix things.

The <h1> and </h1> markup "tags" in the example above are HTML instructions that tell the browser that the text they enclose is to be displayed as a heading. Google for information about <h1> and you'll find a mountain of tutorials and advice about learning HTML. An excellent place to start would be Mozilla.org's Getting Started with the web. Another useful site is the W3Schools HTML Tutorial. W3schools sites are interactive and enable you to experiment with HTML syntax.

Importantly, in these documents, you'll learn that numerous qualifiers are available to modify the action of a tag. For example, an <h1> tag can be qualified by a style='color: red; extension to override the standard selection of black text. Styles follow a system known as CSS (Cascading Style Sheets). You'll see an example of CSS in action in just a moment

2.2 The IDE (Interactive Development Environment)

You may just be getting the sense that writing your webapp will require you to create some rather large files. Webapp code is verbose and files containing thousands of lines would not be unusual.

You could, as shown in the example above, just type these lines into a basic text editor, but this would be a bad idea. Browsers are unforgiving beasts, and any spelling errors in your code will lead to the complete failure of your intentions. Ideally, you need a specialised text editor that will monitor the code as you enter it, format and highlight it in ways that help you control its structure, and perhaps even write it for you.

The IDE is designed to meet these needs - and much more besides.

Numerous IDEs are available, but Microsoft's VSCode is the one I recommend. It is free to install and very widely used. Once again it represents a steep learning curve, but Microsoft provides excellent online documentation.

Within the free VSCode package, you'll also find plenty of automated assistance - tools to format your code and to provide simple auto-completion mechanisms (eg, for JavaScript instructions and variable names). Checking mechanisms will pick up syntax errors, and highlight undefined variables etc.

The IDE provides many other useful services. So far, your application is represented by a single .html file. In reality, a modern computer system will likely contain hundreds of files - we refer to the complete assembly as a "project". Managing a large project gives rise to many challenging tasks and these all now become the responsibility of the IDE.

For example, suppose you wanted to change style='color: red; to style='color: blue; throughout your project. VSCode provides a global edit facility to achieve this (though I hasten to say that there are much better ways of avoiding this particular problem by structuring your project better in the first place).

Again, suppose you want to abandon recent alterations to a file and reset it to some previous state in its editing history. VSCode maintains a local file history that you can use to clear up the mess. Additionally, VSCode links seamlessly with a version management system called Github to create secure external web-based "checkpoint" copies of your project. This way your source and its history is safe even if you leave your laptop on the bus.

Finally, VSCode provides the platform for running your project using terminal sessions that link directly to your device's operating system. You are likely to spend a lot of time inside VSCode!

This might be a good moment to install VSCode on your device and try out Microsoft's tutorial at Getting Started with Visual Studio Code

2.3 JavaScript

JavaScript is a great language for beginners. It's easy to learn and works well in many situations. Its natural home is the browser, where it can read and write to the data structures defined by the HTML sections of your webapp. In plain terms, it can read and write directly to the screen. However, it has also acquired the ability to read and write to remote server-based data stores, both from within the browser and when running remotely on the server. It has, in short, become so useful that it may be the only language you need to learn.

Let's make a start. JavaScript is an "interpreted" language. This means that no special pre-processing is required to prepare code for execution. You can launch it directly into your "runtime engine" and see the results immediately. Your humble web browser is an example of a JavaScript runtime engine. Let's see how you might make the my-first-app.html file you created earlier behave "intelligently" by adding some Javascript.

JavaScript gets its ability to read and write directly to the screen from the rigorous nature of the HTML syntax. This enables the browser to construct a "model" of the screen layout - a tree structure called the "Domain Object Model" (or "DOM" for short). Within the DOM, the various branches and leaves of the tree are all individually addressable by JavaScript.

Here's an example. Take the my-first-app.html file introduced above and edit it as follows:

<h1 id="test">Hello there</h1>
<script>
let hourOfDay = (new Date()).getHours(); // 0-23
if (hourOfDay < 12) {
    document.getElementById('test').style.color = "blue";
} else {
    document.getElementById('test').style.color = "red";
}
</script>

This code makes the code's output dependent on the time of day. If you rerun the file before lunchtime (specifically, before 12 noon on any given day), the output will appear in blue. After lunch, the output will appear in red. Congratulations, you've coded your first "intelligent" webapp.

The lines between the HTML <script> and </script> tags contain your first bit of JavaScript code. The line starting hourOfDay = creates a "variable" containing a "Date" "object" for the run time. An "object" in Javascript is a complex concept that you'll love getting your head around sometime in the future. For now, however, all you need to know is that the instance of the "Date" object created when your code runs will contain, somewhere within it, a milli-second accurate representation of the time of day. Furthermore, the object also contains a .getHours "method" that extracts from the milli-second data an integer between 0 and 23 representing "hour of day". The if and else Javascript keywords in the subsequent lines of code provide logic to act appropriately upon the values they reference.

If you find it inconvenient to have to wait until lunchtime to test the colour-change logic, try changing the code to switch the colour when the minute is an even number. The "method" for getting the minute of the day is getMinutes(). The Javascript for testing whether a number num is even or odd is if (num % 2 === 0). See if you can change the code in my-first-app.html to change the text colour when you refresh the page after a minute has passed.

You'll probably have noticed that the <h1> tag in the first line of the original version of the file has acquired an 'id=' clause. This has "labelled" the tag with a unique string ("test" in this instance). The clever bit is the document.getElementById('test') instruction that enables JavaScript to alter the "style" of the 'test' <h1> tag.

Before you take fright at the prospect of spending a lifetime fiddling with document.getElementById('test') instructions, let me assure you that this won't be necessary. The entire course of recent developments in software engineering has been designed to enable you to control screen layouts through meaningful language patterns. These hugely simplify the task. In this post series, as indicated earlier, you'll use a "code framework" called SvelteKit to create your systems. You'll see an example of this in Post 2.1.

Now, how do you acquire fluency in JavaScript? What you need here is a good book and the one I recommend is Marijn Haverbeke's "Eloquent JavaScript".

Read this online if you must (you can find the latest edition at https://JavaScript .net/), but there's nothing like the convenience of a proper, well-written book with physical pages that you can scribble on. Secondhand (and early edition) is fine at this stage and will probably be the best (and only) initial investment you need to make for a good while. Haverbeke will do a far better job at explaining the "object", "method", "function", and "style" concepts introduced above than anything I can hope to achieve.

If you're still determined to study online, however, I think Mozilla's tutorial at JavaScript basics is excellent.

It would also be a good idea to start to think about a test project for your work. Later posts in this series will provide some artificial examples but things will only make sense when you can re-interpret them in terms of something personal. Start to think now about the sort of data this project would require. How would this be represented? How would users interact with it?

2.4 Browser Tools

It's very unlikely that your coding attempts will work properly first time. Perhaps screen layouts won't be quite what you intended or maybe there will be something wrong with the webapp's logic. Sometimes the browser will display an error message but at others, it will only sit and sulk. How do you sort this out?

The good news is that all mainstream browsers have a built-in "inspection tool" that enables you to investigate these problems. The "inspector" gives you inside information on the browser's interpretation of screen layout definitions and lets you monitor the execution of client-side JavaScript instructions. In the case of Google Chrome, this inspection tool is accessed by simply right-clicking on the browser screen and selecting "inspect" from the popup thus revealed.

The bad news is that, on first acquaintance, the inspection tool reveals itself as an alarming complex of menu bars and re-sizeable windows. But please accept my assurance that, once you've got the hang of it, you'll find that this tool is a joy to work with and an invaluable resource in tracking down and fixing problems. You can find full documentation at Google devtools.

As regards layout issues, the inspector gives you a graphic demonstration of how the various "margin", "padding" and "width" parameters that determine a display element's position are being applied by the browser. Alongside this, it supplies a tool to experiment with appropriate adjustments.

As regards logic issues, the inspector enables you to set "breakpoints" in your JavaScript source code. With these in place, refreshing the webapp will halt execution at the first breakpoint and let you view the values of program variables at that point. You then have the option of either stepping line by line through subsequent code or skipping forward to the next breakpoint

If your program "crashes", the inspector will tell you what has gone wrong.

In earlier times the usual way of finding out what has led to a logic issue would have been to add "logging" instructions. These would have tracked the "control flow" through the program and displayed program variable values at the inspection points. As you may imagine, this was a cumbersome procedure. Now, when I "inspect" a webapp in the browser, it's as if I'd opened the back of a Swiss watch and found all its intricacies laid out for examination. Debugging is now so enjoyable that I almost look forward to getting errors in my code!

2.5 Sveltekit

The Javascript example introduced in section 2.3, above, used an ugly document.getElementById("idName") method to reach into a webapp's DOM and modify the properties of element "idName". Frameworks like Sveltekit provide a much more friendly and efficient DOM interface. They enable you to write "meaningful" code for common tasks such as revealing and hiding popups, displaying lists and creating browser tab history. For example, a Svelte statement that says "if popUpVisible displayPopup()" (albeit with slightly more rigorous syntax), will make the popup visible when the displayPopup variable changes to true.

During initial development, the framework operates through a "local server" that you launch in an IDE terminal session. This has the magical effect of maintaining a browser window that updates and refreshes itself automatically every time you change the underlying webapp code.

The framework also enables you to specify where webapp code runs. For example, statements that read and write to remote storage might, according to circumstances, best run either locally in the user's browser or remotely on the server. This might not interest you presently but will become important once you are writing serious code. Code that runs on the browser is easy to debug but, when you have to contend with efficiency and security issues, you may be glad of an opportunity to run "server-side". Sveltekit lets you deliver such arrangements in a particularly elegant way.

When you're ready to implement your code, the framework's final act is to "build" a "packaged" version of your application. This performs a series of steps to compile, bundle, and optimize your application into a "package" ready for deployment. This ensures the deployed webapp is as small, fast, and efficient as possible.

Currently, the most popular framework is probably Meta's React system. This was created in around 2010 to support the development of Facebook. The idea worked so well that rivals such as Vue, Angular and Next.js quickly emerged. Sveltekit is one of the most recent arrivals and I'm using it here because it is particularly easy to use. You might be interested to note its good approval ratings in Stack Overflow's 2024 Developer survey'

As an aside, you may notice that I sometimes talk about Svelteki and then appear perversely to switch to something else called Svelte. Svelte is the "language" created by svelte.dev engineers to "extend" Javascript and make it easier to write efficient webapps. Sveltekit is the framework that creates the environment in which Svelte webapps run.

2.6 Firebase and App Engine

Everything you need to complete the development stage of a webapp project can be delivered on a modestly specified desktop computer. But when you get to the point where you want to launch your project to the expectant world you'll need the services of a specialist "back end" web server. This will:

• Provide an "end-point" (ie a URL on the web) from which your project's executable files can be deployed for local execution in a browser.
• Provide central web-based storage for your project's data. Most likely, this will be held in a structured database.
• Provide a fast and secure environment to run sensitive application elements.

In this course, you'll be using:

• Google's "Firebase" application development environment to get access to "Firestore" tools that will enable you to use a simple, structured database
• Google's "App Engine" environment to deploy webapp code and host the execution of "server-side" elements of your SvelteKit project.

Since you'll be using Firestore from the outset, you will need to start by creating a Firebase account.

In the past, you might have looked to an "Internet Service Provider" such as GoDaddy or HostPapa to provide your Cloud services. While these services still have a role to play and certainly give you excellent personalised support through their help desks, the Cloud platforms offer a better all-round package for your current purposes.

3. Now Read on

This course now proceeds in two main stages. The first is designed to familiarize you with the basics of HTML, Javascript, Firebase and Firestore. If you're completely new to this game, there's a lot to learn here and plenty of potential to become confused. Expect to spend a while on this. Take your time and use your chatBot tutor prolifically.

Once you're through this, the second stage introduces you to some of the more advanced elements of Sveltekit webapp design. If you complete this successfully, you'll know most of what you need to develop a useful webapp.

So now, on we go. The first step is to install SvelteKit on your local machine and accustom yourself to webapp development techniques. See Post 2.1 for instructions.