SlideShare a Scribd company logo
1 of 45
Download to read offline
JavaScript Patterns and Practices
from the Salesforce Experts
The subtitle goes here
Kris Gray, salesforce.com SMTS
UI Architecture and Performance
@GrayJustise
Safe Harbor
 Safe harbor statement under the Private Securities Litigation Reform Act of 1995:

 This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if
 any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-
 looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of
 product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of
 management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments
 and customer contracts or use of our services.

 The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our
 service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth,
 interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated
 with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain,
 and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling
 non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the
 financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This
 documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.

 Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may
 not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently
 available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Who We Are
Whats special about salesforce.com?
Picture: salesforce.com with Other Top 9
Companies
1999
Single code base Application




+ Platform all in the cloud.
What have we learned?
The Good
The Good
The Bad



          Anti-Patterns
Functions.js
Functions.js


     Early
     Grouping
     Infrastructure
Rise of the
Functions.js     Libraries


     Early
     Grouping
     Infrastructure
Rise of the
Functions.js     Libraries


     Early                     Build
     Grouping                  Optimization
     Infrastructure            Tools
Prototype            ExtJS


            Accent


   jQuery             Dojo
Functions.js
  jQuery
 Prototype
  DOJO
   ExtJS
               ?
    +1
ANTI-PATTERN:



Excessive Library usage.
DEVELOPER PRODUCTIVITY



Establish a standard API for developer confidence.
Accent
ANTI-PATTERN:



Sacrificing maintainability for convenience.
Show Picture: Some Dropdown Code
Show Code: Accent usage of Eventing and Dom
interaction
Show Picture: Web Page + One main group and a
bunch of little groups.

Add red indicator to main group to show the first
option.
Show Picture: Web Page + One main group and a
bunch of little groups.

Add red indicator to a few of the little group to
show the second option.
Show Picture: Web Page + One main group and a
bunch of little groups.

Add another red group to indicate a 3rd option.
Show Picture: JSLibrary XML definition for
component group.
Show Picture: Code Collab + SmartBear Logo
ANTI-PATTERN:



No degraded user experience for accessible users.
Show Code: Use List item with role attribute.
Show Picture: Cadence Graph
DEVELOPER PRODUCTIVITY



Always know the performance of your application.
DEVELOPER PRODUCTIVITY



Make Testing Easier
DEVELOPER PRODUCTIVITY
• Give a clear defined way.
• Always know the performance
of your application.
• Make Testing Easier
UI Performance

 • Reduce duplication
 • Reduce web requests
 • Build up your infrastructure.
ANTI-PATTERNS

•Library Duplication
• No degraded user
experience for accessible
users.
• Sacrificing maintenance
for convenience.
Kris Gray        John Buchanan     David Brady      Jay Tanaka       Nathan McWilliams

Speaker Title,    Speaker Title,   Speaker Title,   Speaker Title,       Speaker Title,
@twittername      @twittername     @twittername     @twittername         @twittername
References

More Related Content

What's hot

Automating Deployment Between Orgs Using Git & Continuous Integration
Automating Deployment Between Orgs Using Git & Continuous IntegrationAutomating Deployment Between Orgs Using Git & Continuous Integration
Automating Deployment Between Orgs Using Git & Continuous IntegrationSebastian Wagner
 
From Sandbox To Production: An Introduction to Salesforce Release Management
From Sandbox To Production: An Introduction to Salesforce Release ManagementFrom Sandbox To Production: An Introduction to Salesforce Release Management
From Sandbox To Production: An Introduction to Salesforce Release ManagementSalesforce Developers
 
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJS
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJSNgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJS
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJSSalesforce Developers
 
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSalesforce Developers
 
The definitive guide to salesforce sandbox flosum
The definitive guide to salesforce sandbox flosumThe definitive guide to salesforce sandbox flosum
The definitive guide to salesforce sandbox flosumFlosum
 
Testing Web Apps and APIs (1)
Testing Web Apps and APIs (1)Testing Web Apps and APIs (1)
Testing Web Apps and APIs (1)AAron EvaNS
 
Spring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSpring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSalesforce Developers
 
Generically Call External Classes from Managed Packages
Generically Call External Classes from Managed PackagesGenerically Call External Classes from Managed Packages
Generically Call External Classes from Managed PackagesSalesforce Developers
 
Javascript Security and Lightning Locker Service
Javascript Security and Lightning Locker ServiceJavascript Security and Lightning Locker Service
Javascript Security and Lightning Locker ServiceSalesforce Developers
 
Salesforce.com API Series: Service Cloud Console Deep Dive
Salesforce.com API Series: Service Cloud Console Deep DiveSalesforce.com API Series: Service Cloud Console Deep Dive
Salesforce.com API Series: Service Cloud Console Deep DiveSalesforce Developers
 
Salesforce DX Pilot Product Overview
Salesforce DX Pilot Product OverviewSalesforce DX Pilot Product Overview
Salesforce DX Pilot Product OverviewSalesforce Partners
 
Visualforce: Using ActionFunction vs. RemoteAction
Visualforce: Using ActionFunction vs. RemoteActionVisualforce: Using ActionFunction vs. RemoteAction
Visualforce: Using ActionFunction vs. RemoteActionSalesforce Developers
 
Performance Monitoring and Testing in the Salesforce Cloud
Performance Monitoring and Testing in the Salesforce CloudPerformance Monitoring and Testing in the Salesforce Cloud
Performance Monitoring and Testing in the Salesforce CloudSalesforce Developers
 
Leverage StandardSetController in Apex and Visualforce
Leverage StandardSetController in Apex and VisualforceLeverage StandardSetController in Apex and Visualforce
Leverage StandardSetController in Apex and VisualforceSalesforce Developers
 
Srecon18americas lightning talk: Auto-Cascading Security Updates Through Dock...
Srecon18americas lightning talk: Auto-Cascading Security Updates Through Dock...Srecon18americas lightning talk: Auto-Cascading Security Updates Through Dock...
Srecon18americas lightning talk: Auto-Cascading Security Updates Through Dock...Andrey Falko
 
What is Web Testing?
What is Web Testing?   What is Web Testing?
What is Web Testing? QA InfoTech
 
Laws of test automation framework
Laws of test automation frameworkLaws of test automation framework
Laws of test automation frameworkvodqancr
 
Simplify your code with Salesforce DX and module development
Simplify your code with Salesforce DX and module developmentSimplify your code with Salesforce DX and module development
Simplify your code with Salesforce DX and module developmentSalesforce Developers
 

What's hot (20)

Under the Hood of Sandbox Templates
Under the Hood of Sandbox TemplatesUnder the Hood of Sandbox Templates
Under the Hood of Sandbox Templates
 
Automating Deployment Between Orgs Using Git & Continuous Integration
Automating Deployment Between Orgs Using Git & Continuous IntegrationAutomating Deployment Between Orgs Using Git & Continuous Integration
Automating Deployment Between Orgs Using Git & Continuous Integration
 
From Sandbox To Production: An Introduction to Salesforce Release Management
From Sandbox To Production: An Introduction to Salesforce Release ManagementFrom Sandbox To Production: An Introduction to Salesforce Release Management
From Sandbox To Production: An Introduction to Salesforce Release Management
 
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJS
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJSNgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJS
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJS
 
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview Webinar
 
The definitive guide to salesforce sandbox flosum
The definitive guide to salesforce sandbox flosumThe definitive guide to salesforce sandbox flosum
The definitive guide to salesforce sandbox flosum
 
Testing Web Apps and APIs (1)
Testing Web Apps and APIs (1)Testing Web Apps and APIs (1)
Testing Web Apps and APIs (1)
 
Spring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSpring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview Webinar
 
Generically Call External Classes from Managed Packages
Generically Call External Classes from Managed PackagesGenerically Call External Classes from Managed Packages
Generically Call External Classes from Managed Packages
 
Javascript Security and Lightning Locker Service
Javascript Security and Lightning Locker ServiceJavascript Security and Lightning Locker Service
Javascript Security and Lightning Locker Service
 
Salesforce.com API Series: Service Cloud Console Deep Dive
Salesforce.com API Series: Service Cloud Console Deep DiveSalesforce.com API Series: Service Cloud Console Deep Dive
Salesforce.com API Series: Service Cloud Console Deep Dive
 
Salesforce DX Pilot Product Overview
Salesforce DX Pilot Product OverviewSalesforce DX Pilot Product Overview
Salesforce DX Pilot Product Overview
 
Visualforce: Using ActionFunction vs. RemoteAction
Visualforce: Using ActionFunction vs. RemoteActionVisualforce: Using ActionFunction vs. RemoteAction
Visualforce: Using ActionFunction vs. RemoteAction
 
Performance Monitoring and Testing in the Salesforce Cloud
Performance Monitoring and Testing in the Salesforce CloudPerformance Monitoring and Testing in the Salesforce Cloud
Performance Monitoring and Testing in the Salesforce Cloud
 
Leverage StandardSetController in Apex and Visualforce
Leverage StandardSetController in Apex and VisualforceLeverage StandardSetController in Apex and Visualforce
Leverage StandardSetController in Apex and Visualforce
 
Srecon18americas lightning talk: Auto-Cascading Security Updates Through Dock...
Srecon18americas lightning talk: Auto-Cascading Security Updates Through Dock...Srecon18americas lightning talk: Auto-Cascading Security Updates Through Dock...
Srecon18americas lightning talk: Auto-Cascading Security Updates Through Dock...
 
What is Web Testing?
What is Web Testing?   What is Web Testing?
What is Web Testing?
 
Gowtham_resume
Gowtham_resumeGowtham_resume
Gowtham_resume
 
Laws of test automation framework
Laws of test automation frameworkLaws of test automation framework
Laws of test automation framework
 
Simplify your code with Salesforce DX and module development
Simplify your code with Salesforce DX and module developmentSimplify your code with Salesforce DX and module development
Simplify your code with Salesforce DX and module development
 

Viewers also liked

Preparing for Lightning: Replacing URL Hacks with Actions
Preparing for Lightning: Replacing URL Hacks with ActionsPreparing for Lightning: Replacing URL Hacks with Actions
Preparing for Lightning: Replacing URL Hacks with ActionsMike White
 
Lightning Components - Advanced Features
Lightning Components - Advanced FeaturesLightning Components - Advanced Features
Lightning Components - Advanced FeaturesSalesforce Developers
 
Lightning Components Introduction
Lightning Components IntroductionLightning Components Introduction
Lightning Components IntroductionDurgesh Dhoot
 
Lightning Component - Components, Actions and Events
Lightning Component - Components, Actions and EventsLightning Component - Components, Actions and Events
Lightning Component - Components, Actions and EventsDurgesh Dhoot
 
Mastering the Lightning Framework - Part 2
Mastering the Lightning Framework - Part 2Mastering the Lightning Framework - Part 2
Mastering the Lightning Framework - Part 2Salesforce Developers
 
Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1Salesforce Developers
 
Roadmap Lightning Updates (November 3, 2016)
Roadmap Lightning Updates (November 3, 2016)Roadmap Lightning Updates (November 3, 2016)
Roadmap Lightning Updates (November 3, 2016)Salesforce Partners
 

Viewers also liked (9)

Preparing for Lightning: Replacing URL Hacks with Actions
Preparing for Lightning: Replacing URL Hacks with ActionsPreparing for Lightning: Replacing URL Hacks with Actions
Preparing for Lightning: Replacing URL Hacks with Actions
 
Lightning Components Workshop
Lightning Components WorkshopLightning Components Workshop
Lightning Components Workshop
 
Lightning Components - Advanced Features
Lightning Components - Advanced FeaturesLightning Components - Advanced Features
Lightning Components - Advanced Features
 
Advanced Lightning Components
Advanced Lightning ComponentsAdvanced Lightning Components
Advanced Lightning Components
 
Lightning Components Introduction
Lightning Components IntroductionLightning Components Introduction
Lightning Components Introduction
 
Lightning Component - Components, Actions and Events
Lightning Component - Components, Actions and EventsLightning Component - Components, Actions and Events
Lightning Component - Components, Actions and Events
 
Mastering the Lightning Framework - Part 2
Mastering the Lightning Framework - Part 2Mastering the Lightning Framework - Part 2
Mastering the Lightning Framework - Part 2
 
Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1Mastering the Lightning Framework - Part 1
Mastering the Lightning Framework - Part 1
 
Roadmap Lightning Updates (November 3, 2016)
Roadmap Lightning Updates (November 3, 2016)Roadmap Lightning Updates (November 3, 2016)
Roadmap Lightning Updates (November 3, 2016)
 

Similar to JavaScript Patterns and Practices from the Salesforce Experts

Salesforce Design System for Native Apps
Salesforce Design System for Native AppsSalesforce Design System for Native Apps
Salesforce Design System for Native AppsSalesforce Developers
 
Introduction to Mulesoft and Salesforce Spring '19 release features
Introduction to Mulesoft and Salesforce Spring '19 release featuresIntroduction to Mulesoft and Salesforce Spring '19 release features
Introduction to Mulesoft and Salesforce Spring '19 release featuresBordeaux Salesforce Developer Group
 
CloudOps evening presentation from Salesforce.com
CloudOps evening presentation from Salesforce.comCloudOps evening presentation from Salesforce.com
CloudOps evening presentation from Salesforce.comAlistair Croll
 
Enterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsSalesforce Developers
 
Modern App Dev: Modular Development Strategies
Modern App Dev: Modular Development StrategiesModern App Dev: Modular Development Strategies
Modern App Dev: Modular Development StrategiesSalesforce Developers
 
Sandboxes: The Future of App Development by Evan Barnet & Pam Barnet
Sandboxes: The Future of App Development by Evan Barnet & Pam BarnetSandboxes: The Future of App Development by Evan Barnet & Pam Barnet
Sandboxes: The Future of App Development by Evan Barnet & Pam BarnetSalesforce Admins
 
Building a Java Play! App on Heroku using Database.com
Building a Java Play! App on Heroku using Database.comBuilding a Java Play! App on Heroku using Database.com
Building a Java Play! App on Heroku using Database.comSalesforce Developers
 
Building Command-line Tools with the Tooling API
Building Command-line Tools with the Tooling APIBuilding Command-line Tools with the Tooling API
Building Command-line Tools with the Tooling APIJeff Douglas
 
Understanding Multitenancy and the Architecture of the Salesforce Platform
Understanding Multitenancy and the Architecture of the Salesforce PlatformUnderstanding Multitenancy and the Architecture of the Salesforce Platform
Understanding Multitenancy and the Architecture of the Salesforce PlatformSalesforce Developers
 
Building einstein analytics apps uk-compressed
Building einstein analytics apps   uk-compressedBuilding einstein analytics apps   uk-compressed
Building einstein analytics apps uk-compressedrikkehovgaard
 
Lightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE EvolvedLightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE EvolvedSalesforce Developers
 
How to Create a Scalable System using Force.com, Heroku and Iron.io
How to Create a Scalable System using Force.com, Heroku and Iron.ioHow to Create a Scalable System using Force.com, Heroku and Iron.io
How to Create a Scalable System using Force.com, Heroku and Iron.ioTravis Reeder
 
Sharing APIs at Scale for a Great Developer Experience
Sharing APIs at Scale for a Great Developer ExperienceSharing APIs at Scale for a Great Developer Experience
Sharing APIs at Scale for a Great Developer ExperiencePostman
 
Salesforce lightning design -components for CRM
Salesforce lightning design -components for CRMSalesforce lightning design -components for CRM
Salesforce lightning design -components for CRMyahmad111
 
TrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsTrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsSalesforce Developers
 
Understanding the Salesforce Architecture: How We Do the Magic We Do
Understanding the Salesforce Architecture: How We Do the Magic We DoUnderstanding the Salesforce Architecture: How We Do the Magic We Do
Understanding the Salesforce Architecture: How We Do the Magic We DoSalesforce Developers
 
Transition to the Lightning Experience: Pro Tips, Tools and a Transition Stra...
Transition to the Lightning Experience: Pro Tips, Tools and a Transition Stra...Transition to the Lightning Experience: Pro Tips, Tools and a Transition Stra...
Transition to the Lightning Experience: Pro Tips, Tools and a Transition Stra...Shell Black
 

Similar to JavaScript Patterns and Practices from the Salesforce Experts (20)

Salesforce Design System for Native Apps
Salesforce Design System for Native AppsSalesforce Design System for Native Apps
Salesforce Design System for Native Apps
 
Force.com Friday - Intro to Visualforce
Force.com Friday - Intro to VisualforceForce.com Friday - Intro to Visualforce
Force.com Friday - Intro to Visualforce
 
Introduction to Mulesoft and Salesforce Spring '19 release features
Introduction to Mulesoft and Salesforce Spring '19 release featuresIntroduction to Mulesoft and Salesforce Spring '19 release features
Introduction to Mulesoft and Salesforce Spring '19 release features
 
CloudOps evening presentation from Salesforce.com
CloudOps evening presentation from Salesforce.comCloudOps evening presentation from Salesforce.com
CloudOps evening presentation from Salesforce.com
 
Enterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web Components
 
Modern App Dev: Modular Development Strategies
Modern App Dev: Modular Development StrategiesModern App Dev: Modular Development Strategies
Modern App Dev: Modular Development Strategies
 
Sandboxes: The Future of App Development by Evan Barnet & Pam Barnet
Sandboxes: The Future of App Development by Evan Barnet & Pam BarnetSandboxes: The Future of App Development by Evan Barnet & Pam Barnet
Sandboxes: The Future of App Development by Evan Barnet & Pam Barnet
 
Building a Java Play! App on Heroku using Database.com
Building a Java Play! App on Heroku using Database.comBuilding a Java Play! App on Heroku using Database.com
Building a Java Play! App on Heroku using Database.com
 
Building Command-line Tools with the Tooling API
Building Command-line Tools with the Tooling APIBuilding Command-line Tools with the Tooling API
Building Command-line Tools with the Tooling API
 
Understanding Multitenancy and the Architecture of the Salesforce Platform
Understanding Multitenancy and the Architecture of the Salesforce PlatformUnderstanding Multitenancy and the Architecture of the Salesforce Platform
Understanding Multitenancy and the Architecture of the Salesforce Platform
 
An Introduction to Lightning Web Components
An Introduction to Lightning Web ComponentsAn Introduction to Lightning Web Components
An Introduction to Lightning Web Components
 
Building einstein analytics apps uk-compressed
Building einstein analytics apps   uk-compressedBuilding einstein analytics apps   uk-compressed
Building einstein analytics apps uk-compressed
 
Lightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE EvolvedLightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE Evolved
 
Winter'18 Developer Preview Webinar
Winter'18 Developer Preview WebinarWinter'18 Developer Preview Webinar
Winter'18 Developer Preview Webinar
 
How to Create a Scalable System using Force.com, Heroku and Iron.io
How to Create a Scalable System using Force.com, Heroku and Iron.ioHow to Create a Scalable System using Force.com, Heroku and Iron.io
How to Create a Scalable System using Force.com, Heroku and Iron.io
 
Sharing APIs at Scale for a Great Developer Experience
Sharing APIs at Scale for a Great Developer ExperienceSharing APIs at Scale for a Great Developer Experience
Sharing APIs at Scale for a Great Developer Experience
 
Salesforce lightning design -components for CRM
Salesforce lightning design -components for CRMSalesforce lightning design -components for CRM
Salesforce lightning design -components for CRM
 
TrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsTrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer Highlights
 
Understanding the Salesforce Architecture: How We Do the Magic We Do
Understanding the Salesforce Architecture: How We Do the Magic We DoUnderstanding the Salesforce Architecture: How We Do the Magic We Do
Understanding the Salesforce Architecture: How We Do the Magic We Do
 
Transition to the Lightning Experience: Pro Tips, Tools and a Transition Stra...
Transition to the Lightning Experience: Pro Tips, Tools and a Transition Stra...Transition to the Lightning Experience: Pro Tips, Tools and a Transition Stra...
Transition to the Lightning Experience: Pro Tips, Tools and a Transition Stra...
 

More from Salesforce Developers

Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSalesforce Developers
 
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceSalesforce Developers
 
Local development with Open Source Base Components
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base ComponentsSalesforce Developers
 
TrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsSalesforce Developers
 
Why developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaSalesforce Developers
 
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentSalesforce Developers
 
CodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsSalesforce Developers
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and TestingSalesforce Developers
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilitySalesforce Developers
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce dataSalesforce Developers
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionSalesforce Developers
 
Migrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPMigrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPSalesforce Developers
 
Scale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceSalesforce Developers
 
Replicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureSalesforce Developers
 
Modern Development with Salesforce DX
Modern Development with Salesforce DXModern Development with Salesforce DX
Modern Development with Salesforce DXSalesforce Developers
 
Integrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectSalesforce Developers
 

More from Salesforce Developers (20)

Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce Developers
 
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component Performance
 
Local development with Open Source Base Components
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base Components
 
TrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer Highlights
 
Why developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX India
 
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local Development
 
CodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web Components
 
Live coding with LWC
Live coding with LWCLive coding with LWC
Live coding with LWC
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and Testing
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura Interoperability
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce data
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An Introduction
 
Migrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPMigrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCP
 
Scale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in Salesforce
 
Replicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data Capture
 
Modern Development with Salesforce DX
Modern Development with Salesforce DXModern Development with Salesforce DX
Modern Development with Salesforce DX
 
Get Into Lightning Flow Development
Get Into Lightning Flow DevelopmentGet Into Lightning Flow Development
Get Into Lightning Flow Development
 
Integrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS Connect
 
Introduction to MuleSoft
Introduction to MuleSoftIntroduction to MuleSoft
Introduction to MuleSoft
 
Dreamforce Developer Recap
Dreamforce Developer RecapDreamforce Developer Recap
Dreamforce Developer Recap
 

JavaScript Patterns and Practices from the Salesforce Experts

  • 1. JavaScript Patterns and Practices from the Salesforce Experts The subtitle goes here Kris Gray, salesforce.com SMTS UI Architecture and Performance @GrayJustise
  • 2. Safe Harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward- looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
  • 4.
  • 5. Whats special about salesforce.com?
  • 6. Picture: salesforce.com with Other Top 9 Companies
  • 8. Single code base Application + Platform all in the cloud.
  • 9. What have we learned?
  • 12. The Bad Anti-Patterns
  • 14. Functions.js Early Grouping Infrastructure
  • 15. Rise of the Functions.js Libraries Early Grouping Infrastructure
  • 16. Rise of the Functions.js Libraries Early Build Grouping Optimization Infrastructure Tools
  • 17. Prototype ExtJS Accent jQuery Dojo
  • 18. Functions.js jQuery Prototype DOJO ExtJS ? +1
  • 20. DEVELOPER PRODUCTIVITY Establish a standard API for developer confidence.
  • 22.
  • 24.
  • 25. Show Picture: Some Dropdown Code
  • 26. Show Code: Accent usage of Eventing and Dom interaction
  • 27. Show Picture: Web Page + One main group and a bunch of little groups. Add red indicator to main group to show the first option.
  • 28. Show Picture: Web Page + One main group and a bunch of little groups. Add red indicator to a few of the little group to show the second option.
  • 29. Show Picture: Web Page + One main group and a bunch of little groups. Add another red group to indicate a 3rd option.
  • 30. Show Picture: JSLibrary XML definition for component group.
  • 31. Show Picture: Code Collab + SmartBear Logo
  • 32. ANTI-PATTERN: No degraded user experience for accessible users.
  • 33. Show Code: Use List item with role attribute.
  • 34.
  • 36. DEVELOPER PRODUCTIVITY Always know the performance of your application.
  • 38.
  • 39.
  • 40. DEVELOPER PRODUCTIVITY • Give a clear defined way. • Always know the performance of your application. • Make Testing Easier
  • 41. UI Performance • Reduce duplication • Reduce web requests • Build up your infrastructure.
  • 42. ANTI-PATTERNS •Library Duplication • No degraded user experience for accessible users. • Sacrificing maintenance for convenience.
  • 43. Kris Gray John Buchanan David Brady Jay Tanaka Nathan McWilliams Speaker Title, Speaker Title, Speaker Title, Speaker Title, Speaker Title, @twittername @twittername @twittername @twittername @twittername
  • 44.