May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development...

May 5, 2006 // Andy LaMora

Next Generation Development

New Paradigms in User Interfaces

“All crises begin with the blurring of one paradigm and the consequent loosening of the rules for normal research”. -T.S. Kuhn

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future

[ ] AGENDA

05.05.2006

» UI: History Channel Overview» UI through the times» GUIs & the Web Impact» Stalwart Soldiers» The New Paradigm

» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future

[ ] AGENDA

05.05.2006

[ ] Overview :: UI Through the Times05.05.2006

UI Shifts Corresponding to Increased User Base

1960s: Punch Cards

1970s: Command Line

1980s: GUI

1990s+: Web

? Next ?

1960s: Punch Cards

1970s: Command Line

1980s: GUI

1990s+: Web

? Next ?

But is the Browser really an advance in user interface design?

Let’s look at what was going on before NCSA Mosaic changed it all…

» GUI Advances» Desktop Paradigm

» Trash Bin» Tabs» Menu Bars

» Interactivity» Haptic Devices» 3D Displays

PARC Cone Tree, 1991

Robertson, Mackinlay & CardDemonstrating a trend towards rich, real-time interaction.

[ ] Overview :: GUIs & Web Impact05.05.2006

Server

Ticker

Mainframe

The user fills out a form, sends it to a processor, and patiently sips coffee awaiting the results.

What does that remind us of?

» Many Efforts Continued…» Applets» Flash» Web Start

» But:» All require new run-times» Lack tight browser integration» Require learning new technologies

[ ] Overview :: Soldiers05.05.2006

[ ] Overview :: The New Paradigm05.05.2006

Asynchronous JavaScript + XML

» Browser is the run-time.» Has access to all browser elements/functions.» NO new technologies required.» Frees us from requirement to submit entire page.

» UI: History Channel Overview» The New Paradigm: Ajax

» Definition» Architecture» Examples

» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future

[ ] AGENDA

05.05.2006

[ ] The New Paradigm: Ajax :: Definition05.05.2006

Asynchronous JavaScript + XML

» Defines an Approach:» Standards-based presentation (CSS, XHTML)» Dynamic Display/Interaction via DOM» Data manipulation with XSLT» Asynchronous data/code retrieval » Bound in JavaScript (ECMAScript)

AJAX is not, itself, a new technology.

AJAX is a term that identifies a method to load and manipulate data from a server in a web browser, without reloading the entire page.

[ ] The New Paradigm: Ajax :: Definition05.05.2006

“All crises begin with the blurring of one paradigm and the consequent loosening of the rules for normal research. “ -T.S. Kuhn

[ ] The New Paradigm: Ajax :: Architecture05.05.2006

Credit: J.J. Garrett, Ajax: A New Approach to Web Applications February 2005

Ajax Engineis loaded into the

browser

Engine intercepts user events and requests

Engine performs:• Data Validation• Interface Changes• Server Requests

Can also forward new code, and

serialized objects.

No new technologies; instead, a new way of using them.

In the “old” method, we fire off a request, and lock while waiting for the response.

(Users became used to waiting)

AJAX decouples the request from the response.

(No more waiting; the Engine works in the “background”)

[ ] The New Paradigm: Ajax :: Some Examples05.05.2006

» Ajax Examples» Google Maps» Google Suggest» MyYahoo» AOL A9» Zillow.com» DesignBais

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management

» Blurred Boundaries» MVC: Help from an old friend» Design Patterns: Control at last

» Design: Return of the Lost Art» State of the Art» Future

[ ] AGENDA

05.05.2006

» Blending Roles?» Functionality now in JavaScript» Who codes the JavaScript?

» Designers?» Middleware Developers?

[ ] Worries In Management: Blurred Boundaries05.05.2006

Consider an Autocomplete Example *…

* Inspired by Thomas Fuch’s(?) Flash-based demonstration:

http://www.phppatterns.com/stuff/latency.html

Ajax Autocomplete

>Start typing in a name:

Ajax Autocomplete

Our Ajax Engine is triggered by the key_up event, and sends a request to the server to filter the name list on “A”.

Ajax Autocomplete

>Some suggestions are returned and presented:

Andy Dick

Andy LaMora

Anthony Jefts

Arturo Sandoval

Ajax Autocomplete

>Keep typing, suggestions are refined:

>Andy Dick

Andy LaMora

Anthony Jefts

Ajax Autocomplete

>Andy Dick

Andy LaMora

Ajax Autocomplete

>Andy Dick

Andy LaMora

Ajax Autocomplete

>Andy Dick

Andy LaMora

Ajax Autocomplete

Andy L

>Andy LaMora

Ajax Autocomplete

>That’s the one, so I hit tab to select it.

Andy LaMora

>Andy LaMora

Ajax Autocomplete

Great!

But is a real world example? What if our network lags?

Lets try something more realistic:

Ajax Autocomplete

Hmmm…. Our engine is still processing requests, but there are no results. Network must be slow.

Ajax Autocomplete

We’ll keep typing.

Ajax Autocomplete

Still nothing!

Ajax Autocomplete

Well now something is happening, but…

Andy Dick

Andy LaMora

Ajax Autocomplete

??? I’m not typing ??

Andy Dick

Andy LaMora

Anthony Jefts

Ajax Autocomplete

What the heck is going on…

Andy Dick

Andy LaMora

Anthony Jefts

Arturo Sandoval

Ajax Autocomplete

>Now if I hit tab, I get the wrong name:

Andy Dick

Andy Dick >

Ajax Autocomplete

What Happened?

Our Ajax Autocomplete module was too naïve. It didn’t know, or forgot to remember:

NETWORK LATENCY VARIES WITH TIME

Ajax Autocomplete

» Three factors introduced error:

» HTTP transport» Rely on Request/Response model

» Asynchronous Communication» Every request is independent» No transaction to bind our request/response pairs

» Network Lag» Our first requests returned last;

» {1,2,3,4} returned {4,3,2,1}» But could have been any order at all.» Latency varies with time!

Ajax Autocomplete

» So, what kind of problem is this anyway?

» User Interface?

» Design?

» Network protocol?

One could assign sequence numbers to the requests, of course. However, there is no “standard” solution as yet.

Ajax introduces some new project management problems, and requires some thought viv. project contributor roles.

» To The Rescue: MVC» Model View Controller in UI» Each GUI Item developed on MVC

» Callback Functions» Element Identifiers

[ ] Worries In Management: MVC05.05.2006

» Raising the Bar on JavaScript Development» Thinking about Roles» Opportunity: Better Code

» Design Patterns» Command Pattern» Observer Pattern

» Attention to Division of Labor» Programmers Program» Designers Design

[ ] Worries In Management: Design Patterns05.05.2006

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art

» Metaphors and Affordances» Example: Control Options» IA Impact

» State of the Art» Future

[ ] AGENDA

05.05.2006

» Metaphors» Usage Model (eg Desktop)» Workflows patterned after model» Icons Indicate Purpose

[ ] Design :: Metaphors & Affordances05.05.2006

» Affordances» Proper use is implied» Subtle employment of familiar cues

[ ] Design :: Example: Control Options05.05.2006

Instructions: Order Your Questions

The Moon is a Planet

Venus is a Comet

Alpha Centauri is a Star

Yes No

We want to adjust the order that our questions appear in a survey.

(With Ajax, of course)

Our containers can be dragged

around

So, it should be clear to the user what can be done – from the containers alone.

But, is it clear what can be done here?

Provide affordances that indicate function to the user – invite the correct usage.

Provide the containers with

“grips”.

The Point: Web UI designers must think like desktop application designers!

Need Ajax Toolkits/Frame

works to provide these

(TopCoder Opportunity?)

» Impact on Information Architects» Sovereign vs. Page-Based Interaction

Should it behave like a desktop program?Do we need to communicate state?

» Best use of Rich Behavior

Use affordances to suggest next steps.Colors and responsiveness indicate state: OnBlur()

» Mindful of MVC/Labor Divisions

[ ] Design :: IA Impact05.05.2006

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art

» IFrame vs. XMLHTTPRequest » Browser Security» Acceptance

» Future

[ ] AGENDA

05.05.2006

» IFrames» Wide Browser Support» Consistant Code Base» Can be faster for large requests» Can lessen zone problems» Very hard to debug» Back-button support

[ ] State: IFrame vs. XMLHTTPRequest05.05.2006

» XMLHTTPRequest» Limited browser support» Requires ActiveX on IE» Different Code Bases» Faster for small requests» Designed for the purpose» Easier to parse return data

» Browser Security is an Issue» Zones

» IE: Active X Requirements

» Future standards are in flux

05.05.2006

[ ] State: Browser Security

The browser security model prevents us from (easily) referencing servers other than the page source.

IE requires ActiveX for XHR. ActiveX is switched off by default (even though MS invented it).

JSON vs XML? Will MS play along?

» Software Frameworks» Java Server Faces» Atlas (Microsoft)» Ruby On Rails

05.05.2006

[ ] State: Acceptance

» Applications» Google» Yahoo » Internals» ASPs!

» UI: History Channel Overview» The New Paradigm: Ajax» Ajax: Worries in Management» Design: Return of the Lost Art» State of the Art» Future

» Service Orientated Architecture» Application Service Providers

[ ] AGENDA

05.05.2006

“...though the world does not change with a change of paradigm, the scientist afterwards works in a different world. “

May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development...

Documents

Transcript of May 5, 2006 // Andy LaMora CONFIDENTIAL Copyright 2006, TopCoder, Inc. Next Generation Development...

Second-Hand Shopping: Efficient Component Reuse TopCoder, Inc. Sean Campion, Project Manager [scamp]

Crowdsourcing · 2016-12-21 · Topcoder (. com) has hosted more than 427,500 software design, development, and data science competitions, awarding more than US$25,000 a day to com-petitors.

Airgun Ammunition Project Team Members Bryan LaMora Joe Ouellette Zach Rohlfs Team 07F.

PowerPoint Presentation filetC01 , tc0Ttà tco tc015 tco tC015 tco 12015 TM topcoder ITMO UNIVERSITY

Andy LaMora alamoraalamora NEB B21 (student lab) Alamora@cs.jhu.edu.

Developer Recommendation for Topcoder Through A Meta …act.buaa.edu.cn/hsun/papers/emse-topcoder.pdf · 2019-07-23 · Developer Recommendation for Topcoder 3 won over 5 challenges

Founder’s MessageFounder’s Message Founder’s Message Welcome to the 2006 TopCoder® Collegiate Challenge, Sponsored by AOL®. It has been ﬁ ve years since the beginning of

Founder’s Message - TopCoder · Founder’s Message ... as well as a full suite of unit tests for their implemen- ... Favorite Movie Pirates of the Caribbean

Topcoder Case

Knowledge Networks and Markets : Towards a … · Knowledge Networks and Markets : Towards a conceptual framework ... - Competition and prize mechanisms: Topcoder, prize4life, jovoto

TopCoder Tips

The NIST Differential Privacy Synthetic Data Challenge · Solution details: A Sequence of Three topcoder Marathon Matches, of increasing difficulty. Each Match has five weeks of provisional

TopCoder Mike D1 830am - NASA · 2013-07-17 · [Top CODER a placeto create" Home What can I Do? How Does It Work? Who Uses TopCoder? Blog Go to Community Portal About Us Go to Platform

Introduction to TopCoderww2.cs.fsu.edu/~rosentha/files/puzzles/notes/week3.pdf · 2009. 1. 30. · Introduction to TopCoder Introduction to TopCoder Programming Puzzles and Competitions

Kritiin a classroom. Quizzes were conducted by IIT-B for the participants. Participants ... Code Jam world finals. Some had acquired top (Red) ranking in Topcoder (topcoder.com). ...

Introduction to TopCoder Programming Puzzles and Competitions CIS 4900 / 5920 Spring 2009.

Tucker County Commissiontuckercountycommission.com/wp-content/uploads/2016/05/... · 2018. 3. 27. · Ray LaMora, Prosecuting Attorney reported on the Hotel Motel sales and use of

Borrowing from the Crowd: A Study of Recombination in ...tlatoza/papers/icse2015.pdf · such as TopCoder have begun to explore the application of com-petitions to software development,

SCHEDULE DIVISION A · » Finalist of Topcoder Open 2014, 2015 » Finalist of the Russian Code Cup 2014, 2015 » MSU graduate » PhD in Physics and Mathematics and coach at MIPT.

CS Resources & Extracurriculars · LEETCODE->Practicing Interview/Coding Challenge Problems! TOPCODER/CODERBYTE>Online Competitive Programming! HACKERRANK/CODEEVAL->Company Coding