1. Click to edit Master title style
Click to edit Master text styles
Be German About Your Frontend
@arush - CTO - getbrandid.com

2. Click to edit Master title style
Click to edit Master text styles

3. • Ex-consultant
• Ex-client
• Startups
• Co-founder BRANDiD - (Seedcamp ’12)
• #TechCityUK
• #MagentoLDN

7. What is Frontend in 2012?

8. What is Frontend in 2012?
1. Javascript MVCs & Mobile Apps
2. OOCSS, SASS & Responsive

9. What is Frontend in Magento?

10. CSS

11. CSS

12. ...but lets talk about javascript first

14. Javascript
• Nobody likes Prototype.js
• Validation is clunky
• Scriptaculous is old hat
• Built for static HTML
• Need to write lots of AJAX
• No frontend

15. Javascript
• Nobody likes Prototype.js
• Validation is clunky
• Scriptaculous is old hat
• Built for static HTML
• Need to write lots of AJAX
• No frontend

17. I’D LIKE TO TAKE
MAGENTO’S FACE OFF

19. { JSON }
BACKEND FRONTEND

20. Catalog Customers
Orders Personalisation
Invoices Shopping Cart
{ JSON }
BACKEND FRONTEND

21. Catalog Customers
Orders Personalisation
Invoices Shopping Cart
{ JSON }
BACKEND FRONTEND

22. Catalog Customers
Orders Personalisation
Invoices Shopping Cart
{ JSON }
BACKEND FRONTEND

23. Catalog Customers
Orders Personalisation
Invoices Shopping Cart
{ JSON }
BACKEND FRONTEND

24. Catalog Customers
Orders Personalisation
Invoices Shopping Cart
{ JSON }
BACKEND FRONTEND

26. start small

27. REMOVE Magento Javascript
• REMOVE Prototype.js
• REMOVE Scriptaculous
• REMOVE Varien stuff

28. REMOVE Magento Javascript
• REMOVE Prototype.js
• REMOVE Scriptaculous
• REMOVE Varien stuff

29. Replace with
• Google CDN jQuery
<block type="core/text" name="google.cdn.jquery">
<action method="setText">
<text><![CDATA[<script type="text/javascript" src="https://
ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>]]>
</text>
</action>
</block>
• Parse and Angular.js (for Frontend MVC)

30. Landing
Pages
Deep
Pages
checkout

31. • Thing of a page as components
site.js
site.css
page.js
page.css
widget2.js
widget2.cs
s
widget.js
widget.css
widget3.js

34. ...now we can write modular code
which means SPEEEEEED...

36. • Load as little as you can first
cart.js
cart.css
landing.js
landing.css
after 5s checkout.js
checkout.css
site.js
site.css
catalog.js
catalog.css
• Then anticipate and pre-fetch

37. Pre-fetching is easy
$.ajax({
url:"<?php echo $this->getSkinUrl('thing.js'); ?>",
cache: true,
dataType: "text"
}).done(function ( data ) {
! // callback
});

38. JS MVCs elminate alot of JS
e.g. listeners, form validation...

39. Javascript MVCs
• Devices are more powerful
• JS MVC = Proper Dynamic HTML

40. Repeats & Auto-updating Classes
<li ng-repeat="product in products">
<div class="{{product.inMySize()}}">
...<img.../>
</div>
</li>

41. Awesome Form Validation
<input class="ng-dirty ng-invalid ng-invalid-
required”>

42. 2-way data binding

44. CSS

45. CSS

46. • Thing of a page as components
site.js
site.css
widget2.js
widget2.css
widget.js
widget.css
widget3.js
widget3.css

47. SASS

48. OOCSS
• Separate container and content (this is about the
cascade)

49. OOCSS
• Separate structure and skin
• Works well for responsive
frameworks (base.scss,
layout.scss, grid.scss)

50. Avoid spaghetti! Start Now!

51. Avoid spaghetti! Start Now!

53. BE A GERMAN! STAY ORGANISED!
• Landing vs. site
• Use the right tech for the right problems
• Break pages into reusable components /
objects
• That’s what OOCSS / SMACSS is
• Use Codekit

54. Resources
• github.com/arush, slideshare.com/arushsehgal
• emberjs.com, angularjs.org, backbonejs.org
• Angular-ui.github.com
• incident57.com/codekit
• Nicole Sullivan on OOCSS - http://www.vanseodesign.com/css/object-oriented-css/
• js2coffee.org
• SASS - http://sass-lang.com/
• Responsive Ecommerce done right - http://bradfrostweb.com/demo/mobile-first/#page
• Responsive/Adaptive frameworks - http://foundation.zurb.com/, http://getskeleton.com

55. Apply via API
getbrandid.com/keep/your/pantson