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
72
Introduction to Web Concepts
lawren
0
50

Other Decks in Programming

See All in Programming
Anthropic Cookbook のおすすめレシピ
schroneko
6
670
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
520
Snowflakeで眠ったデータを起こそう！
estie
0
110
try! Swift Tokyo 初参加報告LT
hinakko2
0
210
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
0
180
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
160
Hanami and htmx
bkuhlmann
0
200
Ruby Pattern Matching
bkuhlmann
0
920
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
620
Rethinking UI building strategies @ SFI 2024
letelete
0
270

Featured

See All Featured
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Designing the Hi-DPI Web
ddemaree
276
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Design by the Numbers
sachag
274
18k
Product Roadmaps are Hard
iamctodd
43
9.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
Git: the NoSQL Database
bkeepers
PRO
422
63k
WebSockets: Embracing the real-time Web
robhawkes
59
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!