From web pages to web sites and web apps

In today's "modern" web, things are a bit different than they used to be a few years ago. Chances are that the majority of web sites that you visit today are using some kind of "modern web development" technology, it looks beautiful and behaves consistently across any device you browse it on.

How can we achieve the same result for our own sites? What tools do others use and how deep is their knowledge in the various toolsets and frameworks?

In this short series of blog posts I will attempt to guide you through the different tools and ideas that I use on a regular basis. While there are many toolkits, frameworks or methodologies out there, I will be primarily focusing on Angular 5 (for our web app), SASS (for stylesheets) and TypeScript.

Coding like a Pro

JavaScript

JavaScript is still the only widely supported scripting language for web applications in browsers. Because of this, developers are still limited to delivering JS files to the client machine to make sure their applications work.

There are a number of different versions of JavaScript which all conform to the ECMAScript standard. This is a very important topic to understand as browsers usually support only the latest JavaScript version prior to it's release. For example: all browsers nowadays (modern browsers) fully support ECMAScript 5, with the exception of one specific directive not functioning on Internet Explorer 9. Modern browsers all partially support ECMAScript 6.

The reason this is important is that we need to know what coding style we are allowed to use in order to ensure maximum compatibility with our clients' browsers. To solve this problem might seem difficult at first, but thank goodness for...

TypeScript!

TypeScript was developed by Microsoft as a "superset" of JavaScript in 2012. There are many advantages to using TypeScript over JavaScript and I'll try to cover a few here:

Type Safety

There's nothing worse than looking at a piece of code with 20+ variables and not knowing what types they are. When using values in input fields, are they strings? What about "type=number" fields? Type-safety plays an important role in code readability and maintenance.

ECMA Compliance

Because TypeScript it is a superset of JavaScript, you would normally use a "transpiler" to "transpile" your TS files to JS files. When configuring TypeScript for your project, you need to specify which ECMA standard you wish to target and this will allow you to develop using any of the modern ECMA6+ methods and implementations while still ensuring that your site will function on older browsers.

For example: Suppose you have an array of products and you wish to find only the products where the price is less than $50. In JavaScript you would likely do something like this:

var filteredProducts = [];
for(var i = 0; i < products.length; i++) {
    if (products[i].price < 50) {
        filteredProducts.push(products[i]);
    }
}

Now with TypeScript, we can use inline functions:

let filteredProducts: Product[] = products.filter(product => product.price < 50);

Styling like a Pro

SASS

Another problem that we tend to face with web development is the insane number of stylesheets or styles that we need to develop. When you have a common "theme" for your company, you probably have all your colours calculated and set and you just want to get on with it.

Suppose your company's primary colour is a light-blue (#ADD8E6). All your buttons have to be updated to include the blue background, so you create a CSS class:

.my-button {
    background-color: #ADD8E6;
}

But when users hover over your button, it needs to be slightly darker, so you have to first find the darker variant of your colour using Photoshop or the web and then build another class:

.my-button: hover {
    background-color: #ADC7E6;
}

Oh and then when a user actually clicks on the button, it needs to be even darker. Again, use Google or Photoshop to find the darker variant and build another css class:

.my-button:focus {
    background-color: #ADB2E6;
}

Tomorrow you get a phone call from marketing saying that the colour scheme has changed to green! Now you have to go find the green version of all three different variables above and change just about your entire stylesheet!

To alleviate this problem, SASS was developed. SASS is a stylesheet scripting language that, just like TypeScript, gets "compiled" into standard CSS.

Let's use the above example and see how much easier this can be with SASS:

// Here we define our primary colours
$lightblue: #add8e6;
$mediumblue: darken($lightblue, 10);
$darkblue: darken($lightblue, 20);

// We add it to a theme:
$my-company-theme: (
    primary: $lightblue,
    secondary: $mediumblue,
    alternate: $darkblue
);

// Now we define our button styles
.my-button {
    background-color: my-company-theme(primary);
    &:hover {
        background-color: my-company-theme(secondary);
    }
    &:focus {
        background-color: my-company-theme(alternate);
    }
}

As you can see from the above example, there is a SINGLE colour value in the entire file. Changing this value will change all the later values down the line in your resulting CSS.

In addition to the "darken", "lighten" and variable definition, you can also run "for-loops" in CSS. For example, if you had a rating system and wish to display this in a type of a bar-graph, you can simply generate all the classes from 1 to 10 (or whatever your maximum is) as follows:

@for $i from 1 through 10 {
    .my-rating-#{$i} {
        height: ($i * 20px);
    }
}

In the resulting CSS file, you will now have classes as follows:

.my-rating-1 {
    height: 20px;
}
.my-rating-2 {
    height: 40px;
}
.my-rating-3 {
    height: 60px;
}
.my-rating-4 {
    height: 80px;
}

Conclusion

What does all of this mean to you, the reader?

Simply put it's this:

• Using TypeScript has many benefits over traditional JavaScript, but it comes with the added effort of finding the right tools to do the job
• Using SASS has many benefits over traditional CSS, but it too comes with it's own problems: You have to write a LOT more "code" to find the exact result you need

In the next article we will start with our very first sample application to demonstrate the above and see how easy it really is if you have the right tools.