This talk covers a special use case. On stores with a small number of products it can make sense to completely replace the usual Magento front end and build a single page shop. This page contains the product presentation and enables the customer to check out easily. No catalog browsing functionality is present, since the goal is to get the customer from product presentation to checkout as quickly and easily as possible. The front end communicates with Magento via the REST API to fetch product information, create the customers and processes the orders. Building the customer facing page with a framework like AngularJS makes the front end work fun and easy. On the backend, the Magento REST API needs to be extended in order to provide all required functionality. Moving more business logic to the client side enables the Magento store to scale with less resources. This talk will cover an overview over the architecture and the challenges to overcome when building a one page store.

1. Single Page
Shops
With Magento
And AngularJS

2. Who am I?
Vinai

3. How did I get here?

4. Freelance again!

5. I want to write a book...
...about Magento
(one trick pony)

6. Iʹll Self Publish!
...on Magento

7. Work, Lots!
Fun Stuff
Coding
Money
Unfun Stuff
Settings
Theming
Email Templates
Terms & Conditions
Support

8. MORE FUN

10. WoW
Much
Different
So faster
News Learnin
Very
Angular
Such JS
So Modern
WoW

11. JavaScript MVC Toolkit

12. DI and Testability are at its
very core

13. Clean separation of MVC
layers

14. Many pre‑made Modules

15. No jQuery or Prototype!
(okay, it has jQuery Light)

16. Web‑App
AngularJS
Frontend
<= REST API =>
Magento
Customers
Products
Orders
Payments
Downloads
Admin Interface

17. Planning

18. Reduce to the max!

19. Starting out
Magento CE 1.8.1.0
angular‑seed

20. Magento REST API
Basics

21. REST API
!==
SOAP APIs

22. Mage_Api2

23. Resources

Products,
Product
Categories,
Product
Images,
Product
Websites

Stock Items

Customers,
Customer
Addresses

Orders,
Order Items,
Order
Addresses,
Order
Comments

24. Resource Attributes
You know the drill...
 Products have Names, ...
 Customers have Groups, ...

25. Resource Routes
/api/rest/products/category/10/store/2

26. Route Action Types
Collection
/api/rest/products/category/10/store/2
Entity
/api/rest/products/16

27. Operations
Mapping of HTTP verbs
GET => retrieve
POST => create
PUT => update
DELETE => delete

28. Roles
Admin
Customer
Guest

29. What weʹve got
Roles Resources
Attributes
Routes
Action Types
Operaton
Types

30. That all?

31. ACL

32. Each role can be allowed or denied potential access to each
resource by operation type via api2.xml.
E.g. guests may retrieve products, but not create them.

34. Under System > Web Services > REST ‑ Roles each potential role
permission has to be assigned, too.

35. Resource Attributes ACL
Same as roles... defined in XML, but ACL also has to be
assigned in the DB through the backend.
System > Web Services > REST ‑ Attributes

36. Not so elegant transition from theory to real stuff =>

37. Customize
the REST API

38. Customer Authentication
OAuth

39. Session Authentication!
REST API requests always run in admin store scope.
$_SERVER['MAGE_RUN_CODE'] is not evaluated.

40. Api2 Session Auth Adapter
1. If frontend cookie exists
2. Set current store to frontend
3. Start frontend session
4. Check if customer is logged in

41. Which store?
1. Evaluate store cookie
2. If not found, use the default
websites default store view
3. Hope the customer belongs to
the website

42. Code
VinaiKopp_Api2SessionAuthAdapter
VinaiKopp_Api2SessionLogin

43. More REST Related
Extensions
VinaiKopp_Api2CreateAccount
VinaiKopp_Api2Directory
VinaiKopp_Api2SessionCustomerAddress
VinaiKopp_Api2ForgotPassword
VinaiKopp_Api2Downloads
Grokking_Api2Checkout
(coming to github as time allows ‑ pls ask if you need sooner)

44. The Frontend

45. 7
things
I dig
ʹbout

46. 1. Modules
angular.module('magentoApp',[]);
angular.module('magentoApp',['ngRoute']);
Look Ma, Module Dependencies!

47. Modules provide things
angular.module('magentoApp',['ngRoute'])
.factory('Countries',function(){
return{
code:'ES',name:'Espania'
};
});

48. Things modules provide
Services
Controllers
Directives
Filters
and more...

49. 2. Dependency Injection
If a module needs a thing...

50. ...just add it to the
arguments
.controller('RegistrationCtrl',function($scope,Countries){
$scope.countries=Countries;
})

51. 3. Mangling Protection

52. JavaScript Compression
I HAZ TEH MINIFICATSION! (meow)
Variable names made shorter...
KILLS the DI!

53. Mangling Protection
.controller('RegistrationCtrl',['Countries',function($scope,Countries){
$scope.countries=Countries;
}])

54. 4. Promises

55. Asynchronous Things
XHR Requests and setTimeout Callbacks

56. Callback Try & Catch
Countries.fetch().
then(verifyAddress).
then(createAddress).
catch(displayAlert);

57. Can be combined!
$q.all(Countries.fetch(),Regions.fetch()).
then(verifyAddress).
then(createAddress).
catch(displayAlert);

58. 5. REST Resources

59. Inject $resource...
.factory('ForgotPassword',['$resource',function($resource){
return$resource('/api/rest/customer/forgotpassword/:email');
});

60. ...and use
varresult=ForgotPassword.get({
email:email
});

61. Custom actions!
.factory('ForgotPassword',['$resource',function($resource){
varresource=$resource('/api/rest/customer/forgotpassword/:email',{},{
validate:{method:'GET',isArray:true},
reset:{method:'PUT',isArray:false}
});
});

62. Fluid code :)
varresult=ForgotPassword.verify({
email:email,
token:token
});

63. 6. Model Data Binding
[ ]
<p>{{example}}</p>
<inputtype="text"ng-bind="example">
Show Example

64. 7. Testability
it('shouldcallcalcRowTotal()whenaddItemiscalledwithanewitem',
function(){
expect(cart.items.length).toBe(0);
cart.addItem(mock_product);
expect(mock_item.calcRowTotal).toHaveBeenCalled();
});

66. Would I do it again?

67. Yeaaah!

68. Complications
aka ʺOpportunities for Growthʺ

69. Scope Nesting
can be tricky

70. Frontend Architecture
Build a mini‑framework
Session State Management
Splash Messages
Consistent error handling

71. Bad Crunch‑Time
Descisions
Last Friday I was running out of time
so I decided to continue without TDD

73. A lesson learned...
again
I need more time to test manually then to write the tests.

74. Dankeschön!
@VinaiKopp on
Api2 Extensions on GitHub
