1. RH ContemporaryArt developed a single page application using AngularJS to power their e-commerce site, marrying together various technologies like Oracle ATG, JBoss, and Brightcove. 2. They developed a complex controller hierarchy and data-driven service-oriented architecture to power the dynamic pages like artwork listings, product pages, and the shopping cart. 3. Issues with the single page application approach included it being easy to create monolithic controllers, needing to run everything over SSL, and content not being discoverable by search bots.

1. hugeinc.com
isf@hugeinc.com
1160 Battery Street, Suite 375
San Francisco CA 94111 United States
+1 415 813 6777
November 11, 2013
QCon presentation

2. Agenda:
1. The problem 2. The solution
3. Issues 4. The future

3. The tale of two
internets.

4. Exciting stuff
2 Internets:

5. NYTimes Snow Fall Article

6. SalesForce Customer Company

7. Nitrous.io

8. Acko.net

9. The tyranny of the
“L” nav.
2 Internets:

10. The “L” nav shopping experience
Logo
Product Category Product Category Product Category
• Facet
• Facet
• Facet
• Facet
• Facet
Product
1
Product
2
Product
3
Product
4
Product
5
Product
6
Product
7
Product
8

11. Amazon

12. Sur la table

13. Patagonia

14. JCPenny

15. Sundance Catalog

16. Fab

17. Gilt

18. Reform School

19. Why is this so
hard?
2 Internets:

20. eCommerce is hard.

21. Which makes companies
risk averse.

22. User expectations are set.

23. Which makes companies
risk averse.

24. The tools provide so much.

25. Which makes it easy for companies to
be
risk averse.

26. RH ContemporaryArt
did not want to risk averse.

27. To be a disruptor:
You need to be
BOLD.

29. The rising star.

30. Married the two.

31. RH ContemporaryArt

32. Services and
controllers and
directives --
oh my.

33. JBOSS Application Server
Oracle ATG 10.1
The marriage.
Scene7Admin
DPS
Module
DAS
Module
ApacheWebServer2.2
CAGlobalModule
AkamaiEdge-Caching
RHCA Associate
RHCA Cutomer
HTML5/CSS3
JQuery
Angular.JS
BrightCovePlayerFluid/ResponsiveElements
ATGBCC
BrightcoveAdmin
DCS
Module
Oracle 11g
Art
Team
BCC Deployment
1 2
Internet
3
GlobalModule
Scene7Image
Server
BrightCoveVideo
Streaming
UtilityJSlibs
RHCA
plugins

34. Controller hierarchy.
Root
Nav
Controllers
Route
Share
Acquisitions
Header
Register
Page
Controllers
Artist Detail
Artists
Landing
Artwork
Landing
Contact
Gallery
Homepage
Journal
News
Browse
Controllers
Browse
Artwork
Browse
Browse Title
Moment
Alone
Artwork
Detail
Cart
Controllers
Cart Advisor
Cart
Cart
Overview
Cart
Payment
Cart Review
Cart
Shipping
Cart
Shipping
Handling
Settings
Controllers
Address
Settings
Credit Card
Settings
Email
Settings
Password
Settings
Subscription
Settings
Collections
Controllers
Choose
Collection
Collection
Collections
Edit
Collection
Form
Utility
Controllers
Brightcove
Video
Content
Forgot
Password
Modal
Reset
Password

35. Data pages
Architecture

36. MVC Content Pages
JSP
template
Page
directive
Page
controller
Controller
service
JSP
service
Page
DOM
View
Model
Controller

37. Data-driven SOA.
Page Service Angular Controller Angular Directive
Artwork Landing Page
_artwork-by-type-
service.jsp
ArtistsLanding ArtistsLanding
Artwork Type Page
_artwork-by-type-
service.jsp
ArtworkResults ArtworkResults
Artist Landing Page browse-artists.jsp ArtistsLanding ArtistsLanding
Artist Gallery Browse _artwork-service.jsp
Browse
BrowseArtwork
BrowseTitle
Browse
BrowseArtwork
BrowseTitle
Moment Alone _artwork-service.jsp ArtworkDetail ArtworkDetail
Artist Bio _artists-service.jsp ArtistDetail ArtistDetail

38. App pages
Architecture

39. Shipping load
Cart
Shipping
template
Shipping
directive
Shipping
controller
Cart
service
JSP
service
Cart
Shipping
DOM
Cart
controller
Cart Form JSP
Shipping Form
Payment
Form
Overview
controller
Con=nue

40. Shipping Submit
Cart
Shipping
template
Shipping
directive
Shipping
controller
Cart
service
JSP
service
Cart
Shipping
DOM
Cart
controller
Overview
controller
Cart Form JSP
Shipping Form
Post
Back
Submit
Copy
Values
Into
Form
Payment
Form

41. Shipping Response
Cart
Shipping
template
Shipping
directive
Shipping
controller
Cart
service
JSP
service
Cart
Shipping
DOM
Cart
controller
Cart Form JSP
Shipping Form
Post
Back
Response
Payment
Form
Success
Error
Overview
controller

42. We could not use JQuery serialize.

43. Shipping Page DOM
Scopes and the digest cycle.
Cart Form JSP
Shipping Form
Shipping Form
Cart Shipping
Template
<div
cart-­‐shipping-­‐direc=ve>
Shipping directive
Shipping
controller
Cart
controller
scope.shippingForm
• email:
• emailConfirm:
• firstName
Digest
cycle

44. Issues.

45. It is very easy to make
monolithic controllers.

46. Single page apps require you to run
everything in SSL.

47. Our inventory was always 1.

48. Single page apps don’t get consumed
by search bots.

49. BCC is not a
content management tool.

50. The future.

51. Angular UI, 1.2/2.0

52. ATG 10.2

53. Ember

54. Oracle WebCenter/ATG

55. Questions…

56. hugeinc.com
info@hugeinc.com
45 Main St. #220 Brooklyn, NY 11201
+1 718 625 4843

57. • Write as concisely as you can. The template works best
with short text.
• We use sentence case, not title case.
• Use punctuation & ampersands: they look cool.
• We only use 2 fonts. Huge AVG Bold & Arial.
• Don’t underline. It looks awful. Use a color instead.
• Huge is spelled ‘Huge’ not ‘HUGE’.
Style notes.