Web App Development

10/06/2023 Web App Development 1

Web Technology Stacks and Supporting
JavaScript Features
Objectives:
 Compare MEAN and MERN full stack architecture
 Explore the advancements in JavaScript.
 Use Module pattern
 Examine Event-Driven Model
 Apply ES6+ Features

10/06/2023 Web App Development 2

 Full-Stack JavaScript
 In 2008, Google released its Chrome browser, along
with its fast JIT-compiling V8 JavaScript engine.
 Google's V8 engine made JavaScript run so much faster that it
completely transformed web application development.
 One of the first products of this revolution was Node.js.
 a V8-based database called MongoDB.
 A frontend open source framework called AngularJS.
 A frontend library called React.
 Now JavaScript is the programming language across
all three layers - an idea that is commonly referred to
as the full-stack JavaScript.
 The following stacks are examples of this idea:
 The MEAN (MongoDB, Express, Angular, Node) stack
 The MERN (MongoDB, Express, React, Node) stack

10/06/2023 Web App Development 3

 Programming, Scripting, Markup

10/06/2023 Web App Development 4

https://insights.stackoverflow.com/survey/2021#most-popular-technologies-language-prof
 Web Frameworks/Libraries

10/06/2023 Web App Development 5

 Front-End Frameworks/Libraries

10/06/2023 Web App Development 6

https://www.npmtrends.com/angular-vs-react-vs-vue
 Jamstack Community Survey 2022

10/06/2023 Web App Development 7

https://jamstack.org/survey/2022/#choices
 Jamstack Community Survey 2022

10/06/2023 Web App Development 8

https://jamstack.org/survey/2022/#choices
 The State of Developer Ecosystem
2022

10/06/2023 Web App Development 9

https://www.jetbrains.com/lp/devecosystem-2022/
 Web Technology Stacks
 LAMP stack:
 Linux
 Apache
 MySQL
 PHP/Python/Perl
 .NET (Core) stack:
 .NET (Core)
 IIS
 ASP.NET (Core)
 Web API and WCF
 MS-SQL Server
 Other frameworks and tools (Django, Flask, etc.)
 Each layer uses a different knowledge base!

10/06/2023 Web App Development 10

 MEAN Stack
 MEAN is an abbreviation for MongoDB, Express, AngularJS, and
Node.js.
 Uses only JavaScript - driven solutions to implement the
different parts of a web application.
 Has the following advantages:
 A single language is used throughout the application
 All the parts of the application can support and often enforce
the use of the MVC architecture
 Serialization and deserialization of data structures is no longer
needed because data marshaling is done using JSON
objects.

10/06/2023 Web App Development 11

 MEAN Stack
 MongoDB is a scalable NoSQL database that used a
JSON-like data model with dynamic schemas.
 Express is a lightweight node.js web application
framework, providing a robust set of features for
building single and multi-page, and hybrid web
application.
 Node.js is a server side JavaScript execution
environment built on Google Chrome’s V8 JavaScript
runtime - helps in building highly scalable and
concurrent applications rapidly.
 Angular is a JavaScript framework developed by
Google - a complete solution for rapid front end
development.

10/06/2023 Web App Development 12

 LAMP versus MEAN
 Linux  Node.js (platform)

 Apache  Express.js (web server framework)

 MySQL  MongoDB (persistence layer)

 PHP or Python or Perl  Angular (User Interface)

10/06/2023 Web App Development 13

 MERN Stack
 MongoDB
 Express
 Node.js
 ReactJS is a JavaScript component-based front-end
library maintained by Facebook – most popular for
front-end development.

10/06/2023 Web App Development 14

 MEAN and MERN Advantages
 High Performance
 Increasing number of requests
 Reducing response time
 Non-blocking I/O - allows web server to handle more
concurrent requests without requiring additional
hardware or configuration
 Cross-platform (Windows, Linux, MacOS)
 One single programming language for the entire
project

10/06/2023 Web App Development 15

 The Evolution of JavaScript
 The standard for JavaScript is ECMAScript.
 On June 17, 2015, ECMA International published the
sixth major version of ECMAScript, which is officially
called ECMAScript 2015, and is more commonly
referred to as ECMAScript 6 or ES6.
 Since then ECMAScript standards are on yearly release
cycles.
 Here is the ES6 guide:
 https://leanpub.com/ecmascript2015es6guide/read
 Current versions of Chrome, Firefox, Edge, Safari, and
Opera support ES6 features.
 ECMAScript 2021
(https://262.ecma-international.org/12.0/) is the current
version.
10/06/2023 Web App Development 16
https://developer.mozilla.org/en-US/docs/Web/JavaScript
 ES6 - Modules
 Modules
 export – to expose the module
 import – to make the module available to use
 Example: suppose you have a file named lib.js that
contains the following code:
export function halfOf(x) {
return x / 2;
}
 In your main.js file, you can use the following code:
import halfOf from 'lib';
console.log(halfOf(84));

10/06/2023 Web App Development 17

 ES6 - Modules
 Exporting multiple functions:
 If lib.js file looks like this:
export function halfOf(x) {
return x / 2;
}
export function multiply(x, y) {
return x * y;
}
 In your main.js file, use the following code:
import {halfOf, multiply} from 'lib';
console.log(halfOf(84));
console.log(multiply(21, 2));

10/06/2023 Web App Development 18

 ES6 - Modules
 Named export are used to export multiple things from a
module by adding the keyword export to their declaration.
 There can be multiple named exports in a module and they
are imported using the name that were used to export.
 Default export allows only a single default export per module
and we can assign it any name when importing it from another
module or file.
 Example: doSomething.js that contains the following code:
export default function () {
console.log('I did something')
};
 You'll be able to use it as follows in your main.js file:
import doSomething from 'doSomething';
doSomething();
 However, is not possible to use var, let or const with export
default
10/06/2023 Web App Development 19
 ES6 - Modules
 Modules export bindings - live connections to values,
not just values.
 Example: a validator.js file that looks like this:
export let flag = false;
export function touch() {
flag = true;
}
 You also have a main.js file that looks like this:
import { flag, touch } from 'validator';
console.log(flag);
touch();
console.log(flag);
 The first output would be false, and the second would
be true because is modified in function touch.

10/06/2023 Web App Development 20

 Let and Const
 Let and Const are new keywords used for symbol
declaration.
 Let statement declares a block scope local variable.
 Here is an example:
function iterateVar() {
for(var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i) //will print i
}
function iterateLet() {
for(let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i) //will throw an error
}

10/06/2023 Web App Development 21

 Let and Const
 The first function will print i after the loop, but the
second one will throw an error, since i is defined by let,
therefore not defined outside the block.

 The const keyword forces single assignment.

 So, this code will throw an error as well:
const me = 1
me = 2 //cannot reinitialize

10/06/2023 Web App Development 22

 Trying Out ES6
 Use jsfiddle (https://jsfiddle.net/) or Babeljs:

10/06/2023 Web App Development 23

 ES6 - Classes
 Classes in ES6 are basically just a syntactic sugar over
the prototype-based inheritance.
class Vehicle {
constructor(wheels) {
this.wheels = wheels;
}
toString() {
return '(' + this.wheels + ')';
}
}
class Car extends Vehicle {
constructor(color) {
super(4);
this.color = color;
}
toString() {
return super.toString() + ' colored: ' + this.color;
}
}

10/06/2023 Web App Development 24

 ES6 - Classes
let car = new Car('blue');
car.toString();
console.log(car instanceof Car);
console.log(car instanceof Vehicle);

 In this example, the Car class extends the Vehicle

class.
 The output is as follows:
(4) in blue
true
true

10/06/2023 Web App Development 25

 Class Example on Babel
a

10/06/2023 Web App Development 26

 Class Example in Browser
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel" data-presets="es2016,es2017,stage-2, stage-3">
class Vehicle {
constructor(wheels) {
this.wheels = wheels;
}
toString() {
return '(' + this.wheels + ')';
}
}
class Car extends Vehicle {
constructor(color) {
super(4);
this.color = color;
}
toString() {
return super.toString() + ' colored: ' + this.color;
}
}
let car = new Car('blue');
document.getElementById('output').innerHTML = car.toString() + "<br>";;
document.getElementById('output').innerHTML += (car instanceof Car) + "<br>";
document.getElementById('output').innerHTML += (car instanceof Vehicle);

</script>

10/06/2023 Web App Development 27

Class Example on https://jsfiddle.net/
<div id="output"></div>
<script >
class Vehicle {
constructor(wheels) {
this.wheels = wheels;
}
toString() {
return '(' + this.wheels + ')';
}
}
class Car extends Vehicle {
constructor(color) {
super(4);
this.color = color;
}
toString() {
return super.toString() + ' colored: ' + this.color;
}
}
let car = new Car('red');
document.getElementById('output').innerHTML = car.toString() + "<br>";;
document.getElementById('output').innerHTML += (car instanceof Car) + "<br>";
document.getElementById('output').innerHTML += (car instanceof Vehicle);
</script>

10/06/2023 Web App Development 28

Class Example on https://jsfiddle.net/

10/06/2023 Web App Development 29

 Arrow functions
 Arrows are functions shorthand by the => syntax.
 Used in Java and C#.
 Arrows are also very helpful because they share the same lexical
this as their scope.
 They are mainly used in two forms:
 using an expression body:
let numbers = [1,2,3,4,5]
const squares = numbers.map(n => n * n);
console.log('squares:',squares)
 using a statement body:
let evens = []
numbers.forEach(n => { //anonymous function code
if (n % 2 === 0) evens.push(n);
});
console.log('even numbers', evens)
10/06/2023 Web App Development 30
 Arrow Functions and scope
 Lexical scoping means whatever variables are
in scope where you define a function from (as opposed
to when you call it) are in scope in the function
 An example of using the shared lexical would be:
const author = {
fullName: "Bob Alice",
books: [],
printBooks() {
this.books.forEach(book => console.log(book + ' by ' + this.fullName));
}
};
author.books = ["JavaScript", "Python", "Kotlin"]
author.printBooks()
 If used as a regular function, this would be the book
object and not the author.
10/06/2023 Web App Development 31
 Default, Rest, and Spread
 Default, Rest, and Spread are three new features
related to functions parameters.
 The default feature allows you to set a default value to
the function parameter:
function add(x, y = 0) {
return x + y;
}
add(1)
add(1,2)
 In this example, the value of y will be set to 0 if a value
is not passed or is set to undefined.

10/06/2023 Web App Development 32

 Rest Operator
 The Rest feature allows allows a function to accept
an indefinite number of arguments as an array:

function userFriends(user, ...friends) {

console.log(user + ' has ' + friends.length + ' friends');
}
userFriends('User', 'Bob', 'Alice');
 This will output:
User has 2 friends
 Only the last parameter in a function definition can be
a rest parameter.

10/06/2023 Web App Development 33

 Spread Operator
 The spread operator is three dots (...) that perform
several different tasks.
 The spread operator turns an array into a call
argument:
function userTopFriends(firstFriend, secondFriend, thirdFriend) {
console.log(firstFriend);
console.log(secondFriend);
console.log(thirdFriend);
}
userTopFriends(...['Alice', 'Bob', 'Michelle']);
 This will output:
Alice
Bob
Michelle

10/06/2023 Web App Development 34

 Spread Operator
 We can also use the three dot syntax to collect function
arguments as an array.
 When used in a function, these are called rest parameters.
 Here, we build a function that takes in n number of arguments
using the spread operator, and then uses those arguments to print
some console messages:
function directions(...args) {
let [start, ...remaining] = args;
let [finish, ...stops] = remaining.reverse();
//
console.log(`drive through ${args.length} towns`);
console.log(`start in ${start}`);
console.log(`the destination is ${finish}`);
console.log(`stopping ${stops.length} times in between`);
}
directions("Truckee", "Tahoe City", "Sunnyside", "Homewood",
"Tahoma");

10/06/2023 Web App Development 35

Learning React, 2nd Edition, O’Reilly
 Spread Operator
 The directions function takes in the arguments using
the spread operator.
 The first argument is assigned to the start variable.
 The last argument is assigned to a finish variable using
Array.reverse.
 We then use the length of the arguments array to
display how many towns we’re going through.
 The number of stops is the length of the arguments
array minus the finish stop.
 This provides incredible flexibility because we could use
the directions function to handle any number of stops.

10/06/2023 Web App Development 36

Learning React, 2nd Edition, O’Reilly
 Spread Operator
 Allows us to combine the contents of arrays.
 For example, if we had two arrays, we could make a third
array that combines the two arrays into one:
const peaks = ["Tallac", "Ralston", "Rose"];
const canyons = ["Ward", "Blackwood"];
const tahoe = [...peaks, ...canyons];
console.log(tahoe.join(", ")); // Tallac, Ralston, Rose,
Ward, Blackwood
 All of the items from peaks and canyons are pushed into a new
array called tahoe.
 The spread operator can also be used to get the remaining items
in the array:
const lakes = ["Donner", "Marlette", "Fallen Leaf",
"Cascade"];
const [first, ...others] = lakes;
console.log(others.join(", ")); // Marlette, Fallen Leaf,
Cascade
10/06/2023 Web App Development 37
Learning React, 2nd Edition, O’Reilly
 Spread Operator
 The spread operator can also be used for objects.
 In this example, we’ll use it the same way we combined two arrays
into a third array, but instead of arrays, we’ll use objects:
const morning = {
breakfast: "oatmeal",
lunch: "peanut butter and jelly"
};
const dinner = "mac and cheese";
const backpackingMeals = {
...morning,
dinner
};
console.log(backpackingMeals);
// {
// breakfast: "oatmeal",
// lunch: "peanut butter and jelly",
// dinner: "mac and cheese"
// }

10/06/2023 Web App Development 38

Learning React, 2nd Edition, O’Reilly
 Function Expressions
 Another option is to use a function expression.
 This just involves creating the function as a variable:
const logCompliment = function() {
console.log("You're doing great!");
};
logCompliment();
 Note that:
 you can invoke a function before you write a function
declaration.
 you can not invoke a function created by a
function expression before declaring it.

10/06/2023 Web App Development 39

Learning React, 2nd Edition, O’Reilly
 Returning Objects
 Consider a function called person that builds an object
based on parameters passed in for firstName and
lastName.
 Wrap the object you’re returning with parentheses:
const person = (firstName, lastName) => ({
first: firstName,
last: lastName
});
console.log(person("Flad", "Hanson"));

10/06/2023 Web App Development 40

Learning React, 2nd Edition, O’Reilly
 Destructuring Objects
 Destructuring assignment allows you to locally scope fields
within an object and to declare which values will be used.
 Consider the sandwich object:
const sandwich = {
bread: "dutch crunch",
meat: "tuna",
cheese: "swiss",
toppings: ["lettuce", "tomato", "mustard"]
};
 It has four keys, but we only want to use the values of two.
 We can scope bread and meat to be used locally:
const { bread, meat } = sandwich;
console.log(bread, meat); // dutch crunch tuna

10/06/2023 Web App Development 41

Learning React, 2nd Edition, O’Reilly
 Destructuring Function Arguments
const lordify = ({ firstname }) => {
console.log(`${firstname} of Canterbury`);
};
const regularPerson = {
firstname: "Bill",
lastname: "Wilson"
};
lordify(regularPerson); // Bill of Canterbury

10/06/2023 Web App Development 42

Learning React, 2nd Edition, O’Reilly
 Destructuring Arrays
 Assign the first value of an array to a variable name:
const [firstAnimal] = ["Horse", "Mouse", "Cat"];
console.log(firstAnimal); // Horse
 We can also pass over unnecessary values with list
matching using commas:
const [, , thirdAnimal] = ["Horse", "Mouse", "Cat"];
console.log(thirdAnimal); // Cat

10/06/2023 Web App Development 43

Learning React, 2nd Edition, O’Reilly
 Object Literal Enhancement
 It’s the opposite of destructuring
 We can grab variables from the global scope and add
them to an object:
const name = "Tallac";
const elevation = 9738;
const funHike = { name, elevation };
console.log(funHike); // {name: "Tallac", elevation: 9738}
 name and elevation are now keys of the funHike object.

10/06/2023 Web App Development 44

Learning React, 2nd Edition, O’Reilly
 Object Literal Enhancement
 We can also create object methods with object literal
enhancement:
const skier = {
name,
sound,
powderYell() {
let yell = this.sound.toUpperCase();
console.log(`${yell} ${yell} ${yell}!!!`);
},
speed(mph) {
this.speed = mph;
console.log("speed:", mph);
}
};
 Object literal enhancement allows us to pull global variables into
objects and reduces typing by making the function keyword
unnecessary.
10/06/2023 Web App Development 45
Learning React, 2nd Edition, O’Reilly
 Asynchronous JavaScript
 JavaScript functions are executed in the sequence they
are called, not in the sequence they are defined.
 To handle asynchronous calls JavaScript uses:
 Callbacks
 Promises
 async/await statements

 A callback is a function passed as an argument to

another function.

 See the example in the next slide.

10/06/2023 Web App Development 46

Asynchronous JavaScript - Callbacks
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(myFunction, 3000);

function myFunction() {
document.getElementById("demo").innerHTML = "callback executed !!";
}
</script>

</body>
</html>

10/06/2023 Web App Development 47

https://www.w3schools.com/js/js_callback.asp
Asynchronous JavaScript - Promises
 Promises are used to handle asynchronous operations in
JavaScript.
 A promise can be created using Promise constructor. syntax:
var promise = new Promise(function(resolve, reject){
//do something
});
var promise = new promise.
Promise(function(resolve, reject) { then(function () {
const x = "geeksforgeeks"; console.log('Success, You are a
const y = "geeksforgeeks" GEEK');
if(x === y) { }).
resolve(); catch(function () {
} else { console.log('Some error has
reject(); occured');
} });
});
10/06/2023 Web App Development 48
https://www.geeksforgeeks.org/javascript-promises/
Asynchronous JavaScript - Promises
 The promise is an object that represents whether the async
operation is pending, has been completed, or has failed.
 The then method will invoke the callback function once the
promise has resolved.
 Here is an example using fetch method to fetch resources
asynchronously across the network.
 A basic fetch call takes a url and returns a promise containing the
response:
fetch("https://api.randomuser.me/?nat=US&results=1").then(res =>
console.log(res.json()));
 Whatever you return from this function becomes the argument of
the next then function.
fetch("https://api.randomuser.me/?nat=US&results=1")
.then(res => res.json())
.then(json => json.results)
.then(console.log)
.catch(console.error);
10/06/2023 Web App Development 49
Learning React, 2nd Edition, O’Reilly
 Async/Await
 The async and await keywords enable asynchronous, promise-
based behavior to be written in a cleaner style, avoiding the need
to explicitly configure promise chains.
const getFakePerson = async () => {
try {
let res = await fetch("https://api.randomuser.me/?
nat=US&results=1");
let { results } = res.json();
console.log(results);
} catch (error) {
console.error(error);
}
};
getFakePerson();

10/06/2023 Web App Development 50

Learning React, 2nd Edition, O’Reilly
 Async/Await
 async makes a function return a Promise
 await makes a function wait for a Promise
 async keyword is placed in front of a function
declaration to turn it into an async function.

const getFakePerson = async () => { }

 Then await keyword is used inside the function:

let res = await fetch("https://api.randomuser.me/?nat=US&results=1");

 Multiple await statements are allowed.

 Use try/catch for exception handling.

10/06/2023 Web App Development 51

 References
 Reference Textbooks
 https://leanpub.com/ecmascript2015es6guide/read
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
 http://www.2ality.com/2015/08/getting-started-es6.html
 https://leanpub.com/setting-up-es6/read
 http://exploringjs.com/es2016-es2017/index.html
 http://es6-features.org/
 https://tsh.io/state-of-microservices/?utm_source=event&utm_medium=social&utm_campaign
=soms_report&utm_content=webinar_backend#ebook
 https://techbeacon.com/app-dev-testing/top-5-software-architecture-patterns-how-make-right-c
hoice
 https://martinfowler.com/articles/micro-frontends.html#InANutshell
 Learning React, 2nd Edition, O’Reilly
 State-of-Frontend-2022-by-TSH
 https://www.htmlgoodies.com/beyond/javascript/the-model-view-viewmodel-pattern-and
-angular-development.html
 https://www.angularminds.com/blog/article/mvc-vs-mvp-mvvm.html
 https://jamstack.org/survey/2021/#choices
 https://www.jetbrains.com/lp/devecosystem-2022/

10/06/2023 Web App Development 52