SlideShare a Scribd company logo
1 of 33
Download to read offline
User-centric Development in the
Early Days of jQuery
John Resig
Early JS Libraries
• in 2004-2009 the market was very saturated
• Dojo Toolkit, Prototype, MochiKit, YUI, MooTools, jQuery
• All scratched similar itches (simplifying DOM manipulation)
Assume All Code is Equal…
• Given that all the code is “good enough”
• How do you differentiate a library?
• You focus on all the things that “aren’t code”
• Most of these are user-centric and require intimate knowledge of
how the user will use your framework
You are your own worst enemy
• Virtually every time someone stops using your library it’s your own
fault
• Something was not communicated clearly enough
• You had bugs that the user couldn’t overcome
• There were issues that the user didn’t understand and couldn’t find a
good answer to
What it all boils down to…
• Can you help your users overcome the initial hurdles they overcome
- and are you giving them room, and the resources, to grow?
• Put yourself in your user’s shoes — empathize with them!
The First Day: Can this help me?H
om
epage
View
Tutorial
D
ow
nload
TryTutorial
Experim
ent
The First Month: Learning
Integration
APID
ocs
Tutorials
Experim
ent
Com
m
unityThe FirstYear: Growth
SecondApp
ExploreAPI
ExtendAPI
Read
Source
Contribute
The First Day: Can this help me?H
om
epage
View
Tutorial
D
ow
nload
TryTutorial
Experim
ent
The First Month: Learning
Integration
APID
ocs
Tutorials
Experim
ent
Com
m
unityThe FirstYear: Growth
SecondApp
ExploreAPI
ExtendAPI
Read
Source
Contribute
Lack of Empathy -> Attrition
Failure at any step costs your project another user.
Your project is your own worst enemy.
The First Day
“After spending less than 3 hours reading blog posts and perusing the
documentation I was able to do a lot more in a lot less time then ever
before. The huge community and neatly organized jQuery plugins make
me feel like a sucker for not having jQuery for my pet-project.”
http://aleembawany.com/2009/01/16/switching-from-prototype-to-jquery/
Homepage
• Set a good first impression
• Answer the questions:
• What is this?
• What can it do for me?
• Where can I go to learn more?
Download
• Make it super-easy, remove any barriers
• (We link straight to the source, no .zip)
Licensing
• Not a concern for more people
• A huge concern for a lot of corporate users
• Use the most-open license possible
• Fewest number of restrictions gives you the largest possible market
• We us the MIT license for jQuery
• “Leave my name on the source file”
Getting Started Tutorial
• Clear, focused
• Assume no background knowledge
Try the Tutorial
• …and subsequent experimentation
• All about code quality
• For JavaScript libraries: Make sure your code is seamless across
browsers
• For desktop apps: Is it truly cross-platform? Are there dependencies?
• The user should never be forced to ask for help in order to get started
• Asking for help “getting started” is a failure case on your end
Simplicity in API Design
• Simple APIs are king
• Users understand quicker
• Get started faster
• Become advanced quicker
The First Month
“Alright I am now really really into jQuery. I used to hate
javascript. WHAT HAS HAPPENED HERE? Javascript
people, speak to me.”
http://twitter.com/_ralph/status/1123503553
Community Resources
• Provides places for users to ask
questions
• jQuery:
• Mailing list -> Forum
• IRC Channel
• External:
• Stack Overflow
• Twitter
• Blogs
Monitor Your Community
• Make sure that everyone is getting the help that they need
• Evangelism Team, was run by Rey Bango
• Track all of the services they use
• Mailing lists, IRC, Blogs, Twitter
Service
Treat every user as a potential, future, contributor.
Service
• Mike Alsup and Michael Geary both became long-time contributors!
Tracking Twitter
• Track people talking about the code
• Look for people having trouble, asking questions
Answer Questions
• It takes a lot of time but sometimes it’s not worth it
• You never know you could be having trouble
Follow-up with Large Users
• Maintain a list of contacts with your large users
• Ping them every once in a while
• Make sure that they’re having a good experience
• They frequently forget to file a bugs - make sure that happens
API Documentation
• jQuery had API docs from the start (2006)
• Two other major libraries: Dojo, Prototype didn’t have any official
docs until 2007
• Clarity and usability of documentation is huge
API Example
Alternative Views
Learn More
• Tutorials and books
• Tutorials are short and drive home a point or single topic
• “Books” are more holistic and lead the reader from start to finish
Tutorials
Other “Secondary” Concerns
When Coding
Responsive Design
Internationalization
Accessibility
Performance/Bandwidth
Release Timing
Overview
• Help your users at every step of the way
• Track them and help the stragglers
• Help them grow and flourish
• Questions?
• jeresig@gmail.com
• http://ejohn.org/
• http://twitter.com/jeresig

More Related Content

More from jeresig

Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
jeresig
 

More from jeresig (20)

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024Top 10 Symfony Development Companies 2024
Top 10 Symfony Development Companies 2024
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 

User-centric Development in the Early Days of jQuery

  • 1. User-centric Development in the Early Days of jQuery John Resig
  • 2. Early JS Libraries • in 2004-2009 the market was very saturated • Dojo Toolkit, Prototype, MochiKit, YUI, MooTools, jQuery • All scratched similar itches (simplifying DOM manipulation)
  • 3. Assume All Code is Equal… • Given that all the code is “good enough” • How do you differentiate a library? • You focus on all the things that “aren’t code” • Most of these are user-centric and require intimate knowledge of how the user will use your framework
  • 4. You are your own worst enemy • Virtually every time someone stops using your library it’s your own fault • Something was not communicated clearly enough • You had bugs that the user couldn’t overcome • There were issues that the user didn’t understand and couldn’t find a good answer to
  • 5. What it all boils down to… • Can you help your users overcome the initial hurdles they overcome - and are you giving them room, and the resources, to grow? • Put yourself in your user’s shoes — empathize with them!
  • 6. The First Day: Can this help me?H om epage View Tutorial D ow nload TryTutorial Experim ent The First Month: Learning Integration APID ocs Tutorials Experim ent Com m unityThe FirstYear: Growth SecondApp ExploreAPI ExtendAPI Read Source Contribute
  • 7. The First Day: Can this help me?H om epage View Tutorial D ow nload TryTutorial Experim ent The First Month: Learning Integration APID ocs Tutorials Experim ent Com m unityThe FirstYear: Growth SecondApp ExploreAPI ExtendAPI Read Source Contribute
  • 8. Lack of Empathy -> Attrition Failure at any step costs your project another user. Your project is your own worst enemy.
  • 9. The First Day “After spending less than 3 hours reading blog posts and perusing the documentation I was able to do a lot more in a lot less time then ever before. The huge community and neatly organized jQuery plugins make me feel like a sucker for not having jQuery for my pet-project.” http://aleembawany.com/2009/01/16/switching-from-prototype-to-jquery/
  • 10. Homepage • Set a good first impression • Answer the questions: • What is this? • What can it do for me? • Where can I go to learn more?
  • 11.
  • 12.
  • 13. Download • Make it super-easy, remove any barriers • (We link straight to the source, no .zip)
  • 14. Licensing • Not a concern for more people • A huge concern for a lot of corporate users • Use the most-open license possible • Fewest number of restrictions gives you the largest possible market • We us the MIT license for jQuery • “Leave my name on the source file”
  • 15. Getting Started Tutorial • Clear, focused • Assume no background knowledge
  • 16. Try the Tutorial • …and subsequent experimentation • All about code quality • For JavaScript libraries: Make sure your code is seamless across browsers • For desktop apps: Is it truly cross-platform? Are there dependencies? • The user should never be forced to ask for help in order to get started • Asking for help “getting started” is a failure case on your end
  • 17. Simplicity in API Design • Simple APIs are king • Users understand quicker • Get started faster • Become advanced quicker
  • 18. The First Month “Alright I am now really really into jQuery. I used to hate javascript. WHAT HAS HAPPENED HERE? Javascript people, speak to me.” http://twitter.com/_ralph/status/1123503553
  • 19. Community Resources • Provides places for users to ask questions • jQuery: • Mailing list -> Forum • IRC Channel • External: • Stack Overflow • Twitter • Blogs
  • 20. Monitor Your Community • Make sure that everyone is getting the help that they need • Evangelism Team, was run by Rey Bango • Track all of the services they use • Mailing lists, IRC, Blogs, Twitter
  • 21. Service Treat every user as a potential, future, contributor.
  • 22. Service • Mike Alsup and Michael Geary both became long-time contributors!
  • 23. Tracking Twitter • Track people talking about the code • Look for people having trouble, asking questions
  • 24. Answer Questions • It takes a lot of time but sometimes it’s not worth it • You never know you could be having trouble
  • 25. Follow-up with Large Users • Maintain a list of contacts with your large users • Ping them every once in a while • Make sure that they’re having a good experience • They frequently forget to file a bugs - make sure that happens
  • 26. API Documentation • jQuery had API docs from the start (2006) • Two other major libraries: Dojo, Prototype didn’t have any official docs until 2007 • Clarity and usability of documentation is huge
  • 29. Learn More • Tutorials and books • Tutorials are short and drive home a point or single topic • “Books” are more holistic and lead the reader from start to finish
  • 31. Other “Secondary” Concerns When Coding Responsive Design Internationalization Accessibility Performance/Bandwidth
  • 33. Overview • Help your users at every step of the way • Track them and help the stragglers • Help them grow and flourish • Questions? • jeresig@gmail.com • http://ejohn.org/ • http://twitter.com/jeresig