SlideShare a Scribd company logo
1 of 8
5 tips for writing better
        JavaScript



           Nael El Shawwa
             @naelshawwa
      nael.elshawwa@gmail.com
     http://about.me/naelshawwa
Why learn better JS?


Easy to hack things

Easy to learn bad habits

Rich web apps today heavily depend on JS

  20,000 lines of JS
Tip # 1: Namespacing
function hello(){     var nael = {};
   alert (“Hello”);
}                     nael.hello = function(){
                        alert (“Hello”);
                      };




    Stop declaring global functions, minimize
    global variables
Tip # 2: Events

<a onclick=”doSomething();”>
                               dojo.connect(link, "onclick", ui,
      Do Something
                               ui.doSomething);
  </a>




         Don’t bind behaviour using markup attributes

            remember no global functions?

            harder to change behavior in a large app
Tip # 3: Pub Sub
startup: function(){

 //some other startup code

 //subscribe to the event we will get back from the app
 dojo.subscribe("nael.controller.app.currentPosition",
            this, this.eventHandlers.updateMapCenter);

//when Im done starting up, yell to the app controller
saying Im ready
 dojo.publish("nael.controller.app.requests",
                    ["getBrowserCoordinates"]);
},


    Publish / Subscribe results in cleaner more
    maintainable code
Tip # 4: Templating
<div class="infoWindowContainer" dojoattachpoint="infoWindow">
       <h1>${title}</h1>
</div>




        Don’t mix HTML with JavaScript

        Keep your markup in HTML and load via ajax

           ex. Dojo widget template system
Tip # 5: Decorating
    var car = {};
    car.drive = function(x){
      this.position = this.position + x;
    }

    var flyingDecorator = {};
    flyingDecorator.fly = function(x,y){
      this.position = this.position + x;
      this.height = this.height + y;
    }


Combine objects together when needed, don’t
copy and paste new code into existing
objects
How to learn more?

http://www.crockford.com/ - Douglas
Crockford

High Performance JavaScript - Nicholas
Zakas

Use & read into jQuery, Dojo, YUI code bases

More Related Content

What's hot

An Introduction to Wagtail
An Introduction to WagtailAn Introduction to Wagtail
An Introduction to WagtailAustin Grandt
 
Dicas de palestra
Dicas de palestraDicas de palestra
Dicas de palestraFabio Akita
 
How to stop being Rails Developer
How to stop being Rails DeveloperHow to stop being Rails Developer
How to stop being Rails DeveloperIvan Nemytchenko
 
Build an App with JavaScript and jQuery (DTLA, 06/21)
Build an App with JavaScript and jQuery (DTLA, 06/21)Build an App with JavaScript and jQuery (DTLA, 06/21)
Build an App with JavaScript and jQuery (DTLA, 06/21)Thinkful
 
Django の認証処理実装パターン / Django Authentication Patterns
Django の認証処理実装パターン / Django Authentication PatternsDjango の認証処理実装パターン / Django Authentication Patterns
Django の認証処理実装パターン / Django Authentication PatternsMasashi Shibata
 
Autopilotnew money money $$
Autopilotnew money money $$Autopilotnew money money $$
Autopilotnew money money $$KamilBejm1
 
Pinned Sites IE 9 Lightup
Pinned Sites IE 9 LightupPinned Sites IE 9 Lightup
Pinned Sites IE 9 LightupWes Yanaga
 
Make money on autopilot
Make money on autopilotMake money on autopilot
Make money on autopilotDevon Taylor
 
Upstate CSCI 450 WebDev Chapter 9
Upstate CSCI 450 WebDev Chapter 9Upstate CSCI 450 WebDev Chapter 9
Upstate CSCI 450 WebDev Chapter 9DanWooster1
 
Autopilot method
Autopilot methodAutopilot method
Autopilot methodFartizy
 
See how i make 300$ daily
See how i make  300$ daily See how i make  300$ daily
See how i make 300$ daily vision2020166
 
Future of Web Development
Future of Web DevelopmentFuture of Web Development
Future of Web DevelopmentZeno Rocha
 
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django applicationDjangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django applicationMasashi Shibata
 
Make money without a Investment
Make money without a InvestmentMake money without a Investment
Make money without a InvestmentOmer Keceli
 

What's hot (20)

An Introduction to Wagtail
An Introduction to WagtailAn Introduction to Wagtail
An Introduction to Wagtail
 
Dicas de palestra
Dicas de palestraDicas de palestra
Dicas de palestra
 
Autopilot
AutopilotAutopilot
Autopilot
 
How to stop being Rails Developer
How to stop being Rails DeveloperHow to stop being Rails Developer
How to stop being Rails Developer
 
Build an App with JavaScript and jQuery (DTLA, 06/21)
Build an App with JavaScript and jQuery (DTLA, 06/21)Build an App with JavaScript and jQuery (DTLA, 06/21)
Build an App with JavaScript and jQuery (DTLA, 06/21)
 
Django の認証処理実装パターン / Django Authentication Patterns
Django の認証処理実装パターン / Django Authentication PatternsDjango の認証処理実装パターン / Django Authentication Patterns
Django の認証処理実装パターン / Django Authentication Patterns
 
Como ganar dinero gratis!
Como ganar dinero gratis!Como ganar dinero gratis!
Como ganar dinero gratis!
 
Autopilotnew money money $$
Autopilotnew money money $$Autopilotnew money money $$
Autopilotnew money money $$
 
Pinned Sites IE 9 Lightup
Pinned Sites IE 9 LightupPinned Sites IE 9 Lightup
Pinned Sites IE 9 Lightup
 
Dream dayppt
Dream daypptDream dayppt
Dream dayppt
 
Make money on autopilot
Make money on autopilotMake money on autopilot
Make money on autopilot
 
Upstate CSCI 450 WebDev Chapter 9
Upstate CSCI 450 WebDev Chapter 9Upstate CSCI 450 WebDev Chapter 9
Upstate CSCI 450 WebDev Chapter 9
 
Autopilot (1)
Autopilot (1)Autopilot (1)
Autopilot (1)
 
Doing less
Doing lessDoing less
Doing less
 
Autopilot method
Autopilot methodAutopilot method
Autopilot method
 
See how i make 300$ daily
See how i make  300$ daily See how i make  300$ daily
See how i make 300$ daily
 
Future of Web Development
Future of Web DevelopmentFuture of Web Development
Future of Web Development
 
How to disable text selection in blogger post
How to disable text selection in blogger postHow to disable text selection in blogger post
How to disable text selection in blogger post
 
Djangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django applicationDjangoアプリのデプロイに関するプラクティス / Deploy django application
Djangoアプリのデプロイに関するプラクティス / Deploy django application
 
Make money without a Investment
Make money without a InvestmentMake money without a Investment
Make money without a Investment
 

Viewers also liked

Using Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about itUsing Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about itKrasimir Tsonev
 
Javascript Everywhere From Nose To Tail
Javascript Everywhere From Nose To TailJavascript Everywhere From Nose To Tail
Javascript Everywhere From Nose To TailCliffano Subagio
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applicationsMilan Korsos
 
jQquerysummit - Large-scale JavaScript Application Architecture
jQquerysummit - Large-scale JavaScript Application Architecture jQquerysummit - Large-scale JavaScript Application Architecture
jQquerysummit - Large-scale JavaScript Application Architecture Jiby John
 
Reactjs - the good, the bad and the ugly
Reactjs - the good, the bad and the uglyReactjs - the good, the bad and the ugly
Reactjs - the good, the bad and the uglyKrasimir Tsonev
 
Unidirectional data flow
Unidirectional data flowUnidirectional data flow
Unidirectional data flowDenis Gorbunov
 

Viewers also liked (7)

Using Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about itUsing Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about it
 
Javascript Everywhere From Nose To Tail
Javascript Everywhere From Nose To TailJavascript Everywhere From Nose To Tail
Javascript Everywhere From Nose To Tail
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 
jQquerysummit - Large-scale JavaScript Application Architecture
jQquerysummit - Large-scale JavaScript Application Architecture jQquerysummit - Large-scale JavaScript Application Architecture
jQquerysummit - Large-scale JavaScript Application Architecture
 
Reactjs - the good, the bad and the ugly
Reactjs - the good, the bad and the uglyReactjs - the good, the bad and the ugly
Reactjs - the good, the bad and the ugly
 
Unidirectional data flow
Unidirectional data flowUnidirectional data flow
Unidirectional data flow
 
Modern Web Applications
Modern Web ApplicationsModern Web Applications
Modern Web Applications
 

Similar to 5 Tips for Writing Better JavaScript

Introduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKIntroduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKBrendan Lim
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsAviran Cohen
 
Using RequireJS with CakePHP
Using RequireJS with CakePHPUsing RequireJS with CakePHP
Using RequireJS with CakePHPStephen Young
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)Bramus Van Damme
 
JavaScript: DOM and jQuery
JavaScript: DOM and jQueryJavaScript: DOM and jQuery
JavaScript: DOM and jQuery維佋 唐
 
Hybrid App using WordPress
Hybrid App using WordPressHybrid App using WordPress
Hybrid App using WordPressHaim Michael
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applicationshchen1
 
Refactoring Large Web Applications with Backbone.js
Refactoring Large Web Applications with Backbone.jsRefactoring Large Web Applications with Backbone.js
Refactoring Large Web Applications with Backbone.jsStacy London
 
Refactor Large applications with Backbone
Refactor Large applications with BackboneRefactor Large applications with Backbone
Refactor Large applications with BackboneColdFusionConference
 
Refactor Large apps with Backbone
Refactor Large apps with BackboneRefactor Large apps with Backbone
Refactor Large apps with BackbonedevObjective
 
jQuery basics
jQuery basicsjQuery basics
jQuery basicsKamal S
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For ManagersAgileThought
 
Apache Cordova In Action
Apache Cordova In ActionApache Cordova In Action
Apache Cordova In ActionHazem Saleh
 

Similar to 5 Tips for Writing Better JavaScript (20)

Introduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDKIntroduction to Palm's Mojo SDK
Introduction to Palm's Mojo SDK
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
 
Using RequireJS with CakePHP
Using RequireJS with CakePHPUsing RequireJS with CakePHP
Using RequireJS with CakePHP
 
React, Flux and a little bit of Redux
React, Flux and a little bit of ReduxReact, Flux and a little bit of Redux
React, Flux and a little bit of Redux
 
Ruby For Startups
Ruby For StartupsRuby For Startups
Ruby For Startups
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)From Idea to App (or “How we roll at Small Town Heroes”)
From Idea to App (or “How we roll at Small Town Heroes”)
 
Training On Angular Js
Training On Angular JsTraining On Angular Js
Training On Angular Js
 
JavaScript: DOM and jQuery
JavaScript: DOM and jQueryJavaScript: DOM and jQuery
JavaScript: DOM and jQuery
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
Hybrid App using WordPress
Hybrid App using WordPressHybrid App using WordPress
Hybrid App using WordPress
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
 
Refactoring Large Web Applications with Backbone.js
Refactoring Large Web Applications with Backbone.jsRefactoring Large Web Applications with Backbone.js
Refactoring Large Web Applications with Backbone.js
 
Refactor Large applications with Backbone
Refactor Large applications with BackboneRefactor Large applications with Backbone
Refactor Large applications with Backbone
 
Refactor Large apps with Backbone
Refactor Large apps with BackboneRefactor Large apps with Backbone
Refactor Large apps with Backbone
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For Managers
 
Apache Cordova In Action
Apache Cordova In ActionApache Cordova In Action
Apache Cordova In Action
 
Mean stack Magics
Mean stack MagicsMean stack Magics
Mean stack Magics
 

Recently uploaded

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 

Recently uploaded (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 

5 Tips for Writing Better JavaScript

  • 1. 5 tips for writing better JavaScript Nael El Shawwa @naelshawwa nael.elshawwa@gmail.com http://about.me/naelshawwa
  • 2. Why learn better JS? Easy to hack things Easy to learn bad habits Rich web apps today heavily depend on JS 20,000 lines of JS
  • 3. Tip # 1: Namespacing function hello(){ var nael = {}; alert (“Hello”); } nael.hello = function(){ alert (“Hello”); }; Stop declaring global functions, minimize global variables
  • 4. Tip # 2: Events <a onclick=”doSomething();”> dojo.connect(link, "onclick", ui, Do Something ui.doSomething); </a> Don’t bind behaviour using markup attributes remember no global functions? harder to change behavior in a large app
  • 5. Tip # 3: Pub Sub startup: function(){ //some other startup code //subscribe to the event we will get back from the app dojo.subscribe("nael.controller.app.currentPosition", this, this.eventHandlers.updateMapCenter); //when Im done starting up, yell to the app controller saying Im ready dojo.publish("nael.controller.app.requests", ["getBrowserCoordinates"]); }, Publish / Subscribe results in cleaner more maintainable code
  • 6. Tip # 4: Templating <div class="infoWindowContainer" dojoattachpoint="infoWindow"> <h1>${title}</h1> </div> Don’t mix HTML with JavaScript Keep your markup in HTML and load via ajax ex. Dojo widget template system
  • 7. Tip # 5: Decorating var car = {}; car.drive = function(x){ this.position = this.position + x; } var flyingDecorator = {}; flyingDecorator.fly = function(x,y){ this.position = this.position + x; this.height = this.height + y; } Combine objects together when needed, don’t copy and paste new code into existing objects
  • 8. How to learn more? http://www.crockford.com/ - Douglas Crockford High Performance JavaScript - Nicholas Zakas Use & read into jQuery, Dojo, YUI code bases

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n