Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Design Patterns

Lawren
July 30, 2015
Programming
3
140

JavaScript Design Patterns

Design patterns enable us to stand on the shoulders of giants, that is, help us build off of the knowledge of the programmers before us and avoid many of the same pitfalls that may have set them back.

In this talk, we will discuss the importance and basics of JavaScript design patterns and anti-patterns as we explore a handful of the more common ones being used today.

We’ll take a look at the Module, Revealing Module, Facade and Abstraction patterns, and they’re usefulness in plugin and application development. You can also expect a brief refresher on closures, if you’re into that sort of thing.

Lawren

July 30, 2015
Tweet

More Decks by Lawren

See All by Lawren
React Native: Building to Scale
lawren
0
73
Introduction to Web Concepts
lawren
0
57

Other Decks in Programming

See All in Programming
Figma Dev Modeで変わる！Flutterの開発体験
watanave
0
150
距離関数を極める！ / SESSIONS 2024
gam0022
0
290
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
cmp.Or に感動した
otakakot
3
200
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
Arm移行タイムアタック
qnighy
0
340
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Contemporary Test Cases
maaretp
0
140

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
GitHub's CSS Performance
jonrohan
1030
460k
Code Reviewing Like a Champion
maltzj
520
39k
KATA
mclloyd
29
14k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Embracing the Ebb and Flow
colly
84
4.5k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Happy Clients
brianwarren
98
6.7k

Transcript

  1. (JavaScript) Design Patterns @LAWREN_IPSUM

  2. “TO WORK OUR WAY TOWARDS A SHARED LANGUAGE ONCE AGAIN,

    WE MUST FIRST LEARN HOW TO DISCOVER PATTERNS WHICH ARE DEEP, AND CAPABLE OF GENERATING LIFE.” - CHRISTOPHER ALEXANDER

  3. WHAT IS A DESIGN PATTERN?

  4. A DESIGN PATTERN IS A REUSABLE SOLUTION TO A REOCCURRING

    PROBLEM

  5. A DESIGN PATTERN IS A PLATFORM FOR COLLABORATION & GROWTH

  6. A DESIGN PATTERN IS A TEMPLATE FOR PROBLEM SOLVING

  7. WHAT IS A DESIGN PATTERN NOT?

  8. A DESIGN PATTERN IS NOT AN EXACT SOLUTION

  9. A DESIGN PATTERN IS NOT JUST ANY SOLUTION

  10. OUR UTILITY BELT

  11. (function foo(window) {
 //my function stuff
 })(window); FUNCTIONS CAN BE

    SELF-INVOKED.

  12. foo(); //logs 5
 
 function foo() {
 console.log(5);
 }; DECLARED

    FUNCTIONS CAN BE HOISTED.

  13. FUNCTIONS CAN ENCAPSULATE THEIR ENVIRONMENT. var inc = (function ()

    {
 var counter = 0;
 return function() { console.log(++counter); };
 })();
 
 inc(); //logs 1
 inc(); //logs 2

  14. var inc = (function () {
 var counter = 0;


    return function() { console.log(++counter); };
 })();
 
 inc(); //logs 1
 inc(); //logs 2 THIS IS A CLOSURE.

  15. ANTI-PATTERNS

  16. TOO OFTEN WE SETTLE FOR SOLUTIONS THAT JUST “WORK”.

  17. BLOCKING SCRIPTS

  18. <!doctype html>
 <html>
 <head>
 <script src="js/plugins.js"></script>
 <script src="js/main.js"></script>
 </head>
 <body>


    <!-- all our markup... -->
 </body>
 </html>

  19. <!doctype html>
 <html>
 <head></head>
 <body>
 <!-- all our markup... —>

    <script src="js/plugins.js"></script>
 <script src="js/main.js"></script>
 </body>
 </html> 
 <!-- by moving all of our scripts to
 the bottom of our page we ensure
 our page load continues uninterrupted -->

  20. REPETITION

  21. $('.item-1').hover(function() {
 $('#item-info-1').stop().slideToggle(400);
 }, function() {
 $('#item-info-1').hide();
 });
 
 $('.item-2').hover(function()

    {
 $('#item-info-2').stop().slideToggle(400);
 }, function() {
 $('#item-info-2').hide();
 });
 
 $('.item-3').hover(function() {
 $('#item-info-3').stop().slideToggle(400);
 }, function() {
 $('#item-info-3').hide();
 });

  22. $('div[class^=item]').hover(function() {
 var cls = $(this).attr('class').replace('item', "")
 $('#item-info' + cls).stop().slideToggle(400);


    }, function() {
 $('#item-info' + cls).hide();
 }); 
 // we can avoid repetition by targeting
 // all items at once and then stashing
 // the item’s id to determine what info
 // pane we want to show

  23. GLOBAL POLLUTION

  24. var arra = [];
 for (var i = 0; i

    < 2003000; i++) {
 arra.push(i * i + i);
 } // if left to the window this will use // up roughly 10mb of memory usage

  25. (function(){
 var arra = [];
 for (var i = 0;

    i < 2003000; i++) {
 arra.push(i * i + i);
 }
 })(); 
 // by simply wrapping our function
 // in a closure we have ensured it
 // will be garbage collected

  26. ORGANIZATION

  27. var level = ['Senior', 'Junior', 'Principal'];
 
 function getLevel ()

    {
 return level[(~~(Math.random()*level.length))];
 }
 
 var role = ['Analyst','Architect','Consultant'];
 
 function getrole () {
 return role[(~~(Math.random()*role.length))];
 }

  28. var level = ['Senior', 'Junior', 'Principal'],
 role = ['Analyst','Architect','Consultant'];
 


    function getLevel () {
 return level[(~~(Math.random()*level.length))];
 }
 function getRole () {
 return role[(~~(Math.random()*role.length))];
 } 
 // utilizing hoisting, we can organize our code
 // and keep our variables and functions
 // separated, clean, and organized

  29. PATTERNS

  30. MODULE PATTERN

  31. MISSION: ORGANIZATION & SEPERATION

  32. MODULE PATTERN ๏ Helps keep code organized ๏ Encapsulates your

    code ‣ Hidden from other scopes ‣ Non-polluting

  33. var myModule = (function() {
 
 var dict = {

    //private variables
 level: ['Senior','Junior','Principal'],
 role: ['Analyst','Architect','Consultant']
 };
 
 return {
 randomWord: function(arr) {
 arr = dict[arr];
 console.log(arr[(~~(Math.random()*arr.length))]);
 }
 };
 
 })();
 
 myModule.randomWord('role'); //logs a random role
 myModule.randomWord('level'); //logs a random level

  34. REVEALING MODULE PATTERN

  35. MISSION: ORGANIZATION & (MORE) PRIVACY

  36. REVEALING MODULE PATTERN ๏ Allows for better organization of public

    and private “classes” ๏ Enables easy abstraction ‣ Can greatly improve the ease of use of otherwise complex functionality

  37. var myModule = (function() {
 
 var dict = {

    //now private
 level: ['Senior','Junior','Principal'],
 role: ['Analyst','Architect','Consultant']
 };
 
 function randomWord(arr) {
 arr = dict[arr];
 console.log(arr[(~~(Math.random()*arr.length))]);
 }
 
 return {
 word: randomWord
 };
 
 })();
 
 myModule.word('role'); //logs a random role
 myModule.word('level'); //logs a random level


  38. FACADE/ABSTRACTION PATTERN

  39. MISSION: USER/DEV-EXPERIENCE

  40. FACADE/ABSTRACTION PATTERN ๏ Simplifies use of complex subsystems ‣ Can

    decrease future development time ‣ Often less prone to errors than when manipulating subsystems directly

  41. var myModule = (function() {
 
 var _private = {


    i: 5,
 get: function() {
 console.log( "current value:" + this.i);
 },
 set: function( val ) {
 this.i = val;
 },
 run: function() {
 console.log( "running" );
 }
 };
 
 return {
 facade: function( args ) {
 _private.set(args.val);
 _private.get();
 if ( args.run ) {
 _private.run();
 }
 }
 };
 }());
 
 myModule.facade({run: true, val: 10}); //returns "current value: 10" and "running"


  42. RESOURCES Addy Osmani: goo.gl/3kyP0z Stack Overflow: stackoverflow.com Shi Chuan: goo.gl/oOfyDb

    GitHub (plugins & docs): github.com

  43. YOU MADE IT!