An introduction to design patterns used in Javascript

1. JS Patterns
How to improve javascript code

2. Reminder :
 3 categories design patterns :
-> Creational
-> Structural
-> Behavioral
 Antipattern :
-> Wrong design
-> Result of bad habit, bad practice, bad idea…

3. Best practice general :
 Function Declarations : creating anonymous functions
and assigning them to a variable
 Implied Typecasing : avoid implied typecasting

4.  Avoid eval() : "Eval is evil."
Best practice general :
 Minimize Global (Not clear & unexpected results) / Hoisting
 Working with Json (JavaScript Object Notation)
 Use literal notation ( array & Regex)
 Use parseInt()

5. Best practice – code reuse :
 Use constructor / share prototype => use javascript object
 Use functions :
- Callback / Chaining Pattern
- Configuration objects
- Immediate functions (could be used to init object)
- Memoization : use function properties
to avoid repeated computation

6. Design pattern - Creation - best practice :
 Use Namespace : namespaces help reduce the number of globals required
and avoid naming collisions or excessive name prefixing
 Use Module / Declare dependencies
 Use private Properties / Methodes / Static Members / Object constants
 Use sandbox : it provides an environment for the modules to work
without affecting other modules and their personal
sandboxes

7. Design pattern – Creation :
 Use Builder : constructs complex objects by separating
construction and representation
 Use Factory : creates objects without specifying the exact class to create

8. Design pattern – Structural :
 Use Decorator : dynamically adds/overrides behaviour
in an existing method of an object

9.  Use Facade : provides a simplified interface to a large body of code
 Proxy : provides a placeholder for another object to control access,
reduce cost, and reduce complexity
Design pattern – Structural :

10. Design pattern – Behavioral :
 Chain of responsibility : delegates commands to a chain of processing objects
 Command : creates objects which encapsulate actions and parameter
 Mediator : allows loose coupling between classes by being the only class
that has detailed knowledge of their methods
 Observer : is a publish/subscribe pattern which allows a number of
observer objects to see an event
 Strategy : allows one of a family of algorithms to be selected
on-the-fly at runtime

11. jQuery :
 requery : avoid requery by using jQuery chaining
 append : use string concatenate and set innerHTML
 append : use string concatenate and set innerHTML
 detach : take element off the DOM while manipulating them

12. jQuery :
 selector cache : using selector cache to avoid requery
 selector Left and Right - specific on the right, light on the left
 Selector Decending from id : be more specific
 Use publish / subscribe : $.Callbacks() & $.Observable

13. jQuery Plugin :
 Basic : the most basic pattern
 Extend : enables you to define multiple functions at once and which
sometimes make more sense semanticall

14. jQuery :
 UI Widget factory : for building complex, stateful plugins based on
object-oriented principles

15. References :
 http://shichuan.github.io/javascript-patterns/#general-patterns
 JavaScript Patterns – O’REILLY
 http://api.jquery.com/
 http://www.codetails.com/2014/05/27/top-10-javascript-traps-for-a-c-developer/
 Learning JavaScript Design Patterns – O’REILLY

16. Find out more
• On https://techblog.betclicgroup.com/

17. We want our brands to be easy to use
for every gamer around the world.
Join us to make that happen.
Everything we do reflect our values
Come and work in a friendly
atmosphere based on trust &
cooperation between IT Teams.
Learn & Share with us
Friday tech trainings, BBL, Meetups,
Coding Dojo, Innovation Day & more
If you want to contribute to the success of
our group, look at all the challenges we
offer HERE
Want to be part of a great online gambling company?
Check out our Carreers account
on Stackoverflow

18. About Us
• Betclic Everest Group, one of the world leaders in online
gaming, has a unique portfolio comprising various
complementary international brands: Betclic, Everest, bet-at-
home.com, Expekt, Monte-Carlo Casino…
• Through our brands, Betclic Everest Group places expertise,
technological know-how and security at the heart of our
strategy to deliver an on-line gaming offer attuned to the
passion of our players. We want our brands to be easy to use
for every gamer around the world. We’re building our
company to make that happen.
• Active in 100 countries with more than 12 million customers
worldwide, the Group is committed to promoting secure and
responsible gaming and is a member of several international
professional associations including the EGBA (European
Gaming and Betting Association) and the ESSA (European
Sports Security Association).