SPA -Part 1:JavaScript to Angular

Introduction

This article is a collection of notes and references from other web sites for the self study of Single Page Applications and Angular. The list of source web sites referred are mentioned in the “POINTS OF INTEREST” section of this article.

Background

  • Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
  • SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScriptThe Traditional Page Lifecycle vs. the SPA Lifecycle
  • In a traditional Web app, every time the app calls the server, the server renders a new HTML page. This triggers a page refresh in the browser.
  • An SPA renders only one HTML page from the server, when the user starts the app. Along with that one HTML page, the server sends an application engine to the client. The engine controls the entire application including processing, input, output, painting, and loading of the HTML pages.
  • In an SPA, after the first page loads, all interaction with the server happens through AJAX calls. These AJAX calls return data—not markup—usually in JSON format. The app uses the JSON data to update the page dynamically, without reloading the page.
  • Benefits
    • One benefit of SPAs is obvious: Applications are more fluid and responsive, without the jarring effect of reloading and re-rendering the page.
    • Typically, 90–95 percent of the application code runs in the browser; the rest works in the server when the user needs new data or must perform secured operations such as authentication. Because dependency on the server is mostly removed, an SPA autoscales in the Angular 2 environment: No matter how many users access the server simultaneously, 90–95 percent of the time the app’s performance is never impacted.
    • Sending the app data as JSON creates a separation between the presentation (HTML markup) and application logic (AJAX requests plus JSON responses).
    • In a pure SPA, all UI interaction occurs on the client side, through JavaScript and CSS. After the initial page load, the server acts purely as a service layer.

ECMAScript Vs TypeScript

ECMAScript (or ES) is a trademarked scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262.

  • It was created to standardize JavaScript, so as to foster multiple independent implementations. ECMAScript is the language, whereas JavaScript, JScript, and even ActionScript 3 are called “dialects”.
  • ES5 is the JavaScript you know and use in the browser today. ECMAScript version 5 was finished in December 2009,  the latest versions of all major browsers (Chrome, Safari, Firefox, and IE)  have implemented version 5. So ES5 does not require a build step (transpilers) to transform it into something that will run in today’s browsers.
  • Coders commonly use ECMAScript for client-side scripting on the World Wide Web, and it is increasingly being used for writing server applications and services using Node.js.
  • TypeScript is a strongly typed, object oriented, compiled language. It was designed by Anders Hejlsberg (designer of C#) at Microsoft. TypeScript is both a language and a set of tools. TypeScript is a typed superset of JavaScript compiled to JavaScript. In other words, TypeScript is JavaScript plus some additional features.

  • As data types are introduced in Typescript below concepts are applicable
    • Variable declaration with datatypes
    • Type conversion/casting
    • Function overloading
    • Generics
  • As OOPs are inbuilt in Typescript below concepts are applicable
    • Class declarations with private, public, protected, static members
    • Constructor
    • Inheritence, Overriding, Interfaces, this and base operators

OOPs in ECMA Vs TypeScript

  • An object is an unordered list of name-value pairs. Each item in the list can be a property or methods.
  • JavaScript does not have classes. The classes in ES2015 are just a cleaned up syntax for setting up prototype inheritance between objects.
  • ECMA5 has a prototype-based inheritance mechanism: Every JavaScript function has a prototype property, and you attach properties and methods on this prototype property when you want to implement inheritance (to make those methods and properties available to instances of that function).This prototype property is not enumerable; that is,only one object can be assigned.
  • constructor is a function used for initializing new objects, and you use the new keyword to call the constructor.

In ES5 and earlier, constructor functions defined “classes” like this:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}
var person = new Person("Bob", "Smith");

ES2015 introduces a new syntax using the class keyword:

// the name of the ES5 constructor
// function is name of the ES2015 class
class Person {

  // observe there is no "function" keyword
  // also, the word "constructor" is used, not "Person"
  constructor(firstName, lastName) {

    // this represents the new object being
    // created and initialized
    this.firstName = firstName;
    this.lastName = lastName;

  }
} 
var person = new Person("Bob", "Smith");
// TypeScript

class Person {
  
  firstName: string;
  lastName: string; 
  
  constructor(firstname:string, lastname:string ){
  this.firstName = firstname;
  this.lastName = lastname; 
  } 
}

var person = new Person("Mary", "Smith", 39);

Hello World from TypeScript

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TypeScript HTML App</title>
    <script src="app.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

//app.ts
class Greeter {
    element: HTMLElement;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML = "Hello World";
    }
}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
};

//Tranaspiled code
var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
        this.element.innerHTML = "Hello World";
    }
    return Greeter;
})();

window.onload = function () {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
}

Points of Interest

You can explore more on the objects and OOPs in Javscript in below references.

History

Version 1.0 – 2017  June 21 – Initial

Leave a Comment