SlideShare uma empresa Scribd logo
1 de 54
Write Better JavaScript Kevin Whinnery Engineer and Platform Evangelist Appcelerator, Inc. @kevinwhinnery
Kevin Whinnery Engineer and Platform Evangelist Appcelerator since 2008 Husband and father of three: Web developer and JavaScript slinger turned mobile and desktop hacker. http://kevinwhinnery.com http://twitter.com/kevinwhinnery http://github.com/kwhinnery
Agenda ,[object Object]
Object-Oriented Programming in JavaScript
Useful JavaScript Patterns, Tricks, and Style Guidelines
JavaScript in Titanium Mobile
Further Reading,[object Object]
“JavaScript is the incredibly hot girl at the party that brings her loser boyfriend DOM” Tom Robinson Founder, 280 North
JavaScript – What is it good for? ,[object Object]
Object-Oriented (Prototypical Inheritance)… or not
Flexible Objects
First-Class Functions
Built for event-driven UI,[object Object]
Covers the good and bad
I use patterns from this book every time I write JS
Buy/read/love,[object Object]
Global Variables  app.js some/library.js
Truthy and Falsy ,[object Object]
false
0
‘’
null
undefined
NaN
Truthy Values:
Everything else
Almost always, you want === and !==,[object Object]
typeof is a liar
there’s more (http://wtfjs.com ),  but let’s skip to…
The Good Parts
Expressive Object Literals
Easy Object Serialization
First Class Functions
Closures
Flexible Objects
Duck Typing
…plus it’s EVERYWHERE. one could develop all kinds of software applications with nothing else.
OOP! (There it is!)
JavaScript has Prototypal Inheritance, which creates new copies of objects from an existing object (the prototype) there’s much more to it than this, but we’ll keep it mostly high level…
Object Constructors * The capital first letter is by convention, not requirement.
Object Prototype
we could have also wrote…
…but object instantiation using the prototype to define functions/properties is faster. http://ejohn.org/blog/simple-class-instantiation mentions this and other methods for…
Inheritance (One Approach)
JavaScript doesn’t support multiple inheritance, but there are multiple libraries that handle that and more, including underscore.js http://documentcloud.github.com/underscore/#extend
Parasitic Inheritance  ,[object Object]
Add new features and functionality to it (the parasites, if you will)
Pass it off as an instance of a new object
Slightly slower than .prototype but more flexible (and inescapable in certain cases),[object Object]
Useful Tricks
Self-Calling Function ,[object Object]
Self-calling function provides encapsulation
Both forms at right are valid, second is preferred,[object Object]
Uses functional scope to provide a public interface to a module

Mais conteúdo relacionado

Mais procurados

Automated Testing Overview
Automated Testing OverviewAutomated Testing Overview
Automated Testing Overview
antsh
 
Automated UI Testing Done Right (QMSDNUG)
Automated UI Testing Done Right (QMSDNUG)Automated UI Testing Done Right (QMSDNUG)
Automated UI Testing Done Right (QMSDNUG)
Mehdi Khalili
 

Mais procurados (20)

SONY BBS - React Native
SONY BBS - React NativeSONY BBS - React Native
SONY BBS - React Native
 
Experiences building apps with React Native @UtrechtJS May 2016
Experiences building apps with React Native @UtrechtJS May 2016Experiences building apps with React Native @UtrechtJS May 2016
Experiences building apps with React Native @UtrechtJS May 2016
 
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
 
Building testable chrome extensions
Building testable chrome extensionsBuilding testable chrome extensions
Building testable chrome extensions
 
Selenium Camp 2016 - Kiev, Ukraine
Selenium Camp 2016 -  Kiev, UkraineSelenium Camp 2016 -  Kiev, Ukraine
Selenium Camp 2016 - Kiev, Ukraine
 
Jbossworld Presentation
Jbossworld PresentationJbossworld Presentation
Jbossworld Presentation
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
 
React Native
React NativeReact Native
React Native
 
Mobile Web Test Automation: to the Desktop! - Alexander Bayandin - Mobile Tes...
Mobile Web Test Automation: to the Desktop! - Alexander Bayandin - Mobile Tes...Mobile Web Test Automation: to the Desktop! - Alexander Bayandin - Mobile Tes...
Mobile Web Test Automation: to the Desktop! - Alexander Bayandin - Mobile Tes...
 
Automated Testing Overview
Automated Testing OverviewAutomated Testing Overview
Automated Testing Overview
 
Introduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / GraphsIntroduction to React Native & Rendering Charts / Graphs
Introduction to React Native & Rendering Charts / Graphs
 
Making cross browser tests beautiful
Making cross browser tests beautifulMaking cross browser tests beautiful
Making cross browser tests beautiful
 
Automated UI Testing Done Right (QMSDNUG)
Automated UI Testing Done Right (QMSDNUG)Automated UI Testing Done Right (QMSDNUG)
Automated UI Testing Done Right (QMSDNUG)
 
TiConnect: Memory Management in Titanium apps
TiConnect: Memory Management in Titanium appsTiConnect: Memory Management in Titanium apps
TiConnect: Memory Management in Titanium apps
 
How to Get Started with Cypress
How to Get Started with CypressHow to Get Started with Cypress
How to Get Started with Cypress
 
Workshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UXWorkshop Ionic Framework - CC FE & UX
Workshop Ionic Framework - CC FE & UX
 
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps TipsPhonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
 
Titanium appcelerator best practices
Titanium appcelerator best practicesTitanium appcelerator best practices
Titanium appcelerator best practices
 
Continuous Testing Meets the Classroom at Code.org
Continuous Testing Meets the Classroom at Code.orgContinuous Testing Meets the Classroom at Code.org
Continuous Testing Meets the Classroom at Code.org
 
Selenium conference, 2016
Selenium conference, 2016Selenium conference, 2016
Selenium conference, 2016
 

Semelhante a Write Better JavaScript

Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17
Jared Faris
 
Your java script library
Your java script libraryYour java script library
Your java script library
jasfog
 

Semelhante a Write Better JavaScript (20)

Kevin Whinnery: Write Better JavaScript
Kevin Whinnery: Write Better JavaScriptKevin Whinnery: Write Better JavaScript
Kevin Whinnery: Write Better JavaScript
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
 
Javascript spaghetti stirtrek_5_17
Javascript  spaghetti stirtrek_5_17Javascript  spaghetti stirtrek_5_17
Javascript spaghetti stirtrek_5_17
 
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017   ember.js - escape the javascript fatigueNode.js meetup 17.05.2017   ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
 
Java2 platform
Java2 platformJava2 platform
Java2 platform
 
JavaScript Miller Columns
JavaScript Miller ColumnsJavaScript Miller Columns
JavaScript Miller Columns
 
All of Javascript
All of JavascriptAll of Javascript
All of Javascript
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
 
Framework engineering JCO 2011
Framework engineering JCO 2011Framework engineering JCO 2011
Framework engineering JCO 2011
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one week
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - GeekOut 2016
 
Your java script library
Your java script libraryYour java script library
Your java script library
 
Introduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with ClojurescriptIntroduction to Functional Reactive Web with Clojurescript
Introduction to Functional Reactive Web with Clojurescript
 
Google App Engine for Java
Google App Engine for JavaGoogle App Engine for Java
Google App Engine for Java
 
Rethinking Best Practices
Rethinking Best PracticesRethinking Best Practices
Rethinking Best Practices
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého Schizma
 
Lunch and learn as3_frameworks
Lunch and learn as3_frameworksLunch and learn as3_frameworks
Lunch and learn as3_frameworks
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - DOSUG February 2016
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
 
Robotlegs on Top of Gaia
Robotlegs on Top of GaiaRobotlegs on Top of Gaia
Robotlegs on Top of Gaia
 

Mais de Kevin Whinnery (10)

Get Pumped for the HTML 5 Gamepad API
Get Pumped for the HTML 5 Gamepad APIGet Pumped for the HTML 5 Gamepad API
Get Pumped for the HTML 5 Gamepad API
 
Designing Modules for the Browser and Node with Browserify
Designing Modules for the Browser and Node with BrowserifyDesigning Modules for the Browser and Node with Browserify
Designing Modules for the Browser and Node with Browserify
 
Second Screen Apps with the Google Cast SDK
Second Screen Apps with the Google Cast SDKSecond Screen Apps with the Google Cast SDK
Second Screen Apps with the Google Cast SDK
 
Let's Write Better Node Modules
Let's Write Better Node ModulesLet's Write Better Node Modules
Let's Write Better Node Modules
 
Taking UX to the Real World
Taking UX to the Real WorldTaking UX to the Real World
Taking UX to the Real World
 
Best Practices for Cross-Platform Native Applications
Best Practices for Cross-Platform Native ApplicationsBest Practices for Cross-Platform Native Applications
Best Practices for Cross-Platform Native Applications
 
Titanium Overview (Mobile March 2011)
Titanium Overview (Mobile March 2011)Titanium Overview (Mobile March 2011)
Titanium Overview (Mobile March 2011)
 
What's New in Titanium 1.5
What's New in Titanium 1.5What's New in Titanium 1.5
What's New in Titanium 1.5
 
Whats New in Titanium 0.7
Whats New in Titanium 0.7Whats New in Titanium 0.7
Whats New in Titanium 0.7
 
Getting Started with Titanium
Getting Started with TitaniumGetting Started with Titanium
Getting Started with Titanium
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
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...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
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?
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 

Write Better JavaScript

Notas do Editor

  1. A closure is a function, with a referencing environment for the free variables (arguments) to that function – it provides the function with a scope, that will live on for the life of the closure. It’s also the only way to create scope in JavaScript.