For the latest Dart news, visit our new blog at https://medium.com/dartlang .
AdSense is a free, simple way to earn money by placing ads on your website. The team just launched a completely new version of their app for publishers. Read all about it here. We asked Daniel White, the tech lead for the project, some questions because the new UI happens to be built with Dart and Angular2.
AdSense launched way back in 2003. How long is it since the last big redesign?
Last big redesign was called ‘AdSense 3’ and launched about 6 years ago. It was written in Google Web Toolkit (GWT) and the UI has evolved through several iterations - but this is the first ground-up redesign in 6 years. There are a number of long-standing UX issues that we’ve taken the opportunity to solve. A big shout-out to our UX team who’ve been 100% behind this project. We couldn’t have done it without them!
How many software engineers worked on the project?
Purely on the AdSense applications, we have a team of close to 100. Around 25% of them write Dart.
How many lines of code?
We have around 160K LOC of Dart.
How long does it take to do a complete redesign like this?
We’ve been following Dart for a long time and started to pilot it about 2.5 years ago. In the last 18 months we’ve shipped most major new features in Dart. For AdSense Material Design, we started UX work in December 2015 - coding started in February. So, 8 months.
What’s the stack?
Strong mode Dart, Angular 2 — we just migrated all our codebase away from AngularDart1. Java servers. We use protocol buffers to communicate between the browser and our UI servers.
We also have an older GWT app running on the same page and we use protocol buffers to communicate between the Dart and GWT codebases.
Have you seen any productivity improvements?
Compared to our old GWT workflows, we see much faster iteration. Compiling and starting the server is about 8X quicker than it used to be. Refreshing a page is about 6-7X quicker in dev mode. Tech leads that have shipped products have estimated a 2X improvement in overall project speed - from beginning implementation until launch.
How about performance improvements?
Loading the page requires about 50% less data (it’s around 900K-1000K smaller - this is mostly due to a new architecture, but moving to Dart let us redesign all that stuff). Using a cold cache, the time from initial request to working UI is about 45% less.
Were the developers happy?
Yes. The combination of Dart and Angular is working really well for us - we anticipate this to improve even more now that Angular’s Dart codebase can be tailored to the language (better error messages, optimizing code size).
When we decided to push ahead with Dart, the response from tech leads within AdSense was very enthusiastic - to the point where the small pilot team was overwhelmed with new requirements to support!
What are the advantages and disadvantages of the new stack?
The main advantage for us is having a top quality tech stack that we can share with other Google products - shared code and components can be developed for reuse by other teams. This gives us consistent UIs and massively reduces the amount of custom code we need to write. The benefits of that can now be shared with the outside world too — the Material Design UI components that have been worked on by hundreds of engineers will be gradually released to open source.
The disadvantages have largely been around being on the cutting edge, particularly with Angular2. We need to keep up with breaking changes in Angular. Thankfully, Angular has mostly stabilized now and we’re looking forward to 2.0 final (to be launched on the Dart Developer Summit).
Any surprises?
What’s been very gratifying is that investing in improved developer productivity/workflows has had visible impact on the quality of the Material Design AdSense applications. Developers feel ‘in tune’ with the page because they can see the effects of code changes very quickly, but they also get the benefit of types/refactoring/tool support that come with a statically typed language.
Alright, so now that you launched, what’s coming next?
Our new tech stack is going to allow us to ship higher quality changes more quickly, which is what we plan to do as we launch more Material Design changes over the coming months and years.
Thank you, Daniel!
Thanks!
AdSense launched way back in 2003. How long is it since the last big redesign?
Last big redesign was called ‘AdSense 3’ and launched about 6 years ago. It was written in Google Web Toolkit (GWT) and the UI has evolved through several iterations - but this is the first ground-up redesign in 6 years. There are a number of long-standing UX issues that we’ve taken the opportunity to solve. A big shout-out to our UX team who’ve been 100% behind this project. We couldn’t have done it without them!
How many software engineers worked on the project?
Purely on the AdSense applications, we have a team of close to 100. Around 25% of them write Dart.
How many lines of code?
We have around 160K LOC of Dart.
How long does it take to do a complete redesign like this?
We’ve been following Dart for a long time and started to pilot it about 2.5 years ago. In the last 18 months we’ve shipped most major new features in Dart. For AdSense Material Design, we started UX work in December 2015 - coding started in February. So, 8 months.
What’s the stack?
Strong mode Dart, Angular 2 — we just migrated all our codebase away from AngularDart1. Java servers. We use protocol buffers to communicate between the browser and our UI servers.
We also have an older GWT app running on the same page and we use protocol buffers to communicate between the Dart and GWT codebases.
Have you seen any productivity improvements?
Compared to our old GWT workflows, we see much faster iteration. Compiling and starting the server is about 8X quicker than it used to be. Refreshing a page is about 6-7X quicker in dev mode. Tech leads that have shipped products have estimated a 2X improvement in overall project speed - from beginning implementation until launch.
How about performance improvements?
Loading the page requires about 50% less data (it’s around 900K-1000K smaller - this is mostly due to a new architecture, but moving to Dart let us redesign all that stuff). Using a cold cache, the time from initial request to working UI is about 45% less.
Were the developers happy?
Yes. The combination of Dart and Angular is working really well for us - we anticipate this to improve even more now that Angular’s Dart codebase can be tailored to the language (better error messages, optimizing code size).
When we decided to push ahead with Dart, the response from tech leads within AdSense was very enthusiastic - to the point where the small pilot team was overwhelmed with new requirements to support!
What are the advantages and disadvantages of the new stack?
The main advantage for us is having a top quality tech stack that we can share with other Google products - shared code and components can be developed for reuse by other teams. This gives us consistent UIs and massively reduces the amount of custom code we need to write. The benefits of that can now be shared with the outside world too — the Material Design UI components that have been worked on by hundreds of engineers will be gradually released to open source.
The disadvantages have largely been around being on the cutting edge, particularly with Angular2. We need to keep up with breaking changes in Angular. Thankfully, Angular has mostly stabilized now and we’re looking forward to 2.0 final (to be launched on the Dart Developer Summit).
Any surprises?
What’s been very gratifying is that investing in improved developer productivity/workflows has had visible impact on the quality of the Material Design AdSense applications. Developers feel ‘in tune’ with the page because they can see the effects of code changes very quickly, but they also get the benefit of types/refactoring/tool support that come with a statically typed language.
Alright, so now that you launched, what’s coming next?
Our new tech stack is going to allow us to ship higher quality changes more quickly, which is what we plan to do as we launch more Material Design changes over the coming months and years.
Thank you, Daniel!
Thanks!