Myers2012SEIF Slides

8/12/2019 Myers2012SEIF Slides

1/50


2/50

Natural Programming Projec

Researching better tools for programmers si Natural Programming project started in 1995

Make programming easier and more correct more natural

Closer to the way that people think about algoritsolving their tasks (not Natural UIs)

Methodology human-centered approach

Perform studiesto inform design

Provide new knowledge about what people do and

Guide the designs from the data


3/50

End User Programming People whose primary job is notprogramming

In 2012, in USA at work: Scaffidi, Shaw and Myers 20

3 million professional programmers

6 million scientists & engineers

13 million will describe themselves as programmers

55 million will use spreadsheets or databases at work (may potentially program)

90 million computer users at work in US

We should make better tools for all of these peo

90,000,000

80,000,000100,000,000


4/50

Debugging

Study commissioned by NIST USA (214 software vendors

Software errors cost ~$60 billion annua

Software engineers spend 70-80% of tiand debugging

Time for 1 developer to fix 1 bug was ~

Current debugging techniques same l t 70


5/50

Goal: Gentle Slope Systems

Difficultyof

Use

Fla

ActionScript

C Programming

Vis

C or CSwing

JavaWeb D

CSS & HTML

JavaScript

Ser


6/50

Improve Developer Experien

Use human centered approaches Make developers more effective

Reduce errorsin resulting code

Insure that developer tools are use Understand developers barriers th

wasted time

Direct efforts at most importantiss

Address: programming languages


7/50

Why Would Being Natural be

Programmers are People Too Take the human into account

Language should be close to users plan

Programming is the process of transforming a mental pthat is compatible with the computer.

Jean-Michel Hoc

Closeness of mappingThe closer the programming world is to the problem w

easier the problem-solving ought to be. Conventional languages are a long way from that goal. Green an

Depends on target population


8/50


9/50

First Natural Programming S

John Pane, PhD 2002 Studies:

How people naturally express programconcepts and algorithms

1)Nine scenes from PacMan

2)Transforming and calculatingdata in a spreadsheet

Specific issue of language design3) S l ti ifi bj t f (


10/50

Examples of Results

Rule-based styleIf PacMan loses all his lives, its game over.

And, Or, Not dont match computerinterpretation

men andwomen, notan apple or pear

Operations suggest data as lists, not array

People dont make space before inserting

Objects normally movingIf PacMan hits a wall he stops

( )


11/50

New Language and System: H

John Pane, PhD 2002 Properties:

Metaphor of agent (Handythe dog) operating on cards

All operations can operateon single items or setsof items

Integrated queries with language

Sets can be dynamically constructed and used
http://handsvideo7.5min.mpg/


12/50

Supporting Natural Data Ty

Chris Scaffidi, PhD 2009

Ask users about types of data, say Person namedate, Project code,

User-centered type system called topes

Structured

Constraints on the values and parts

May be always or usually true

USA phone area code never ends in 11

USA Last names usually start with a capital letter

Library for verifying & transforming values Can be used from JavaScript


13/50

Study of Errors

Study of novice errors and debugginCreated a new model of barriers & kind

All of the observed debugging problem

addressed by Why questions 32% were Why did; 68% were Why did

Current debugging techniques requirguesswhere bug is or where to look

Most of initial guesses are wrong even


14/50

Whyline

Andy Ko, PhD 2008 Allow users to directly ask Why aWhy not
http://../ko-marmalade-whyline/whyline-java-new%20(1.5%20min).mov


15/50


16/50

Crystal Crystal: Clarifications RegardingYour Software

using a Toolkit,Architecture and Language

Apply WhyLine idea to regular desktop application

Lots of complexity in powerful features that peopllike

Ask Why about whatrecently happened

Architecture: supportsadding to application

with small overhead


17/50

WebCrystal

Investigate CSS and

HTML responsible forexample behaviors

Navigate around HTMLhierarchy

Ask how-do-Iquestions about look,position and behavior

Generates code in user-selected

format


18/50

Study of Design Requirements forMaintenance-Oriented IDEs

Studied expertuse of Java Eclipse Ilab setting(2004-2006)

Focus on day-to-day maintenance t

such as bug repairs and featureenhancements

Lab study with detailed analysis

Rich dataset multiple papers


19/50

A Programmers Working

A collection oftask-relevantcode fragments

In modernsoftwaredevelopment,

dependenciesare distributed


20/50

Times for Bottlenecks

Each instance of an interactive bottlecost only a few seconds, but . . .


21/50

Jasper: Working Set Tool

Jasper= JavaAid with Sets of Pertinent Element

Recall

Allow programmers to grab arbitrary fragments orepresent working sets

Allow programmers to view in one place, one screen


22/50

Study of APIs

Started as PhD work of Jeff Stylos, 200Inspired by Steven Clarke, Microsoft Visua

group

Application Programming InterfaceLibraries, frameworks, SDKs,

Which programming patterns are most Barriers to use of APIs Measures: learnability, errors, preferen Expert and novice programmers

Studied: Default parameters in constructors


23/50

Factory Pattern

Instead of normal creation:Widget w = ne

Objects must be created by anotherclassAbstractFactory f = AbstractFactory.getDefaultWidget w = f.createWidget();

Used frequently in Java (>61) and .Net (>

SAP Results:

When asked to design on blank paper, no oa factory

Time to develop using factories took 2.1 to 5l d t l t t (20


24/50


25/50

Study of APIs for SAP

Study APIs for EnterpriseService-Oriented Architectures (Web Ser

Naming problems:

Too long

Not understandable

Differences in middle are frequently missed

CustomerAddressBasicDataByNameAndAddressRequestMessageCustomerSelectioCustomerAddressBasicDataByNameAndAddressResponseMessageCustomerSelec


26/50

eSOA Documentation Resu Multiple paths: unclear which one to use

Some paths were dead ends

Inconsistent look and feel caused immediatabandonment of paths

Hard to find requiredinformation

Business backgroundhelped


27/50


28/50

Our Tools to Help with APIs

Mica Jadeite

Calcite

Euklas

Graphite
http://images.google.com/imgres?imgurl=http://www.orientaljadejewelry.com/DSCN0187.JPG&imgrefurl=http://www.orientaljadejewelry.com/bangles.htm&h=480&w=640&sz=33&hl=en&start=80&usg=__8TwN8oO0hOBrRBDl-NNOisyBsi4=&tbnid=7Hnu7F-4FzBLHM:&tbnh=103&tbnw=137&prev=/images?q=jadeite&start=60&ndsp=20&hl=en&rls=IBMA,IBMA:2006-17,IBMA:en&sa=N


29/50

Mica Tool to Help Find Example

Makes Interfaces Clear andAccessible Use Google to find relevant

pages

Match pages with Javakeywords

Also notes which pagescontain example code

or definitions


30/50

Jadeite: Improved JavaDoc

Jadeite: JavaAPI Documentation with ExtrInformation Tacked-on for Emphasishttp://www.cs.cmu.edu/~jadeite

Fix JavaDoc to help address problems

Focus attention on most popular packages andclasses using font size

Placeholders for methods that users want to exist

Automatically extractedcode examples for how

to create classes
http://www.cs.cmu.edu/~jadeitehttp://www.cs.cmu.edu/~jadeite


31/50

Calcite: Eclipse Plugin for Ja

Calcite: ConstructionAnd Language Comp

Integrated Throughouthttp://www.cs.cmu.edu/~calcite

Code completion in Eclipse augmented w

Jadeites informationHow to create objects of specific classes

SSLSocket s = ???
http://www.cs.cmu.edu/~calcitehttp://www.cs.cmu.edu/~calcite


32/50

Euklas: Eclipse Plugin for JavaScr

Euklas: Eclipse Users Keystrokes Lessened

byAttaching from Sampleshttp://www.cs.cmu.edu/~euklas

Brings Java-like analysis to JavaScript

Auto-correct usescopy source contextfor errors due tocopy & paste
http://www.cs.cmu.edu/~euklashttp://www.cs.cmu.edu/~euklas


33/50

Graphite: Eclipse Plugin for Litera

Graphite: GRAphical Palettes Help Instant

Types in the Editor.

Pop up a custom palette for specialized co(literals) in Eclipse

Color palettesRegular expression

strings

Customizable (ICSE2012)


34/50

Apatite Documentation Tool

Apatite:Associative Perusing ofAPIs That

Identifies Targets Easilyhttp://www.cs.cmu.edu/~apatite

Start with verbs (actions)

and properties and find whatclasses implement them

Find associated items

E.g., classes that are often

used together
http://www.cs.cmu.edu/~apatitehttp://www.cs.cmu.edu/~apatite


35/50

Studies of Code Understan Thomas LaToza, PhD 2012

Studies about how experts learn unfamiliar c

Programmers investigate reachability questio

How can this code be reached, either upstream o

E.g., control flow from user scrolling update sta

Identified over 100 hard-to-answer questiondevelopers asked

E.g., What method implements this trigger?

Why was this designed this way?

Survey shows such control flow questions ar


36/50

REACHER

Visualize exactly the paths of interest

Searchalong the paths

Focused questions and answers enable effective acomplex codebases

Developers with Reacher 5.6times more success

those working with Eclipse only
http://../Advisor/Thomas%20LaToza/Defense%20Talk/Defense%20Talk%204.ppt_media/reacher%20demo.mov


37/50


38/50

Backtracking Results

All developers backtrack for many reasoExplorations, investigations, iterative design

People use comments to remove code, s

can restore it if necessaryBut difficult to comment & uncomment corr

Often non-local changes

Undo not used for exploration, just typo

Future work: new tool to help developer


39/50

Summary

30 studies; 17 systems in 16 years

Doing studies first provides new insican inspire significantly new designs

programming languages and environ

Need to understand software engineissues


40/50

Thanks to: Funding:

NSF under IIS-1116724, IIS-0329090, CCF-0811610, IIS-0757IT), NSF ITR CCR-0324770 as part of the EUSES Consortium

SAP

Adobe

IBM

Microsoft Research RISE >30 students: Htet Htet Aung Jack Beaton Ruben Carbonell John R. Chang Kerry S Chang

Andrew Faulring Aristiwidya B. (Ika) Hardjanto Erik Harpstead Sae Young (Sophie) Jeong Andy Ko

Stephen John Pan Sunyoun Chotirat

Ratanam


41/50

ImprovingSoftware Development thro

Human-Centered ApproacBrad A. Myers

Human-Computer Interaction School of Computer ScienCarnegie Mellon Univers

B T l f A h


42/50

Better Tools for Autho

Interactive Behavior

ConstraintJS

Brad Myers & Stephen Oney

Human-Computer Interaction InstituSchool of Computer Science

Carnegie Mellon University

Carnegie Mellon - 2012

I t ti S ft


43/50

Interactive Software

Today: programmed with callbacks & si

Result: interdependent, complex code


C t i t


44/50

Constraints

Relationships declared once and maintain

automatically

Can help reduce the complexity of interac

In GUI programming, constraints have cau

Data bindings (example: WPF, Silverlight)

Layout controllers (example: CSS)


ConstraintJS


45/50

ConstraintJS

Constraints for building interactive software

Integrates constraints with Finite-State Mac(FSMs)

Makes it easy to create constraints that someti

Result: Cleaner, clearer code Works with Web languages (JavaScript, HTM

(paper to appear at UIST2012)


Motivating Example


46/50

Motivating Example



47/50

ConstraintJS implementationR i f llb k d id ff t d


48/50


1 f ri ends = cj s. async( f b_r equest ( "/ me/ f r i ends") ) ;

2 pi cs = f r i ends. map( f uncti on( f r i end) {3 return cj s. async( f b_r equest ( " / " + f r i end. i d4 + "/ pi ctur e") ) ;5 } ) ;67 / / . . .89 {{#di agr am f r i ends. stat e}}

10 {{#st ate pendi ng }} Loadi ng f r i ends. . .

11 {{#st ate r ej ect ed}} Er r or12 {{#st ate r esol ved}}13 {{#each f r i ends f r i end i }}14 {{#di agr am pi cs[ i ] . s tate}}15 {{#st ate pendi ng }} 16 {{#st ate r esol ved}} 17 {{#st ate r ej ect ed}} 18 {{/ di agr am}}19 {{f r i end. name}}20 {{/ each}}

21 {{/ di agr am}}

Requires fewer callbacks and no side-effect code

Clearer and less interdependent code

Enhances HTML syntax to add flexibility while maintaining clarity

Current Work


49/50

Many interactive behaviors can be specif

onlya combination of FSMs and constrai

Interactive tool for specifying FSMs & co

Spreadsheet-like for constraints, with colum

states


Acknowledgements


50/50

Acknowledgements

Microsoft SEIF Award, 2011

Joel Brandt & Adobe

Ford Foundation

National Science Foundation

Website: www.constraintjs.com


Myers2012SEIF Slides

Documents

Transcript of Myers2012SEIF Slides