TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

How we built the new BBC Homepage

154 pointsby achalkleyover 10 years ago

25 comments

mikecmpbllover 10 years ago
Christ, so much hatred.<p>I like the desktop site, I like the mobile site, and I like and appreciate that you&#x27;re giving us an insight in to your tech stack and how content is published.<p>Cheers beeb.
评论 #9061797 未加载
评论 #9061776 未加载
评论 #9061502 未加载
Twirrimover 10 years ago
Hmm. While it&#x27;s nice to push rendering out to clients for saving your server CPU, that can lead to a suboptimal mobile experience, requiring more CPU and battery power on the mobile device to work on the javascript and render the page. There are other factors, for sure, but you want to be keeping client side javascript down to a minimum.<p>Taking a quick spin through yslow in the mobile browser suggests they&#x27;ve got a number of areas to improve on to make the time to screen significantly better on mobile devices (even on a fast connection here it took several seconds to even start showing me content, and several more before it had finally loaded everything)<p>Given the world wide reach of the BBC, expecting high speed and low latency networks seems like a bad idea. In the US, 3G &amp; 4G typically see 90-100ms latency per request. Mobile Yslow is reporting that they&#x27;ve got 21 javascript scripts alone on the page. IIRC The android browser will limit itself to 4 threads retrieving content typically so that&#x27;s (21&#x2F;4 * 100ms) 525ms just lost in latency requesting the javascript, let alone actually downloading it and the overhead of the javascript renderer. It&#x27;s also pulling in content from 21 different websites, so at the bare minimum that&#x27;s 21 DNS calls being made (with the same latency penalty!) A bunch of those are being done just to load a single piece of content too, which is a little crazy.<p>Don&#x27;t get me wrong, the site looks good.. it&#x27;s just for a &#x27;mobile-first&#x27; experience, they seem to be missing the all important time-to-screen and giving the mobile user a lot of work to do.<p>A useful tool from google for analysing the site for both mobile and desktop: <a href="https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fm.bbc.co.uk%2F" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;speed&#x2F;pagespeed&#x2F;insights&#x2F;?url=...</a><p>and a good talk from last year&#x27;s Google I&#x2F;O conference on optimising the mobile experience: <a href="https://www.youtube.com/watch?v=WrA85a4ZIaM" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=WrA85a4ZIaM</a>
评论 #9062447 未加载
评论 #9061792 未加载
评论 #9061616 未加载
评论 #9063869 未加载
meesterdudeover 10 years ago
I do love when companies share this stuff. Thanks.<p>&gt; Rather than using PHP or Java (that was the requisite of the Forge platform), we have chosen a non-blocking framework, NodeJS with the Express framework . This allows us to serve more simultaneous requests, increasing the performance of the application.<p>I don&#x27;t doubt this is true, but its worth noting you can get good performance out of a &quot;blocking&quot; framework too. Node.js does better than others in some situations, but in this its not a snowflake, and is in some regards worse.<p>But I will criticize priorities: I think this is too much fad, not enough practical. the experience is notably worse than the old site, and it seems like they just threw buzzwords at their problems instead of really crafting a solid solution.<p>I think where they&#x27;re coming from, maybe this makes sense - they needed to overshoot from their previous platform. But I think they&#x27;ll find it problematic in the long run and change some of their approaches and release a new site, and that will be a good platform and serve their needs for a good while.
评论 #9062608 未加载
评论 #9062862 未加载
评论 #9063646 未加载
alexcasonover 10 years ago
There seems to be some kind of bird theme going on with their CSS classes.<p><pre><code> class=&quot;distinct-component-group container-buzzard&quot; class=&quot;distinct-component-group container-pigeon&quot; class=&quot;distinct-component-group container-macaw&quot; class=&quot;robin sparrow-container&quot; class=&quot;sparrow-container sparrow-columns&quot;</code></pre>
Domenic_Sover 10 years ago
Tons of tech buzzwords, yet the blog intercepts middle-clicks. I want to open your links in a new tab so I can read them when I&#x27;m done with your blog!
评论 #9061222 未加载
评论 #9060732 未加载
评论 #9061812 未加载
super-serialover 10 years ago
It&#x27;s like they monitored the front-page of HN everyday for a year, made a list of the top mentioned technologies and then gave that list to their management.<p>Their manager said &quot;Your goal is to write a blog post mentioning each one of these technologies, and add links so it appears in dark-bold-blue text. If we don&#x27;t have a project using a trendy tech-stack... you bust your ass and get something up and running.&quot;<p>The engineers balked... &quot;but why?&quot;<p>Then the boss said, &quot;I&#x27;m tired of being ignored in &#x27;Who&#x27;s Hiring&#x27; on Hacker News. We make this article and they&#x27;ll all come begging us for jobs. At the BBC we don&#x27;t wait for news to come to us, we make the news. And THAT&#x27;S what we call journalism kids.&quot;
评论 #9061266 未加载
评论 #9061292 未加载
评论 #9061381 未加载
评论 #9061712 未加载
ndreckshageover 10 years ago
This mentions using Node&#x2F;Express to help with concurrency. Ok. But this also mentions using &#x27;isomorphic&#x27; javascript with React, and also not completely reliant on cache. React.renderToString (and all other isomorphic options -- Rendr, etc) are synchronous and slow. (rendering a large page in React w&#x2F; static data would take ~600ms; whereas the same page with with Mustache in Go for example would take ~30ms). End result, decreasing concurrency, and hurting overall performance.<p>OP - can you shed any light on how this is actually impacting your performance? Or maybe things that you had to do to get around the problem (ex - details of &#x27;module level&#x27; cache with Redis etc).
Numberwangover 10 years ago
I have not yet tested the new mobile site, but if the design of the normal site is anything to go by it will have been designed in hell by some teen demon reading too much Kafka.
nerdyover 10 years ago
Most of their tests take half a second each to run? Some examples: &quot;The first story displays an image and not an alt text attr if one is defined. (793ms)&quot; &quot;The module banner color is BBC News Red (552ms)&quot;<p>The 13 tests shown in the screenshot take an average of 577ms each, a total of over 7.5 seconds. 13 simple tests with wild variance in execution time. Checking a module <i>banner</i> color? 42ms. Checking a module <i>background</i> color? 552ms. So a 12x increase for checking a different color within a module?<p>Those tests are going to rot because of the expense of executing them and they&#x27;ll be discarded. Over a 500ms average per test just isn&#x27;t sustainable, particularly at the scale required for checking every conceivable kind of background color.
评论 #9062181 未加载
rentamirover 10 years ago
Thanks for sharing the tech stack. Would love to read more about the curation kit and the microservice approach.
评论 #9061108 未加载
weavieover 10 years ago
They mention using BEM (<a href="https://bem.info/" rel="nofollow">https:&#x2F;&#x2F;bem.info&#x2F;</a>) Any idea what it is? The site is not at all clear.
评论 #9061252 未加载
thesehandsover 10 years ago
The BBC produce quite a few intereting write ups of their R&amp;D process alongside odd things they are hacking on here: <a href="http://www.bbc.co.uk/rd" rel="nofollow">http:&#x2F;&#x2F;www.bbc.co.uk&#x2F;rd</a><p>Well worth a read.
ggitauover 10 years ago
Home page displays a bunch of javascript before rendering the rest of the page. Doesn&#x27;t happen all the time though.Maybe you guys might want to look into that.
nosoover 10 years ago
It nice to know what is happening in the BBC and the tech they are using. Additionally, It is appreciated they spend the time writing up what they have done&#x2F;achieved.<p>Rock on!
collywover 10 years ago
Actually it doesn&#x27;t look too bad. Its similar enough to the old one it doesn&#x27;t seem like when Facebook upgrades and you feel lost. Shame the quality reporting has gone down so much over the years.
kirkusover 10 years ago
Amazing insight into how large organisations manage projects.
esalmanover 10 years ago
Reading the article reminded me of this: <a href="http://motherfuckingwebsite.com/" rel="nofollow">http:&#x2F;&#x2F;motherfuckingwebsite.com&#x2F;</a>
smegelover 10 years ago
I wonder to what extent they are still using Perl.
评论 #9061441 未加载
Fastidiousover 10 years ago
I love the BBC. Very interesting news, fairly balanced.<p>I hope I can play their videos on the new website, as before they all used to require Flash.
bruceboughtonover 10 years ago
In Firefox 29.0.1, on the new BBC News homepage, wherever I click, it takes me to same story, even if I click on whitespace.
bencollier49over 10 years ago
The new &quot;BBC News (Beta)&quot; website is bloody ugly. They&#x27;ve gone for a &quot;flat UI&quot; thing, but it looks so clumsy that it reminds me of the internet from before people used gradients.
评论 #9061831 未加载
confiscateover 10 years ago
wow you use nodejs. how amazing that is
rashthedudeover 10 years ago
Pleasantly surprised how &#x27;up-to-date&#x27;the beeb is.
_b8r0over 10 years ago
For those that aren&#x27;t aware, the BBC has one of the worst cases of &quot;Not invented here&quot; syndrome you&#x27;ll ever see.
评论 #9061806 未加载
sklogicover 10 years ago
The new BBC page is barely usable. Not to mention that the new BBC android app is thoroughly disgusting. Bring back the old one, please!!!
评论 #9061232 未加载
评论 #9061279 未加载