How one com­pany’s product-to-ser­vice evol­u­tion is open­ing new mar­kets and demo­crat­iz­ing the bank­ing sec­tor

P&H Solu­tions Inc. (P&H) is the U.S. mar­ket lead­er in de­vel­op­ing cash man­age­ment and com­mer­cial bank­ing soft­ware. Foun­ded in 1983 and (there­fore) ini­tially ded­ic­ated to the de­vel­op­ment of DOS and Win­dows products, the com­pany’s product of­fer­ings are now en­tirely web-based. P&H today has an in­stalled base of over 100 fin­an­cial in­sti­tu­tions (FIs) in pro­duc­tion, in­clud­ing icons such as J.P. Mor­gan and Mer­rill Lynch but also nu­mer­ous cred­it uni­ons and smal­ler re­gion­al banks. P&H soft­ware serves as the in­ter­face between these in­sti­tu­tions and their cus­tom­ers, en­abling the lat­ter to per­form as­sor­ted bank­ing activ­it­ies re­motely.

As little as 5-6 years ago P&H sold 100% of its soft­ware on the ‘in-house,’ or ‘li­cense mod­el.’ Fin­an­cial in­sti­tu­tions ran their own hard­ware, bought Web Cash Man­ager ‘product mod­ules,’ and paid P&H sig­ni­fic­ant project man­age­ment fees for the per­son­nel and know-how re­quired to con­fig­ure the pro­grams and ma­chines in­volved and bring the new sys­tem to mar­ket (when FI cus­tom­ers would make live, money trans­ac­tions us­ing the sys­tem). Cur­rently, however, the ma­jor­ity of the deals P&H closes ad­here to an en­tirely dif­fer­ent mod­el.

One-half to a full two-thirds of P&H cus­tom­ers today are in­stalled in the com­pany’s ‘Out­source Solu­tion Cen­ter’ (OSC) With this of­fer­ing, P&H re­lieves fin­an­cial in­sti­tu­tions of the bur­den of host­ing and ad­min­is­ter­ing their own hard­ware. FIs choose from among the same product mod­ules as those offered un­der the li­cense mod­el but run them on ma­chines that P&H man­ages in part­ner­ship with a third party, NCR. The dif­fer­ence between mod­els is en­tirely trans­par­ent to the end-users (FI cor­por­ate cus­tom­ers).

P&H’s out­source mod­el was made pos­sible by a new tech­no­logy (the in­ter­net), and by the ob­ser­va­tion from mem­bers of a formerly-ex­cluded mar­ket seg­ment (small FIs) that the tech­no­logy could be lever­aged to put them on an even play­ing field with the big guys. This pa­per de­tails the cir­cum­stances lead­ing to the out­source of­fer­ing, the dif­fer­ences between the out­source and li­cense mod­els, and the pro­cess that P&H went through to set up its Out­source Solu­tions Cen­ter.

Back­ground

Through most of the 1980s and 1990s P&H de­veloped and sold DOS and Win­dows ver­sions of its cash man­age­ment soft­ware. Large FIs and their cor­por­ate cus­tom­ers in­stalled the soft­ware, which en­abled the lat­ter to sub­mit batch-based trans­ac­tion in­struc­tions via mo­dem. 1998 saw P&H’s re­lease of Web Cash Man­ager (WCM) – a move con­sist­ent with a soft­ware-in­dustry-wide trend to­wards web-based ap­plic­a­tion de­liv­ery and its in­her­ent eco­nom­ies. While in­stall­a­tion of P&H soft­ware was still re­quired on the FI-side, soft­ware dis­tri­bu­tion to FI cus­tom­ers was elim­in­ated as these could now use the ubi­quit­ous In­ter­net Ex­plorer or Nets­cape Nav­ig­at­or to in­ter­face with their fin­an­cial in­sti­tu­tions.

But al­most as soon as the ini­tial WCM re­lease was mar­keted, P&H sales people and ex­ec­ut­ives star­ted sens­ing that the move to an in­ter­net-based product prom­ised be­ne­fits far bey­ond those im­plied by just the saved post­age and lo­gist­ics of an elim­in­ated cli­ent soft­ware dis­tri­bu­tion re­quire­ment. “Our DOS and Win­dows products were really only avail­able to large in­sti­tu­tions be­cause of the sig­ni­fic­ant, up-front cap­it­al out­lays they re­quired,” ex­plains Terry Mon­teith, P&H Seni­or VP of Product and Mar­ket­ing. “Ini­tially this was true of Web Cash Man­ager un­der the li­cense mod­el as well. But around 1999, with WCM on the mar­ket for about a year, we star­ted hear­ing from smal­ler banks that if we could run the soft­ware for them, they’d be able to af­ford same tech­no­lo­gies as the big guys. So we gave it a shot.”

And the shot hit home. By as­sum­ing hard­ware and ad­min­is­tra­tion re­spons­ib­il­it­ies and of­fer­ing a rev­en­ue shar­ing-based pri­cing scheme (which in ef­fect amounts to a rent), P&H lowered the up-front out­lay re­quired of banks by a factor of 10. This proved the key to open­ing up en­tirely new mar­kets for P&H and the Web Cash Man­ager product, as il­lus­trated by the fig­ure be­low.

Fig­ure 1 Num­ber of U.S. com­mer­cial banks by total as­sets, with P&H’s tra­di­tion­al and newly rel­ev­ant mar­ket seg­ments high­lighted. Data as of 9/30/2006, provided by FD­IC.

The Two Mod­els Com­pared From an FI’s View­point

The ta­ble be­low sum­mar­izes the key FI con­sid­er­a­tions of price, pay­ment sched­ule, and time-to-mar­ket for the li­censed and out­sourced de­ploy­ment mod­els. Fig­ures are for the ‘En­ter­prise’ edi­tion of Web Cash Man­ager with all mod­ules in­stalled and full func­tion­al­ity de­livered.

Product, Ser­vices, and Rents

When P&H switched its fo­cus from DOS and Win­dows to the in­ter­net, it did so be­cause of the evid­ent be­ne­fits that web-based soft­ware prom­ised in terms of cus­tom­er-base growth (as P&H is a B2B com­pany, the growth was to be in its cli­ents’ cus­tom­er bases but the value of this growth was of course to be shared). Product de­liv­ery, however, con­tin­ued in much the same way as dur­ing the era of the com­pany’s mo­dem-re­li­ant products. And in­deed many of P&H’s cli­ents still ad­here to this ‘li­cense’ mod­el, whereby the Web Cash Man­ager product is bought out­right and phys­ic­ally in­stalled on ma­chines at the cli­ent sites. The value of the product is bought and trans­ferred.

Fig­ure 2 The tra­di­tion­al value trans­fer mod­el. FI buys Web Cash Man­ager out­right from P&H (as­sum­ing its value), rents re­quired con­sult­ing and sup­port ser­vices, and sells ac­cess to the product it now owns to its cor­por­ate cus­tom­ers.

In con­trast to the value trans­fer mod­el above, P&H has, for close to a dec­ade now, been de­vel­op­ing its OSC of­fer­ing. As de­scribed, this is a mod­el in which P&H does not sell the Web Cash Man­ager product it­self, but in­stead sells ac­cess to it. As the num­ber of FIs rent­ing this ac­cess has in­creased and the out­source op­er­a­tion has grown, P&H has found that it in turn has needed to pur­chase ser­vices from oth­er, third-party pro­viders. In ef­fect, the val­ues of the sep­ar­ate ser­vices ac­crue as we move down­stream along the chain.

Fig­ure 3 The out­sourced value ac­cru­al mod­el. PH rents host­ing (from NCR) and data re­dund­ancy (from Sav­vis) ser­vices; FIs rent Web Cash Man­ager mod­ules and sys­tem man­age­ment from PH; Cor­por­ate cus­tom­ers rent ac­cess form FIs to the Web Cash Man­ager func­tion­al­ity that lets them man­age their treas­ury op­er­a­tions.

Trans­form­a­tion Pro­cess

Al­most as soon as Web Cash Man­ager was re­leased, P&H star­ted hear­ing re­quests for an out­source op­er­a­tion from smal­ler banks who had too long been shut out of the big-tech­no­logy mar­ket. In re­sponse, P&H ef­fect­ively called the seg­ment’s bluff by hav­ing its sales force pro­act­ively ex­plore the idea dur­ing 1-on-1 sales calls to po­ten­tial cli­ents. The com­pany needed a pi­on­eer. “We felt from a gut level that there was an op­por­tun­ity there for us,” Mon­teith ex­plains. “We just wanted to get one bank to com­mit so that we’d have a con­crete reas­on to in­vest.”

Stage 1 – Pi­on­eer­ing

In 1998/9 they got their trail­blazer. Dur­ing what Mon­teith calls ‘Stage 1’ of the Out­sourcing ven­ture, P&H ran the WCM soft­ware for this ini­tial cli­ent, and those that tumbled in on its heels, on ma­chines housed at the com­pany’s headquar­ters in New­ton, MA, just out­side of Bo­ston. Ex­ist­ing com­pany re­sources were re­dis­trib­uted to sup­port the ef­fort.

It didn’t take long for the com­pany to re­cog­nize what it had spawned. “With­in the first year it be­came pretty clear to us that this was go­ing to take off,” Mon­teith says. “We had 15-20 banks in­stalled in our out­sourcing cen­ter and it be­came clear that we, in turn, were go­ing to have to out­source parts of the op­er­a­tion.”

FIs opt­ing for P&H’s new Out­sourcing Solu­tion Cen­ter were choos­ing to en­trust the non-core areas of IT in­fra­struc­ture and soft­ware ad­min­is­tra­tion to what was in ef­fect a second party – the com­pany whose soft­ware was ne­ces­sit­at­ing the in­fra­struc­ture and ad­min­is­tra­tion. As a soft­ware de­vel­op­ment firm, P&H had fairly ro­bust in­tern­al IT re­sources and ex­pert­ise that were able to ab­sorb the in­fra­struc­ture re­quire­ments of its early Out­sourcing Solu­tion Cen­ter ad­op­ters. But with 20 banks in­stalled and more knock­ing at the door, those re­sources were stretched and com­pany man­age­ment real­ized that it, in turn, needed to di­vest it­self of pieces of the op­er­a­tion not tied to its core soft­ware de­vel­op­ment and sup­port mis­sion.

P&H tapped NCR Cor­por­a­tion, with whom it had an ex­ist­ing re­seller agree­ment, for the job of host­ing the ma­chines and in­fra­struc­ture that would run Web Cash Man­ager in­stall­a­tions for OSC cli­ents. With the agree­ment, phys­ic­al hard­ware sup­port­ing the op­er­a­tion moved to Mary­land, U.S., while at P&H headquar­ters in Mas­sachu­setts a bare­bones team was kept on to re­motely man­age the in­stall­a­tions.

Fig­ure 4 Align­ment of act­ors and core com­pet­en­cies (in black) over time. Ini­tially FIs as­sume 3 main op­er­a­tion­al areas, only one of which is their core busi­ness. With the NCR deal, the 3 main op­er­a­tion­al areas have been dis­trib­uted to the three cor­res­pond­ing spe­cial­ists.

Stage 2 – Grow­ing Up

P&H had suc­ceeded in find­ing a cap­able part­ner to as­sume the hard­ware im­plic­a­tions of the Out­source Solu­tion Cen­ter. But the cus­tom­ers kept com­ing, and even hav­ing es­caped in­fra­struc­ture re­spons­ib­il­it­ies, those in­volved with the out­sourcing project found them­selves kick­ing hard to keep their heads above wa­ter. “At 25 to 30 in­stalled banks, we star­ted feel­ing some pain,” says Mon­teith. “It’s boot­strapped, fly-by the seat of your pants stuff and we were hav­ing a hard time keep­ing up. We ba­sic­ally ad­dressed this through staff­ing, and through bring­ing in out­side ex­pert­ise”

P&H was no longer treat­ing the Out­source Solu­tion Cen­ter as an ex­per­i­ment or side project, but rather as a profit cen­ter of huge po­ten­tial to which ded­ic­ated re­sources needed to be de­voted. And as the com­pany be­came more ad­ept at man­aging the en­vir­on­ment with more suc­cess stor­ies to share, the pro­files of the banks who were sign­ing up di­ver­si­fied. Quoted in 2001, Mike Thong­pait­hoon, who was then P&H’s dir­ect­or of cli­ent ser­vices, de­scribed P&H’s out­sourcing cus­tom­ers. “They are typ­ic­ally re­gion­al and smal­ler com­munity banks that need to com­pete with the big boys. But we also have some big cus­tom­ers – banks in the bil­lion-dol­lar plus range – out­sourcing be­cause they just don’t want to deal with the hassles."

Over the next years, as the num­ber of in­stalled banks climbed to­wards 60, more big banks would come, each pre­sum­ably bolstered in con­fid­ence by the one that pre­ceded. The sign­ing of a $10b FI in­to the Out­sourcing Solu­tion Cen­ter was a mile­stone un­til re­cently, when a $70b bank chose to out­source to P&H. “The stakes are def­in­itely get­ting pretty high, “ says Mon­teith. “And or­gan­iz­a­tion­ally, we’re start­ing to look at Out­sourcing as one of our biggest cus­tom­ers.”

Stage 3 – Matur­ing With the En­vir­on­ment

As P&H has ma­tured in its man­age­ment and de­liv­ery of out­sourced solu­tions, so too has the reg­u­lat­ory en­vir­on­ment in which it op­er­ates. Today, the chal­lenges P&H faces with the Out­source Solu­tion Cen­ter de­rive from both the size of its cus­tom­er base and a set of gov­ern­ment rules that has grown up around the in­ter­net bank­ing in­dustry. A par­tial list of these in­cludes:

• Man­age­ment of WCM patch and up­grade in­stall­a­tions
• Man­age­ment of mul­tiple ‘pods’ or ‘en­vir­on­ments’ for cus­tom­ers in dif­fer­ent
  time zones
• Gov­ern­ment-man­dated SAS Level I and II se­cur­ity audits
• Sar­banes Ox­ley com­pli­ance
• Dis­aster re­cov­ery and fail­over cap­ab­il­ity (in es­sence, backup solu­tions)
• Gov­ern­ment-man­dated user sign-on au­then­tic­a­tion

“We’re ba­sic­ally now re­spons­ible for any­thing reg­u­lat­ory hap­pen­ing in the en­vir­on­ment,” says Mon­teith. Fin­an­cial in­sti­tu­tions, in oth­er words, out­source not just the day-to-day op­er­a­tion­al as­pects of an en­ter­prise-level soft­ware im­ple­ment­a­tion, but also all as­so­ci­ated com­pli­ance con­cerns. As a res­ult, P&H has brought in top gun man­age­ment for the Out­source Solu­tion Cen­ter from the out­side and de­veloped new com­pet­en­cies in know­ledge areas it con­siders spe­cif­ic to the core ser­vice it provides with the op­er­a­tion. It con­tin­ues, however, to pen deals with oth­er pro­viders for ser­vices and third-party products it views as an­cil­lary. Re­cently, for ex­ample, P&H brought on a second hard­ware host­ing com­pany, Sav­vis, which has as­sumed dis­aster re­cov­ery and fail­over du­ties for the out­sourcing op­er­a­tion – ba­sic­ally run­ning mirrored in­stall­a­tions of the NCR ma­chines in Mary­land.

Out­come and Fu­ture Dir­ec­tions

By any meas­ure, the P&H Out­source Solu­tion Cen­ter has proven a re­sound­ing suc­cess. Talk­ing to Mon­teith, and in­deed any­one who has been in­volved in the ef­fort, about the ex­per­i­ence of get­ting the op­er­a­tion off the ground eli­cits from them terms and phrases such as ‘fren­et­ic,’ ‘rap­id growth,’ ‘hanging on by the seat of our pants.’ At every step along the way, growth in the in­stalled cus­tom­er base has met or ex­ceeded in­tern­al pre­dic­tions.

Dur­ing the near-dec­ade that P&H has been run­ning its Out­source op­er­a­tions it has ac­quired mar­ket know­ledge and Pro­fes­sion­al Ser­vices ex­pert­ise that the com­pany now lever­ages by of­fer­ing con­sult­ing ser­vices to large fin­an­cial in­sti­tu­tions. And in a bid to ap­peal to even the smal­lest banks and budgets, the P&H mar­ket­ing group is now ex­plor­ing the idea of what it calls ‘pro­cessor op­tions.’ With this op­tion, banks could, in ef­fect, choose to share in­stall­a­tions of WCM with oth­er in­sti­tu­tions that were will­ing to fore­go cus­tom­iz­a­tion for price. A cook­ie cut­ter ver­sion of the soft­ware at an even lower price point.

Fig­ure 5 Schem­at­ic (NOT to scale) de­pict­ing re­l­at­ive sizes of three P&H seg­ments and mar­ket share in each. Grey bar rep­res­ents num­ber of in­sti­tu­tions in each seg­ment; black bar por­trays P&H’s pen­et­ra­tion of the seg­ment. Dol­lar signs in­dic­ate the com­par­at­ive rev­en­ue rep­res­en­ted by a typ­ic­al deal closed in each seg­ment.

For all P&H’s suc­cess, however, the amaz­ing thing in this B2B en­vir­on­ment is that after 23 years in busi­ness and de­pend­ing on who you talk to, P&H’s total in­stalled cus­tom­er base (in­clud­ing out­sourced and in-house in­stall­a­tions) is between 100 and 150 fin­an­cial in­sti­tu­tions – ap­prox­im­ately 2% (us­ing the more op­tim­ist­ic fig­ure) of the sev­en-to-eight thou­sand banks de­tailed in Fig­ure 1, on page 2. Should P&H de­cide to mar­ket ‘pro­cessor op­tions,’ the de­cision will have been made, in ef­fect, in or­der to blanket all seg­ments with of­fer­ings. It cer­tainly won’t have been made be­cause the com­pany has ex­hausted the mar­kets it cur­rently finds it­self in. The choice P&H cur­rently faces with its Out­sourcing Solu­tion Cen­ter is one between breadth and con­cen­tra­tion.

Takeaways

The Fol­low­ing dicta are based on four as­pects that proved key to P&H’s suc­cess­ful growth of its Out­source Solu­tion Cen­ter, and which should be con­sidered in any B2B product-based to ser­vice-based mar­ket­ing evol­u­tion.

1. Dip your toe in first… prefer­ably with a part­ner
   When P&H first star­ted hear­ing mur­murs about how an out­source of­fer­ing could po­ten­tially provide the keys to a hitherto locked mar­ket, dol­lar signs must have flashed in more than a few sets of eyes. To the mar­ket­ing group’s cred­it, however, the com­pany didn’t lurch for­ward with an if-you-build-it-they-will-come ef­fort. In­stead, it cour­ted a part­ner with whom to test the wa­ters. P&H got guar­an­teed rev­en­ue for its ef­forts and the trail­blaz­ing cli­ent en­joyed spe­cial treat­ment. Had the ven­ture proved a flop, P&H’s losses would have min­im­al. But it didn’t, and we know the rest.
2. Buy Ser­vices to Provide Ser­vices
   One of the most in­triguing as­pects of P&H’s ma­ture Out­source Solu­tions Cen­ter is the string of ser­vice-pro­vider agree­ments it com­prises (see Fig­ure 3, page 2). The value chain is in fact a ser­vice chain. As P&H’s out­sourcing op­er­a­tion grew, the com­pany found it­self hav­ing to de­vote an in­creas­ing pro­por­tion of en­ergy and ex­pert­ise to ex­tend­ing its core com­pet­en­cies of WCM de­vel­op­ment and ad­min­is­tra­tion. Less and less band­width was avail­able to ab­sorb man­age­ment of the sup­port­ing in­fra­struc­ture, which in it­self was be­com­ing more in­tric­ate with the ex­pand­ing op­er­a­tion, and so the com­pany con­trac­ted with third-parties who spe­cial­ized in hard­ware and fail­over. In short, P&H found that by out­sourcing parts of its out­sourcing op­er­a­tion, it was able to con­cen­trate on max­im­iz­ing the dif­fer­en­ti­at­ing value for its cus­tom­ers.
3. Bal­ance
   Eight years in­to the Out­sourcing ven­ture, Mon­teith says that find­ing the right equi­lib­ri­um is cru­cial to suc­cess. “The chal­lenge be­comes how to keep func­tion­ally com­pet­it­ive, be on top of the all reg­u­lat­ory re­quire­ments, of­fer qual­ity im­ple­ment­a­tion ser­vices, and de­liv­er this at a good price point. It’s really a big bal­an­cing act.” On top of free­ing P&H to con­cen­trate on its core com­pet­en­cies, the third-party deals ref­er­enced above let P&H de­ploy the re­quired hard­ware at a cost sig­ni­fic­antly lower than would have been pos­sible oth­er­wise. P&H has spent ap­prox­im­ately $5m on hard­ware, pays NCR and Sav­vis their rents, and em­ploys twenty people to run the Out­source Solu­tion Cen­ter. With 60 out­sourcing con­tracts worth between $2m and $5m each, the mod­el has proven prof­it­able. Non­ethe­less, should the bal­ance Mon­teith de­scribes be dis­turbed – should the tech­no­lo­gists, for ex­ample, suc­ceed with an in­tern­al sell of the latest in­ter­net tech­no­logy for the WCM product without de­term­in­ing if its value would be per­ceived and bought by P&H’s cus­tom­ers – the profits which are now healthy could well prove to be eph­em­er­al.
4. Book the Re­cur­ring Rev­en­ue
   If P&H’s out­sourcing op­er­a­tions had proven just a means to open new mar­kets, cel­eb­ra­tion would have been jus­ti­fied on this count alone. In fact, however, the very pri­cing mod­el that sud­denly made small banks a vi­able seg­ment for the com­pany also proved a boon to the com­pany’s plan­ning cap­ab­il­it­ies. The deals P&H signs for in-house in­stall­a­tions bring the com­pany im­me­di­ate rev­en­ue in today’s dol­lars. But the rev­en­ue shar­ing mod­el in­her­ent in the Out­source Solu­tion Cen­ter deals brings something just as valu­able – a pre­dict­able, re­cur­ring rev­en­ue stream, or an an­nu­ity. Know­ing the pro­por­tion of a fu­ture year’s rev­en­ue goals that has already booked al­lows the com­pany to de­vel­op co­her­ent, long-range plans for growth.

Guiding slides for the hour-long presentation on ‘What is jQuery’ that I’ve been giving to backend teams.

Dav­id Flanagan, @__DavidFlanagan
BLOB (Bin­ary Large OB­jects) APIs
Use case: file sys­tem, BLOB, DOM. User se­lects im­age from hard drive, runs it through the API, then sees im­age dis­played in a web page; All files are BLOBs but not all BLOBs are files; Get files the same way we al­ways have: with in­put tag (and on­change)… or with drag and drop; XHR2; new URL ob­ject; blob://; FileRead­er ob­ject can be used to ex­am­ine and ma­nip­u­late con­tents of BLOBs; Text files can now be read; readAs­Text, readAsAr­ray­Buf­fer, typed ar­rays, Ar­ray­Buf­fer­View; “en­di­an­ness”; Blob­Build­er; Web apps can im­ple­ment their own sand­boxed file sys­tems.

John Hann, @un­script­able and Bri­an Cava­lier, @bri­an­cava­lier
Mod­ules > Frame­works
Frame­work vs lib­rary vs mod­ule; Switch­ing cost of mov­ing from a lib­rary or frame­work like jQuery is HUGE; “cod­ing dys­ent­ary” – get yer shit outta my code; cod­ing uto­pia – stan­dalone, small, fast, in­ter­change­able, no glob­als; load­ers and namespa­cing; JavaS­cript stand­ard APIs/in­ter­faces – ecma, json…; html5/css3 – querySe­lect­or­All…; Com­monJS pro­posed stand­ards; AMD – Asyn­chron­ous Mod­ule Defin­i­tion; Mod­ules today – re­quire.js, curl.js, pinf, bd­load, mLAB; prom­ises; in­ver­sion con­trol.

Paul Ir­ish, @paul_irish
Chrome Dev Tools
Tab auto­com­ple­tion; click col­or box to it­er­ate through dif­fer­ent col­or format defin­i­tions; new groups by type AND re­vi­sion his­tory; …and free­form stylesheet edit­ing un­der re­sources; see con­sole api doc for all avail­able con­sole meth­ods; con­sole.dir = DOM view; ESA to hide/show con­sole on all tabs; $0; ‘copy’ in con­sole view => clip­board; ‘?’ in con­sole = help on key­board short­cuts; –re­mote-de­bug­ging = for ex­ample, de­bug­ging tab­let apps via desktop; right-click pretty print of mini­fied js.

Dave Balmer, @balmer
Jo, Light­weight Mo­bile Frame­work
Web is the SDK; He’s look­ing for code con­trib­ut­ors; See ‘JavaS­cript, The Good Parts’ ex­tend meth­od; lessc­ss, sass; css3 for an­im­a­tions and trans­form­a­tions to save the mo­bile JS en­gine (and give bet­ter res­ults); joapp.com; light­er weight than en­yo.

Fa­bi­an Jakobs, @fjakobs
Cloud9IDE

Bri­an Cava­lier
wire.js
In­ver­sion con­trol; “boot­strap­per”; As­pect Ori­ented Pro­gram­ming (AOP) – aug­ment­a­tion of ex­ist­ing com­pon­ents (wheth­er or not source code is avail­able/con­trol­lable); De­pend­en­cies – in­teg­ral, con­fig­ur­able, re­quired, op­tion­al; Com­ple­ments AMD by provid­ing fur­ther flex­ib­il­ity; Or­der­ing and prom­ises; Con­nect­ors.

Dav­id Kaneda, @Dav­idKaneda
Sen­cha Touch
“De­tails Mat­ter”; sass and com­pass.

Bor­is Bokowski, @bokowski
Or­i­on Dev En­vir­on­ment
Use the web it­self as a plat­form for tool ag­greg­a­tion; js­beau­ti­fer.org, etc; ec­lipse.org/or­i­on

Ant­on Kovalyo, @ant­onkovalyo
Code Qual­ity Tools
Gofmt, pylint…; Lin­ters and doc tools (MDC, Bet­ter JS); JSH­int, a po­liter fork of JSLint;

Gaurav Seth, Mi­cros­fot
Chakra JS En­gine
Bet­ter use of dual cores for JS pro­cessing/com­pil­ing; See IE9 dev guide; ecmascript.org – ecmascripttest262; IE10 now avail­able.

Test­ing
Fun­cUnit; qunit;

Ray Mor­gan, @rayc­mor­gan
App vs Web
Zap­pos; App = nat­ive, web = html5; “Nat­ive apps aren’t that hard to write”; “Nat­ive Apps are easy to get per­form­ant”; “Should mo­bile web really be try­ing to emu­late nat­ive apps..?”; Be­ware broken ex­pect­a­tions; An­droid vs iphone vs Win­dows; back to ba­sics – se­mant­ic html; pro­gress­ive en­hance­ment – test on the older tech­no­lo­gies; Us­ab­il­ity and sim­pli­city; Flickr does it right and cap­tures what the web is about; Hash­bang (and Google’s spec on); keep the web the web; flex box.

Dave Her­man, @little­cal­culist
Mod­ules for JS.Next
Lib­rar­ies are a lan­guage’s lifeblood; NPM; JavaS­cript ba­sic­ally hands you a chunk of clay and leaves it up to you; Mod­ule pat­tern – (func­tion(glob­al){…glob­al.var=var={};}(win­dow)); Com­monJS on serv­er side is tak­ing off; for(i=0;…) = WRONG b/c of the leaked glob­al; un­der­score.js; I/O; Next.Js lets you de­clare re­quires and pull them without block­ing the main thread; har­mony.js, next.js…; ev­al is NOT evil (though ir­re­spons­ible/un­educated use of it may be); cof­fescript, scheme, ex­amples of de­clar­at­ively ex­tend­ing html with oth­er lan­guages.

Toby Ho, @air­portyh
Tutti, Mul­tiple Browser JS Test­ing

Adam Bald­win, @adam_baldwin
Se­cur­ity in Web Apps
CORS head­ers now al­low for cross-do­main script­ing and this can screw you if you’re work­ing with hash bang nav tech­niques; evilpack­et.net; OWASP/ES­API en­coder; out­put en­cod­ing != val­id­a­tion; FF has new con­tent se­cur­ity policy.

Dan Webb, @dan­wrong
Design­ing Non-Shit JS APIs
jQuery today is pretty much the de­facto stand­ard be­cause, even though it’s cobbled to­geth­er un­der the hood; its in­ter­face is amaz­ing; A good API = pre­dict­ab­il­ity, sim­pli­city, flex­ib­il­ity; Don’t buck lan­guage con­ven­tions or stand­ards.

Thomas Fuchs, @thomas­fuchs
Zepto Mo­bile Frame­work
All ma­jor JS frame­works we know/use today came out be­fore phones had real browsers, so in de­vel­op­ing for a single plat­form (es­sen­tially, what mo­bile is today with Web­kit) get rid of the x-browser bloat/poly­fills; pro­pri­et­ary fea­tures can be killer – WK’s doc­u­ment.querySe­lect­or­All, for ex­ample, re­places a huge JS foot­print and is faster; nat­ive JSON sup­port; ar­ray it­er­a­tion gets rid of loops FTW; Some func­tion­al­ity (win­dow.res­ize, for ex­ample) is not mean­ing­ful/rel­ev­ant in the mo­bile con­text; SO, don’t down­load a whold bunch of code that isn’t needed (though let’s have a fall­back plan for if code is run on a non-WK browser) – Zepto provides easy mech­an­ism for re­pla­cing it­self with jQuery, for ex­ample; querySe­lect­or­All re­turns a node list that Fuchs turns in­to an ar­racy with slice.call; ajax, events, css, poly­fills, mod­u­lar, and web­kit only; base­camp mo­bile = zepto and back­bone; Small is beau­ti­ful, easi­er to un­der­stand, and comes with less bugs; mus­tache.js, lawn­chair.js, back­bone.js; mi­crojs.com.

But with our ap­proach we had, in ef­fect, only treated one of the axes of a tra­di­tion­al grid sys­tem. Early con­cep­tu­al­iz­a­tion and pro­to­typ­ing of­ten eli­cit the columns, or ho­ri­zont­al rhythm in our designs. We should real­ize, however, that the con­tent that will oc­cupy those columns will be sub­ject to an in­ter­sect­ing rhythm. This is the ver­tic­al rhythm de­rived from ty­po­graph­ic font sizes and line spa­cings.

Be­cause of its de­pend­ence on doc­u­ment struc­ture and mul­tiple css rules, nail­ing ver­tic­al rhythm with an off-the-shelf solu­tion is pretty hard to do. While there are frame­works that in­cor­por­ate the no­tion of ver­tic­al rhythm, ex­tra-frame­work css de­vi­ations by de­velopers will of­ten break the math, and there­fore the grid. I think a more real­ist­ic (and less bloat-sus­cept­ible) ap­proach is to simply keep an eye on the rhythm through de­vel­op­ment it­er­a­tions. To that end, here’s a simple de­vel­op­ment tool that draws grid­lines on a can­vas over­laid on the page. Use it, get rhythm, gain con­trol, and shed the bloat.

ht­tps://git­hub.com/aaitken/Baseline

A couple of years back I half-yawned my way through a UX­Week break­out ses­sion on di­git­al strategy led by Hen­ning Fisc­her from Ad­apt­ive Path. Root cause ana­lys­is fea­tured. The group also went through a couple of mock spend­ing ex­er­cises. Then I re­mem­ber a Venn Dia­gram that had me say­ing, “I have to re­mem­ber this,” be­fore I skipped out early for some San Fran Chinese.

The yawns wer­en’t Fisc­her’s fault – I was just in a time and place that made it hard for me to take the 30,000-foot view. But the Venn stirred in me a sense of re­cog­ni­tion. It showed the over­lap of teams in­volved in design­ing and mak­ing on­line products. If the groups wer­en’t labeled as they are above they were pretty close, and the spot in the middle, Fisc­her stressed, was where the ten­sion of con­cerns was equal and the product was in­formed by its user ad­voc­ates, and busi­ness and tech­nic­al stake­hold­ers.

Part of the reas­on per­spect­ive can be dif­fi­cult, es­pe­cially for mem­bers of in-house teams, is be­cause we of­ten sub­scribe to a sort of jin­go­ist­ic world view that frames the pur­suit of user/busi­ness/tech­nic­al in­terests as a zero-sum com­pet­i­tion. In ef­fect, the Venn is sub­ject to ex­pans­ive, out­ward pres­sures as teams pur­sue their goals over the oth­ers.’ And in en­vir­on­ments where one group has a dis­pro­por­tion­ate amount of power or con­trol, this view en­sures that that group’s con­cerns are dis­pro­por­tion­ately rep­res­en­ted in the fi­nal product. Google’s products smell of en­gin­eer­ing. Most oth­ers leave us won­der­ing why re­gis­tra­tion is re­quired be­fore we’re offered con­tent, or why they simply aren’t bet­ter…

If we’re able to do a 180 and turn from na­tion­al­ists in­to glob­al­ists, the fo­cus for all teams be­comes max­im­iz­a­tion of the Venn over­lap. Pri­or­it­ies con­tin­ue to dif­fer­ but they’re no longer at odds by defin­i­tion. Busi­ness stake­hold­ers re­cog­nize that UX, though no­tori­ously dif­fi­cult to quanti­fy, is in­teg­ral to the bot­tom line and the UX guys in turn seek coun­sel from their backend coun­ter­parts. Each re­gion of the Venn is in­formed by the oth­er two as UX goals be­come Busi­ness goals be­come De­vel­op­ment goals. “What could be a four-step pro­cess has turned in to nine… Are we sure that the busi­ness value in users who com­plete these off­sets the im­plied tech­nic­al chal­lenges and user in­con­veni­en­ce and fal­lout?” Con­struct­ive de­bate on that kind of ques­tion puts us on our way to the right bal­ance of busi­ness and cus­tom­er needs.

I’ve per­son­ally fallen in­to the trap of think­ing I needed to de­fend UI/UX ter­rit­ory as part of my job. What I’ve later come to re­cog­nize-through ex­per­i­ence, read­ing, con­fer­ences, and UCD course audits-is that even in en­vir­on­ments that don’t in­vest heav­ily in user stud­ies or re­search, that UI/UX re­gion doesn’t be­long to us but rather to the user. Ac­know­ledge­ment of this real­ity can free today’s UI/UX de­sign­er to ad­voc­ate on be­half of the user, but with unique in­sight in­to busi­ness and tech­nic­al con­cerns-in oth­er words, to take the 30,000-foot view. And in fact, as the de­sign­ers of today’s di­git­al products, this is our ob­lig­a­tion. It’s up to us to be first in­to the over­lap.

Related

The three-legged stool
im­ple­ment­a­tion, men­tal, and rep­res­en­ted mod­els

Rear-wheel drive from Denver to Vail in surprise 12-30 storm.
5:45am 12-31 de­par­ture for 9:00am 0-de­gree As­pen trail­head.
REM, Dylan, Jimmy Vaughn, Son Volt, Tokyo Po­lice.
21 ski­ers, 4.5 hours, 2,000 feet…
16 beds, 2 days, 42 ski boots.
East Coast Rockies time zone.
Sparklers and down coats.
Eu­k­er, Pigs, Celebrity, Comet, Jenga, Dice, Hearts…
Laphroaig, Red Bull, Vodka, Egg­plant, Ba­con, Pine­apple Ex­press.
Skins, skis, snow.
Blisters, tape, and short on joe.
High­lands Bowl…
And a wrinkle in time.
Thanks y’all… and Happy 2011!

Al­most all ap­plicatons we in­ter­act with on the web are form driv­en. User-sup­plied data in; sys­tem con­clu­sion out. To be sure, a dec­ade plus of ex­per­i­en­ce and in­nov­a­tion has seen UX im­prove by leaps and bounds. But we’re still build­ing forms, and to that end I al­ways en­joy re-vis­it­ing the ba­sic ques­tion of how to build them well. Here’s the es­sence of a re­cent stab.

Re­quire­ment

A con­fer­ence re­gis­tra­tion form to be used by ad­mins from at­tend­ing schools to sub­mit school info, names and de­tails for event at­tendees, and at­tendee ‘Pre-Con­fer­ence’ and ‘In­sti­tute’ choices for each of the con­fer­ence’s three days. Form sub­mit­tal de­liv­ers an email re­ceipt to the ad­min as well as the con­fer­ence or­gan­izers.

Chal­lenges

1. In­form­a­tion There was a lot. From form sub­mit­ters we re­quired school info, point of con­tact info, at­tendees’ de­tails and con­tact info, and at­tendees’ choices for each of the three days. We also needed to give a de­tailed break­down of the choices along with cost in­form­a­tion.
2. Ac­cu­mu­la­tion The form needed to ac­com­mod­ate mul­tiple at­tendees from a school, and track each at­tendee’s choices for each day of the con­fer­ence.
3. De­pend­ency While at­tendees would be able to choose only a single Pre-Con­fer­ence or In­sti­tute for each of the first two days of the event, it would be pos­sible to choose two In­sti­tutes for the third day. Pos­sib­il­it­ies for a second would de­pend on the choice made for the first.
4. Cal­cu­la­tion Cost de­term­in­ants in­clude a school’s ‘mem­ber’ status, the num­ber of at­tendees it sends, wheth­er its at­tendees are also ‘presenters,’ and which ses­sions its at­tendees re­gister for. Each of these vari­ables needed to be tracked so that be­fore form sub­mis­sion we can present sum­mary info in­clud­ing total cost.
5. Val­id­a­tion …as al­ways.

Solu­tions

1. Wiz­ard & Se­greg­a­tion Chunking long forms in to steps with wiz­ards is a tried and true ap­proach that works well here. And rather than blur the line between in­form­a­tion we are re­quest­ing and in­form­a­tion we are de­liv­er­ing, we sharpen it with two dis­tinct views (‘Con­fer­ence Re­gis­tra­tion’ and ‘Con­fer­ence & Re­gis­tra­tion De­tails’).
2. Ad­apt­ab­il­ity We handle mul­tiple at­tendees as they come, with a tabled lay­out. After an at­tendee has been entered with re­quired info, we let the form user ‘Add Next At­tendee’ by ap­pend­ing a new row to the ta­ble. With this ap­proach we al­low for an un­lim­ited num­ber of at­tendees but nev­er present more fields than are re­quired. In the single-page form, at­tendee ses­sion choices are re­cor­ded in a second ta­ble that synchs to the first.
3. Cus­tom Con­trols Ba­sic­ally we want drop­downs with Pre-Con­fer­ence/In­sti­tute op­tions for each of the three days… ex­cept that for the last day, mul­tiple se­lec­tions may be val­id. Here, a cus­tom con­trol emu­lates the stand­ard drop­down but ties lo­gic to each se­lec­tion/un-se­lec­tion so that the user can nev­er make an in­val­id se­lec­tion. For visu­al con­sist­ency and great­er flex­ib­il­ity, we use a vari­ation of this con­trol for the first two days also.
4. JavaS­cript The lan­guage has al­ways been great for cli­ent-side cal­cu­lat­ors. It still is.
5. Min­im­al, Some­times Live Feed­back We de­cided that val­id emails were im­port­ant and that bey­ond that, we simply wanted to en­force com­ple­tion of re­quired fields. This stripped down set of re­quire­ments meant we could de­liv­er a single, stand­ard mes­sage for all er­ror scen­ari­os. When an er­ror mes­sage dis­plays, val­id­a­tion switches to a ‘live’ mode that re­moves er­ror in­dic­at­ors as source data is cor­rec­ted.

Clos­ing Notes

Some as­pects of the design get a little bit cheated when presen­ted in the iframe pulled up by the demo but­ton above. For IE, we de­cided on re­quir­ing users to use an­oth­er browser or else to in­stall Google Chrome Frame. While Chrome Frame de­tec­tion works from with­in the iframe, Chrome Frame itself ap­par­ently does not.

Cross-Site Re­quest For­ger­ies (CSRF) ex­ploit the trust that a site has with­in a user’s browser. By in­du­cing clicks on links to sites where users are sus­pec­ted to be au­then­tic­ated, per­pet­rat­ors can ex­ecute trans­ac­tions un­der the um­brella of a user’s cur­rent ses­sion. Re­quir­ing newly gen­er­ated para­met­er val­ues with each new POST or GET is one way for pro­gram­mers to pro­tect against CSRF. But while im­ple­ment­ing this re­quire­ment in page-driv­en ap­plic­a­tions is fairly straight-for­ward, ajaxi­fied apps make things more com­plic­ated. The fol­low­ing ap­proach lets us ab­stract the com­plic­a­tions out of our day-to-day so we can code both cur­rently and se­curely.

In­stead of

bank.com/with­draw?ac­count=bob&amount=1000000&for=mal­lory

we’re now go­ing to re­quire

bank.com/with­draw?ac­count=bob&amount=1000000&for=mal­lory&csr­f­Pro­tect=1234567890

where the csr­f­Pro­tect value is up­dated with each serv­er hit. As new pages are con­struc­ted on the ap­plic­a­tion serv­er, the csr­f­Pro­tect para­met­er and latest value are ap­pen­ded to any stat­ic links or ac­tions that kick off GETs or POSTs. Thus when le­git users fire the re­quests from the pages re­turned to their browsers, they also sup­ply a cur­rent csr­f­Pro­tect value that sig­nals all is above­board.

The com­plic­a­tion in these be­ing fired through ajax is two­fold. First, for each re­quest we need to dy­nam­ic­ally de­tect and in­clude a cur­rent csr­f­Pro­tect value. Then on the re­sponse, be­cause the app serv­er isn’t giv­en the chance to con­struct a new page, we need to it­er­ate through in-page links and ac­tions and up­date their para­met­er value.

The easi­est way I’ve found to keep up with the chan­ging csr­f­Pro­tect value is to simply re­quire it be sup­plied in any page that might in­stig­ate ajax re­quests, and as part of the data in any ajax re­sponse (in the code be­low, the value is trans­por­ted with in­put[type=hid­den].csr­f­Pro­tect). With these hooks and a stand­ard­iz­a­tion of IE’s im­ple­ment­a­tion in place, we can modi­fy the XM­L­Ht­tpRe­quest ob­ject’s pro­to­type with a new csr­f­Pro­tect prop­erty and a cus­tom open meth­od that in­ter­cepts and up­dates re­quests be­fore they are sent to the serv­er. jQuery’s ajax­Com­plete meth­od keeps XM­L­Ht­tpRe­quest.pro­to­type.csr­f­Pro­tect up-to-date and ready for the next re­quest.

  1: /*

  2: in­clude jQuery

  3: in­clude ht­tp://code.google.com/p/xm­l­ht­tpre­quest to stand­ard­ize XM­L­Ht­tpRe­quest as con­struct­or func­tion in IE<7 (info at ht­tp://www.il­in­sky.com/art­icles/XM­L­Ht­tpRe­quest/)

  4: */

  5:

  6: //over­ride jQuery's de­fault IE<7 call for the Act­iveX ob­ject with stand­ard con­struct­or (avail­able to IE<7 via il­in­sky.com script)

  7: $.ajax­Setup({

  8:   xhr:func­tion(){re­turn new XM­L­Ht­tpRe­quest();}

  9: });

 10:

 11: (func­tion(){

 12:   var $links,//in-page ele­ments whose csr­f­Pro­tect param value needs up­dat­ing on ajax re­sponses 

 13:     b;//'?' or '&' de­pend­ing on if re­ques­ted URL already has params

 14:

 15:   //Store off nat­ive XM­L­Ht­tpRe­quest.open as XM­L­Ht­tpRe­quest.nat­i­ve­Open

 16:   XM­L­Ht­tpRe­quest.pro­to­type.nat­i­ve­Open = (func­tion(){

 17:     re­turn XM­L­Ht­tpRe­quest.pro­to­type.open;

 18:   }());

 19:

 20:   //Re­define XM­L­Ht­tpRe­quest.open to in­ter­cept and modi­fy re­quest

 21:   XM­L­Ht­tpRe­quest.pro­to­type.open = func­tion(){

 22:

 23:     var a=ar­gu­ments;//ori­gin­ally sup­plied ajax ar­gu­ments

 24:

 25:     //Mutate first in­stance (ini­tial re­quest) of XM­L­Ht­tpRe­quest with csr­f­Pro­tect prop­erty and value if 'csr­f­Pro­tect' class is found with­in the page

 26:     if(!this.csr­f­Pro­tect&&$('.csr­f­Pro­tect').length>0){

 27:       this.csr­f­Pro­tect=$('.csr­f­Pro­tect:eq(0)').val();

 28:     }

 29:

 30:     if(this.csr­f­Pro­tect){

 31:       a[1]=a[1]+(func­tion(){a[1].in­dex­Of('?')>0?b='&':b='?';re­turn b}())+'csr­f­Pro­tect='+this.csr­f­Pro­tect;//ap­pend csr­f­Pro­tect para­met­er and value to re­ques­ted url

 32:     }

 33:     this.nat­i­ve­Open(a[0],a[1],a[2],a[3],a[4]);//open re­quest

 34:   };

 35:

 36:   $(win­dow).ajax­Com­plete(func­tion(event,xhr,set­tings){

 37:     var csrf­Split=xhr.re­spon­se­Text.split('class="csr­f­Pro­tect" VALUE='),

 38:       csr­f­Value;

 39:     if(csrf­Split.length>1){

 40:       csr­f­Value=csrf­Split[1].split('>')[0];

 41:       this.XM­L­Ht­tpRe­quest.pro­to­type.csr­f­Pro­tect=csr­f­Value;

 42:     }

 43:     //up­date page links with latest csr­f­Pro­tect value

 44:     $links.each(func­tion(){

 45:       if(this.href){this.href=this.href.re­place(/csr­f­Pro­tect.*/,'csr­f­Pro­tect='+this.XM­L­Ht­tpRe­quest.pro­to­type.csr­f­Pro­tect);}//this re­place makes the as­sump­tion that csr­f­Pro­tect param and value are al­ways last in URL

 46:     });

 47:

 48:   });

 49:

 50:   //links

 51:   $(doc­u­ment).ready(func­tion(){

 52:     $links=$('a');//modi­fy this se­lect­or and $(win­dow).ajax­Com­plete lo­gic per ele­ments that need up­dat­ing

 53:   });

 54: }());

The sleep­er in this im­ple­ment­a­tion is Sergey Il­in­sky’s script, which not only ex­poses the XM­L­Ht­tpRe­quest’s pro­to­type prop­erty in IE but stand­ard­izes the ajax im­ple­ment­a­tion across all browsers. In the code above we take ad­vant­age of the jQuery wrap­per and meth­ods be­cause we’re work­ing in a jQuery shop. XM­L­Ht­tpRe­quest.js, however, gives us the same cross-browser ac­cess to ajax states that jQuery does. If we wer­en’t already in­cur­ring the jQuery over­head, we could achieve the same res­ults with some slightly raw­er JavaS­cript.