IBM Full Stack Development Course

Course 1 – Cloud Computing

1. Why cloud computing VS hosting on a local server?

a. Flexibility and scalability
b. Availability of data with internet access
c. Viable platform for massive data in AI, IoT, blockchain, data science, etc.
d. Inexpensive IT infrastructure expansion or maintenance
e. Global footprint without investing in global data centers
f. Cybersecurity
2. What is cloud computing?
a. Model for conveniently delivering on-demand IT resources over a network.
b. Resources include applications, services, storage, network, servers
c. Characteristics of cloud: Broad network access, On demand self-serving,
Resource pooling, rapid elasticity, measured service
d. Deployment models: Public, Private, Hybrid, Community
e. Service models: IaaS, PaaS, SaaS
3. Cloud Service Providers: Alibaba, AWS, Google, SalesForce, Azure, SAP
4. SaaS
a. User
b. Ola/Uber, don’t care of specs, you don’t drive, you don’t pay for fuel and toll
c. SaaS provider manages:
i. Application
ii. Data
d. Provides access to a service provider’s cloud-based software
e. Maintain servers, databases and code of application, manage access to
application, security, etc.
f. Eg. Email and collaboration – gmail, Microsoft 365, CRM – salesforce, HRM –
SAP, financial management, billing and collaboration
g. Multitenant architecture: infra and code are centrally maintained and
accessed by all users, monitor and standardize data, security, compliance,
maintenance are offered, customize applications, subscription model
h. SaaS integration platforms SIPs
i.
5. PaaS
a. Dev
b. Renting a car, don’t care of specs, you drive, you pay for fuel and toll
c. PaaS provider manages:
i. OS
ii. Development tools
iii. Databases
iv. Business Analytics
d. Computing model provides complete application platform to develop, deploy,
run and manage
 e. Hosts servers, network, storage, OS, application runtime, API, microservices,
middleware. Databases – installation, configuration and operation of
application infrastructure for consumers
f. Scalability, Faster time to market, expand functional capabilities
g. Information security threats, dependency service provider’s infrastructure,
lack control over changes in strategies, tools, offerings
h. Good for IoT
6. IaaS
a. Sys/IT Admin
b. Leasing a car, did a lot of research, you drive, you pay for fuel and toll
c. Iaas provider manages:
i. Data Centers
ii. Physical cooling
iii. Power
iv. Network and Security
v. Servers and Storage
d. Form of cloud computing that provides compute – CPU, GPU, RAM, network
and storage – Blocks, Files, Objects
e. Consumers can create instances of VMs to use these resources. The OS and
Hypervisor are usually pre-installed with users’ choice and users can install
middleware, applications and run workloads on the VMs. Storage is also
provided to store workloads and backups. Also track and monitor usage of
cloud services and manage disaster recovery.
f. Cloud IaaS components – Physical data centers, Compute – manage
hypervisors which manage the VMs access based on their compute memory
and storage requirements – autoscaling and load balancing, Network –
virtualization or APIs, Storage – object: most common, distributed and
resilient, file: NAS, block: like SSD
7. ^^^ Complexity increases, Ease of use decreases ^^^
8. Deployment Model indicate where the infrastructure resides, who owns and
manages it and how cloud resources and services are made available to users.
9. Public Cloud
a. Users access servers, storage, network, databases, security and applications
as services by CSPs on the internet. Use web consoles and APIs to access the
resources and services. Users don’t own any cloud resources – only pay as
you use. Total cost for ownership reduces for users – no control of
environment and infrastructure
b. AWS, Azure, Google, IBM, Alibaba
c. Virtualized multitenant architecture allowing users to share computing
resources
d. Most significant economies of scale but security and data sovereignty
compliance
10. Private Cloud
a. Cloud infrastructure used by exclusively one organization with multiple
consumers, owned managed and operated by organization itself or third
party or combination.
b. Internal or external infrastructure
 c. VPC – Virtual Private Cloud – external cloud - a logically isolated private cloud
computing environment within a shared public cloud
d. Cost efficiency of public cloud but security and infrastructure tailored to
organizations’ need
e. Virtualized environment model – controlled by internal IT, full control of
access, security and compliance in spite of using public cloud
11. Hybrid Cloud
a. Computing environment where workloads can be balanced between on-
premise private and third party public clouds
b. Cloud bursting – public cloud can run workloads until a surge is met and the
capacities are fulfilled, then can go back to private cloud
c. Interoperability – understand each others API, data formats, authentication
and authorization, scalable, portable – between cloud systems and csps
i. Hybrid monocloud
1. 1 CSP
ii. Hybrid multicloud
1. Open standards based stack deployed on any public CSP
iii. Composite multicloud
1. Distributes single application on multiple CSPs, more granular
d. Not locked in to single vendor
e. SIPs, Data and AI integration, enhance legacy apps, VMware migration
12. Community Cloud
13. Cloud Infrastructure
a. Consists of data centers, storage, networking, computing resources
b. After choosing service model and type, customers plan infra arch. Physical
resources in regions, zones and data centers.
c. Many regions around the world. Region is a geographic area where a cloud
providers’ infrastructure is clustered eg. NA south, US East
d. Each region has many available ZONES – AZ – own power, cooling and
networking, isolation of zones improves eg. DAL-09
e. Cloud data centers have pods and racks – servers, networking resources,
storage
f. Compute options -> Virtual servers – VMs software based, Bare metal servers
– physical servers, serverless – abstraction on virtual machines
g. BM and VM has local Storage drives
h. Routers and switches hardware – networking or software defined networking
– programmatically certain networking resources made available as APIs
i. Servers: public interfaces: connect to public internet and private: connect to
other cloud resources
j. Network interfaces: IPs and subnets – for security – Access Control Lists,
security groups, VLANs, VPCs, VPNs
k. Hardware: firewalls, load balancers, gateway, traffic analyzers also virtualized
and provided as services
l. Content Delivery Network – distribute content to multiple points throughout
world, users get more quickly by accessing from near to them
14. Virtualization and Virtual Machines
 a. Virtual servers, virtual instances or instances depending on cloud provider –
specify region and zone and OS; choose multitenant or single tenant; hourly
or monthly billing and networking options
b. Process of making a software based/virtual version of compute, servers,
applications, storage, networking, etc.
c. Hypervisor – software that runs above server/host, pulls resources from
servers to provide to your VM
i. Type 1: Bare metal hypervisor – immediately on top of server – secure
- VMware
ii. Type 2: Hosted – less frequent – end user virtualization eg. VMware
workstation – Host OS on server then hypervisor, slower
d. VM – software based computer – can run multiple on a hypervisor – manages
resources run on these VMs from server
e. Each VM on one server can host different OSs, can portably move any VM
from one HV to another as they’re independent
f. Cost benefits: 1 infrastructure runs multiple machines, not much
maintenance, less electricity; agility and speed; lowers downtime: if one host
goes out, VM can be quickly moved to another hypervisor running on another
server.
g. Types of virtual machines:
i. Shared or public cloud VMs: CSP manages, multitenant: underlying
physical server is virtualized and shared with other tenants or VMS –
provisioned on demand for sizes and config – ranging virtual cores and
RAM memory as well as local storage – usually hourly or seconds or
monthly VMs billing
ii. Transient or Spot Vms – unused capacity in cloud data center – lower
cost than regular vms – CSP can deprovision at anytime and can use it
for higher resources or VMs at anytime. Best for testing and
developing or running high computing workload at low cost
iii. Reserved virtual server instances – reserve capacity and guarantee
resources for future deployments – reserve desired amount, provision
instances from it when you need it – guaranteed capacity for the term
in the data center - choose year terms – can lower cost – when you
know amount of capacity, if you exceed capacity – can use it for hourly
monthly VMs – not all may be available as reserved
iv. Dedicated hosts – single tenant isolation - only your VMs run on a
host – specify data center and pod – then assign Vms – max workload
management control – compliance and regulatory or licensing terms
h. Rapidly provisioned, scalable environment, low cost, shared hardware so
limited throughput and performance
i. Low portability
15. Bare Metal Servers
a. Single tenant, dedicated physical server – CSP manages server up to OS –
hardware or rack connection is their problem, customer manages everything
else on server, for specific needs to access certain kernel level settings
b. Preconfigured or custom configured – processors, RAM, HDD, OS, can also
have their own hypervisors choice, also can add GPUs
 c. Longer to provision than virtual, more expensive than similar sized virtual
machines, only offered by some CSPs
d. Fully customizable, high performance, long term, high secure, no hypervisor
required, minimum latency
e. Work best for cpu and io intensive workloads, flexibility, control, speed,
security.
16. Secure Networking
a. Cloud network – logical instances of networking devices compared to on
premise, networking functions are services and not racked physically.
b. Size is defined or IP address range first
c. Deployed in networking spaces – logically separated – eg. VPC – security of
private cloud, scalability of public – further divided in subnets
d. Cloud resources – VMS, storage, network, load balances are deployed in
subnets – ACL protected subnet level firewall, VSI – security groups at
instance levels - eg. Web facing VSI one group – need internet access – public
gateway instance added – enterprises use VPNs to connect; load balancers
added, app facing another group – load balancers added for performance,
database another group
e. Building a cloud network – create set of logical constructs to deliver
networking functionality akin to data center networks for securing
environments and ensuring high performing business applications
17. Containers
a. Executable unit of software in which application code, libraries and
dependencies are packaged together so that it can run on desktop, traditional
IT or the cloud.
b. Workloads can be broken into microservices or serviceable units
c. Great for hybrid clouds
d. Small, fast and portable, no need for guest OS in every instance unlike VMs
e. Docker, cloudfoundry, Kubernetes, openshift etc.
f. Node.js application – being pushed for production
g. VMS – hardware -> host OS -> hypervisor -> VM – guest OS and libraries ->
add JS app – lot of resources already used, now for scaling it, add more VMs,
each one needs guest OS, libraries – exhausting resources and then if created
on maybe a MAC and Guest OS is linux – incompatibilities could be there
h. 3 step process: manifest – describes container – docker file; step 2 create
image (docker image or application container image); step 3 is actual
container – all runtimes libraries and binaries to run app.
i. Containers – Hardware -> host OS -> runtime engine (docker engine) runs
containers -> no guest OS -> only libraries and application -> can scale and
way more lightweight
j. If containers aren’t utilizing that many processors or resources they are
shared between other containers
k. Now suppose third party service and python app accessing it, now JS app
needs to access python app, for VM – you need to free up resources to add a
python app VM
18. Cloud Storage
a. Types:
 i. Direct attached – local storage – presented directly to cloud based
servers – within same rack – fast, usually for OS – it only lasts as long
as compute resource – not shared with other nodes – not resilient
ii. File storage – NFS/NAS– network file/attached system – storage
connected to compute nodes using ethernet – slower than block or
direct – lower cost – mounted or used on multiple servers
iii. Block storage – high speed fiber connection – fast read write speech –
mount as volumes on compute nodes – which it sees as hard drive –
volumes one compute node at a time
iv. Object storage: not attached to compute node, accessed via API –
cheapest but slowest speed – infinite in size for user – unlike file and
block you define and it builds overtime – this is infinite – just pay as
you use
b. IOPS input output operation per second – how quickly data can be read or
written, high OPS – faster underlying disk, if slow, IOPS can become
bottleneck
c. Persistence – file or block – once compute node deleted or terminated – can
mount to another compute node but you pay or can be deleted – ephermeral
or temp storage – lose data unless backed up
d. Snapshot – image of storage at a instant – fast to create, no downtime, record
changes to data not hold data, cannot recover individual files
19. File storage
a. Encryption at rest and in transit – more secure
b. Speed varies depending on bandwidth of ethernet load even though they can
handle high traffic
c. Can be mounted to more than one compute node at a time
d. Sharing storage – common storage – repository – departmental file share
e. Highly scalable
f. Accessible to multiple servers and simultaneous reads and writes without
overwritten issues
g. Mix of structures and unstructured data
20. Block Storage
a. Breaks files in chunks or blocks of data and stores separately under unique
addresses – must be attached to compute node before using as a volume
using fiber net
b. Low latency workloads best
c. Consistent high speed – databases and mail servers
d. No disk sharing between compute nodes
e. Data encryption at rest and in transit usually
f. Boot volumes
21. Object storage
a. Not connected to a compute node
b. Api to upload download and manage data
c. Least expensive of the 3
d. Pay as you use per GB
e. Large amounts of unstructured data – not hierarchical folder or directory
structure
 f. Buckets – structurally flat – can have diff buckets for diff object types – cannot
have nested bucket – when an object is added to bucket – metadata to locate
and access object and storage or accessed time
i. No need to define size
ii. Ranges vastly and can build as you go or shrink
iii. CSP offers resilience options and charges change
1. Buckets that are resilient but only one data center – only one
geographical location but not highly available
2. Buckets with data stored multiple times in diff data centers –
same region or multiple regions – cost more but high resilience
and availability
g. Any data that Is static and fast read and write not imp – not for OS, databases,
or where data changes
h. Object storage tiers or classes – how frequently data is accessed – different
charges
i. Standard tier – frequently accessed – highest cost
ii. Vault or archive tier – once or twice a month access, lower cost
iii. Cold vault tier – once or twice a year accessed – least minimal
i. Automatic archiving rules – move data to a cheaper storage tier if object isn’t
accessed for long
j. Doesn’t come with IOPS options – slower compared to file or block
k. Data retrieval from cold vault can take hours
l. Object storage -> API – S3 API – S3 object storage by AWS – S3 compatible –
developers able to access multiple vendors object storage – HTTP based
RESTful API – put upload and get download objects from them
m. Backup and disaster recovery replacement for offsite backups
n. Charges for data retrieval can be separate so be sure of tier
22. Content Delivery Networks (CDN) driven by block storage
a. Distributed server network – temp stored or cached website content to users
based on geographical location – reduces distance between visitor and server
b. Accelerates internet content delivery, makes website faster
c. Dallas hosted server – users in SYD, LA, LON, NYC
d. SYD – 8600 miles – round trip 170 milliseconds, LON – 100ms, NYC – 40ms, LA
– 30ms
e. Content delivery network endpoints – Internet exchange points IXPs – edge
servers at as many locations as possible – now when it tries – closest
geographical location – when one user anywhere requests, response is
cached and sent to that so any other user accessing it gets it from the edge
server directly
f. Ofcourse speed for users but MAJOR reduction of load in dallas server – can
increase uptime – and increased security since server is not directly accessed
g. Less packet loss – reduced hops, low latency and jitter
23. Hybrid multicloud
a. Hybrid cloud - Computing environment connects on premise private cloud
and third party public cloud into single infrastructure to run application of
organization
 b. Hybrid multicloud – leverage services across different providers into one
cloud (private too)
c. Cloud scaling – respond to load instead of increasing on prem costs
d. Composite cloud – applications spread across multiple cloud environments
e. Eg. Flower shop – web UI, Billing API, Rewards framework – based in Europe –
now in US around thanksgiving issues – reward center can stay on prem in eu
– ui and billing api can go up on cloud
f. Modernization – airline – reservation on prem – created mobile backend –
running on public cloud which also works with reservation on prem, when
canceled or delay – add to cloud a recommendation system for convenient
mobile user use. For AI, airline uses all historical data maybe unplanned
maintenance – legacy data on prem can be connected to ML
g. Prevent lockin to specific cloud platform and flexibility to move workloads
between them
24. Microservices
a. Approach in which a single application has loosely coupled and independently
deployable smaller components or services – own stack running on own
containers – connect using apis, event streaming and message brokers
b. Multiple developers can work independently, Different stacks and runtime
environments, independent scaling
c. Ecosystem of code provided to integrate and make basic easy
d. Container is distribution method for these microservices – so if one fails,
other services of app not disrupted only that part glitches maybe
e. Eg. Search, autocomplete, content catalog, recommendation system
25. Serverless computing – compute model
a. Offloads scaling, scheduling, patching and provisioning of application not
customers job – focus on developing business code
b. Server management – virtual and physical is not developers or users
headache anymore, that’s CSPs
c. No provisioning of servers by developer
d. Runs code only on demand scaling on number of requests
e. Pay only for resources being used – unlike vMs are paid for even if idle
f. Abstracts infrastructure from developer, code is individual function – each
function in stateless container, no prior execution context – each new request
– new instance of function
g. Front end sends text files -> serverless platform – translate text files and store
in cloud storage, sends link back -> storage layer
h. IBM cloud, AWS Lambda, Azure
i. Applications like short running stateless functions, seasonal workloads,
production volumetric data, asynch processing or event based processing,
stateless microservices
j. Iot, microservices, mobile backends, data and event processing
k. Not for long running processes, may need to start from zero to serve new
request as they scale on their own
26. Cloud Native Applications
a. Application developed to work only in the cloud environment or existing app
refactored and configured with cloud native principles
 b. Microservices that can be independently scaled in containers to create
software
c. Ui business logic and data layer loosely coupled
d. Standardized logs and messages and catalogs
e. Distributed tracing – istio, knative
f. Development principles
i. Microservices architecture
ii. Containers – flexibility and scalability
iii. Agile methods – updates and feedback
g. Solution Stack
i. Application code – designed built and delivered differently for cloud
native vs monolithic
ii. Application runtime - middleware
iii. Application + data services – backing services, integrate with on
premise or existing
iv. Scheduling and orchestration – Kubernetes
v. Cloud/infrastructure – public, private, enterprise infrastructure
27. DevOps
a. Dev team – design, develop, deliver, run software
b. Ops team – monitoring, predicting failure, managing environment, fixing
issues
c. Collaborative approach – business owners, dev, operations and QA team
d. Agile and lean thinking principles to all stakeholders
e. Accelerated customer feedback cycles
f. Unified measurements
g. Reduced overhead
h. Continuous delivery cycle of new features and bugs
i. Devops process
i. Continuous delivery CD– small well designed increments of software,
code changes always in state to be released immediately – Jenkins and
help facilitate automation of build, test and deploy
ii. Continuous integration CI – immutable components – entire module
replaced to update – developers integrate code changed in shared
repository ensuring early detection of integration issues – version
control systems like Git is used
iii. Continuous deployment Cdep – automatically deploy software
changed in production environments after automated tests are passed
– aws beanstalk
iv. Continuous monitoring CM – real-time insights into application and
infrastructure performance to detect issues and take measures –
Prometheus
v. Delivery pipeline – ideation, coding, building, deploying, managing,
improvement, repeat
j. Devops and cloud
i. Automated provisioning of servers and installations – documentated
and repeatable and verifiable
ii. Continuous integration and deployment principles help
 iii. Define how people work together and collaborate
iv. Test in low cost production like environments
v. Recovery from disasters by rebuild systems quickly and reliably
28. Application modernization
a. Monolithic legacy applications – to modernize can accelerate digital
transformation, leverage new tech and more customer friendly
b. 3 factors:
i. Architecture: monolithic before, distributed – SOA then, microservices
ii. Infrastructure: physical servers before, VMs then, cloud
iii. Delivery: waterfall before, agile then, DevOps
29. Cloud Security
a. Insider threats
b. DDos through Simple Network Management Protocol – SNMP – used for
modems, printers, routers, servers
c. Data breach
d. Security models:
i. Shared responsibility model: organization hands off certain IT
responsibilities to CSP, both accountable for different aspects
1. In Iaas – CSP looks for physical security of infra, users
responsible for application security including OS
2. In paas – provider secures platform, user is responsible for
code and data
3. In saas – CSP responsible for infra, application and data, users
– protection of logins
e. Identity and Access Management (IAM) – AI powered context to automate
risk protection and constantly authenticate any user to any resource – no
trust strategy, centralized access control
f. Cloud network security – security measures, technology, policies and
processed to protect data on public private and hybrid cloud networks.
Deploy and manage network security built directly on cloud
g. Identify cloud usage and state, protect your cloud system, response to
successful attacks and attempts to attack
h. NIST 5 pillers of cybersecurity framework – idenitify, protect, detect,
response, recover
i. CSPM – Cloud security posture management – misconfigurations, IAM,
Regulatory compliance management, traffic monitoring, threat response, risk
mitigation, digital asset management
j. Trends in cloud security – cybersecurity mesh, zero trust security models,
hybrid and multicloud environment, cloud native tools and apps, deployment
of DevSecOps, secure remote workforces, ai and ml threat detection
30. Identity and Access Management – access control
a. First line of defence, authenticate and authorize users, user specific access
b. Comprehensive security strategy security needs of: organizational users,
internet and social based users, third party business partner orgs and vendors
c. Users: administrative – cloud platform admins, operators and managers –
steal data, deploy malicious, or destroy existing, developer – read sensitive
info, create update and delete apps , application – users of cloud hosted apps
 d. Authenticate using Identity providers: cloud directory, social, enterprise,
cloud, API keys
e. Multifactor authentication – single use pwds, pins, certificates, tokens, risk
based – location, past activity or preferences, timebased otps
f. Cloud directory services – manage userprofiles and their credentials and
password policies – apps hosted on clouds don’t need their own user
repository
g. Reporting – user centric view of access to resources or resource centric vuew
od access by users
h. Audit and compliance – validate implemented controls against security policy,
industry compliance and risk policies to report deviations
i. User and service access management – provision and deprovision customer
partner and vendor user profiles – streamline access control on role
organization and access policies
j. Access groups – offered by most CSPs – create groups, add users ad manage
access for existing – group of users and service IDs created so same access is
assigned to same members in a group with one or more access policies
k. Policies include subjects, targets and roles – actions allowed
31. Cloud encryption
a. Last line of defence in layered security model – encrypts data, data access
control, key management and certificate management
b. Scrambling data in a way that makes it illegible
c. Encryption algorithm – rules by which data is transformed and decryption key
– how data will be transformed back
d. Services:
i. Limited encryption of data – only sensitive
ii. End to end – all data uploaded to cloud
e. Data protection states:
i. Encryption at rest – protect stored data in database or storage layer
1. Block and file
2. Built in for object storage
3. Database encryption
ii. Encryption in transit – protects data while transmitting, Encrypting
before transmission, authenticate endpoints, decrypt on arrival
1. SSL – secure sockets layer,
2. TLS Transport layer security
3. not just for website security but also between servers and
services in cloud
iii. Encryption in use – protects data in use in memory – allows
computations without need to decrypt
1. Server side encryption – after cloud server receives data
before storage – create and manage your encryption keys or
generate and manage keys on cloud using CSP – customer
managed encryption keys
2. Client side encryption – occurs before data is sent to cloud
storage – users can utilize algorithms and keys unknown to CSP
 f. Multi-cloud data encryption - Data access management, integrated key
management, encryption
g. Key management services are offered by CSPs
32. Cloud monitoring
a. Monitoring performance across entire stack of applications and services
b. Cloud monitoring solutions assess data, application, and infrastructure
behaviours for: performance, resource allocation, network availability,
compliance, and security risks and threats.
c. Strategies practices and processes for analyzing tracking and managing
services and apps and provide suggestions for user experience
d. Cloud monitoring categories
i. Infrastructure – minor and major failures
ii. Database – track processes queries and availability
iii. Application performance monitoring – help increase meet service
level agreements, reduce downtime
e. Leverage end user experience monitoring solutions
f. Move all aspects on infrastructure under one monitoring program
g. Increase cloud monitoring automation
h. Simulate outages and breaches
i. Cost, performance and UX

Course 2 – HTML5, CSS3 AND JavaScript

1. Web and Cloud Development

a. Browsers – address bar in which you enter URL
b. Browser contacts server with request, server sends response
c. Server returns html – structure of page, CSS – style and flar, JS – interactivity
and dynamic content
d. Content displayed by websites can have 2 elements:
i. Static - Contents previously stored on server
ii. Dynamic – generated each time when requested by client – like info
from databases
e. Environment for building web and cloud apps:
i. Frontend – client side – user can see and interact with – html css js
ii. Backend – server before code and data sent to client – logic and
functionality of making web or app work and authentication of data
security – relational or nosql databases
iii. Full stack – both front end and back end environments
f. Developer tools:
i. Code editor
ii. Integrate, build, compile and debug code – IDE
iii. IDE integrates management and storage tools like git and github
iv. Sublime text, Vim, VS, Code, Visual Studio, Netbeans
2. Front-End development – client side programming
a. Hypertext Markup Language – physical structure – text links images videos
page dividers buttons
 b. Cascading Style Sheets – standard method to define apply and manage style
characteristics for websites and components – look feel style colors font
layouts – cross browser compatibility and device compatibility
c. JavaScript – object-oriented programming language – add interactivity eg.
Html to add button, css to style button, js to add login functionality
d. Syntactically Awesome Style Sheets (SASS) – extension of CSS, variables,
nested rules and inline imports for ogansiation, faster and easier
e. Learner Style Sheets – LESS – enhances css more styles and functions LESS.JS
converts less styles to css styles
f. Reactive– reactive or adaptive – display version for specific screen size – more
info on pc than mobile
g. Responsive – automatically resize for device
h. Angular JS framework – open source framework by google, built in routing
and form application
i. React.js – developed and maintained by facebook – JS library that builds and
renders components for a web page – not complete suite – like routing not
part of framework – build and drop components to page
j. Vue.js – maintained by community, view layer focused UI, buttons, visual
components – flexible scalable adaptable and can be library or framework
3. Application Developers tools
a. Version control – track what changes were made when and who made them
to avoid conflicts – revert to older version if problem – code repository – git
and github
b. Libraries – collections of reusable code – no need to create from scratch –
multiple libraries can be integrated in a project – codes can be called when
required – add specific features – eg. Jquery for DOM manipulation, email-
validator checks mail ID is correct and valid, apache commons proper –
repository of reusable java components
c. Framework – standard way to build and deploy apps – skeleton you extend by
adding code – determine and used from beginning – determines architecture
– framework calls your code not other way round, helps create efficient code
– eg. Angular JS – dynamic web applications, Vue,js – user interface, Django –
python for web development
d. Libraries allow to call functions as and when required but not control over
framework – Inversion of Control – not in full control of development process
– frameworks with a lot of control can be opinionated – frameworks have
own libraries – take away things like how tools should be used, file names,
etc. – inversion of control takes away tedious configurations
e. CI/CD – continuous integration and continuous deployment/delivery – deliver
frequent changes reliably, CI – tests and builds code and CD deploys it
f. Build tools – transform source codes into binaries for installation, automate
tasks like downloading dependencies, compiling source code to binary code,
packaging it, run tests, deployment to production – can build from command
line or IDE – build automation utilities or build automation servers – eg.
Webpack module bundler for JS, babel for JS compiler, web assembly – binary
instruction format that runs on browser
 g. Packages – built and tested, needs to be deployed, packages make apps easy
to install with all necessary files bundled – app files, instructions for
installations, metadata – package description, version, dependencies like
other packages to install – archive files
h. Package managers – distribute packages – finding installing and uninstalling
software packages for users – coordinate with file archivers to extract package
archives – verify checksums and digital certificates to ensure integrity and
authenticity of package – locate download install or update existing software
from software repository – manage dependencies while installation
i. Eg. Linux – Debian package manager system, redhat package manager,
windows – chocolatey, android – package manager, macos – homebrew,
macports
j. Library and utility code are managed with Cloud application package
managers – node.js/javascript – npm, java – gradle/maven, ruby – rubygems,
python - pip and conda
4. Back-End development
a. Create and manage resources needed to respond to client requests
b. Enables server infrastructure to process request, supply data and provide
other services securely
c. Processes the data you input like login, product searches, payment info
d. Manage access, authenticate and authorize accounts
e. Secure data handling
f. APIs, routes and endpoints process requests
g. Api code works with data
h. Route is a path to a website or page
i. Endpoint can be api or route – point at which api connects to software
j. Backend creates routes to direct requests to correct service – if endpoint
missing 404 error
k. Api can help cloud apps access resources from backend
l. Backend languages and their frameworks
i. Javascript – run in web browsers – node.js and express
ii. Python – Django and flask
iii. SQL – structured query language
iv. Object relational mapping ORM to connect to databases and retrieve
data
5. HTML5
a. Hypertext Markup Language
b. Language of the internet – designed to share scientific documents
c. Adaptations for displaying web pages on internet
d. Building blocks of HTML page – content assigned labels like paragraphs, lists,
tables, described with tags which browser used to render content
e. Introduced by CERN and IETF, W3C standardized it, W3C and WHATWG
developed HTML5.0 and versions introduced 5.1, 5.2
f. Objectives – defines single language written in html or xml syntax,
interoperability with earlier implementations, improves markup for
documents, includes markup and API for idioms such as web applications
g. HTML and HTML5 are interchangeable
 h. HTML Features:
i. Categorize web oages in sections
ii. Tools for data management, drawing, video and audio
iii. Facilitates development of cross browser apps for web and devices
iv. Flexibility to develop interactive websites
v. Engaging user experience similar to desktop apps
vi. Allows for multiple platform development – uniformity
i. Documents transmitted with an HTML content type are processed as html
documents by web browsers and are parsed using html rules
j. <!DOCTYPE html> - DECLARATION TAG – not an html tag, instructional to web
browser about version of html – optional
k. <html> </html> - ROOT element of tree – contains all other html elements
l. <head> </head> - meta data about page - contains browser tab title - <title>
<script> <style> style sheet links <link> <meta> browser support info <base>
m. <body> contains all other tags for content to be delivered on web screen
n. Page headings <h1> to <h6>
o. Line breaks <br> - not container tag – no end
p. Links to other pages - <a href=””>word</a> - anchor tag with href for link
i. Open in new tab with target=”_blank” attribute
ii. Can also link to top of current page – href=”#” or href=”#top”
iii. Link to bottom of page – href=”#bottom”
iv. Link to different section of page – href=”#mypara” in body - <p
id=”mypara”>
q. <ol> <li></li> </ol> - ordered list for numbered lists
r. <ul> <li></li> </ul> - unordered list for bulleted
s. <table> <tr> <th></th></tr> <tr> <td></td> </tr> </table>
t. <img src=”” alt=”” width=”” height=””> in px
u. <!--comment -->
v. <div> - logical division on page
w. <meta name=”author” content=”hello world”>
x. HTML DOM tree
y. Document Object Model – DOM tree – in memory representation of
document
z. Xhtml – xml + html
Xhtml tags need to be in lowercase – case doesn’t matter in html
aa. Xhtml needs end tags, all attributes values must be present, “”, ‘’, should
surround every value and XML parser stops processing if encounters any non
well formed syntax
bb. In html – unmatched quotation marks, non terminated and uncontained
elements are allowed, syntax is less rigorous
6. HTML management and support
a. Syntax is compatible with html4 and xhtml1 documents
b. Includes elements and apis to create web apps – video and audio elements –
api for drag and drop and offline apps
c. All modern browsers support html
d. Apis enhance user experiences – advanced animation, drawinf audio and
video
 e. Use of html and css improves page load times
f. Improved search indexing - Seo uses keywords provided by meta tags for
google and other search engines for visibility on search
7. Html5 elements
a. Structural elements – section, article, header, footer, figure and figcaption
b. Apis can help with graphics and embedded content – canvas, audio, video
c. Input elements automatically validated by browser using these attributes
without need for custom validation scripts – tel, email, datetime, number,
range, color
d. Web storage APIs can store data in browser – localStorage, sessionStorage
e. Web workers run processing intensive tasks without blocking user
interactions to current page
8. HTML scripting
a. <script> tag or separate file called by HTML code – interactive – form
validation, dynamic content – only if browser supports scripting anf user has
it enabled, if browser does not have sandboxed browsing content flag set
when untrusted pages are used
b. Running a page that has embedded object <iframe src=””>, without sandbox
grants the object same permissions as page and allows ads to occur in app
c. To prevent granting implicit permissions – use sandbox attribute on any tag
that has embedded object <iframe src=”” sandbox>
d. Each html document loaded in browser page becomes Document object –
provides access to all html elements in page and can be accessed from within
script
e. Dom tree accessors are html document apis that provide access to all html
elements on a page
f. Document API
g. Property to access elements is prefixed by word document eg.
document.head – if exists otherwise null, document.title, document.images –
HTMLCollection of image elements in document, document.script –
HTMLCollection of all script tags, document.lastModified – returns date of
last modification to document, document.title – sets or returns title of
document
h. DOM tree methods – document.getElementById(‘x’) – first element with
specific ID, document.getElementsByTagName(‘x’) – nodelist of all elements
with that tag name, document.open() – opens an Output stream to collect
output from document.write(), document.write() – writes JavaScript code to
the document, document.close() – closes output stream
i. <script type=”text/javascript”> </script>
9. HTML5 browser support
a. Older versions may not support certain features
b. Support tables show which features supported by which browsers –
caniuse.com
c. Can use JS to check if html5 is supported too – create DOM object
document.createElement(“htmlele”) – creates element irrespective of
whether browser supports it – check dom object for known propery or
method – browser only displays supported element
 d. Browsers usually then use default way to show element as text field
e. Eg. Var datepicker = document.createElement(“input”);
datepicker.setattribute(“type”,”date”); formelement.appendChild(datepicker);
if (datepicker.type ==”text”); alert(“not supported”);
f. You can have script tag in body tag
10. HTML5 tags and structural elements
a. <article>
b. <aside>
c. <audio> <source src=”.mp3/wav/ogg type=”audio/mpeg/wav/ogg”> text
</audio>
d. <canvas> text </canvas> <script> var canvas =
document.getElementsByTagName(“canvas”)[0]; var context =
canvas.getContext(“2d”); context.fillRect(0,0,100,100); </script>
e. <datalist>
f. <details>
g. <embed type=”text/html src=”anotherpage.html”>
h. <figcaption>
i. <figure>
j. <footer>
k. <header>
l. <keygen>
m. <mark>
n. <meter>
o. <nav>
p. <output>
q. <progress>
r. <section>
s. <source>
t. <summary>
u. <time>
v. <video> <source src=”.mp4” type=”video/mp4”> <track
src=”englishsubtitiles.vtt” kind=”subtitiles” srclang=”en” label=”English”>
</video>
w. <fieldset> groups for readability and ease of access with segmentation
putting elements in a box with <legend> as its title
i. Attributes are disabled – elements in, form-id of form to be
considered part of, name
11. Attributes for input tag <input>
a. Type=”color” – color name or code
b. Type=”date” – dialog varies
c. Type=”datetime-local” – dropdown
d. Type=”email” – feedback when email format missed
e. Type=”number> min max step size
f. Type=”range” min max – slider – to display value JS
g. Type=”search” – history
h. Type=”tel” – text entry – not numeric only like + or - : supply pattern matcher
pattern=”[0-9]{3}-[0-9]{3}-[0-9]{4}”
 i. Type=”URL” properly formatted url
j. Attribute list used with <datalist> for auto complete functionality <input
type=”text” list=”fruits”> <datalist id=”fruits”> <option
value=”apples”></option></datalist> - dropdown
k. Attribute placeholder=””
l. Attribute required
m. Validation fallback – if not supported – JS, Jquery
12. CSS
a.
Cascade Style Sheet
b.
Design layered over html
c.
How html elements are displayed
d.
Child elements can inherit parents style
e.
Data – html – style – css
f.
Style attribute in html tag, head section or separate document – preferably
separate – style sheets
g. Fonts, texts, colors, backgrounds, sizes, borders, spacing, positioning, visual
effects, tables, lists
h. Html-tag-name {Css-property-key: css-value;}
i. Tags can be any html tag, id reference with #id, class reference with .class
j. Base style – body – background-color, color, margin, padding, text-align, font-
size, font-family, text-decoration
k. Colors – rgb hex color:(185,28,28), size – pixels, em or %, text aligned -left
right center, floats -left or right, vertical alignment – top middle botton, font-
family – serif, sans-serif monospace or downloadable font
l. Layout
i. Fluid – height and width of elements is flexible based on size of
screen, browser, OS – ems or %
ii. Fixed – specify height and width in px, same regardless of screen size
m. Inline css – single html element - <p style=”color:x;”
n. Internal css – single page – increases load time - <style> body{color:red;}
</style>
o. External css – style entire website – can be linked from other pages add <link>
to <head> <link rel=”stylesheet” type=”text/css” href=”style.css”></head>
p. Can use combination of all 3 ways – highest priority overrides – inline higher –
internal – external lower
q. a:hover{}
13. CSS Frameworks
a. Framework provides foundation to build code
b. Provides tools to create a UI
c. Like navigation bars, forms, grids and responsive websites
d. Use from start of object – diff frameworks – diff options
e. 3 options
i. Vanilla css – full freedom but from scratch – time and effort
ii. Utility first framework – utility classes – scope to single purpose css
classes - simplifies references to css properties – freedom to style –
eg. Text-align:center in css becomes text-center added to class in html
 element – consistency with color, spacing, typography and shadows –
download size of markup increases and slows it down – Tailwind CSS
1. A:hover{color:red; text-decoration:underline;} becomes <a
href=”” class=”hover:underline text-red-500”>link</a>
iii. Component framework – prestyled components and templates to add
to websites – little knowledge – limits freedom – reduces dev time –
and maintain uniform style – limits to framework provides – overhead
code from unused components eg. Bootstrap – responsive with
feature packed front end toolkit
1. A:hover{color:red; text-decoration:underline;} becomes <a
href=”” class=”link-danger”>link</a>
2. Templates for entire websites or simple sign in page
3. Provides individual html components
14. JavaScript
a. Scripting language delivered from ECMAScript standard originally for
Netscape navigator
b. Loosely typed – values can be assigned and datatype works according
c. Javascript interpreted embedded – dynamic behavior, javascript code acts on
DOM object model generated by browser
d. Core feature of JS– asynchronous Javascript and XML – AJAX – Json now used
instead of XML
e. Javascript primitives – values and have no properties or methods
i. number – integers(decimal,octal,hex) and floats(default), nan, inf,
ii. string – “” or ‘’
iii. boolean – True or False
iv. null - null
v. undefined – datatype not assigned or var doesn’t exist
vi. each primitive has associated wrapper object – Number, String,
Boolean – allows objects to be created of that type and store primitive
value with methods to process it – typecasting allowed – methods –
valueOf and toString
vii. typeof – datatype of operand – string x = “”, String x = new
String(“abc”), x.valueOf is “”
f. Array Objects – accessible by index keys – 0 starts – grow or shrink
dynamically – length property holds no.
i. Declare using constructor – x = new array(1,2,3); x.length
ii. Array literals – x = [1,2,3];
g. Date Objects – hold date and time
i. YYYY-MM-DD 00:00:00 UT
ii. Var today = new Date(); local date and time
iii. When displayed – automatically displayed with toString
iv. Date constructors – new Date(2023-1-17 13:12:10”); or new
Date(2023,0,17) – month is 0 based with 00:00:00
h. Error Object
i. Instances when exception is thrown
ii. 2 properties
1. Message – description
 2. Name – type of error – TypeError, RangeError, URIError –
generic and 6 other types – EvalError ReferenceError,
SyntaxError
iii. Custom errors – throw new Error(“wrong”);
15. JavaScript variables
a. Containers for storing data values – used and modified
b. Declared with var keyword
c. Var age; or var age =54;
d. Var not assigned – undefined – cannot assign zero or empty string because
var
e. Letter _ $ start ; then no.s ; case sensitive
f. Functions local scope, outside function global scope, without var global scope
16. JS Control Statements
a. If(){} else if(){} else() {}
b. Indents not needed like python
c. No block statement scope – vars declared in if condition can be used outside
its scope
d. Switch case
i. Switch (expr){ case label1://break; case label2://break;
default://break;} – expr can be no. or string – if label is string then “”
e. For loop - for (init; condition; increment) {}
f. While loop - while (condition) {}
17. Javascript functions and prototypes
a. Block of code that can be called from anypoint in script after being declared
b. Parts of function:
i. Keyword function
ii. Name
iii. Parenthesis with optional parameters
iv. Curly braces with logic
v. Return statement – optional
c. Function add(n,m){return n+m;} no need for datatype since num or concat
strings – will return appropriate
d. Function Car(make,model,year){ this.make=make; this.model=model;
this.year=year; this.getName = function {return this.make + ‘ ‘ +
this.model…}}; var c = new Car(“x”,”y”,z); alert(c.getName());
e. Keyword this – current instance of car object – differentiate between local
and global this.model – global, model – instance passed
f. Prototypes – define properties and methods for all instances of object
i. Exists for all javascript object that can be constructed with new
keyword
ii. Object inherits all properties and methods from prototype
iii. Prototype properties and methods can be changed in one call
iv. Adding new properties or methods to objects requires modifying
objects code – this.color=color and add parameter to function cannot
do Car.color=”Red” but with prototype – Car.prototype.color=”Red”
v. Changes made to prototype – all objects updated
 vi. Self-executing or auto-invocation functions – run as soon as declared –
isolated from script – can be anonymous – or unnamed – eg. (function
() {. }) (); - can be used to initialize data or declare DOM elements
g. Javascript APIs
i. Document, element and window apis
ii. Retrieving a node reference –
1. document.getElementById(“id”)
2. document.getElementsByTagName(“name”) – NodeList – array
of elements
iii. add new nodes
1. document.createElement(tagname)
2. insertBefore, appendChild or replaceChild to place it
iv. modifying element content
1. element.innerHTML – retrieve or set content within HTML
element – returns all child elements as string – allowed
content – change content of html texts
v. modifying inline style
1. element.style – retrieves or sets inline css for element –
overrides css stylesheet
2. element.style.propertyName = value; eg.
Div1.style.color=”red”;
3. element.setAttribute(‘style’,….) wipes out all previous set eg.
setAttribute(“Src”,”another.gif”);
4. element.removeAttribute(attrName)
5. element.getAttribute(attrName) – get value if exists
vi. window object methoda and events
1. window.open(url, name, [features, replace]) – new window
object for browser – features like size and placement, name
value pair comma separated list, replace – optional Boolean –
replace history
2. window.onload() – start a function after page is loaded –
current window - <script> onload = (function(){call()})();
3. window.dump(“message”) – writes a string into console for
web browser
4. window.scrollTo(x,y) – scroll to coordinates on page
h. XMLHttpRequest - AJAX
i. Client-side JS
i. Accompanies html document or embedded in it
ii. Runs on client device
iii. <script> //code </script> or <script src=”/./script.js”></script>
iv. When js is disabled or not supported – use alternate path in
<noscript> code </noscript>
v. Calling function when event occurs – event binding
vi. Onload, onclick, onmouseover, onfocus, onkeyup, onsubmit, onselect
vii. Eventhandler – what to do when button clicked
viii. <button onclick=”show()”> show <script> function show(){}
</script></button>
 j. Explore - Linters like XO – TypeScript –
k. Avoid global variables
18. Document Object Model – DOM – browser based Programming interface between
HTML and JS – to dynamically update elements
a. Window top of DOM hierarchy – controls environment of document –
window object automatically created – can be accessed from JS – client side
JS – window object is global
i. History object – recent history of pages, back or forward in browser
ii. Location object – url of page info
iii. Navigator object
iv. Screen object – determining screen info like size of browser window
v. Document object – html elements
vi. Window.alert(“x”), window.confirm(“x”), window.prompt(“x”,”rep”) –
but you can avoid window prefix
b. Html Document object diagram – element and text nodes – all html tags are
element nodes – document as root – then doctype html etc. hierarchy

Course 3 – Git and GitHub

1. Distributed versioning Systems for collaborative coding. Helps track changes and
versions and collaboration.
2. GitHub is git based hosted version control platform. Version control system allows
you to keep track of changes to documents – ease to roll back
3. Git – free and open source software – new general purpose license – distributed
version control system – accessible anywhere in the world
4. Can version control images, documents, etc. not just code
5. Git can be used without internet using terminal but github, bitbucket, beanstalk are
ways to access
6. Terms:
a. SSH protocol – secure remote login from one computer to another
b. Repository – folders where your project are set up for version control
c. Fork – copy of repository
d. Pull request – process used to request that someone reviews and approves
your changes before they become final
e. Working directory – files and subdirectory on your computer associated with
git repository
7. Basic Git commands
a. New repository – either create locally and push to github or git init – clone a
existing one
b. Git add – move changes from working directory to staging area
c. Git status – state of working directory and staged snapshot of changes
d. Git commit – takes staged snapshot of changes and commits them to project
e. Git reset/revert – undoes changes made to files in working directory
f. Git log – enabled to browse prev changes to project
g. Git branch – isolated environment within repository to make changes
h. Git checkout – see and change existing branches – switch to branch
i. Git merge – put everything back together again
8. Try.github.io – cheat sheet
9. Git repository model – linus Torvalds for distribution of linux kernels
10. Centralized administration
11. Main branch should always correspond to deployable code – updates can be made
on other branches and then released
12. Github is an online hosting service for git repositories – hosted by subsidiary of
Microsoft
13. Repository – data structure for storing documents including source code and helps
tracks changes for version control
14. Gitlab – devops platform
15. Support non linear workflows
16. Github repositories using web UI
a. Github.com – username – email – password – signup
b. Verify human – join free plan – free personal acc
c. Verify email – create organization, repository – start learning
d. Organization – collection of user accounts that own repositories
e. Click + or create repository – name – description – license to use code –
public or private, init readme
f. Code tab – all source files
g. Issues tab – all open items
h. Pull requests – collaborating - define changes committed and ready for review
before merging to main branch
i. Projects – tools for managing sorting and planning projects – collaborative
j. Wiki, security and insights – communication to external users
k. Settings – personalization – control access – rename repository etc.
l. Edit readme.md – commit – message and description – saves changes to
repository
m. Click add file – create new file – file name – eg .py – add code – commit
n. Add file – upload files – commit
17. Github branches
a. All files in github are stored in branches
b. Master branch stores all the deployable code – created by default
c. Any branch can be maid main, finished deployable
d. New branch is an exact copy of original branch
e. Click dropdown – branch: master – add new branch name – text – create
branch
f. Common base – branched for new features – both undergoing changes –
ready to merge – each code master and feature tip – combined in third new
branch – new merge commit
g. Save changes are commits – stable platform for features developed
h. Commit changes box – describe changes
i. Commit directly to current branch or create new
j. Don’t end commit messages with periods
k. Pull request – initiate merges of branches in a way to capture changes –
makes It available for others to use – can follow cany commits even if code is
unfinished – if you make a change on a branch you don’t own – github
 automatically makes a pull request – can target specific users – log files
immutable so can always find approver of merge
l. Pull request – new – select branch from compare box – scroll to view changes
– confirm what they are – add title and desc – create
m. Merging into master branch – only deployable code
n. Developers can change source files in branch but not released until they are
committed – pull request – reviewed and approved – merge to master code –
then release
o. Merge pull request – confirm merge and when branch merge usually then
obsolete and should be deleted
18. Cloning and forking github projects
a. Cloning creates copy of repository on local machine – cloned copies can sync
between locations
b. Forking modifies or extends a project
c. Git clone – url of repository in designated folder – to sync code back – git add
<files> - moves to staging area – formatted and reviewed before commit – git
commit -m message – then git push to commit changes to repository
d. Remote repository – stored elsewhere – push pull and fetch to share work git
push – transfer changes – git fetch – from remote to local – doesn’t merge to
branch can be merged – git pull – fetch + merge
e. Origin – refers to your fork; upstream – original work
f. Forking takes a copy of repo to use as base
g. Can be used to submit back changes – independently make changes – submit
pull request – then they can accept – keep a copy of license file
h. To keep fork in sync with original from local clone
i. Create local clone – open terminal – change to directory of clone – git remote
-v gives remote repo – git remote add upstream <clone directory paste> -
type git remote -v
j. Git fetch upstream – grab upstream branches
k. Git merge upstream/master – merge it to master
l. Git pull upstream – fetch and merge to master
19. Managing github projects
a. Version control and project management – github
b. Developer, integrator, repository administrator
c. Developer communicates with others using git clone, pull, fetch, push,
request-pull
d. Integrator – receives changes, reviews and responds to pull requests,
publishes results for others to use – git pull, revert, push (local to remote)
e. Github repository administrator – structures repo organization and how users
interact – manages communities, asset types, relationships, categories and
attributes – sets and maintains access of developers – configure servers –
define email and index settings – manage look and feel of app – github
actions to automate workflows like CI/CD
Course 4 – REACT

1. Framework for building dynamic client-side web apps by facebook

2. JS library for building user UI
3. JSX language used
4. Front end frameworks
a. Framework for dynamic client side to connect to server
b. Open source libraries
c. Angular, vue and react are the frameworks used
d. Angular – open source framework from google – based on html and JS,
directives to make HTML dynamic by including library in head - <Script
src=””></script> <body ng-app> Company Name: <input type=”text” ng-
model=”com_name”> <label ng-bind=”comp_name”></label>
e. Vue – open source frontend framework – virtual dom – lightweight and fast –
include in head
f. React – dynamic client side web apps – dynamic data binding and virtual
DOM – extend html and eliminate code that makes UI synchronized with app
state – react app is a tree of components extending DOM
g. DOM – document -> html-> body -> element -> text or element -> document
is rendered as a page – some elements will be react component
h. Javascript XML – JSX
i. Compiled and interpreted as JS by Babel – special in memory tool, JSX is
embedded in special script tags where tags have attributes –
j. React package – components, their states and properties
k. React dom package – glue between react and dom
l. Babel – compile and interpret JSX – most modern browsers – 3 packages to
include in <script>
m. Facebook has react app utlity – npx create-react-app todoapp – directory
structure with required files is created – src folder – app.js – root react
component and index.js – add app to html – go to app directory – npm start
port 3000 mostly – then you can see app
5. Component driven design and architecture
6. Faster and more efficient than angular – more useful error messages – extensive
documents – react native can make it cross platform
7. ES6
a. EcmaScript 6
b. Ecma is a standards org that creates tech standards – JS adheres to these ES6
c. ES.next – forthcoming version
d. JS ES6 – let const in addition to var, let adds local scope {}, const allows
declaring constant, arrow function helps declare functions like variables and
shorter way to work – can have let or const, parameters () can be ignored, {} if
returns something else {} not required except more than 1 line, promise
object – represents eventual completion on asynch operation and return
value – invoke asynch operation – pending state – if completed – fulfilled else
rejected – promise takes a function in its body and 2 parameters – resolve,
reject – resolve says what should happen when fulfilled, reject says what
happens if failed can be created with function as let myPromise = new
 Promise((resolve,reject)=> {functionname(()=>{},)}) OR let promisearg =
(resolve,reject) => { funcname(()=>{},)}; let mypromise = new
Promise(promisearg)
e. Class makes OOPS feasible – classes are built on prototypes – based on
function prototype – class can have constructor – object created using new
keyword
f. Inheritance allowed – subclass inherits all attributes and methods of subclass.
Subclass has super() – call superclass constructor
8. TypeScript
a. Superset of JS
b. React allows you to use JS to TS – TS compiled language that supports type-
checking and is statically typed, variables are static – var type defined cant be
changed, JSX allows to type HTML like code in JS – JSX requires compiler to
translate JSX into JS – Babel is popular – TS supports embedding – embed
HTML directly into TS and compiler translates HTML and TS into JS at compile
time like babel does. Babel doesn’t support type checking, TS compiler
compiles entire project simultaneously rather one file at a time – type errors
are caught in multiple files at once rather than one file
9. JSX
a. Javascript syntax extension or javascript XML
b. Extension to JS
c. Easy way to create ui components in react
d. Produces react elements
e. Like html or xml syntax in react that extends ES6
f. Allows cml or html like text to co exist with JS or react code
g. ES6 syntax to be used by preprocessors like transpilers or compilers – to
transform html like text found in JS files into standard JS objects – objects
then parsed by JS engine
h. Eg. Const el1 = <h1> This is a sample JSX code snipper </h1>
i. Elements are rendered to react DOM
j. JSX is a declarative language combine JS and HTML
k. JSX need babel for browsers to understand code
l. Faster than normal JS – optimization while translating
m. Output santization
n. React code example
i. Import React from ‘react’
ii. Function App(){
iii. Return ( <div> <p> This is a sample list</p> <ul><li>List item no,1 </li>
<li> List item no.2 </li> </ul> </div> );}
10. Components
a. Core building block
b. Every app in react I smade of components
c. Break down ui in components and merge to parent component for ui
d. Break into elements, be reused and handled independently
e. Takes optional input – returns react object – rendered on screen
f. Small chunk of user ui
g. Render ui and update when internal state modified
h. Manages events belonging to its ui
i. State – how component behaves and rendered currently
j. Stateful – update as current state – class type
k. Stateless – function type
l. Working of component:
i. Properties – properties enable to pass data from parent to child
component
ii. Events – enable component to manage dom model events and user
interaction
iii. States – enable component to stay stateful
m. Types of react components
i. Functional react component – created by writing JS function, may or
may not receive data as parameters, take in props and return JSX,
don’t natively have states or lifecycle methods but can be added by
implementing Hooks, used to display info easy to read debug and test,
stateless
ii. Class react components – more complex, pass data from one class
component to other class component, creates using ES6 classes, more
frequently used as they have added functions, use main react funcs
like state, props, and lifecycle methods – have a state and can be re
rendered.
iii. Pure react component – better than functional – used to provide
optimisations – fastest to write – do not depend on or modify state of
variables outside scope – can replace simple functional components
iv. Higher order components – advanced technique to use reusing
component logic – not available in api – pattern that emerged from
react’s compositional nature – function that returns components used
to share logic with other components.
n. Props and event handling
i. Tree of components – root component continer to which all added
ii. All component names must start with uppercase char
iii. Class – React.Component class is extended and need to override
render method
iv. className attribute to apply CSS
v. <div className=”App”>
vi. Functional components – useful when component has properties but
lifecycle of component doesn’t have to be managed – user defined
props or properties are passed as parameters to function – cannot
have uppercase characters – function App(props){const compstyle =
{color: props.color, fontSize: props.size+”px”}; <span
style={compstyle}>sentence</span>
vii. <App color=”blue” size=”25”>
viii. Event handlers can be set through props
ix. onClick handler is most used
x. clickEvent={()=>alert(“clicked”)} – in render function App property //
<button onClick={props.clickEvent}>Click</button> - in function App
 xi. class components are preferred more – can have states and props –
lifecycle manages and maintained
xii. import React from ‘react’;
xiii. class App extends React.Component{ constructor(props)
{super(props)}
xiv. state = {counter: “0”};
xv. function to increment counter with statement this.setState({counter:
+1})
xvi. render(){return }}
xvii. export default App
xviii. props are set from outside class, state is internal to class
xix. for state change, class component re renders
o. States
i. Plain JS object to Allow to change data in application
ii. Object that Include key value pair to track data in app
iii. components have built in state object to store property values and
when value changes – component re rendered
iv. types of state
1. shared – multiple components – list of all orders in order
2. local – lives in single component – hiding and showing info
v. state is a plain JS object to represent info about a components current
situation
vi. helps create dynamic components
vii. state is an instance of React Component Class – object with properties
that control behavior of component
viii. managed and preserved in react component
ix. object holds some info that may change over its lifetime
x. state is required if component will change during user interaction –
state tracks change in component
xi. functional components can implement state using useState hook
xii. can modify state with setState method
p. props
i. properties -pass data between react components
ii. unidirectional – parent to child component
iii. read only components
iv. store value of attributes of a tag like html
v. function arguments that can be passed to component
vi. immutable and cannot be modified from inside component
vii. should not be changed in child component
viii. allows child components to access methods defined in parent
component
ix. state is defined in parent component and stay stateless
q. passing data and states between components
i. component lifecycle phases – each phase has different methods
mounting – component creation, updating – component change or re
rendering, unmounting – component removal
 ii. mounting – constructor() -> may call super constructor with props
object -> getDerivedStateFromProps() -> render() ->
componentDidMount()
iii. updating – get/setDerivedStateFromProps() ->
shouldComponentUpdate() -> render() -> getSnapshotBeforeUpdate()
-> componentDidUpdate() – side effects
iv. unmount – componentWillUnmount() – before removal
v. pass data from parent to child using props, child to parent using
callbacks and between siblings using Redux
vi. component phases:
1. initialization – component constructed with props and default
state
2. mounting – jsx rendered – mounted on dom –
componentwillMount before render for first time and
componentDidMount – after render for first time
3. updating – state and props change due to events
4. unmounting – removed from dom
r. connecting react to external server
i. http: get, post, update, delete
ii. promise server call
s. testing react components
i. line by line review of how code will execute
ii. can be a suite of tests comprising bits of code to test components
iii. advantages- prevents unexpected regressions, modular construction
of application
iv. disadvantages – write more code and debug and maintain it
v. testing is to verify code and ensure it runs as needed and functionality
by replication actions, validate updates too – prevents regression –
reappearance of a prev fixed bug
vi. types
1. unit testing – render component trees in a simple test
environment and assert their output
2. end to end testing – run app in realistic browser – simulated –
multiple components
vii. phases – arrange – props prepared -> act – render dom and registers
user actions -> assert – verifying certain side effects – arrange act
assert unit testing
viii. libraries – mocha test runner, chai assertion library, sinon spies stubs
and mocks, enzyme render components
ix. jest combines mocha chai and sinon – react testing library – helps test
without implementation details
x. Jest can be combined with enzyme and react testing library, great
iteration speed, access dom via jsdom, mock modules and timers,
offers snapshot testing – dependency to react using npm
xi. React testing library – functions on top of react-dom and
react-dom/test-utils – querying dom, finding form elements, finding
 links and buttons, replacement for enzyme – find elements where text
is not accessible – encourages user-based testing
11. Hooks
a. Simpler way to encapsulate stateful behaviour and side effects in UI
b. 2019, React 16.8
c. Regular JS functions to use context or state – earlier only through classes
d. Functional components to attach local state and state is preserved when
component re renders
e. Usually classes are used to manage state and lifecycle methods in react but
issues like wrapper complexity, unmanageable size of components and
confusing classes – so hooks allow functions to behave like classes and use
state and lifecycle functions
f. Your own hooks can be created
g. Component written in hooks are more optimized are hooks can be custom
made as abstract so can be reused on various components
h. You can handle events and logics in functional components
i. 3 best practices for using hooks:
i. Hooks can only be called inside react function components
ii. Can only be called at top level of a component – not inside loops,
conditions or nested functions
iii. Hooks cannot be conditional
j. Hooks use node 6 js so npm 5.2 or above – npm is package manager for node
js platform and react apps
k. Standard hooks:
i. useState – allows to use state
ii. useEffect – manages side effects such as document changes, HTTP and
so on. – eg. If you need to fetch data/accessing anything out of scope
from react framework – Api calls and localStorage of Web browser.
iii. useContext – manages context changes and provides component with
access to context – global sort of inheritance solution to state. Used
with useState and createContext
iv. useReducer – manages Redux state changes – light form of redux,
provides dispatch function and state while taking reducer and initial
state
l. custom hooks:
i. add special, unique functionality to react apps
ii. custom hooks are name with use as prefix and custom hook could be
useLocalStorage or useAuthentication
iii. new composition of one or multiple hooks – hooks can be treated as
functions they have same features as them – they are reusable, can be
broken into smaller hooks than can be combined and are testable.
m. useState – returns a pair where first element is current state value or initial
and second is a function which allows to update it – after that this function is
called from an event handler or somewhere else
12. implementing forms
a. interact with webpage
b. single page apps – spas – new data displayed dynamically
 c. handled using contents – from login to checkout
d. data is stored in component state not stored in server or posted – client side
caught info – data is sent to the server using added js code
e. control changes and update state variable using event handlers
f. html form elements – input, textarea, select – maintain own state and update
based on user input
g. in react – state is kept in state property of components and updated with
setState
h. formvalidation – get form values, manage form state and update it, validate it
on the fly to check correctness and showing error messages
i. types of inputs
i. uncontrolled input – react puts data on page and allows browser to
handle most form elements and access value through react’s change
events – manage their own value in inputs DOM node – browser
handles form elements – elements will be updated when input value
changes – ref function is used to get form values from DOM – no need
for event handler
ii. controlled input – explicitly contain value that input displays, respond
to key presses, pass back to input and store it – more control over
input value – create state to hold update and display value, need to be
explicitly made in component – functions govern passing of fata,
better control of form elements and data – props take current value
and notify changes – parent component controls changes during
callback and handles props to handle state further.
j. React hook form is useful package for creating web forms – form state
management and validation library for react web based and mobile apps –
reduces code and eliminates unnecessary re renders – doesn’t use state –
uses ref to control form inputs – install react hook form command – tiny
package with 0 dependencies – intuitive API using constraint based validation
– follows html standards for validating – offers painless integration with ui
libraries – most libraries support ref attribute and components mount to page
faster than controlled components because they have less overhead.
13. Redux
a. State management library to handle app state – global object to use info for
various reasons during app lifecycle
b. Flux architecture – shared info is not stored in components but objects –
many state changes in one place – redux store or single source of truth
c. State is handled globally and allows to change state from anywhere in app
instead of creating new objects everyt ime state is changed
d. Redux library can be used in any other js library or framework or even vanilla
js
e. Components use same data but placed differently on DOM tree
f. Centralized state management system – maintain one app state passed down
to all components – reduces complexity of code
g. Refreshes parts of page instead of reloading whole page
h. Enhances state prediction factor, maintenance, testing and debugging due to
reducers – server side rendering – enables sharing of data without providing
state or method
i. In spas, desktop apps via electron and react native apps
j. Caching page state
k. Basic principles of redux
i. CENTRALISED STATE MANAGEMENT SYSTEM MANAGED BY SINGLE
STORE
ii. COMPONENTS PROPERTIES ARE IMMUTABLE
l. Elements:
i. Actions – events fired by selecting a radio button, selecting checkbox,
click button, JSON object that contains info about changes need to be
made to state – produced by functions called action creators, contains
type of action, time of occurrence and which state it aims to change –
payloads that send data form app to store – JS object that describe
what happened – described by type field that is a constant –
dispatched by various parts of app – 2 props – type and payload (opt
data to perform task)
ii. Store – current redux app state – it is an object that contains state
functions and other objects – can dispatch and receive actions but
cannot perform updates – provides subscriptions to store updates –
holds entire app list in form of state tree – add any values – nest them
iii. Reducers – actions that return new state – dispatched action from
store – received by reducers and make changes to state – a pure
function that received current state and action – acts as event listener,
reads action payload and updates store – takes 2 parameters –
previous app state and action being dispatched – returns new app
state
m. Async with redux
i. Sync code – runs in orderly sequence from top to bottom – each op
waits for prev to complete
ii. Async – runs in parallel – op can occur when another is processed –
preferable when execution can be blocked indefinitely – eg.
Networking requests, long running calcs, file system ops – page
remains responsive – JS is single threaded async non-blocking
concurrent programming language – does not wait for response when
executing function – continues execution of other functions
iii. Redux manages the state – architecture based on synchronous for
state management
iv. To change from sync to async – actions and reducers are not enough –
need middleware – middleware intercepts or delays actions
v. Middleware techniques
1. Thunk – pass functions in action creators to create async redux
– allows writing action creators that return a function instead
of an action – allows delaying dispatch of action – allows
dispatching action if condition is met – passes dispatch() and
getState() as parameters to functions – action creator is called
 a thunk – suitable for simple apps – cannot act in response to
action – difficult to handle concurrency – not easy to test –
does not scale well – communicate with actions before it
reaches reducer – actions wait for response from server
2. Saga – es6 feature called generators for async ops – read write
and test async flows – exposes set of helper functions or sagas
to create declarative JS objects – middleware handles ojects in
backend – allows expressing complex logic as pure functions
and easy to test – can be time traveled and flow logging – scale
with sideeffects – try catch blocks – well documented – not
suitable for simple apps – more boilerplate code – need to
have knowledge of generators
3. Promise based
4. Async await
14. Binding redux and flow
a. State stores property of components – state. Changes – DOM re rendered –
open source JS library – single store and reducers – reducers split into smaller
reducers to handle different components in tree
b. Data flow is unidirectional – begins at component level at ui interaction
leading to action creator – dispatched in action – passed to root reducer and
then other reducers – switch statement to filter actions – handles action and
returns new state – passed to store – updates ui and re renders

Course 5 – Node.js and Express

1. Server side web framework

2. Node.js – runtime environment and server side JS apps
3. Express is a server side JS web framework that runs on top of node.js
4. Node package manager manages code dependencies
5. Back end development
a. Runs on server
b. Client machine runs web browser and its engine, this engine communicates
with the back end
c. Website performs correctly – code that communicates with server and
browser engine
d. Server side logic for databases, servers and applications
e. Includes servers, databases, APIs, languages, frameworks and runtimes
f. Servers can be hardware software or both to communicate and function for
clients – they can also communicate with and provide functionality to each
other.
g. Types of servers
i. Database servers – machine and application that houses, retrieve and
delivers data
ii. Application servers – host and deliver application through HTTP and
sit between database and web server – transform data into dynamic
content and run business logic – data storage and transfer rules
 iii. Web servers – client requests are responded to using HTTP, part of
software running on web server – helps control access of files on web
server
h. Servers must communicate with each other as well as backend
i. Web API – 2 softwares communicate with each other – web services are a
type of web API that communicate using HTTP requests – web service is a
programming interface that sends and receives requests using HTTP among
web servers and client
j. Back end languages – JS, PHP, python, Java, C#, ruby
k. Frameworks provide structure for code, generates code that cannot be
altered to perform common tasks – Django, Ruby on Rails, express JS
l. Express.JS – runs on top of node.js and handles http requests made to web
server
m. Runtime environments – mini OS that provides resources for an app to run –
infrastructure that supports execution of codebase – hardware and software
environment in which app is executed – node.js is a back end runtime
environment
n. Node.js
i. Runs on googles chrome open source V8 engine that runs browser on
front end
ii. Same for opera and edge and firefox
iii. Executes JS – has packages to create a server, express framework
makes it simple to create APIs and endpoints – API endpoint is a
specific point of entry for a request from client to server.
iv. Single threaded, asynchronous and non blocking – while a process is
being executed, program doesn’t wait for result
v. Event driven – any IO operation, reading from network or accessing a
database or file system – event is triggered – instead of blocking
thread and wasting processor time waiting, node.js resumes
operations when response comes back or response event occurs,
during that time server is not blocked and can do other things which
makes it look multithreaded.
o. Scalability – responsibility of backed affected by load of app – no. Of
concurrent users, transactions and data transferred between web and server
back and forth – scalability is ability to handle changes in load without
affecting performance
p. Other responsibilities are security, authentication and malware prevention +
performance – delivers content and provides business logic
6. Processes in a server can be single threaded or multithreaded – one command is
processed at a time VS multiple commands processed simultaneously.
7. JSON payload – JavaScript object notation – key value pairs – payload is data
transmitted between client and server
8. Node.js
a. Open source language that runs on V8 – can run on windows Linux and
macOS’s
b. Node apps process and route web service requests in the client
 c. User selects option in UI (html/css) – triggers JS code business logic for client
side – json web service call payload sent via http to node server – REST
service receives http request – REST web service processes request and
returns payload over HTTP
9. Express.JS
a. Framework for building apps on node.js
b. Abstracts lower level APIs in nodejs by using http utility methods and
middleware
c. Simplifies application development on node.js
d. Const app = express();
e. Const express = require(‘express’);
10. Public folder – public assets like html css js,
11. Templates/views – server rendered html that is sent back to client in response to
requests
12. Server.js – a file that contains main application code
13. Package.json – contains metadata information about project including dependencies,
scripts and so on.
14. Routes – endpoints that accept and process client requests
15. Import and require
a. Modules – files contained related encapsulated JS code/functions serving a
single purpose – can be a single file or a folder containing files – makes code
reusable and breaks down complex code into manageable chunks
b. When external app needs to use code in a module – module needs to be
called using import or require statement
c. Package and specification – a package is a directory with one or more
modules – module specifications – conventions and standards used to create
packages – commonJS and ES modules – nodejs treats JS code as common JS
code, ES modules can be enabled by changing file extension from .js to .mjs
d. Common JS modules use require() statement to import VS ES use import();
common js use module.exports whereas ES uses export – import modules or
packages
e. Require() VS import()
i. Require() can be called anywhere in the file, import() can only be
called at the beginning of the file
ii. Require() can be called within conditional statements and function but
import() cannot
iii. Require() is bound dynamically – binding errors are not identified until
runtime whereas import() is static and binding errors are identified at
compiled time.
iv. Modules imported with require() are synchronous- loaded and
processed processed linearly whereas import() modules are
asynchronous- loaded and processed simultaneously.
v. Import() is thus faster and preferred especially for large scale
applications which involve loading 100s of modules.
vi. Sample code:
1. Module.exports = ‘Hello Programmers’;
2. Let msg = require(‘./message.js’); console.log(msg);
 3. Const a = 1; export { a as “myvalue” };
4. Import { myvalue } from “module.mjs”;
16. Application server is replaced with node.js server and instead of enterprise Java
applications we have node.js JS applications hosted on the node.js server – runs on
server not on web browser
17. Node.js focussed on concurrent programming with a lightweight language and
handles IO operations through events. Callback functions are written to handle
events when they’re completed.
18. Every JS file is a module in node.js – a module is basically a script file and a package is
a collection of these modules or script files.
19. Simple HTTP web server using http module in node.js
a. Let server = http.createServer(function(request,response){ - create instance
of web server – optional function as parameter
b. Let body = “He’ll world”;
c. Response.writeHead(200,{
d. ‘Content-Length’: body.length, ‘Contrnt-type’:’text/plain’});
e. Response.end(body);});
f. Server.listen(8080);
20. Package.json – module manifest – describes details about nodejs module – if a
module doesn’t have a package.json file – nodejs assumes that the main class is
named index.js
21. The require statement assumes scripts have a file extension of .js – creates an object
for the imported module – first looks for a script – if not – assumes it’s a directory
name and then looks in that directory – looks for a index.js in a directory – index.js is
the default script name
22. Each nodejs module has an implicit exports object, to make a function or value
available to nodejs apps that import your module – we add exports property eg.
Exports.dayOfWeek = function () { return days[date.getDay() -1]; };
23. Accessing export properties – js object instance of the module – retrieve property
from this variable eg. Let today = require (); today.dayOfWeek() – imports that
property
24. Libraries are same thing as modules in node.js – libraries contain code that is
developed and reused throughout an app – 3 types of modules: core, local and third
party.
25.