CS 5220

- Advanced Topics in Web Programming -

Prof. Cydney Auman
AGENDA

01 Web Services & APIs

03 Evolution of JavaScript

02 History of Web APIs

04 JavaScript Basics
01
WEB SERVICES
& APIs
What is an API?
API stands for Application Programming Interface. An API is a set of rules and instructions that allows
different software programs to communicate and interact with each other.

APIs allow developers to use the features provided by other software, services or libraries without needing
to know how they are implemented.
What is an Web Service (Web API)?
A Web Service is a type of API that is meant to be accessed over a network.

Web Services let software applications communicate and exchange data using standard network protocols.
They are designed to work together even if the software uses different programming languages or
technologies.

Web Services often use architectural styles like REST. They commonly use HTTP for communication and
transfer data in formats like JSON.
API vs Web API
The term API is overloaded.

APIs (traditional) enable software applications to communicate within a system. These

provide developers access to functions or data in other parts of the software.

● https://docs.oracle.com/en/java/javase/20/docs/api/index.html
● Libraries such as Log4j or JUnit

Web APIs enable software applications to communicate and exchange data over the internet.
These allow developers to access functionalities or data from external services or applications.

● Social Media (ex: Twitter, Facebook)

● Payment Platforms (ex: Paypal, ApplePay, GooglePay, Venmo)
02
HISTORY OF
WEB SERVICES
WEB SERVICES

LATE 1980s to 1990s

CORBA

1970s to 1990s
RPC

BEGINNING
RPC
RPC (Remote Procedure Call) is a way to enable communication between programs running on different
computers.

RPC lets a program (the client) call a function that runs on another program (the server). The client sends
arguments or data to the server, which then performs the requested processing or computation. After
completing the task, the server sends the results back to the client.

RPC is a general concept and is not tied to any specific programming language. It can be used in many
languages, such as C, C++, Python and Java. Some languages may require more effort to implement RPC
than others.
RMI
RMI (Remote Method Invocation) is a Java-based technology that allows Java objects to communicate with
each other even if they are running on different Java Virtual Machines (JVMs).

RMI was introduced by Sun Microsystems in the mid-1990s to extend the benefits of Object-Oriented
Programming (OOP) to distributed systems. This means Java objects can interact over a network as if they
were on the same machine, making it easier for Java programs to work together.

Unlike RPC, which is a more general concept, RMI is closely tied to Java's object model and serialization
mechanisms. This means RMI is specifically designed for Java and may not work as well with systems or
programming languages that do not use Java.
SIMPLE RMI FLOW DIAGRAM
RMI Registry
simple naming service that binds the remote
2. Lookup objects to names so that clients can look up and
locate the remote objects

Client Applications 1. Register

responsible for invoking
methods on the remote object
as if it were a local by using
the remote object's stub to Proxy/Server 3. Receive Stub
make method calls. Stub
Java Server
5. Results
receives the method call from
the stub, processes the
request using the actual Remote
implementation of the remote Object
object and prepares the result
4. Invoke Method
CORBA
CORBA (Common Object Request Broker Architecture) was created by Carnegie Mellon University to help
different systems communicate with each other, regardless of their operating systems, programming
languages, or hardware.

CORBA used a standardized Interface Definition Language (IDL) that allowed objects to describe their
methods and attributes in a way that was independent of programming languages. The Object Request
Broker (ORB) was responsible for managing communication it used the IDL definitions to route requests and
responses.

While CORBA was popular in the 1990s, it struggled to keep up with the rapid growth of web technologies. As
a result, many companies started looking for other solutions.

Rise and Fall of CORBA - http://www.triodia.com/staff/michi/queue/riseAndFallOfCorba.pdf

 SIMPLE CORBA FLOW
Client ORB uses IDL definitions
to route the request

Client Client IDL Server Server

ORB ORB

Server ORB uses IDL definitions

to route the response
CORBA CONTRIBUTIONS
CORBA was designed to emphasize the importance of encapsulation, reusability and
modularity. These principles align with the goals of modern APIs.

CORBA focused on different programming languages ability to interact seamlessly.

This concept of cross-language compatibility has influenced and encouraged
modern APIs to be language-agnostic.

CORBA aimed to provide a standardized architecture. The emphasis on standardization set

a precedent for the development of various API standards and helping to ensure
consistency, predictability and ease of integration.
WEB SERVICES

Late 1990s to Early 2000s Early 2000s to Present

SOA & SOAP REST & JSON
SOAP
SOAP (Simple Object Access Protocol) is a protocol used for exchanging structured information over the
internet. It was Developed by Microsoft and UserLand Software. It allows different applications to
communicate, even if they use different technologies or run on different platforms.

SOAP messages are formatted in XML and can be sent over various protocols. This makes it possible for
applications in different programming languages to interact, as long as they can parse XML.

SOAP messages are organized in an envelope, which contains a header (for optional processing
information), a body (for the main data) and an optional fault section (for error details).
SIMPLE SOAP FLOW
1.Request
<soap:Envelope xmlns:m="http://www.example.org/stock">
<soap:Header>
</soap:Header>
<soap:Body>
<m:GetStockPrice>
<m:StockName>MacBook Pro</m:StockName>
</m:GetStockPrice>
</soap:Body>
</soap:Envelope>

Client Server
Parse XML request and compose
Compose XML request and parse XML response
XML response
2. Response
<soap:Envelope xmlns:m="http://www.example.org/stock">
<soap:Header>
</soap:Header>
<soap:Body>
<m:GetStockPriceResponse>
<m:StockPrice>1299.99</m:StockPrice>
</m:GetStockPriceResponse>
</soap:Body>
</soap:Envelope>
RISE OF REST
AND JSON
REST
REST (Representational State Transfer) is an architectural style and set of constraints used for designing
network based applications. It was first introduced by Roy Fielding in his doctoral dissertation in 2000.

In order to be considered REST - services must abide by a set of constraints - Client-Server Separation
Stateless, Cacheability, Layered System and Uniform Interface.

REST relies on HTTP methods for performing actions. These methods include GET (retrieve), POST (create),
PUT (update) and DELETE (remove).

REST supports various media types for representing data - including XML, JSON, HTML,and more. Clients and
servers must agree on the format they will use to exchange data.
SIMPLE REST FLOW

1. Request
Indicating a data type supported
by the Server - XML, JSON, HTML,
Plain Text, etc
Client Server

2. Response
Agreed upon data type - XML, JSON,
HTML, Plain Text, etc
RISE OF REST
REST became popular due to its alignment with the principles of the modern web, its simplicity and its
ability to support building scalable services. This lead to community of adoption, educational resources,
tutorials and success stories. All of these contributed in spreading awareness and knowledge about REST.

Simplicity and Standardization - REST principles are straightforward and easy to understand. It utilizes
standard HTTP methods and status codes. HTTP was already established and widely understood. This made
it easier for developers to use REST without having to learn new protocols or technologies.

Scalability and Compatibility - The stateless principle of REST services paired with the use of caching made
it ideal for building applications that could handle high loads and traffic. REST services can be accessed
using web browsers and this helped in making APIs more accessible. It also works well with various client
platforms, including desktop and mobile.
RISE OF JSON
JSON (JavaScript Object Notation) is a lightweight data format. It is a way to structure and exchange data
between applications, specifically in Web APIs.

Lightweight and Simple - JSON uses a straightforward syntax based on key-value pairs and arrays. This
syntax is easy for humans to read and write. JSON has minimal overhead, it doesn't add a lot of extra
characters to the data being transmitted thus making it efficient for network communication.

Language Independent and Data Types - JSON is not tied to any specific programming language. It is
suitable to use in diverse technology stacks. JSON supports various data types, including strings, numbers,
booleans, arrays, objects and null. This allows for representing complex data structures and these types of
data structures can be represented in most every programming language.
FUTURE
OUTLOOK
GRAPHQL
GraphQL is a way to ask for data from servers. It was created by Facebook and shared in 2015. GraphQL
helps solve some problems with methods like REST APIs by giving more control over what data is requested.

Key Features of GraphQL

● Unlike REST APIs, which often require multiple endpoints for different resources, GraphQL uses a single
endpoint. Clients send their data requirements as queries in the request body.

● Clients request the data they need and nothing more. This eliminates over-fetching and under-fetching,
which can occur with some REST APIs.
AI ENHANCED APIs
An AI Enhanced API is one that perform tasks that go beyond what traditional APIs can achieve. AI Enhanced APIs
utilize machine learning, natural language processing, computer vision and additional AI techniques to provide
more “intelligent” and “sophisticated” services to developers.

● Language Models
○ OpenAI's GPT (Generative Pre-trained Transformer) provide language understanding and generation
capabilities, enabling applications to generate human-like text or carry out conversational tasks.

● Image Recognition APIs

○ Google Vision AI and Microsoft Azure Computer Vision offer APIs that can recognize objects, landmarks and
activities in images.

● Voice Recognition APIs

○ Google Cloud Speech-to-Text and IBM Watson Speech to Text can convert spoken language into written text
UNDERSTANDING AI LIMITATIONS
Lets not forget - for AI to be effective and accurate, it relies heavily on the data it has been trained on.

Without access to complete and relevant data - AI can only make educated guesses or offer responses based on
patterns it has seen in its training dataset.

Codebase Challenge: For a developer at a FAANG company

● Many projects involves working with a private codebase that contains proprietary algorithms and data
structures unique to the company's technology stack.

● AI models are trained on publicly available code and general programming knowledge. They lacks access to the
specifics of an internal codebase. Therefore - AI can only offer generic code that cannot solve problems
related to a company's internal code.
03
HISTORY OF
JAVASCRIPT
Java vs. JavaScript
Java JavaScript
The Java Programming Language is a general-purpose, JavaScript is multi-paradigm language. It is dynamic and
concurrent, strongly typed, class-based object-oriented supports object-oriented, imperative, and functional
language. programming styles.

Java is a compiled programming language. It order to JavaScript is an interpreted language. It can be interpreted
execute it is first compiled into bytecode and then runs directly by a browser and/or V8 engine in the same syntax it is
on the JVM. written.

Java uses static type checking. The type of a variable is JavaScript is dynamically typed and uses dynamic type
checked at compile-time. Variables must declared with a checking. Checking is done at run-time. The language allows
specific type (int, float, string, etc.). for variables to change types.

In Java functions are not first class. Java 8 seems to JavaScript has first class functions. This means a function can
partially support this concept, but it is not support in be passed as arguments, can be returned by another function
versions before Java 8. and can be assigned as a value to a variable.
Evolution of JavaScript: Early Days
In the early days of the web, the Mosaic web browser inspired developers to create interactive content. Netscape
Navigator emerged and gained widespread popularity.

1990s: In 1995, Netscape hired Brendan Eich to develop a scripting language for their browser. Initially called
LiveScript, it was renamed to "JavaScript" to leverage the popularity of Java.

1996-1997: Netscape submitted JavaScript to ECMA International for standardization, resulting in ECMAScript 1. During
this time, Microsoft developed JScript, a similar scripting language. The competition between JavaScript and JScript
spurred further development of both languages.
Evolution of JavaScript: Middle Era
Late 1990s: During the "Browser Wars" between Internet Explorer and Netscape Navigator, JavaScript saw rapid
development to attract developers. Internet Explorer emerged as the dominant browser. Before Netscape dissolved,
it open-sourced JavaScript.

Early 2000s: The term "AJAX" (Asynchronous JavaScript and XML) was introduced, highlighting JavaScript's role in
making asynchronous requests to servers. This period marked the rise of Web 2.0, shifting from static web pages to
dynamic content and the growth of social media.

2009: ECMAScript 5 (ES5) was released, introducing new features such as enhanced array methods, JSON parsing and
stringification, and stricter code rules. These improvements made JavaScript more readable and easier to use.
Evolution of JavaScript: Modern Times
2015: ECMAScript 6 (ES6) was released, marking a major update in JavaScript’s history. It introduced many new
features and syntax improvements, becoming the standard for modern JavaScript development.

Present Day: JavaScript is now updated yearly, with the latest version being ECMAScript 2023 (ES14). The term "ES6
and Beyond" is commonly used to refer to modern JavaScript.

JavaScript frameworks have become popular for building complex applications. While jQuery was widely used -
frameworks like Backbone, Ember, AngularJS, React, Angular, Vue, and Svelte have taken the lead.

Node.js has allowed JavaScript to be used for server-side development, enabling full-stack development with a single
language. It is known for being fast, scalable and cross-platform, including support for mobile development.
Frontend Execution Environment User Interaction

JavaScript
Runs in the web browser. Enables developers to create
Responsible for creating responsive and interactive
dynamic and interactive user elements such as buttons,
Involves using the JavaScript programming interfaces, enhancing the user forms, animations, sliders and
experience and handling user more that respond to user
language to create dynamic and interactive user
interactions. actions like clicks and inputs.
interfaces on the web. Handles user interactions,
animations and asynchronous communication with a
backend server. Frontend JavaScript is a key Async Interactions Validation
Uses asynchronous Validates user inputs on the
component in modern web development. It is often
communication with a server client side before data is sent
used with HTML and CSS to create visually appealing to fetch or send data. Often to the server. Helps to improve
and functional web applications. times this can be performed user experience.
without reloading the page in
the browser.
Execution Environment Server Logic Backend
JavaScript
Runs on the server which is Deals with tasks such as
responsible for handling authentication, database
requests from clients (usually querying and processing data
browsers) and returning before sending it to the Refers to using the JavaScript programming
responses. frontend.
language on the server side of web applications. It
involves creating server logic, handling databases
connections and processing user requests. Using
Database Access Security Node.js as a foundation this allows developers to
Can connect to various More secure than frontend build various types of web applications including
databases, including SQL and JavaScript because it is
NoSQL. Allows managing data executed on the server and APIs.
storage for applications. therefore is not directly
accessible by users.
02
JAVASCRIPT
BASICS
JavaScript Primitive Types
NUMBER Represents numeric values, including integers and floating-point numbers.
They are always 64-bit Floating point.

STRING Represents characters, such as text. Created using single or double quotes.

BOOLEAN Represents true and false literals.

UNDEFINED Represents a variable that has been declared but not assigned a value It is also returned when checking for
object properties that do not exist.

NULL Represents the intentional absence (empty) of any value.

SYMBOL Represents unique and non-enumerable identifiers. Introduced in ES6.

BIGINT Represents integers larger than the range provided by the Number (2^53 - 1). Introduced in ES11.
JavaScript Non-Primitive Types
OBJECT A collection of key-value pairs, similar to dictionaries in Python or HashMaps in Java. Unlike objects in statically
typed languages, JavaScript objects are flexible - properties can be added, deleted, mutated or accessed
dynamically at any time

ARRAY Arrays in JavaScript are a specialized type of object. Similar to arrays in other programming languages these
allows the storage of a collection of multiple items. Arrays come with built-in methods for performing common
operations. They can contain elements of any data type and can dynamically grow or shrink as needed.

FUNCTION Every function is essentially a Function object. Functions can take zero or more arguments, and their body can
contain multiple statements. Within a function, you can declare local variables. The return statement is used to
terminate the function and can be used to return a value. If no return statement is present, JavaScript returns
undefined.
Immutable vs. Mutable
Immutable refers to data types that can't change after creation. Mutable refers to data types that can be changed
after they've been created.

IMMUTABLE
JavaScript primitive types are immutable. Once a primitive data type is assigned a value, that value cannot be
altered. Any operation that modifies that value actually creates a new instance.

MUTABLE
JavaScript non-primitive data types, such as objects and arrays are mutable. This means that their content can be
modified after creation. Allowing for the addition, modification, or removal of elements or properties within these
data structures.
Operators
The Equals Operator The Strict Equals Operator
(==) and (!=) (===) and (!==)

The == version of equality is quite liberal. Values If the values are of different types the answer is
may be considered equal even if they are always false. If they are of the same type an
different types. In JavaScript the operator will intuitive equality test is applied. Strings must
force type coercion of one or both into a single contain identical character sets and other
type before performing a comparison. primitives must share the same value. Null and
Undefined will never === another type.
Example: '' == 0 //evaluates as true
Example: '' === 0 //evaluates as false
Operators Continued…
Comparison Operations
Greater than (>)
Great than or equal ( >= )
Less than (<)
Less than or equal ( <= )

Unary Operators (operators that take one value)

typeof - Not all operators are symbols, so can be written as words. This returns the type of variable as a string.
( ++ ) - incrementing
( - - ) - decrementing

Logical Operators
- And ( && )
- Or ( || )
- Not ( ! )
Variable Declaration
Variables in standard JavaScript have no type attached, and any value can be stored in any variable. In ES5 variables
were declared using the keyword var.

ES6 introduced const and let. Both are used to declare variables, but they have different behaviors and use cases.

const
once a value is assigned to a const variable, it cannot be reassigned. The value remains constant throughout the
variable's lifecycle.

let
can be reassigned after initial declaration. Values assigned to a let can be reassigned. Used when the value of a
variable changes during its lifecycle.
Using const vs let
When deciding between let and const, determine whether the value of the variable should remain constant
(use const) or if it might change (use let).

As a best practice, choose const whenever possible to reduce unintended changes to variables.

For objects and arrays it is common to use const. While the reference to the object or array cannot be
reassigned, it is important to note that the contents of the object or array can still be modified.
Printing/Logging to the Console
console.log() is a function that will print/log any variables or messages to the console. This is function is
useful for printing out data and/or debugging code.

Additionally, console.log() can accept multiple argument separated by a comma.

console.log('Hello World !');

// Hello World !

console.log('Hello', 'World', '!');

// Hello World !
Understanding Errors
When working with Node.js and running your JavaScript code, encountering errors is a common part of the
development process.

The error feedback provided in the terminal is intentionally detailed, aiming to assist you in identifying and resolving
issues in your code.

$ node errors.js <- command to execute the file

/Users/auman/CSULA/Spring2024/CS4220/Week02/errors.js:5 <- full path of file executed
xyz; <- snippet of the code causing the error
^

ReferenceError: xyz is not defined <- name of the error

at Object.<anonymous>
(/Users/auman/CSULA/Spring2024/CS4220/Week02/errors.js:5:1) <- line number where the
error is located
Wednesday Demo
● Install Node.js
● Setup VS Code
● Intro to JavaScript Coding

● VS Code
○ https://code.visualstudio.com/
● Eloquent JS - Intro, Chapter 1, Chapter 2
○ https://eloquentjavascript.net/
● How much JavaScript do I really need to know?
○ https://nodejs.dev/en/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs/

Join the Course Discord

● https://discord.com/invite/wzzey2AbZR
● Accept the Rules to gain full access to the Discord
REFERENCES
● Short History of Web Services
○ https://www.oreilly.com/library/view/java-web-services/9781449373856/ch01s04.html

● Rise and Fall of CORBA

○ http://www.triodia.com/staff/michi/queue/riseAndFallOfCorba.pdf

● Amazon Explains APIs

○ https://aws.amazon.com/what-is/api/
○ https://aws.amazon.com/what-is/restful-api/
○ https://aws.amazon.com/compare/the-difference-between-soap-rest/

● Dr. Sun’s Web Services Lecture with Java RMI Demo

○ https://www.youtube.com/watch?v=srqJ5ujwsA4
REFERENCES
● Official VS Code Tutorial
○ https://youtu.be/B-s71n0dHUk?si=IoUaqtj5GuYQEyyX

● History of JavaScript and ECMA

○ https://www.youtube.com/watch?v=Sh6lK57Cuk4
○ https://webreference.com/javascript/basics/versions/

● JavaScript Basics
○ https://javascript.info/
○ https://eloquentjavascript.net/
○ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction