ITEC 116 – SYSTEMS INTEGRATION AND Design Design

ARCHITECTURE 2 Considerations: Considerations:

JANUARY 20 [MON] developers focus on focuses on User
the STRUCTURE OF Experience (UX) &
SCOPE: DATA EXCHANGE User Interface (UI)
• LEC 4: INTRO TO API design principles.
• LEC 5: JAVASCRIPT FOR API Communication Communication
INTEGRATION Style: typically uses Style: UIs
• LEC *: CALLBACK, PROMISES, protocols like communicate w/
ASYNC/AWAIT HTTP/HTTPS for user action.
communication.
INTRO TO API
API [APPLICATION PROGRAMMING IMPORTANCE OF APIs
INTERFACE]: • Enables integration between systems
set of rules & protocols that allows diff. • Promotes Reusability
software app to communicate w/ each other. • Accelerate development
• It defines the method & data formats • Enhance User Experience
that apps use to interact w/ external
systems, services, or other apps. TYPES OF API
// communication between existing • HARDWARE APIs: interface for software
systems/apps – typically used by to talk to hardware.
programmers who develops prog. & Example: An analogy that relates API to
integrates existing one. e.g., weather APIs, a vending machine.
quote APIs. • SOFTWARE LIBRARY APIs: interface for
directly consuming code from another
DIFFERENCE OF APPLICATION PROGRAMMING code base.
INTERFACE & USER INTERFACE Example: using methods from a library
API UI you import into your app.
//connector //user & app’s • WEB APIs: interface for communicating
interaction across code bases over a network.
Function: allows diff. Function: part of the Example: Fetching current stock prices
software systems w/ software that from a finance API over the internet.
each other. It interacts directly w/
defines set of rules & end users. It provides WHO CAN ACCESS AN API?
protocols for visual interactive • PUBLIC API (aka Open APIs): consumed
requesting & elements. by anyone who discovers the API.
exchanging data. • PRIVATE APIs: consumed only w/in an
Interaction: Interaction: organization & not made public.
designed for designed for HUMAN • PARTNER APIs: consumed between one
interaction between INTERACTION or more organizations that have an
SOFTWARE SYSTEMS, established relationship.
not directly w/
humans. API ARCHITECTURAL STYLE
Visibility: operate Visibility: highly -Refers to the overarching design principles &
behind the scenes. visible & are the patterns that define how API is structure & how
main point of it interacts w/ other systems.
interaction for users.

1
COMMON TYPES OF API ARCHITECTURAL • Limited Security
STYLES Features
• REST (Representational State Transfer)
• SOAP (Simple Object Access Protocol) SOAP (Simple Object Access Protocol)
• RPC (Remote Procedure Calls) Is a protocol for exchanging structured
• WebSocket APIs info. in web services. Unlike REST APIs, that uses
standard HTTP methods & are designed
REST (Representational State Transfer) around resources, SOAP APIs follow a more
An architectural style commonly used rigid protocol & are focused on providing a
for designing distributed hypermedia systems, standardized way to request & exchange
particularly web-based APIs. data.
o Client: the person or software who uses
the API. Key Features of SOAP
o Resource: can be any object the API • Platform & Language Independence
can provide info about. • XML – Based
• Works over HTTP & SMTP
• Extensibility

ADVANTAGES & DISADVANTAGES OF USING

SOAP API
Advantages Disadvantages
• Standardization • Complexity
• Built-In Security • Performance
• Error Handling
Constraints of REST API:
• Uniform interface REST VS SOAP
• Client – server separation
• Stateless
• Layered system
• Cacheable

Constraints in REST API: Uniform Interface

REST relies on uniform interface
between the client & server. This means that
resources are accessed & manipulated using
a consistent set of HTTP methods:
• GET to retrieve a resource API LIFECYCLE
• POST to create a new resource Refers to complete process of
• PUT to update an existing resource managing an API from its initial planning &
• DELETE to remove a resource design to its eventual retirement. The lifecycle
encompasses all the stages an API goes
ADVANTAGES & DISADVANTAGES OF USING through, ensuring it is developed, maintained,
REST API & eventually decommissioned in a controlled
Advantages Disadvantages & efficient manner.
• Scalability • Lack of
• Simplicity Standardization STAGES OF API LIFECYLE
• Flexibility 1. PLANNING AND DESIGN //gather
requirements/needs
2
 2. DEVELOPMENT //writing code • Reference Types (Objects, Arrays,
3. TESTING //ensuring functions Functions).
4. DEPLOYMENT //use/make available OPERATORS:
5. VERSIONING AND MANAGEMENT • Arithmetic (+, -, *, /, %)
//maintain & update • Assignment (=, +=, -=)
6. MONITORING AND ANALYTICS //ensure • Comparison (==, ===, !=, !==, >, < )
efficiency & security • Logical (&&, ||, !)
7. DECOMMISSIONING (RETIREMENT) FUNCTIONS: declared using the function
//end API, notice users keyword or as arrow function.
CONTROL STRUCTURES:
IMPORTANCE OF API LIFECYCLE MANAGEMENT • Conditional (if, else, else if, switch)
• CONSISTENCY: ensures the API remains • Loops (for, while, for each, etc.)
reliable & meets user expectations
throughout its lifespan. JAVASCRIPT FEATURES
• SECURITY: regular updates & monitoring • Dynamic Typing
help protect against vulnerabilities. • Event-Driven Programming
• SCALABILITY: proper management • Object-Oriented Programming
allows the API to evolve w/ changing • Asynchronous Programming
business needs & user demands. • DOM Manipulation: allows interaction
• USER SATISFACTION: continuous & updates to web page content
improvement & support lead to better dynamically.
developer experiences & satisfaction. • Browser Compatibility
• Rich Ecosystem
JAVASCRIPT FOR API INTEGRATION
JAVASCRIPT: high-level, interpreted DOCUMENT OBJECT MODEL (DOM)
programming language allows developers to A programming interface for web
create Dynamic & Interactive features on documents. It represents the HTML document
websites. as a tree-like structure where each node is an
: one of the Core Technologies of the World element, attribute, or text. JavaScript interacts
Wide Web, alongside HTML & CSS. w/ DOM & manipulates it.
: is versatile, running both on the client side (in
browsers) & server side (via environment like
Node.js), making it essential for modern web SYNTAX FOR DOM MANIPULATION
development. Accessing Elements

IMPORTANCE OF JAVASCRIPT IN SYSTEM

INTEGRATION
• Front-End & Back-End Communication
• Middleware Functionality
Modifying Elements
• API Integration
• Real-Time Updates

JAVASCRIPT SYNTAX
VARIABLES: declared using var, let, or const.
DATA TYPES:
• Primitive Types (String, Number,
Boolean, Undefined, Null, etc.),

3
Creating New Elements based on their first digit, each representing a
specific type of response.

CATEGORIES OF HTTP STATUS CODES

• 1xx (Informational): indicates the
request was received & understood, &
the client can continue the process.
Removing Elements
• 2xx (Success): the request was
successfully processed by the server.
• 3xx (Redirection): further action is
required to complete the request, e.g.,
following new URL.
• 4xx (Client Errors): indicates an error
EVENT HANDLING caused by the client’s request.
Involves detecting & responding to user • 5xx (Server Errors): indicates the server
actions or browser events, e.g., clicks, form encountered an error & could not
submission, or keystrokes. process the request.
Common Event Types:
➢ Mouse Events HTTP STATUS CODES
➢ Keyboard Events
➢ Form Events
➢ Window Events

HTTP REQUEST W/ JAVASCRIPT

HTTP REQUEST: is a message sent by a client
(usually a web browser or application) to a
server to request data or perform an action. It
follows the HyperText Transfer Protocol (HTTP),
which is the foundation of data
communication on the web.
way for clients & servers to FETCH AN API IN JAVASCRIPT
communicate, enabling users to retrieve web FETCH API
pages, send form data, upload files, or Involves sending an HTTP request to a
interact w/ APIs. server & processing the response, typically to
retrieve or send data. This is commonly done
COMMON HTTP METHODS using JavaScript methods like the Fetch API or
➢ GET – retrieves data from a server libraries such as Axios.
➢ POST – sends data to a server, often • It is a modern, built-in method in
create a new resource. JavaScript for making HTTP requests. It
➢ PUT – updates a resource on the server. provides a cleaner, promise-based
➢ DELETE – removes a resource from the approach to work w/ APIs.
server.
CALLBACK, PROMISES, ASYNC/AWAIT
HTTP STATUS CODES SINGLE-THREADED LANGUAGE
A three-digit numbers returned by a JavaScript is a single-threaded
server to indicate the result of a client’s language – means that it has one call stack &
request. They are categorized into five groups can execute one task at a time. The prog. will

4
execute the tasks in sequence, & each task
must complete before the next task starts.

Call Stack: is a data structure that keeps track

of the execution context of functions in the
prog. It operates on the Last In, First Out (LIFO)
principle, means the last function that is called
is the first to be executed & removed from the
stack. If a function takes too long to execute,
it can block the stack, causing performance
issues. ASYNC CALL BACK
Callback is a function that is passed as
Despite being single-threaded, JavaScript an argument to another function & is
can handle asynchronous task (like network executed later, often after a certain task or
requests or timers) using the event loop. This operation is completed. It is widely used in
allows JavaScript to manage tasks w/out asynchronous programming to handle tasks
blocking the execution of the main thread. like timers, HTTP requests, & event handling
w/out blocking the main thread.

EVENT LOOP Callback Hell refers to a situation in

The term Asynchronous refers to the JavaScript programming where multiple
ability to perform tasks w/out blocking the nested callbacks make the code difficult to
execution of the program. This mean that read, understand, & maintain. It typically
JavaScript can handle operations (like occurs when handling asynchronous
fetching data, reading files, or waiting for operations that depend on the results of
timers) in the background & continue previous operations, leading to a pyramid-like
executing other code while waiting for these structure of nested callbacks.
tasks to complete.
The Event Loop is a mechanism that ASYNC PROMISE
enables asynchronous programming in a a Promise is an object that represent
single-threaded environment. It allows the eventual completion (or failure) of an
JavaScript to handle multiple tasks (e.g., I/O asynchronous operation & its resulting value. It
operations, timers, & API calls) w/out blocking allows you to handle asynchronous tasks more
the execution of other code. efficiently compared to traditional callback-
based approaches.

A Promise can be in one of three states:

EVENT LOOP – WEB API • Pending: initial state; the asynchronous
Web APIs refers to browser-provided operation is still in progress.
APIs (or Node.js APIs in server-side JavaScript) • Fulfilled (Resolved): the operation was
that handle asynchronous tasks outside the successful, & the result is available.
JavaScript engine & later notify the event loop • Rejected: the operation failed, & an
when the task is complete. error is available
Methods used in Promise:
• .then() – handles the resolved value
when the Promise is fulfilled.
• .catch() – handles errors when the
Promise id rejected.
5
 • .finally() – executes code regardless of
whether the Promise was resolved or
rejected.

ASYNC AND AWAIT

These are two keywords in JavaScript
used to work w/ asynchronous code in a more
readable & asynchronous-like manner. They
simplify working w/ Promises & eliminate the
need for chaining .then() and .catch()
methods.

• ASYNC: an async function always

return a Promise, whether the
function’s return value is explicitly a
Promise or not.
• AWAIT: await pauses the function
execution until the Promise is
settled. It simplifies handling
asynchronous operations
compared to .then() chaining.