Be German About Your Frontend
Upcoming SlideShare
Loading in...5
×
 

Be German About Your Frontend

on

  • 2,413 views

 

Statistics

Views

Total Views
2,413
Views on SlideShare
955
Embed Views
1,458

Actions

Likes
0
Downloads
4
Comments
0

4 Embeds 1,458

http://founders.getbrandid.com 1380
http://posterous.com 56
http://dex.io 21
http://web.archive.org 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Be German About Your Frontend Presentation Transcript

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