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
これでLambdaが不要に？！Step FunctionsのJSONata対応について
iwatatomoya
2
3.7k
php-conference-japan-2024
tasuku43
0
320
テストコード書いてみませんか？
onopon
2
130
Kaigi on Railsに初参加したら、その日にLT登壇が決定した件について
tama50505
0
100
【re:Growth 2024】 Aurora DSQL をちゃんと話します！
maroon1st
0
780
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
790
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
160
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
110
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
140
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
840
CSC305 Lecture 26
javiergs
PRO
0
140
nekko cloudにおけるProxmox VE利用事例
irumaru
3
440

Featured

See All Featured
Code Reviewing Like a Champion
maltzj
520
39k
Facilitating Awesome Meetings
lara
50
6.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Rails Girls Zürich Keynote
gr2m
94
13k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Designing for humans not robots
tammielis
250
25k
For a Future-Friendly Web
brad_frost
175
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Embracing the Ebb and Flow
colly
84
4.5k

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!