DevX: Where developer tools meet UX
Product, Design and Development
December 12, 2018
User Experience (UX)
“The overall experience of a person using a
product such as a website or computer application,
especially in terms of how easy or pleasing it is to
use.”
2
User Interface (UI) != User Experience (UX)
3
Unattractive
but highly
effective.
Beautiful,
Iconic… and
impossible to
pour.
Usability != User Experience (UX)
4
Usability is achieving a goal
with the maximum:
1. Effectiveness
2. Efficiency
3. Satisfaction
UX encompasses the ENTIRE
experience a user has while
interacting with a product or
service.
Was it delightful?
Will the user return?
Science Art
UX is a journey
UX covers the user’s
experience during their
entire journey from the very
first interaction with a
product to their last.
Along the way, they pass
through lots of interfaces.
5
Step 1: The platform’s customers are developers.
Step 2: The developer’s customers are end-users.
To be effective, platforms have to win them both.
Platforms have 2-step product/market fit
6
Designing for end-users is sexy
7
Designing for developers is hard
8
DevX (also called DX) is the subset of user experience
specifically addressing the experience of developers.
Developers are sufficiently different -- and important -- that
it’s worth specifically distinguishing them from end-users.
This is what we’ll discuss today.
Developer Experience (DevX)
9
Today’s Topics
1. Components of DevX: What Developer
Experience is and its key concepts.
2. Case Studies of DevX: A walkthrough of initial
interactions with the EOS and Ethereum
platforms.
10
About Me
I’m Erik Trautman and I run operations at NEAR Protocol, a
scalable blockchain and smart contract platform on a mission to
bring the technology to a billion devices around the world.
I also care deeply about creating great products, educating people
and building rich ecosystems.
My background is in markets, open-source software development,
startups and education. And general nerdery.
11
Roadmap
1. Components of DevX
2. Case Study: Ethereum
3. Case Study: EOS
4. Analysis
12
Roadmap
1. Components of DevX
2. Case Study: Ethereum
3. Case Study: EOS
4. Analysis
13
Who is our user?
An experienced developer
comfortable with:
1. Command line
2. Web languages
3. Version control
4. Deployment
Reading documentation is
familiar.
14
Key differences between DevX and end-user UX
Developers operate across multiple tools simultaneously (eg text editor,
CLI, webpages, etc) so you can’t control the whole experience.
Creating an app is not a defined purchase or use case but rather a
creative process of solving problems and writing code.
Developer environments are highly customized and might include dozens
of different setups for command line, OS, IDE and even keyboards.
The common interface is TEXT.
15
Blockchain system architecture: How DApps work
16
● Blockchain
● Nodes
● Wallets
● Libraries
● APIs
● ...
Experiential touchpoints for developers
17
Developing on a single platform encompasses a lot of touchpoints:
1. API Design: Naming, abstractions, organization, invocation
2. Documentation: API reference, tutorials, demos
3. Tooling: Language, CLI, text editor, test frameworks, build tools,
logging/debugging, instrumentation (block explorer), runtimes
4. Support: Libraries, scaffolding, forums, chat, blog posts
DApps require a constellation of tools
18
...unfortunately, dev tools, education and support are
most often developed with power users in mind first,
preventing new users from ramping up.
We’ll focus on new users for now.
New users != power users
19
Assumption: You’ve just heard of FOOchain and want to test it out.
1. Gather Info: “Learn FOOchain”, “foochain quickstart”, etc.
2. Install: Download the tools and verify it’s all set up
3. Develop: Write that “Hello, world” app
4. Deploy: Try to get it up on TestNet
5. Productionalize: Add more functionality, libraries, testing, etc.
Launch!
Interrupt: Errors! Support! Conceptual holes! Broken docs!
Typical flow for a new project
20
Roadmap
1. Components of DevX
2. Case Study: Ethereum
3. Case Study: EOS
4. Analysis
21
Developer Jane (experienced but not a blockchain developer) just found
out about Ethereum and wants to give it a shot.
She found her way to deploying Hello, World.
Case study: Ethereum
22
“Why is there nothing
affiliated with Ethereum?”
Searching for tutorials
23
“So far, so good, except
developing on mostly
non-ethereum 3rd party
packages feels slightly
sketchy”
Install dependencies
24
“This feels scary. I want to quickly try
out a dev environment, and it’s now
telling me to do a complicated
password management procedure
where if I fail, somebody can steal all
my ether. I am considering giving up
at this point!”
Install Metamask
25
“Migrating*? What am I
migrating? I don’t have an
existing app! Who came
up with this vocabulary?”
“This tutorial was
published yesterday and
is already out of date.”
* Ruby on Rails term
Start the tutorial coding
26
“The errors required 2
fixes - updating version of
compiler and rewriting the
constructor definition
using the new
non-deprecated syntax.”
Errors
27
...and more errors
28
“If you are designing a
language which has a
mapping construct, why
doesn’t the mapping
construct keep track of its
own size? Be nice to your
developers.”
Solidity
29
“But why did things
change in ganache? Is
this how it’s supposed to
be? What happens if I run
out of test account
resources?”
Ganache
30
“It’s actually awesome
that there is a testing
framework and a tutorial
for running tests.”
“How am I going to run
these tests on something
like a travis? Is this
framework basically a
demoware?”
Testing
31
Client
“Exploring the original
source code was soothing
and entertaining due to
cute doggie pictures in
the solution. whew.”
32
Metamask fail
“Apparently I made the
wrong choice. Game over
(spinner spins endlessly
with no indication of what
went wrong and no option
to cancel out)?”
33
Metamask again
“I am on a test environment, and this
wants to use my main account. This
should never happen.”
“A blockchain n00b may be stuck on
this screen for a long time. What’s gas
limit? What’s gas price? Do I have to
give them a credit card? What’s gas
price? What’s GWEI? No tooltips.”
34
Success! App complete.
“Yay”
35
Debriefing Ethereum
Pros:
1. Got it to work :)
2. Testing framework!
3. Ganache helps a lot
36
Cons:
1. No authoritative docs / tutorials or
tools to trust (reliable?)
2. Lots of boilerplate to write
3. API versioning problems
4. Lots of exposure to Metamask UX
5. Unexpected math issues (security)
6. Lots of assumptions about
language/concept familiarity
Roadmap
1. Components of DevX
2. Case Study: Ethereum
3. Case Study: EOS
4. Analysis
37
Erik (exposure to web dev only) just found out about EOS and wants to
give it a shot.
I found my way through Hello, world and built an ICO-style token but never
actually deployed anything to TestNet.
Case study: EOS
38
“Where is the official
tutorial?”
“Found it?”
Searching for tutorials
39
“Lots of confusing stuff
around keys and wallets
and nodes right up front”
Install dependencies
40
“Wait, so I’m running a block
producing node now? Didn’t
know that… where’s the tail
output you normally get from a
server?”
“Dang, that’s a lot of arguments”
Node
41
“Aww yeah, apparently I’ve been
producing blocks the whole
time!”
“How do I turn this node off..?”
Node 2
42
“What’s my mental model
supposed to be for this
wallet? I’m opening and
closing and locking and
unlocking it.”
“Not sure what I did but it
gave me a couple of test
users. Cool.”
Wallet and users
43
“Seems straightforward if
I knew C++.”
“The CLI doesn’t get me
to ‘wow’ here.”
Hello, World
44
“What the hell is a
ricardian clause file?”
“I lost my password.
Where’s help support?”
Errors
45
“What’s my mental model
supposed to be for this
wallet? I’m opening and
closing and locking and
unlocking it.”
“Not sure what I did but it
gave me a couple of test
users. Cool.”
Let’s do an ICO!
46
“Wait, how do I deploy
this to testnet?”
“Where’s the
`alice.respond_to(SEC)`
command? She’s totally
going to jail.”
We’re rich now
47
Debriefing EOS
Pros:
1. Docs are generally pretty
well-written, though lack
educational/concept support
2. Log output is helpful
48
Cons:
1. Lots of detailed steps needed
constantly. Pushing args and
doing compilation gets old fast.
2. Debugging support very thin
3. Resources are still quite scattered
4. Naming is tricky conceptually
5. The default tutorial is boring
Roadmap
1. Components of DevX
2. Case Study: Ethereum
3. Case Study: EOS
4. Analysis
49
DevX principles
Macro
1. It’s still UX!
2. Version clearly and
consistently always
3. Create canonical tooling and
references if possible
50
Micro
1. LOTS of code examples and
ideally REPLs
2. Focus on microcopy, inline
help and tooltips. Text rules!
3. Errors should include
intent-aware suggestions
Zooming out: Blockchain provides new primitives at a cost
51
New Primitives
1. Identity: Accounts, wallets,
ownership, SPAM
protection, universal login
2. Transactions: Micro,
instant, direct (P2P)
3. Cryptography: Verify
behavior, process integrity
More Hassle
1. Cost: Expensive, per-Tx
2. Complexity: Nodes, wallets,
blockchains, keys
3. Performance: Slow vs DB
4. Maintenance: Poor
upgradability
Looking ahead at blockchain DevX
1. Need more focus on the small things (eg
microcopy)
2. More IDE’s (both local and web) coming
3. Immediate error support (messages,
traces) must improve significantly
4. Community error support will continue to
improve but versioning is a real problem
(eg Stack Overflow)
5. MUCH better education/tutorials needed
52
Thank you!
53
Panelists
54
1. Viktor Radchenko, Founder of Trust Wallet
2. Amhed Herrera, Software Engineer at Harbor
3. Jehan Tremback, CEO of Althea (althea.org)
4. Chris Li, founder of Forge Labs

Improving Blockchain Developer Experience (DevX): Where UX meets Developer Tools

  • 1.
    DevX: Where developertools meet UX Product, Design and Development December 12, 2018
  • 2.
    User Experience (UX) “Theoverall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.” 2
  • 3.
    User Interface (UI)!= User Experience (UX) 3 Unattractive but highly effective. Beautiful, Iconic… and impossible to pour.
  • 4.
    Usability != UserExperience (UX) 4 Usability is achieving a goal with the maximum: 1. Effectiveness 2. Efficiency 3. Satisfaction UX encompasses the ENTIRE experience a user has while interacting with a product or service. Was it delightful? Will the user return? Science Art
  • 5.
    UX is ajourney UX covers the user’s experience during their entire journey from the very first interaction with a product to their last. Along the way, they pass through lots of interfaces. 5
  • 6.
    Step 1: Theplatform’s customers are developers. Step 2: The developer’s customers are end-users. To be effective, platforms have to win them both. Platforms have 2-step product/market fit 6
  • 7.
  • 8.
  • 9.
    DevX (also calledDX) is the subset of user experience specifically addressing the experience of developers. Developers are sufficiently different -- and important -- that it’s worth specifically distinguishing them from end-users. This is what we’ll discuss today. Developer Experience (DevX) 9
  • 10.
    Today’s Topics 1. Componentsof DevX: What Developer Experience is and its key concepts. 2. Case Studies of DevX: A walkthrough of initial interactions with the EOS and Ethereum platforms. 10
  • 11.
    About Me I’m ErikTrautman and I run operations at NEAR Protocol, a scalable blockchain and smart contract platform on a mission to bring the technology to a billion devices around the world. I also care deeply about creating great products, educating people and building rich ecosystems. My background is in markets, open-source software development, startups and education. And general nerdery. 11
  • 12.
    Roadmap 1. Components ofDevX 2. Case Study: Ethereum 3. Case Study: EOS 4. Analysis 12
  • 13.
    Roadmap 1. Components ofDevX 2. Case Study: Ethereum 3. Case Study: EOS 4. Analysis 13
  • 14.
    Who is ouruser? An experienced developer comfortable with: 1. Command line 2. Web languages 3. Version control 4. Deployment Reading documentation is familiar. 14
  • 15.
    Key differences betweenDevX and end-user UX Developers operate across multiple tools simultaneously (eg text editor, CLI, webpages, etc) so you can’t control the whole experience. Creating an app is not a defined purchase or use case but rather a creative process of solving problems and writing code. Developer environments are highly customized and might include dozens of different setups for command line, OS, IDE and even keyboards. The common interface is TEXT. 15
  • 16.
    Blockchain system architecture:How DApps work 16 ● Blockchain ● Nodes ● Wallets ● Libraries ● APIs ● ...
  • 17.
    Experiential touchpoints fordevelopers 17 Developing on a single platform encompasses a lot of touchpoints: 1. API Design: Naming, abstractions, organization, invocation 2. Documentation: API reference, tutorials, demos 3. Tooling: Language, CLI, text editor, test frameworks, build tools, logging/debugging, instrumentation (block explorer), runtimes 4. Support: Libraries, scaffolding, forums, chat, blog posts
  • 18.
    DApps require aconstellation of tools 18
  • 19.
    ...unfortunately, dev tools,education and support are most often developed with power users in mind first, preventing new users from ramping up. We’ll focus on new users for now. New users != power users 19
  • 20.
    Assumption: You’ve justheard of FOOchain and want to test it out. 1. Gather Info: “Learn FOOchain”, “foochain quickstart”, etc. 2. Install: Download the tools and verify it’s all set up 3. Develop: Write that “Hello, world” app 4. Deploy: Try to get it up on TestNet 5. Productionalize: Add more functionality, libraries, testing, etc. Launch! Interrupt: Errors! Support! Conceptual holes! Broken docs! Typical flow for a new project 20
  • 21.
    Roadmap 1. Components ofDevX 2. Case Study: Ethereum 3. Case Study: EOS 4. Analysis 21
  • 22.
    Developer Jane (experiencedbut not a blockchain developer) just found out about Ethereum and wants to give it a shot. She found her way to deploying Hello, World. Case study: Ethereum 22
  • 23.
    “Why is therenothing affiliated with Ethereum?” Searching for tutorials 23
  • 24.
    “So far, sogood, except developing on mostly non-ethereum 3rd party packages feels slightly sketchy” Install dependencies 24
  • 25.
    “This feels scary.I want to quickly try out a dev environment, and it’s now telling me to do a complicated password management procedure where if I fail, somebody can steal all my ether. I am considering giving up at this point!” Install Metamask 25
  • 26.
    “Migrating*? What amI migrating? I don’t have an existing app! Who came up with this vocabulary?” “This tutorial was published yesterday and is already out of date.” * Ruby on Rails term Start the tutorial coding 26
  • 27.
    “The errors required2 fixes - updating version of compiler and rewriting the constructor definition using the new non-deprecated syntax.” Errors 27
  • 28.
  • 29.
    “If you aredesigning a language which has a mapping construct, why doesn’t the mapping construct keep track of its own size? Be nice to your developers.” Solidity 29
  • 30.
    “But why didthings change in ganache? Is this how it’s supposed to be? What happens if I run out of test account resources?” Ganache 30
  • 31.
    “It’s actually awesome thatthere is a testing framework and a tutorial for running tests.” “How am I going to run these tests on something like a travis? Is this framework basically a demoware?” Testing 31
  • 32.
    Client “Exploring the original sourcecode was soothing and entertaining due to cute doggie pictures in the solution. whew.” 32
  • 33.
    Metamask fail “Apparently Imade the wrong choice. Game over (spinner spins endlessly with no indication of what went wrong and no option to cancel out)?” 33
  • 34.
    Metamask again “I amon a test environment, and this wants to use my main account. This should never happen.” “A blockchain n00b may be stuck on this screen for a long time. What’s gas limit? What’s gas price? Do I have to give them a credit card? What’s gas price? What’s GWEI? No tooltips.” 34
  • 35.
  • 36.
    Debriefing Ethereum Pros: 1. Gotit to work :) 2. Testing framework! 3. Ganache helps a lot 36 Cons: 1. No authoritative docs / tutorials or tools to trust (reliable?) 2. Lots of boilerplate to write 3. API versioning problems 4. Lots of exposure to Metamask UX 5. Unexpected math issues (security) 6. Lots of assumptions about language/concept familiarity
  • 37.
    Roadmap 1. Components ofDevX 2. Case Study: Ethereum 3. Case Study: EOS 4. Analysis 37
  • 38.
    Erik (exposure toweb dev only) just found out about EOS and wants to give it a shot. I found my way through Hello, world and built an ICO-style token but never actually deployed anything to TestNet. Case study: EOS 38
  • 39.
    “Where is theofficial tutorial?” “Found it?” Searching for tutorials 39
  • 40.
    “Lots of confusingstuff around keys and wallets and nodes right up front” Install dependencies 40
  • 41.
    “Wait, so I’mrunning a block producing node now? Didn’t know that… where’s the tail output you normally get from a server?” “Dang, that’s a lot of arguments” Node 41
  • 42.
    “Aww yeah, apparentlyI’ve been producing blocks the whole time!” “How do I turn this node off..?” Node 2 42
  • 43.
    “What’s my mentalmodel supposed to be for this wallet? I’m opening and closing and locking and unlocking it.” “Not sure what I did but it gave me a couple of test users. Cool.” Wallet and users 43
  • 44.
    “Seems straightforward if Iknew C++.” “The CLI doesn’t get me to ‘wow’ here.” Hello, World 44
  • 45.
    “What the hellis a ricardian clause file?” “I lost my password. Where’s help support?” Errors 45
  • 46.
    “What’s my mentalmodel supposed to be for this wallet? I’m opening and closing and locking and unlocking it.” “Not sure what I did but it gave me a couple of test users. Cool.” Let’s do an ICO! 46
  • 47.
    “Wait, how doI deploy this to testnet?” “Where’s the `alice.respond_to(SEC)` command? She’s totally going to jail.” We’re rich now 47
  • 48.
    Debriefing EOS Pros: 1. Docsare generally pretty well-written, though lack educational/concept support 2. Log output is helpful 48 Cons: 1. Lots of detailed steps needed constantly. Pushing args and doing compilation gets old fast. 2. Debugging support very thin 3. Resources are still quite scattered 4. Naming is tricky conceptually 5. The default tutorial is boring
  • 49.
    Roadmap 1. Components ofDevX 2. Case Study: Ethereum 3. Case Study: EOS 4. Analysis 49
  • 50.
    DevX principles Macro 1. It’sstill UX! 2. Version clearly and consistently always 3. Create canonical tooling and references if possible 50 Micro 1. LOTS of code examples and ideally REPLs 2. Focus on microcopy, inline help and tooltips. Text rules! 3. Errors should include intent-aware suggestions
  • 51.
    Zooming out: Blockchainprovides new primitives at a cost 51 New Primitives 1. Identity: Accounts, wallets, ownership, SPAM protection, universal login 2. Transactions: Micro, instant, direct (P2P) 3. Cryptography: Verify behavior, process integrity More Hassle 1. Cost: Expensive, per-Tx 2. Complexity: Nodes, wallets, blockchains, keys 3. Performance: Slow vs DB 4. Maintenance: Poor upgradability
  • 52.
    Looking ahead atblockchain DevX 1. Need more focus on the small things (eg microcopy) 2. More IDE’s (both local and web) coming 3. Immediate error support (messages, traces) must improve significantly 4. Community error support will continue to improve but versioning is a real problem (eg Stack Overflow) 5. MUCH better education/tutorials needed 52
  • 53.
  • 54.
    Panelists 54 1. Viktor Radchenko,Founder of Trust Wallet 2. Amhed Herrera, Software Engineer at Harbor 3. Jehan Tremback, CEO of Althea (althea.org) 4. Chris Li, founder of Forge Labs