Javascript, API, and Server Side - Learn my secrets...
Transcript of Javascript, API, and Server Side - Learn my secrets...
![Page 1: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/1.jpg)
Javascript, API, and Server
Side - Learn my secrets of
success
![Page 3: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/3.jpg)
JAVASCRIPT
About me• Microsoft MVP
• Asp.NET Insider
• Web API Advisor
• Lynda.com Author (LinkedIn Learning)
• Founder – MVPMIX.com
• CTO – Cazton.com
• Principal – Chander Dhall, Inc.
![Page 4: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/4.jpg)
JAVASCRIPT
Questions
• Do you really need a Single Page App?
• Which is the best framework for your
company?
• What’s a futuristic strategy for Javascript?
• How does my company qualify for FREE one-
hour consulting?
![Page 5: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/5.jpg)
BACKEND
![Page 6: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/6.jpg)
JAVASCRIPT
Why?
• Amazon claim – Just an extra 1/10th of
a second on their response times will
cost them 1% in sales.
• Google – ½ a second increase in
latency caused traffic to drop by a
fifth.
![Page 7: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/7.jpg)
JAVASCRIPT
Step 1 Appserver & DBServer
Database ServerApp Server
![Page 8: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/8.jpg)
JAVASCRIPT
Awesome Solution?
Load BalancerLoad
Balancer
DB
DB
DB
DB Cluster
Has
h Ma
p
DB
DB
DB
DB Cluster
Load BalancerLoad
Balancer
DB
DB
DB
DB Cluster
Has
h Ma
p
DB
DB
DB
DB Cluster
Set 1-10 Million Users Set 11-20 Million Users
Global Redirector
Global
Look up Hash
Map
![Page 9: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/9.jpg)
JAVASCRIPT
May be close to an awesome solution?Load
BalancerLoad
Balancer
DB
DB
DB
DB Cluster
Hash
Map
DB
DB
DB
DB Cluster
Master
Slave Slave
SANNo Sql
Master
Slave Slave
Search Db
CachingOffline
Processing
![Page 10: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/10.jpg)
JAVASCRIPT
Agenda
• Why is it important to scale?
• Creating a scalable solution (in incremental steps)
– Propose an Architecture
– Identify Failures and Bottlenecks
– Identify Downtime
– Apply a better solution
– Repeat until we solve (in 10 steps)
– Then some bonus stuff (a better solution)
![Page 11: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/11.jpg)
JAVASCRIPT
Unfortunate Solution
Load Balancer
S SSSS Services
![Page 12: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/12.jpg)
JAVASCRIPT
Gilbert and Lynch white paper
A{
“name” : ”Chander”,
“gender” : ”m”
}
B{
“name” : ”Chander”,
“gender” : ”m”
}Write
Algorithm
Read
Algorithm
Network 2Network 1
![Page 13: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/13.jpg)
JAVASCRIPT
Happy path scenario
A{
“name” : ”Dhall”,
“gender” : ”m”
}
B
Write
Algorithm
Read
Algorithm
Network 2Network 1
{
“name” : ”Chander”,
“gender” : ”m”
}
Update
Message
![Page 14: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/14.jpg)
JAVASCRIPT
Happy path scenario
A{
“name” : ”Dhall”,
“gender” : ”m”
}
B
Write
Algorithm
Read
Algorithm
Network 2Network 1
{
“name” : ”Dhall”,
“gender” : ”m”
}
![Page 15: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/15.jpg)
JAVASCRIPT
Network partitions
A{
“name” : ”Dhall”,
“gender” : ”m”
}
B
Write
Algorithm
Read
Algorithm
Network 2Network 1
Update
Message
{
“name” : ”Chander”,
“gender” : ”m”
}
![Page 16: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/16.jpg)
JAVASCRIPT
CAP Theorem
Consistency Availability
Partitioning
![Page 17: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/17.jpg)
JAVASCRIPT
Brewer’s CAP Theorem
• Consistency (or more appropriately Atomic)
• Availability
• Partition Tolerance
– “No set of failures less than total network
failure is allowed to cause the system to
respond incorrectly” – Gilbert & Lynch
![Page 18: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/18.jpg)
JAVASCRIPT
Just FYI
• Consistency
(in CAP theorem)
• Atomicity
(in ACID)
• Consistency(in ACID)
● Means any transaction will bring the
database from one valid state to
another.
![Page 19: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/19.jpg)
JAVASCRIPT
Fallacies of Distributed Computing
• Network is reliable.
• Latency is zero.
• Bandwidth is infinite.
• Network is secure.
• Topology doesn’t change.
• There is one administrator.
![Page 20: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/20.jpg)
JAVASCRIPT
Fallacies of Distributed
Computing
• Transport cost is zero.
• Network is homogenous.
![Page 21: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/21.jpg)
JAVASCRIPT
The Variables• Scalability - Number of users / sessions /
transactions / operations the entire system can handle
• Performance – Optimal utilization of resources
• Responsiveness – Time taken per operation
• Availability – Probability of the application being
available at any given point in time
• Downtime Impact - The impact of a
downtime of a server/service/resource - number of
users, type of impact etc
![Page 22: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/22.jpg)
JAVASCRIPT
Major Factors• Platform selection
• Hardware
• Application Design
• Database/Datastore Structure and Architecture
• Caching strategy
• Asynchronous processing
• Deployment Process and Architecture
• Monitoring mechanisms
• … and more
![Page 23: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/23.jpg)
JAVASCRIPT
23
Step 1
Appserver &
DBServer
Database ServerApp Server
![Page 24: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/24.jpg)
JAVASCRIPT
Step 2 – Vertical Scaling Appserver &
DBServer
Database ServerApp Server
Throw more RAM and CPU ☺
![Page 25: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/25.jpg)
JAVASCRIPT
Step 3 – Vertical Partitioning (Services)
• Introduction– Deploying each service on a separate node
• Advantages– Increases Availability (per app)
– Easy to tune and optimize
– Reduces context switching
– Simple to implement
App Server
Db Server
![Page 26: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/26.jpg)
JAVASCRIPT
Step 4 – Horizontal ScalingLoad Balancer
DB Server
![Page 27: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/27.jpg)
JAVASCRIPT
Sticky Sessions
• Subsequent requests from a user are sent to the original server
• Asymmetrical load distribution
• Downtime Impact – Loss of session data
Load Balancer
User 1
![Page 28: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/28.jpg)
JAVASCRIPT
Central Session Store
• Session store is a single point of failure
• Session reads and writes generate Disk + Network I/O
Load Balancer
Session Store
A
p
p
S
E
R
V
E
R
![Page 29: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/29.jpg)
JAVASCRIPT
Clustered Session Management
–No Single point of failure
–Session reads are instantaneous
–Session writes generate Network I/O
–Increase in number of nodes
increases Network I/O exponentially
–What happens when?
• User request arrives before intra-node communication finished
• Intra-node communication fails
Clustered Session
ManagementLoad Balancer
![Page 30: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/30.jpg)
JAVASCRIPT
Load Balanced App Server Cluster
Active-Active assumes that each LB is independently able to take up the load of the other Load Balancer
Users
Load Balancer
![Page 31: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/31.jpg)
JAVASCRIPT
Step 5 – Vertical Partitioning (Hardware)
Load Balancer Load Balancer
DB Server SAN
![Page 32: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/32.jpg)
JAVASCRIPT
Step 5 – Vertical Partitioning (Hardware)• Advantages
▪ Allows “Scaling Up” the DB Server
▪ Boosts Performance of DB Server
• Disadvantages
▪ Increases Cost
![Page 33: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/33.jpg)
JAVASCRIPT
Step 6 – Horizontal Scaling (DB)
• Introduction▪ Increasing the number of DB nodes
▪ Referred to as “Scaling out” the DB Server
• Options
▪ Shared nothing Cluster
▪ Real Application Cluster (or Shared Storage Cluster)
![Page 34: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/34.jpg)
JAVASCRIPT
Step 6 – Horizontal Scaling (DB)
Load Balancer Load Balancer
DB Server SAN
![Page 35: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/35.jpg)
JAVASCRIPT
Step 6 – Horizontal Scaling (DB)Load Balancer Load Balancer
DB ServerSAN
DB Server DB Server
DB Replica
![Page 36: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/36.jpg)
JAVASCRIPT
Step 7 – Vertical / Horizontal Partitioning (DB)
• Introduction▪ Increasing the number of DB Clusters by dividing the data
• Options
▪ Vertical Partitioning - Dividing tables / columns
▪ Horizontal Partitioning - Dividing by rows (value)
![Page 37: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/37.jpg)
JAVASCRIPT
Step 7 – Vertical / Horizontal Partitioning (DB)
Load Balancer Load Balancer
DB ServerSAN
DB Server DB Server
DB Cluster
![Page 38: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/38.jpg)
JAVASCRIPT
Step 7 – Vertical / Horizontal Partitioning (DB)
App Cluster
Db Cluster 1 Db Cluster 2
Twitter Table
Facebook Table
Users Table
Products Table
Vertical Partitioning
![Page 39: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/39.jpg)
JAVASCRIPT
Step 7 – Vertical / Horizontal Partitioning (DB)
App Cluster
Db Cluster 1 Db Cluster 2
Twitter Table
Facebook Table
Twitter Table
Facebook Table
Horizontal Partitioning
1st Million Users 2nd Million Users
![Page 40: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/40.jpg)
JAVASCRIPT
Step 7 – Vertical / Horizontal Partitioning (DB)
Load Balancer Load Balancer
DB
DB Cluster
DB DB DB DB DB
DB Cluster
Hash
Map
SAN
![Page 41: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/41.jpg)
JAVASCRIPT
Step 8 – Separating Sets
Load Balancer Load Balancer
DB DB DB
DB Cluster
Hash
Map
DB DB DB
DB Cluster
Load Balancer Load Balancer
DB DB DB
DB Cluster
Hash
Map
DB DB DB
DB Cluster
Set 1-10 Million Users Set 11-20 Million Users
Global Redirector
Global
Look up
Hash Map
![Page 42: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/42.jpg)
JAVASCRIPT
Step 9 – Caching• Add caches within App Server
▪ Object Cache
▪ Session Cache
▪ API cache
▪ Page cache
• Software
▪ Memcached
▪ Redis
▪ Azure Cache (App Fabric)
![Page 43: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/43.jpg)
JAVASCRIPT
Step 10 – HTTP Accelerator• A good HTTP Accelerator / Reverse proxy performs the following –
▪ Redirect static content requests to a lighter HTTP server (lighttpd)
▪ Cache content based on rules
▪ Use Async Non blocking IO
▪ Maintain a limited pool of Keep-alive connections to the App Server
▪ Intelligent load balancing
• Solutions
▪ Nginx (HTTP / IMAP)
▪ Perlbal
▪ Hardware accelerators plus LBs
![Page 44: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/44.jpg)
JAVASCRIPT
More Important Stuff• CDNs
• IP Anycasting
• Async Nonblocking IO (for all Network Servers)
• If possible - Async Nonblocking IO for disk
• Incorporate multi-layer caching strategy where required
▪ L1 cache – in-process with App Server
▪ L2 cache – across network boundary
▪ L3 cache – on disk
• Grid computing
![Page 45: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/45.jpg)
JAVASCRIPT
NoSql Vs Relational
Depth of Functionality Sc
ala
bili
ty a
nd
Pe
rfo
rma
nc
e
![Page 46: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/46.jpg)
JAVASCRIPT
NoSql vs Relational
• No Joins
– Do you need them though?
• Transactions
– RDBMS great for concurrency, integrity or
data type validity.
![Page 47: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/47.jpg)
JAVASCRIPT
Relational -> NoSql
• Ever increasing users. Scalability needs.
• Highly structured data to structured, semi-
structured and unstructured data.
• Advent of high speed data networking.
• Distributed computing.
• Cheap and plenty memory.
![Page 48: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/48.jpg)
JAVASCRIPT
Relational -> NoSql
http://www.couchbase.com/why-nosql/nosql-database
![Page 49: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/49.jpg)
JAVASCRIPT
Scaling RDBMS
• RDBMS sharding
– Highly disruptive to re-shard.
– Lose benefits of relational model.
– Create and maintain schema on every
server.
![Page 50: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/50.jpg)
JAVASCRIPT
Scaling RDBMS
• Denormalizing
– Why use a RDBMS? ☺
![Page 51: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/51.jpg)
JAVASCRIPT
Relational -> NoSql
• Schemaless.
• Auto-sharding.
• Distributed querying.
• Integrated caching.
![Page 52: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/52.jpg)
JAVASCRIPT
No SQL Types• Key Value
• Ordered key value
• Wide Column Store
• Document Store/Full Text Search
• Graph DBs
• Object DBs
![Page 53: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/53.jpg)
JAVASCRIPT
Key-Value Store
• Pros
– Simple. Programmer friendly.
– Powerful. Fast.
• Cons
– Key range support not good.
– Aggregation support lacking.
Value Key
Value Key
Value Key
Value Key
Value Key
![Page 54: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/54.jpg)
JAVASCRIPT
Ordered Key-Value Store
• Pros
– Processes key ranges.
– More powerful.
• Cons
– No framework for value modeling.
Value Key
Value Key
Value Key
Value Key
Value Key
![Page 55: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/55.jpg)
JAVASCRIPT
Big Table
• Pros
– Model values as maps of maps
of maps.
• Cons
– Not appropriate for schemes
arbitrary complexity.
Value Key
Value Key
Value Key
Value Key
Value Key
![Page 56: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/56.jpg)
JAVASCRIPT
Big Table
• Pros
– Model values as maps of maps
of maps.
• Cons
– Not appropriate for schemes
arbitrary complexity.
![Page 57: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/57.jpg)
JAVASCRIPT
Big table
Key
Column
family
Key
Column
family
![Page 58: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/58.jpg)
JAVASCRIPT
Document/Full-Text
• Pros
– Collection of documents which contain key-
value collections.
– Natural data modeling.
– Programmer friendly.
– Web based. Mostly REST/Json friendly.
![Page 59: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/59.jpg)
JAVASCRIPT
Document/Full text search
databases
Key Val
Key Val
Key Val
“Person”: {
“name”: “Chander Dhall”,
“address”: {
“city”:”los angeles”,
“state”: “CA”,
“zip”: “90069”
}
}
![Page 60: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/60.jpg)
JAVASCRIPT
Graph databasesKey
Key
Key
Key
![Page 61: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/61.jpg)
JAVASCRIPT
Step 12- Finalizing
Load Balancer Load Balancer
DB DB DB
DB Cluster
Hash
Map
DB DB DB
DB Cluster
Master
Slave Slave
SANNo Sql
Master
Slave Slave
Search Db
CachingOffline
Processing
![Page 62: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/62.jpg)
JAVASCRIPT
NoSql Paradigm - Atomic Aggregates
Account
Id
Account No.
Checking
Id
Min bal
Savings
Id
Interest rate
Account
{
“Type”: “Checking”,
“Id”: “chk123”,
“Min Bal”:”10000”,
}
Account
{
“Type”: “Savings”,
“Id”: “sav123”,
“Interest Rate”:”5%”,
}
![Page 63: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/63.jpg)
JAVASCRIPT
No sql paradigm – Index tableEmploye
e Id
Details
1234 Email: [email protected]; State: CA; Dept: IT
8235 Email: [email protected]; State: TX; Dept: Sales
2234 Email: [email protected]; State: AL; Dept: IT
1671 Email: [email protected]; State: WA; Dept:
Sales
State Employee Id
CA 1234, 1235, 1236, 1244
TX 8000, 8100, 8235, 8266
AL 2212, 2221, 2234, 2256
Dept Employee Id
IT 1234, 1235, 1236, 1244
Sales 8000, 8100, 8235, 8266
Acc 2212, 2221, 2234, 2256
![Page 64: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/64.jpg)
JAVASCRIPT
No sql paradigm – Tree IndexCountry - USA
State - CA
City - LA
Properties
Facilities
{
“property”:
[{ “facilityName”: abc”,
“facilityId”:”111”},
{“facilityName”:”xyz” ,
“facilityId”:”222”}]
}
![Page 65: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/65.jpg)
JAVASCRIPT
Composite Key
Dept= IT:* or
Dept= Sales:Online:*
IT: Software: 1123 EmpName: John; Address: Los Angeles
IT: Software: 2323 EmpName: Kevin; Address: Dallas, TX
IT: Hardware: 6767 EmpName: Matt; Address: San Francisco
Sales: Online: 832 EmpName: Katie: Address: Austin, Tx
Sales : Online: 423 EmpName: Karen: Address: Irvine, CA
Sales : Store : 556 EmpName: Richard; Address: San Diego
IT
Employees
Sales
Employee
s
E
M
P
L
O
Y
E
E
S
![Page 66: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/66.jpg)
JAVASCRIPT
No sql paradigm - Grouping
U123: O111 Product Ids: [“Surface”, “xbox”]
U124:O123 Product Ids: [“Win 8”, “xbox”]
U124:O234 Product Ids: [“Win phone”, “surface”]
U124:O999 Product Ids: [“office”, “azure sub”]
U125:O789 Product Ids: [“msdn”, “office”]
U125:O945 Product Ids: [“surface”, “xbox”]
Colocation of a users’ data.
![Page 67: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/67.jpg)
JAVASCRIPT
Inverted search & direct aggregation
EmpId, dept, city, …….
Dept-IT: [111, 123, 234….]
Dept-Sales:[673, 343, 434….]
City: Dallas
City: LA
111: Dept-Sales, City: LA …
222: Dept-IT, City: Dallas ….
![Page 68: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/68.jpg)
JAVASCRIPT
No sql paradigm – Materialized paths
Electronics
TV Phones Computers Cameras
Samsung Apple LG
LCD LED
![Page 69: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/69.jpg)
JAVASCRIPT
No sql paradigm – Materialized paths
TV
Samsung Apple LG
LCD LED
{ “entity”: “TV”, “category”:”Electronics”}
{ “entity”: “Samsung”, “category”:”Electronics, TV”}
{ “entity”: “Samsung”, “category”:”Electronics, TV, LCD”}
![Page 70: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/70.jpg)
JAVASCRIPT
No sql paradigm – Nested sets
Electronics
TV Phones
Samsung Sony Cell Landline1 2 3 4 5 6 7 8 9 10 11 12 13 14
![Page 71: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/71.jpg)
JAVASCRIPT
No sql paradigm – Nested sets
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Sony Samsung
TV
LandlineCell
Phone
Electronics
![Page 72: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/72.jpg)
JAVASCRIPT
Flattening nested documents
Name: Chander
Hadoop: Expert
Nodejs: Expert
Spanish: Novice
{
“name”:”chander”,
“skills”:”hadoop, nodejs, Spanish”,
“level”:”expert, expert, novice”
}
Skills:hadoop AND
level:expert
![Page 73: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/73.jpg)
JAVASCRIPT
Flattening nested documents
Name: Chander
Hadoop: Expert
Nodejs: Expert
Spanish: Novice
{
“name”:”chander”,
“skills_1”:”hadoop”,
“skills_2”: “nodejs”,
“skills_3”: “spanish”,
“level_1”:”expert”,
“level_2”: “expert”,
“level_3”: “novice”
}
![Page 74: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/74.jpg)
JAVASCRIPT
References • http://www.couchbase.com/why-
nosql/nosql-database
• Highly scalable blog.
• www.10gen.com
• http://couchdb.apache.org/
• www.ravendb.net
![Page 75: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/75.jpg)
JAVASCRIPT
References • http://redis.io/
• http://neo4j.org/
• http://Cassandra.apache.org
• http://elasticsearch.org
• http://memcached.org/
• Building Scalable Architecture
![Page 76: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/76.jpg)
WEB API
![Page 77: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/77.jpg)
SESSION TITLE
http://ChanderDhall.com/gettrainings
GET
http://ChanderDhall.com/trainings
Principle: Use HTTP
verbs 77
Nouns, No Verbs in the URL
![Page 78: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/78.jpg)
SESSION TITLE
What about?• Responses that don’t involve
resources
• Use verbs
• Example:
http://ChanderDhall.com/transla
te?from=en&to=gn
![Page 79: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/79.jpg)
SESSION TITLE
http://ChanderDhall.com/trainings
http://ChanderDhall.com/trainings/34
Principle: 2 base
URLs/resource
79
KISS (Keep it simple, stupid!)
![Page 80: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/80.jpg)
SESSION TITLE
GET
http://ChanderDhall.com/trainings
Retrieves all trainings
GET http://ChanderDhall.com/trainings/23
Retrieves trainings with Id = 23
80
GET
![Page 81: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/81.jpg)
SESSION TITLE
• HTTP Verbs
POST
http://ChanderDhall.com/trainings
Creates a new training(Strange?)
POST
http://ChanderDhall.com/trainings/23
Error – Why, so?
81
POST
![Page 82: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/82.jpg)
SESSION TITLE
• HTTP Verbs
PUT
http://ChanderDhall.com/trainings
Bulk update trainings
PUT
http://ChanderDhall.com/trainings/23
If exists, update 23
Else ERROR
82
PUT
![Page 83: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/83.jpg)
SESSION TITLE
• HTTP Verbs
DELETE
http://ChanderDhall.com/trainings
Delete all trainings
DELETE
http://ChanderDhall.com/trainings/23
If exists, Delete 23
Else Resource Not found Error
83
DELETE
![Page 84: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/84.jpg)
SESSION TITLE
Associations
GET
/trainers/12/trainings/
144
84
![Page 85: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/85.jpg)
SESSION TITLE
GET
/trainers/12/trainings?
zip=92618&tech=api
85
COMPLEXITY
![Page 86: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/86.jpg)
SESSION TITLE
Error Format
• Error format 1
{
“code" : "401",
"message“ : "Authenticate",
}
86
![Page 87: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/87.jpg)
SESSION TITLE
Error Format
• Error format 2
{
“type" : “OAuthException",
"message“ : “(#401: Request not authorized",
}
87
![Page 88: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/88.jpg)
SESSION TITLE
Error Format
• Error format 3
{
"status" : "401",
"message“ : "Authenticate",
"code“ : 1234,
“details":
"http://www.chanderdhall.com/docs/errors/1234"
}
88
(Recommended!)
![Page 89: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/89.jpg)
SESSION TITLE
Error Format• Google GData 200 201 304 400
401 403 404 409 410 500
• Netflix 200 201 304 400 401 403
404 412 500
• Digg 200 400 401 403 404 410
500 503
![Page 90: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/90.jpg)
SESSION TITLE
Errors
• Only 3 cases
• Everything worked
• Client did something wrong
• API did something wrong
90
![Page 91: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/91.jpg)
SESSION TITLE
Error Codes (Required)
• So minimum response codes
• 200 - OK
• 400 - Bad Request
• 500 - Internal Server Error
91
![Page 92: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/92.jpg)
SESSION TITLE
Error Codes (Extended)
• 201 - Created
• 304 - Not Modified
• 404 – Not Found
• 401 - Unauthorized
• 403 - Forbidden
92
![Page 93: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/93.jpg)
SESSION TITLE
Versioning
• /bankName/v2.0/accounts/checking
• /2013-09-10/bankName/accounts/checkingThis
• /bankName/accounts/checking?v=1
93
![Page 94: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/94.jpg)
SESSION TITLE
Versioning
• Timestamp: Is the version based on the
date of launch or date of creation?
• Version in URL: Interface appears to
change sooner that it actually might.
• Version is optional: (Red Flag)
94
![Page 95: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/95.jpg)
SESSION TITLE
Versioning
• Versioning is mandatory
• Make version the first field if you want
from the left (v1/trainings)
• How many versions to maintain?
• URLs or Headers?
95
![Page 96: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/96.jpg)
SESSION TITLE
Versioning
• Accept-Datetime: Thu, 1 Oct 2013
20:35:00 GMT
• Cookie: $Version=1; Skin=new;
• ETag:
"737060cd8c284d8af7ad3082f209582d"
96
![Page 97: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/97.jpg)
SESSION TITLE
Pagination
• http://chanderdhall.com/podcasts/pag
e=3&rpp=5
• http://chanderdhall.com/podcasts?start
=3&count=5
97
![Page 98: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/98.jpg)
SESSION TITLE
Pagination
• http://chanderdhall.com/podcasts?offse
t=3&limit=5
• Don’t forget to include Default
Pagination
98
![Page 99: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/99.jpg)
SESSION TITLE
Multiple Formats
• http://chanderdhall.com/podcasts?type=json
Or
http://chanderdhall.com/podcasts?type=xml
• http://chanderdhall.com/podcasts.json
Or http://chanderdhall.com/podcasts.xml
99
![Page 100: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/100.jpg)
SESSION TITLE
• http://chanderdhall.com/podcasts
accept: application/json
Multiple Formats
100
![Page 101: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/101.jpg)
SESSION TITLE
Responses
a. "Created_At": "2013-10-10T04:35:00Z"
b. "DateTime": "2013-10-10T04:35:00Z"
101
![Page 102: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/102.jpg)
SESSION TITLE
Responses
var podcast = JSON.parse(response);
podcast.createdAt
102
![Page 103: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/103.jpg)
SESSION TITLE
P
I
P
E
L
I
N
E
W
E
B
A
P
I
ASP.NET Hosting Self Hosting HttpControllerHandler
HttpServer HttpSelfHostServer
DelegatingHandler
HttpRoutingDispatcher
HttpControllerDispatcher
HttpRequestMessage HttpResponse
zMessage
If(Route.Handler) Yes Route.Handler
DelegatingHandler
HttpMessageHandler
No
1. Create API Controller
Message Handlers
![Page 104: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/104.jpg)
SESSION TITLE
W
E
B
A
P
I
Action Filters
2. Select Controller ActionController
Can create an error response if request is not authorized3. Model Binding
Authorization Filters
Action filters are invoked
twice
4. Result Conversion
5. Invoke Action
OnActionExecuting OnActionExecuted
Controller Action
Exception Filters
P
I
P
E
L
I
N
E
![Page 105: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/105.jpg)
SESSION TITLE3. Model Binding
HttpRequestMessage
URI Headers Body
IModelBinder
ModelBinderParameterBinding
IValueProvider
Simple Type Any Type
HttpParameterBinding
Complex Type
MediaTypeFormatter
FormatterParameterBinding
![Page 106: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/106.jpg)
SESSION TITLE
4. Result Conversion
HttpResponseMessage
void
If(returnType== void)
return (204)
HttpResponseMessage
If(returnType == HttpResponseMessage)
Pass through
Other Types
IContentNegotiator
MediaTypeFormatter
![Page 107: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/107.jpg)
SESSION TITLE
Enable Cross Origin Requestspublic static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
var cors = new
EnableCorsAttribute("www.example.com", "*", “*");
config.EnableCors(cors);
// ...
}
}
Behind the scenes
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Headers: x-my-custom-header
Access-Control-Allow-Methods: PUT
![Page 108: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/108.jpg)
SESSION TITLE
Enable CORS (Custom)public class MyCorsPolicyAttribute : Attribute, ICorsPolicyProvider {
private CorsPolicy _policy;
public MyCorsPolicyAttribute(){
// Create a CORS policy._policy = new CorsPolicy{
AllowAnyMethod = true,AllowAnyHeader = true
};
// Add allowed origins._policy.Origins.Add("http://myclient.azurewebsites.net");_policy.Origins.Add("http://www.contoso.com");
}
public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request){
return Task.FromResult(_policy);}
}
![Page 109: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/109.jpg)
SESSION TITLE
Attribute Routing
[RoutePrefix("api/books")]
public class BooksController : ApiController
{
// GET api/books
[Route("")]
public IEnumerable<Book> Get() { ... }
// GET api/books/5
[Route("{id:int}")]
public Book Get(int id) { ... }
// POST api/books
[Route("")]
public HttpResponseMessage Post(Book book) { ... }
}
![Page 110: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/110.jpg)
SESSION TITLE
Attribute Routing
[RoutePrefix("api/books")]
public class BooksController : ApiController
{
// GET /api/authors/1/books
[Route("~/api/authors/{authorId:int}/books")]
public IEnumerable<Book> GetByAuthor(int authorId) {
... }
// ...
}
‘~’ Overrides the RoutePrefix
![Page 111: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/111.jpg)
SESSION TITLE
Attribute Routing
[RoutePrefix("customers/{customerId}")]
public class OrdersController : ApiController
{
// GET customers/1/orders
[Route("orders")]
public IEnumerable<Order> Get(int customerId) { ... }
}
![Page 112: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/112.jpg)
SESSION TITLE
Attribute Routing
[Route("users/{id:int}"]
public User GetUserById(int id) { ... }
[Route("users/{name}"]
public User GetUserByName(string name) { ... }
First route chosen if the id is an int.
Otherwise, second.
![Page 113: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/113.jpg)
SESSION TITLEConstraint Description Example
alphaMatches uppercase or lowercase Latin
alphabet characters (a-z, A-Z){x:alpha}
bool Matches a Boolean value. {x:bool}
datetime Matches a DateTime value. {x:datetime}
decimal Matches a decimal value. {x:decimal}
double Matches a 64-bit floating-point value. {x:double}
float Matches a 32-bit floating-point value. {x:float}
guid Matches a GUID value. {x:guid}
int Matches a 32-bit integer value. {x:int}
lengthMatches a string with the specified length or
within a specified range of lengths.
{x:length(6)}
{x:length(1,20)}
long Matches a 64-bit integer value. {x:long}
max Matches an integer with a maximum value. {x:max(10)}
maxlength Matches a string with a maximum length. {x:maxlength(10)}
min Matches an integer with a minimum value. {x:min(10)}
minlength Matches a string with a minimum length. {x:minlength(10)}
range Matches an integer within a range of values. {x:range(10,50)}
regex Matches a regular expression. {x:(^\d{3}-\d{3}-\d{4}$)}
![Page 114: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/114.jpg)
SESSION TITLE
Attribute Routing
[Route("users/{id:int:min(1), id:int:max(10)}")]
public User GetUserById(int id) { ... }
Multiple constraints can be applied separated
by a comma
![Page 115: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/115.jpg)
UI
![Page 116: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/116.jpg)
CAZTON
Javascript Tips• Array items and object members are accessed slower than
Literal values and local variables.
• Local variables are faster to access
(Eg: location.href is accessed faster than window.location.href)
• Avoid the with statement because it augments the execution
context scope chain.
• Avoid nested object members.
• Prototype (Inheritance chain) slows down method or property
access.
• Storing frequently used object members, array items, and out-
of-scope variables in local variables.
![Page 117: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/117.jpg)
CAZTON
Our Top clients strive to achieve
Response Time - 250ms
![Page 118: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/118.jpg)
CAZTON
Intentional Speed Delay
Source: FT.com
![Page 119: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/119.jpg)
CAZTON
Impact
Source: FT.com
Mean Percentage Drop in Article Views
![Page 120: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/120.jpg)
CAZTON
Impact
Source: FT.com
Mean Percentage Drop in Article Views
![Page 121: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/121.jpg)
CAZTON
1 second 2 second 3 second 4 second
Performance vs Perception
![Page 122: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/122.jpg)
CAZTON
1 second 2 second 3 second 4 second
Performance vs Perception
![Page 123: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/123.jpg)
CAZTON
1 second 2 second 3 second
Performance vs Perception
![Page 124: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/124.jpg)
CAZTON
1 second 2 second 3 second
Performance vs Perception
3.2 second
![Page 125: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/125.jpg)
CAZTON
14 Rules of Web Performance
• Make Fewer HTTP Requests
• Use a Content Delivery Network
• Add an Expires Header
• Gzip Components
• Put Stylesheets at the Top
• Put Scripts at the Bottom
• Avoid CSS Expressions
Source: Steve SoudersBook: High Performance Web Sites
![Page 126: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/126.jpg)
CAZTON
14 Rules of Web Performance
• Make JavaScript and CSS External
• Reduce DNS Lookups
• Minify JavaScript
• Avoid Redirects
• Remove Duplicate Scripts
• Configure ETags
• Make AJAX Cacheable
![Page 127: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/127.jpg)
CAZTON
Time to reach the cwnd size of size N
Rwnd = 128KB
RTT = 42ms (San Francisco to New York)
128KB/1460B = 90 segments
log2(90/10) = 3.1699250014423126
So Time = 42ms * 3.169 = 160ms
Time to reach Receive Windows Limit
![Page 128: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/128.jpg)
CAZTON
SYN
SYN ACK
ACK
Request
Processing
14600 bytes
10x ACK
29200 bytes
20x ACK
58400 bytes
21ms
42 ms
92 ms
113 ms
134 ms
155 ms
176 ms
40x ACK197 ms
29200 bytes218 ms
20x ACK
Cnwd: 116800 bytes239 ms
![Page 129: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/129.jpg)
CAZTON
Optimizing TCP• Upgrade server kernel to latest version
• Increase Initial cwnd size
• Enable window scaling (Increases Rwnd size. Previous Limit
65,535 bytes. Current limit -1 gigabyte)
• Disable slow-start after idle
• Investigate enabling TCP Fast Open
• Eliminate redundant data transfers
• Compress transferred data
• Reduce roundtrip times
• Reuse TCP connections whenever possible
![Page 130: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/130.jpg)
CAZTON
Fetching using 3G/4G
• Control Plane (3G) up to 2.5 seconds
![Page 131: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/131.jpg)
CAZTON
Tips
• Reduce DNS lookups
• Avoid Redirects (Bad: example.com to m.example.com)
• Make Fewer HTTP Requests
• Gzip your text
• Use a CDN
• Optimize images per device
![Page 132: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/132.jpg)
CAZTON
Tips
• Add ETags to avoid fetching duplicate
content
• Test on actual mobile devices
• Add an Expires Header
• Use Local Storage for js and css
![Page 133: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/133.jpg)
CAZTON
Battery
Most energy intensive components
1. Screen
2. Radio
![Page 134: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/134.jpg)
CAZTON
How to Save Battery
• Prefetch Data
• Minimize periodic data requests
![Page 135: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/135.jpg)
CAZTON
HTTP 2
• New Binary Framing
• Interleaving requests and response messages
• Parallel Requests
• Header Compression
• Server Push
• Stream Prioritization (Weight and dependency)
![Page 136: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/136.jpg)
CAZTON
Critical Rendering Path
• Time taken to get to the first render of the page
![Page 137: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/137.jpg)
CAZTON
Critical Rendering PathNetwork
HTML CSS
DOM CSSOMJavascrip
t
Render Tree
Layout
Paint
![Page 138: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/138.jpg)
CAZTON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NDC Web Performance</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div>Hello World</div>
<p style="display:none">
Hidden
</p>
</body>
</html>
Network
HTML
DOM
![Page 139: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/139.jpg)
CAZTON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NDC Web Performance</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div>Hello World</div>
<p style="display:none">
Hidden
</p>
</body>
</html>
Network
HTML
DOM
![Page 140: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/140.jpg)
CAZTON
body
div p
Hello World Hidden
![Page 141: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/141.jpg)
CAZTON
#
Network
HTML CSS
DOM CSSOM
Render
Tree
![Page 142: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/142.jpg)
CAZTON
body
div p
Hello World Hidden
body
div
Hello World
Hello World
DOM Tree + CSSOM Render Tree
display: none
=
font-size:medium
![Page 143: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/143.jpg)
CAZTON
Tips
• Stream HTML
– Server Side Rendered HTML
– Progressive Rendering
• Get Critical CSS Inline
– Remember CSS blocks rendering
![Page 144: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/144.jpg)
CAZTON
Critical Rendering PathNetwork
HTML CSS
DOMCSS Object
ModelJavascript
Render Tree
Layout
Paint
![Page 145: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/145.jpg)
CAZTON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NDC Web Performance</title>
<script src="analytics.js" async></script>
<script src="sayhi.js" ></script>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div>Hello World</div>
<p style="display:none">
Lorem ipsum dolor sit amet
</p>
</body>
</html>#
Block parse and
execute
Execute when
ready
![Page 146: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/146.jpg)
CAZTON
Older Browsers• External Scripts
(Blocks Download plus rendering)
– Download -> Parse -> Execute
External Script 1
External Script 2
CSS
Image
![Page 147: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/147.jpg)
CAZTON
Improvements
• External Scripts (Blocks Download plus
rendering)
– Parallel
Download
– Parse
– Execute
External Script 1
External Script 2
CSS
ImageExternal Script 2
![Page 148: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/148.jpg)
CAZTON
Gmail Mobile
<script type=‘text/javascript’>
/*
js code
*/
</script>
get script DOM element’s text
remove comments
eval() when invoked
Source: Steve Souders
![Page 149: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/149.jpg)
CAZTON
Javascript Tips
• JS can block CSS
• JS can block DOM
• Use async
• Avoid document.write()
• Defer all, but critical, scripts towards the end of the
body tag
![Page 150: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/150.jpg)
CAZTON
Critical Rendering PathNetwork
HTML CSS
DOMCSS Object
ModelJavascript
Render Tree
Layout
Paint
![Page 151: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/151.jpg)
CAZTON
Performance (60fps)
60 frames = 1000ms
1 frame = 1000/60 = 16.67ms
(If it exceeds 16ms, frame is dropped)Frame
Code GC Layout Paint
![Page 152: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/152.jpg)
CAZTON
Layout Update• Resizing
• Adding Nodes
• Removing Nodes
• Changing Styles
![Page 153: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/153.jpg)
CAZTON
Lazy vs Synchronous Update
Frame
Code GC Layout Paint
Frame
Paint
Lazy – Recalculated once before paint Synchronous – Forced multiple times before paint
for(e in elements){e.style.left = e.offsetLeft + 1 + “px”;
}
![Page 154: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/154.jpg)
CAZTON
Layout To Paint
• Apply visual styles
• Create the bitmap
• Pixelate the screen
Things to note
• Update the minimum area needed
• Note: Some styles are more expensive
![Page 155: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/155.jpg)
CAZTON
Layout
var element = document.getElementById(’book');
element.style.borderLeft = '1px'; //Reflow
element.style.borderRight = ’1px'; //Reflow
element.style.padding = '5px'; //Reflow
![Page 156: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/156.jpg)
CAZTON
Layout
var element = document.getElementById(‘book');
element.style.cssText += 'border-left: 1px; border-right: 1px; padding: 5px;';
![Page 157: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/157.jpg)
CAZTON
Inefficient
myElement.style.left = 1 + myElement.offsetLeft + 'px';
myElement.style.top = 1 + myElement.offsetTop + 'px'; if
(myElement.offsetLeft >= 500) {
doSomething();
}
![Page 158: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/158.jpg)
CAZTON
Efficient
var offsetLeft = myElement.offsetLeft ;
myElement.style.left = 1 + offsetLeft + 'px';
myElement.style.top = 1 + myElement.offsetTop + 'px';
if (offsetLeft >= 500) {
doSomething();
}
![Page 159: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/159.jpg)
CAZTON
Paint• Most expensive part of the pixel pipeline
• Changing any property (except transforms or
opacity) always triggers paint.
• Triggering layout automatically triggers paint.
• Can trigger paint without layout (change
backgrounds, text colors, shadows)
• Tip: Reduce paint areas through layer promotion
and orchestration of animations.
![Page 160: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/160.jpg)
CAZTON
Repaint/Reflow
• Repaint –
– Or Redraw
– Invisible Element made visible (or Vice Versa)
– Without altering the layout of the document
• Reflow (More Expensive)
– When DOM tree is manipulated
![Page 161: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/161.jpg)
CAZTON
What causes a Reflow?
• Resizing the window
• Changing a font
• CSS pseudo classes like :hover
• Changing the class attribute
• Calculating offsetWidth and offsetHeight
• Modifying the style attribute of an element
![Page 162: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/162.jpg)
CAZTON
Why is Reflow Expensive?
• All child nodes
• Element ancestors
• Elements following the element have their details
recalculated.
• Effectively the entire page is re-rendered.
![Page 163: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/163.jpg)
CAZTON
Reflowsvar fragment =
document.createDocumentFragment();
var elem, contents;
for(var i = 0; i < textlist.length; i++) {
elem = document.createElement('p');
contents = document.createTextNode(textlist[i]);
elem.appendChild(contents);
fragment.appendChild(elem);
}
document.body.appendChild(fragment);#
DocumentTree Modification
![Page 164: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/164.jpg)
CAZTON
Reducing Reflow Impactvar original = document.getElementById('container');
var cloned = original.cloneNode(true); //EFFICIENT
cloned.setAttribute('width', '50%');
var elem, contents;
for(var i = 0; i < textlist.length; i++) {
elem = document.createElement('p');
contents = document.createTextNode(textlist[i]);
elem.appendChild(contents);
cloned.appendChild(elem);
}
original.parentNode.replaceChild(cloned, original);#
CloningTheOriginal tree
![Page 165: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/165.jpg)
CAZTON
Reducing Reflow Impact
var element= document.getElementById(id');
element.style.display = 'none';
element.appendChild(newNodes);
element.style.className = ’newClass';
element.style.display = 'block';
#
Hide
Change
Unhide
![Page 166: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/166.jpg)
CAZTON
Thought Leaders to Follow• Steve Souders
• Ilya Grigorik
• Paul Irish
• Douglas Crockford (Ajax)
• Ben Gailbraith (Responsive)
• Tony Gentilcore (Gzip and beyond)
• Stoyan Stefanov (Image Optimization)
• Paul Lewis
• Chander Dhall ☺
![Page 167: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/167.jpg)
CAZTON
Books
#
![Page 168: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/168.jpg)
CAZTON
Cache locally
Inefficient
<script type="text/javascript">
for (var
i=0;i<car.images.length;i++)
car.images[i].src=”image.gif"
</script>
Efficient
<script type="text/javascript">
var images=car.images
for (var i=0;i<theimages.length;i++)
images[i].src=”image.gif"
</script>
#
![Page 169: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/169.jpg)
CAZTON
Loops
Inefficient
for (var i=0, len<x.length;; i++) {
doSomething()
}
Efficient
for (var i=0, len=x.length; i<len; i++)
{
doSomething()
}
#
![Page 170: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/170.jpg)
CAZTON
Reduce Inspection TimeInefficient
var all=
document.getElementsByTagName('*');
for(var i = 0; i < all.length; i++) {
if(all[i].hasAttribute(‘x')) {
doSomething();
}
}
Efficient
var all=
document.getElementById(’myId')
.getElementsByTagName('*');
for(var i = 0; i < all.length; i++) {
if(all[i].hasAttribute(x')) {
doSomething();
break;
}
}#
![Page 171: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/171.jpg)
CAZTON
Use XPathInefficient
var allElements =
document.getElementsByTagName('*');
for(var i = 0; i < allElements.length; i++) {
if(allElements[i].tagName.match(/^
h[2-4]$/i)) {
// …
}
}
Efficient
var headings =
document.evaluate('//h2|//h3|//h4',
document, null,
XPathResult.ORDERED_NODE_ITERATOR
_TYPE, null);
var oneheading;
while(oneheading =
headings.iterateNext()) {
// …
}#devconnectionSource: https://dev.opera.com/articles/efficient-javascript/?page=4#docreferencess
![Page 172: Javascript, API, and Server Side - Learn my secrets ofsddconf.com/brands/sdd/library/Javascript_API_and... · Javascript, API, and Server Side - Learn my secrets of success. JAVASCRIPT](https://reader030.fdocuments.in/reader030/viewer/2022040112/5ec5dc7bd03eef7a965b9ddd/html5/thumbnails/172.jpg)
CAZTON
Avoid keeping alive references
var remoteDoc = parent.frames['sideframe'].document;
var remoteContainer = remoteDoc.getElementById('content');
var newPara = remoteDoc.createElement('p');
newPara.appendChild(remoteDoc.createTextNode('new content'));
remoteContainer.appendChild(newPara);
// Remove references
remoteDoc = null;
remoteContainer = null;
newPara = null;
#dSource: https://dev.opera.com/articles/efficient-javascript/?page=4#docreferencesevconnections