Be German About Your Frontend

2,693 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,693
On SlideShare
0
From Embeds
0
Number of Embeds
1,554
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Devices are more powerful\n\n
  • \n
  • \n
  • \n
  • Old\nHave to write lots of ajax code to make it feel fast\n
  • \n
  • \n
  • \n
  • \n
  • CTO’s job - use the right technology for the right problems\n\nWe’ve heard it AGAIN and AGAIN about personalisation - the intelligence should be on the frontend, then you can cache as much as possible\n\nPerfect opportunity for fullpage caching. It doesn’t get more perfect than this\n\nForces us to write more organised code, load the right stuff at the right time\n\n70% of speed is in the frontend\n
  • CTO’s job - use the right technology for the right problems\n\nWe’ve heard it AGAIN and AGAIN about personalisation - the intelligence should be on the frontend, then you can cache as much as possible\n\nPerfect opportunity for fullpage caching. It doesn’t get more perfect than this\n\nForces us to write more organised code, load the right stuff at the right time\n\n70% of speed is in the frontend\n
  • CTO’s job - use the right technology for the right problems\n\nWe’ve heard it AGAIN and AGAIN about personalisation - the intelligence should be on the frontend, then you can cache as much as possible\n\nPerfect opportunity for fullpage caching. It doesn’t get more perfect than this\n\nForces us to write more organised code, load the right stuff at the right time\n\n70% of speed is in the frontend\n
  • CTO’s job - use the right technology for the right problems\n\nWe’ve heard it AGAIN and AGAIN about personalisation - the intelligence should be on the frontend, then you can cache as much as possible\n\nPerfect opportunity for fullpage caching. It doesn’t get more perfect than this\n\nForces us to write more organised code, load the right stuff at the right time\n\n70% of speed is in the frontend\n
  • CTO’s job - use the right technology for the right problems\n\nWe’ve heard it AGAIN and AGAIN about personalisation - the intelligence should be on the frontend, then you can cache as much as possible\n\nPerfect opportunity for fullpage caching. It doesn’t get more perfect than this\n\nForces us to write more organised code, load the right stuff at the right time\n\n70% of speed is in the frontend\n
  • \n
  • \n
  • Change the model, view auto updates\nFinally, frontend is real programming now too!\n
  • Change the model, view auto updates\nFinally, frontend is real programming now too!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • dataType: “script”\n
  • \n
  • Change the model, view auto updates\nAngular is built for CI\nFinally, frontend is real programming now too!\n\n
  • dataType: “script”\n
  • dataType: “script”\n
  • dataType: “script”\n
  • \n
  • \n
  • Same thing applies\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • dataType: “script”\n
  • \n
  • \n
  • Be German About Your Frontend

    1. 1. Click to edit Master title styleClick to edit Master text stylesBe German About Your Frontend @arush - CTO - getbrandid.com
    2. 2. Click to edit Master title styleClick to edit Master text styles
    3. 3. • Ex-consultant• Ex-client• Startups• Co-founder BRANDiD - (Seedcamp ’12)• #TechCityUK• #MagentoLDN
    4. 4. What is Frontend in 2012?
    5. 5. What is Frontend in 2012?1. Javascript MVCs & Mobile Apps2. OOCSS, SASS & Responsive
    6. 6. What is Frontend in Magento?
    7. 7. CSS
    8. 8. CSS
    9. 9. ...but lets talk about javascript first
    10. 10. Javascript• Nobody likes Prototype.js• Validation is clunky• Scriptaculous is old hat• Built for static HTML• Need to write lots of AJAX• No frontend
    11. 11. Javascript• Nobody likes Prototype.js• Validation is clunky• Scriptaculous is old hat• Built for static HTML• Need to write lots of AJAX• No frontend
    12. 12. I’D LIKE TO TAKEMAGENTO’S FACE OFF
    13. 13. { JSON }BACKEND FRONTEND
    14. 14. Catalog Customers Orders PersonalisationInvoices Shopping Cart { JSON }BACKEND FRONTEND
    15. 15. Catalog Customers Orders PersonalisationInvoices Shopping Cart { JSON }BACKEND FRONTEND
    16. 16. Catalog Customers Orders PersonalisationInvoices Shopping Cart { JSON }BACKEND FRONTEND
    17. 17. Catalog Customers Orders PersonalisationInvoices Shopping Cart { JSON }BACKEND FRONTEND
    18. 18. Catalog Customers Orders PersonalisationInvoices Shopping Cart { JSON }BACKEND FRONTEND
    19. 19. start small
    20. 20. REMOVE Magento Javascript• REMOVE Prototype.js• REMOVE Scriptaculous• REMOVE Varien stuff
    21. 21. REMOVE Magento Javascript• REMOVE Prototype.js• REMOVE Scriptaculous• REMOVE Varien stuff
    22. 22. 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)
    23. 23. LandingPages Deep Pages checkout
    24. 24. • 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
    25. 25. ...now we can write modular code which means SPEEEEEED...
    26. 26. • 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
    27. 27. Pre-fetching is easy$.ajax({ url:"<?php echo $this->getSkinUrl(thing.js); ?>", cache: true, dataType: "text" }).done(function ( data ) { ! // callback });
    28. 28. JS MVCs elminate alot of JSe.g. listeners, form validation...
    29. 29. Javascript MVCs• Devices are more powerful• JS MVC = Proper Dynamic HTML
    30. 30. Repeats & Auto-updating Classes <li ng-repeat="product in products"> <div class="{{product.inMySize()}}"> ...<img.../> </div> </li>
    31. 31. Awesome Form Validation <input class="ng-dirty ng-invalid ng-invalid- required”>
    32. 32. 2-way data binding
    33. 33. CSS
    34. 34. CSS
    35. 35. • Thing of a page as components site.js site.css widget2.js widget2.css widget.js widget.css widget3.js widget3.css
    36. 36. SASS
    37. 37. OOCSS• Separate container and content (this is about the cascade)
    38. 38. OOCSS• Separate structure and skin• Works well for responsive frameworks (base.scss, layout.scss, grid.scss)
    39. 39. Avoid spaghetti! Start Now!
    40. 40. Avoid spaghetti! Start Now!
    41. 41. 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
    42. 42. 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
    43. 43. Apply via APIgetbrandid.com/keep/your/pantson

    ×