Session on Javascript Design Patterns, latest ECMAScript features, code optimization techniques. Design Patterns: Singleton Pattern Factory Pattern Observer Pattern Decorator Pattern Module Pattern Prototype Pattern MVC Pattern

1. Unleashing the Power of Modern
Javascript Development

2. Tarandeep Singh
★ Software Engineer at Salesforce
★ Full Stack Web, Android & Cloud developer
★ Speaker & Blogger
★ SinghTarandeep.com
tdssaini tdssaini

3. Thank you!!

4. Agenda
1. Introduction
2. Common Design Patterns
3. Performance Optimization Techniques
4. Async/Await & Promises
5. ES Tips : Harnessing the Latest Features of ECMAScript
6. Resources
7. Q&A

5. Introduction

6. Common Design Patterns
1. Singleton Pattern
2. Factory Pattern
3. Observer Pattern
4. Decorator Pattern
5. Module Pattern
6. Prototype Pattern
7. MVC Pattern

7. Singleton Pattern
1. Single object instance
2. Global Access
3. Resource sharing
4. Session/State management

8. Factory Pattern
1. Create object without specifying the exact class of
object
2. Abstraction
3. Dependency injection
4. Dynamic Module Loading

9. Observer Pattern
1. Behavioral design pattern
2. Publisher maintain a list of its subscribers
3. Publisher notifies subscribers of any state changes
4. Pub-sub models
5. Event Handling

10. Decorator Pattern
1. Structural Design Pattern
2. Dynamically add behavior or responsibilities to objects without
altering their code
3. Open/Closed Principle
4. Authentication and Authorization

11. Module Pattern
1. Encapsulate private and public members with a
single module
2. Closure concept to create private and privileged
members
3. Expose a controlled interface while keeping certain
variables and functions private
4. Module pattern can be used to create a singleton
5. Creating utility modules

12. Prototype Pattern
1. Create objects by cloning an existing object
2. Prototypal Inheritance
3. Object cloning
4. Default Values

13. MVC Pattern
1. Model View Controller
2. Separating concerns related to data, user
interface, and application logic

14. Performance Optimization Techniques
Avoid Global Variables
Minification and
Compression
Use Asynchronous Loading
Optimize Images and
Assets
Bundle and Code Splitting
Caching
Optimizing Loops &
Iteration
Use browser tools to
understand performance

15. Performance Optimization Techniques
Use Efficient Data
Structures
Debounce and Throttle
Upgrade to the Latest
JavaScript Features
Profiling and Benchmarking
Optimize DOM
Manipulation
Avoid Memory Leaks
Optimize Network
Requests
Web Workers
Using optimized algorithms
Array.sort()

16. Async/Await & Promises

17. ES Tips : Harnessing the Latest Features of ECMAScript
1. Using let & const instead of var
2. Destructuring Assignment
3. Template Literals
4. Default Parameters
5. Spread and Rest Operators
6. Classes
7. Map & Set
8. Private class methods
9. Logical assignment operators
a. Logical Nullish Assignment (??=)
b. Logical AND Assignment (&&=)
c. Logical OR Assignment (||=)
10. Numeric separators

18. Resources
● Awesome Javascript - Github.com/sorrycc/awesome-javascript
● Namaste Javascript Youtube Playlist - Namastedev.com/learn/namaste-javascript
● Ecma International's TC39 - www.tc39.es
● ECMAScript 2025 Specifications - tc39.es/ecma262
● JSE – Certified Entry-Level JavaScript Programmer Certification -
js.institute/jse-certification
● Nodejs Certification by The Linux Foundation -
Training.linuxfoundation.org/application-development
● Code Sample - Github.com/Tdssaini/modern-javascript-development

20. Thank you!!