How to build a Web App

Part 1 - Getting started

This is the first in a series of articles describing how to build a Web App. My target audience is programmers, particularly those with experience of JavaScript, who have yet to build a fully interactive web page.

A Web App or Application, also known as a Browser App - is a subspecies of web page that is focused on function rather than content. There's a rather fuzzy line between the two, but if the page contains ready-built fixed content supplied by the server we'll call it a regular web page, and if it's driven by its own program code and has its own business logic then it's a Web App.

Here in Part 1 I'll describe how to set up an environment for developing website code, then in Parts 2 and 3 we'll build a simple web app.

Hosting

I am always bemused when I speak to friends at coding meet-ups and discover how many of them don't have their own web pages. They struggle to set up WAMP or MAMP on their PC/Mac so they can run JavaScript code in their browser, and when I ask "Can I see it on my smartphone?" they have no way of doing it. My thought is always "Why make life so difficult?" and the answer usually has something to do with the perceived cost of hosting.

Come on, guys. You sit there with your shiny MacBook Pro, having just spent more on getting to the coffee shop, parking up and buying your skinny latte and bruschetta than the monthly cost of a good hosting plan. You're spending all your waking hours learning React so you can become a professional programmer but you have no URL pointing to a sparky demo, to put on your CV to impress potential employers or clients? This Does Not Compute.

So my first piece of advice is to sign up with a good hosting company. Don't just go for the cheapest; many of these have severe limitations on hosting capacity and developer-friendliness. My recommendation, based on being a customer for over a decade, would be DreamHost because they have virtually no restrictions on what you do with your hosting and their control panel is well-known for being just about the most friendly imaginable.

Next is to get your own domain name. Your hosting company can do this for you but I prefer to keep things separate and to use the best, which in this case is the unlikely-sounding iwantmyname.com. Find a good name from the huge choice available, set the DNS to point to your hosting (DreamHost is on their list) and within minutes you are online.

Platform

The Platform is the environment you use to place your code in. You have the choice of no platform at all - this would be for hard core types who prefer to do everything with the keyboard rather than the mouse - or some kind of content manager, the most common of which is WordPress. So I'll just cover these 2 options.

Option 1 - No platform

No platform means that every file on your website is one you put there yourself. In fact, your website can consist of as little as 2 files; index.html and mycode.js. The first of these looks like this:


<!DOCTYPE html>
<html >
<head>
<script type="text/javascript" src="mycode.js"></script>
</head>
<body>
</body>
</html>

It's rather lean, but since JavaScript has 100% control over everything that happens in your web page it can supply the title, the CSS and all the content if you want to do it that way. This is all a bit too hair-shirt for me but if it's what floats your boat, go with it. You'll need to set up SSH so you can post files to your server, unless your coding IDE can use remote files itself. You can even code at the command line with VIM or EMACS. Retro or what?

The other file, mycode.js has all your program code; everything to make the web app real. Including all the messy stuff to do with layout, styling, responsiveness and so on; the stuff a platform will do for you.

Option 2 - WordPress (or other content manager)

WordPress powers about a third of the world's websites. I'd guess the figure is rather higher for small sites, especially private ones, but there are some big names in there too. WPBeginner have a list of 40, starting with

  1. TechCrunch.
  2. The New Yorker.
  3. BBC America.
  4. Bloomberg Professional.
  5. The Official Star Wars Blog.
  6. Variety.
  7. Sony Music.
  8. MTV News.

So if you were thinking WordPress is just for bloggers, think again.

Another misconception is that WordPress gets in the way, taking over the layout with its complicated themes. Well, that's actually up to you. It's really very simple to set up a "clean page" that only contains the content you put in it. I'll show you how shortly, but in the meantime I'll highlight some of the advantages of using WordPress.

  1. No direct access to the server is needed. You do everything inside the WordPress UI and it takes care of transferring files to the server. Actually, most of them go into the database.
  2. Text Editing. For all files, including raw program code, you canuse the WordPress editor. It's not the best there is but it's quite good enough, especially for additional pages you'll probably want, like Help or About Me. Of course, this doesn't prevent you from using other IDE tools as well.
  3. Media management. WordPress manages all your images for you, providing you with a URL for each one that you can use in your code.
  4. Responsiveness. When you run your site on a smartphone, WordPress makes suitable adjustments to the font size, borders and so on, to get a good-looking display.
  5. User management. Lets you set up logins for people with differing levels of access.
  6. Plugins. This is a mechanism for extending WordPress. You can use it yourself to add functionality of any kind you like.

For the rest of this article I'll assume the choice is WordPress. Hard-core coders may still find bits of it interesting but other parts they'll have to skip over.

Setting up WordPress

If you've chosen a good hosting service they will have options to do a quick install of WordPress on your website and to set up a database. The hardest part is finding where these options are in the control panel; after that it's actually very simple.

So you've installed WordPress and it runs, showing visitors the default home page and giving you admin rights to go in and change things. If this is all new to you I strongly recommend you spend some time customizing the home page, if only to tell people who you are. It'll help you find your way around WordPress.

To support the development of web apps we may need to do some customization of WordPress itself. This is not in any way unethical; the system is designed to allow this kind of thing. To start with, the appearance of the home page is governed by a theme; this is a collection of files in one of the WordPress directories on your website (wp-content/themes). The theme governs what blocks go to make up the page; the header, sidebars and so on. The content you put in the editor just goes into one of these blocks. When you develop a web app you may prefer not to have any of this stuff, to work instead with a blank page.

Adding a blank page template

Although this really doesn't have a lot to do with web apps, I'll cover it because it's handy to know.

Themes provide a choice of templates for different kinds of page, so the home page will often have a different template to the rest of the pages. It's quite easy to add a special template that gives you a blank page; all you need is this PHP file:


<?php
/**
* Template Name: Clean Page
* This template will only display the content you entered in the page editor
*/
?>

<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body>
<?php
while ( have_posts() ) : the_post();
the_content();
endwhile;
?>
<?php wp_footer(); ?>
</body>
</html>

Save this as a new file called page-cleanpage.php and copy it to the theme folder. There will now be a new Clean Page option in the Template drop-down list in the editor, which when selected gives you a blank page where you can place your own code and markup.

Themes are sometimes updated by their authors, and when you install the update you will lose any modifications you made to the theme. To prevent this happening you can create a child theme to contain your custom modifications. Alternatively, don't update the theme.

Plugins

The next thing is to add some useful plugins. The WordPress plugins library contains thousands of plugins supplied by companies and individuals to perform a huge range of useful services. I'll suggest some you may find useful.

Header and Footer Scripts

"Allows you to insert code or text in the header or footer of your WordPress site".

This plugin gives you the ability to add code and styling to the entire site or to just one page. So if there's a JavaScript library you need, here's where to add it. Similarly, you can add your own CSS classes and rules, which may override those already set up by the WordPress theme. You'll get an extra field at the bottom of the editing page, where you can add all your custom extras. Highly recommended.

Duplicator

"Migrate and backup a copy of your WordPress files and database. Duplicate and move a site from one location to another quickly."

Backups should be made regularly; there's nothing more frustrating than losing all your work through a simple mistake. Duplicator creates backups that can also be used to build a copy of your site somewhere else. Highly recommended.

EasyCoder

"Control the appearance and behavior of your posts and pages by embedding simple English-like scripts, without the need to learn JavaScript."

EasyCoder is an example of a language written in JavaScript that does things that are tedious to do in JavaScript; anything from simple interactivity to complete web apps The EasyCoder website has plenty of examples. There should be other examples of this kind of product but they are a little hard to find.

Building your Web App

You are now set up to build your web app. There are several ways to approach this:

  1. Raw JavaScript
  2. JavaScript plus a framework
  3. EasyCoder or equivalent
  4. Other

Raw JavaScript

This option is roughly the same as No Platform, that I presented above as the alternative to WordPress. The difference here is that you have a framework to run it in. You'll probably write the code in your favorite IDE - most people I know prefer Visual Studio Code - then SSH it to your server, putting it in a directory at the top level of your installation that is unknown to WordPress, where it should be safe from being accidentally deleted. Then you'll add a link to it using the Header and Footer Scripts editing box and debug it with your browser's developer tools.

JavaScript plus a framework

Here you build a complete deployable .js file and upload it to your server as before. You will probably need to add a link to the framework file, too. I can't say much more than that as it depends on the framework you choose to work with.

EasyCoder

This is rather different since you do most of it in the WordPress editor. In essence you write a script - or a set of scripts that work together - using the EasyCoder language syntax, and place the first script inside a special preformatted HTML element. When your page loads, the EasyCoder plugin compiles and runs the script. A debugger is included so you can run the script line by line and examine variables, and the browser debugger is still there to show you what's happening in the underlying JavaScript code. The language is extendable using plugins you write yourself when you need to incorporate large chunks of external code into the system.

Other

Well there must be an Other option; I just don't know what it is.

Coming up...

In Parts 2 and 3 of this series I'll show you how to build a simple web app. This will demonstrate how advanced JavaScript coding skills are used to build complex components that can be plugged together as a web app by less experienced programmers. The app is an anagram finder; if you can't wait for the articles it can be seen running at http://anagram.easycoder.software.