How we built the new responsive BBC News site

How we built the new responsive BBC News site

Life used to be easy. We created sites to work on a few browsers and when we had time we asked the new guy to build a half baked mobile version. Then the device explosion ruined our cozy happy dev life. My talk will discuss how the BBC met this challenge.

- How we support as many devices as possible using responsive design.
- How we're using a sprinkle of Symfony2 components in our Zend world.
- How we scale to serve BBC News to the masses.
- What tools we use to help us along the way.

85a9fce93e576e9e99eed5a61a7e5c4a?s=128

jcleveley

June 10, 2012
Tweet

Transcript

  1. 13.

    Screen Size Capability Smart phones desktop small big tablets Net

    books TVs e-readers feature phones it’s complicated .. Connection speed? Resolution? input method? Sunday, 10 June 2012
  2. 19.

    Even  Google  [is]  not  rich  enough   to  support  all

     of  the  different   mobile  pla:orms... “ ” Vic  Gundotra,  VP  of  engineering  at  Google Sunday, 10 June 2012
  3. 22.

    Device detection client side client server wurfl set  cookie client

    server 1. Detect 2. Scale 3. Enhance XHR server side Sunday, 10 June 2012
  4. 25.

    responsive design Features  built  once  -­‐  release   simultaneously  all

     pla:orms Quickly  adapt  when  a  new  device  arrives One  code  base Hosted  on  a  single  URL  space Sunday, 10 June 2012
  5. 27.

    trash rubbish filler content nonsense crap poppycock garbage baloney twaddle

    tomfoolery tripe jQuery.js jQueryUI.js Uniform.js jTextTranslate.js TopUp.js TipTip.js FullCalendar.js grid.js Uploadify.js Elastic.js Contactable.js MarkItUp.js Autotab.js jExpand.js jBreadCrumb.js Vertical-Scroll-Menu.js Compact- News-Previewer.js Pull-Out-Content- Panel.js Mega-Drop-Down-Menu.js Apple-like-Retina-Effect.js Simple- Accordion.js gMap.js Stylish-Content- Sunday, 10 June 2012
  6. 29.

    It’s  a  myth  that  mobile  users   don’t  want  to

     do  everything   that  desktop  users  do. Sunday, 10 June 2012
  7. 33.

    speed the core experience is fast 1  HTML  document 1

     image  for  the  first  story 2  CSS  requests 2  branding  images 1  stats  web  bug 7  requests   21kb ~ Sunday, 10 June 2012
  8. 34.

    good browser? it cuts the mustardtm if( 'querySelector' in document

    && 'localStorage' in window && 'addEventListener' in window ){ // party time! } Sunday, 10 June 2012
  9. 35.

    good browser? it cuts the mustardtm Avoids  downloading  large  DOM

     libraries Make  use  of  naVve  features  in  the  browser Most  browsers  will  sVll  pass Reduces  dev  Vme  on  new  features Sunday, 10 June 2012
  10. 36.
  11. 37.

    images Dynamic resizing <!-- Core image which will be replaced

    --> <img src="http://domain.com/200/foo.jpg" class="image-replace"> <!-- Placeholder image for variable size --> <div data-src="http://domain.com/200/bar.jpg" class="delayed-image-load"> </div> Sunday, 10 June 2012
  12. 41.

    Gzip  responses  from  your  server Concatenate  your  CSS  /  JS

    Use  CSS  sprites Monitor  3rd  party  plugins OPtimise fewer requests smaller responses Sunday, 10 June 2012
  13. 42.

    render on server keep it simple. Non-­‐JS  devices  can  view

     content Keep  templates  in  one  place JS  rendering  engines  are  slooooooow TranslaVons  are  much  easier  on  the  server Sunday, 10 June 2012
  14. 45.

    anmo capybara cucumber selenium symfony components zend wally pimple varnish

    vagrant AMD ender event  emi]er QUnit less  css rake github xhprof jshint tsung phpunit Sunday, 10 June 2012
  15. 46.

    varnish protect your back end Front-­‐end annotations ZTM Service Varnish

    X-Cache-Control: max-age=120 Sunday, 10 June 2012
  16. 49.

    Pimple small and fearsome Light  weight  Dependency  InjecVon  Container Easy

     for  developers  to  understand Promotes  good  pracVce  without  a  heavy  lib Easy  to  start  using  within  Zend  Framework Sunday, 10 June 2012
  17. 50.

    <?php class Application extends Pimple { ... // Register service

    providers $this->register( new HttpClientProvider() ); $this->register( new CandyProvider() ); // Make container available to Zend controllers $this['zend_front']->setParam( 'container', $this ); } Sunday, 10 June 2012
  18. 51.
  19. 52.

    Event dispatcher Promotes  nice  decoupled  components Add  logic  throughout  app

     without  hard  coding   method  calls. SomeVmes  difficult  to  keep  track  of  calls Sunday, 10 June 2012
  20. 53.

    class Zend_Events extends Zend_Controller_Plugin_Abstract { ... public function dispatchLoopStartup($request) {

    $this->dispatcher->dispatch( 'zf.request', $this->createEvent($request) ); } public function preDispatch($request) { $this->dispatcher->dispatch( 'zf.controller', $this->createEvent($request) ); } public function dispatchLoopShutdown() { $this->dispatcher->dispatch( 'zf.response', $this->createEvent() ); } ... Sunday, 10 June 2012
  21. 54.

    JS Micro libraries we don’t need the kitchen sink Small

     single  purpose  components   Send  code  to  the  client  that  you  actually  use Interchange  with  other  micro  libs Remove  the  dependency  on  a  framework   Sunday, 10 June 2012
  22. 55.

     Reqwest  -­‐  AJAX  requests  Qwery  -­‐  Selector  wrapper  for  

    naVve  funcVons  Bonzo  -­‐  DOM  uVlity  methods  Event  EmiIer  -­‐  PubSub  Curl  -­‐  AMD  Javascript  loader Sunday, 10 June 2012
  23. 56.

    AMD Makes JS Maintainable Manages  your  dependencies 1 6 5

    2 4 3 B A COMPILE Sunday, 10 June 2012
  24. 57.

    AMD Makes JS Maintainable define( ['vendor/reqwest', 'vendor/pubsub'], function(reqwest, pubsub){ return

    { name: 'fred' }; } ); Dependencies Local  vars The  thing Sunday, 10 June 2012
  25. 60.

    Final thoughts Speed  is  the  key Back  to  basics Responsive

     design What’s  next?  ...   Sunday, 10 June 2012