Rebuilding DoubleClick with AngularJS

Meetup Description

This month we’ll have a very special guest speaker - Marc Jacobs, tech lead of the DoubleClick Digital Marketing Manager team in NYC. If you want to get first hand info about building a large enterprise app with AngularJS, this is the meetup for you!

This presentation will be done over video-conference (from Mountain View) and attendees are encouraged to ask questions and join the discussion over the video link. Additionally, one or two AngularJS core team members will be present on site and can answer questions locally as well.

Old app

  • DFA6 FE was C# on ASP.NET
  • DFA6 BE was Java on Oracle

New App - challenges

  • Rebuild DFA using technologies that made more sense for Google.

    • Engineering skills
    • Google tech backends

  • GWT or not?

    • Principal UI technology across Google advertising products
    • No resources on their team familiar with it
    • Hard to find engineers with GWT

Other tools they considered

  • Backbone.js
  • JavaScriptMVC
  • others

Enter AngularJS

  • It was declarative
  • Had two-way data binding
  • Used plan old JavaScript objects
  • Happily integrated with JQuery
  • It had a full testing story
  • It had a straightforward architectural model

Transition to prototype

  • One engineer created a basic prototype in two days.

    • Used existing web services and CSS
    • 10% time spent compared to GWT
    • 10% of the size of code base

Transition to AngularJS

  • Early Strategy: Upgrade the app page-by-page
  • Eventual Strategy: Rewrote the app from scratch

Their AngularJS strategy caused a lot of FUD:

  • Why weren’t they using GWT?
  • AngularJS maintained by less than 5 people.

Google got over the FUD and now embrace AngularJS.

Single Page Architecture

Issues:

  • Common view content
  • bookmarkability

Other libraries they use

Third-party controls

Started with JQueryUI but now have their own:

  • list
  • grid
  • validation framework
  • notification framework

Open sourcing their work?

  • Sharing across google
  • Content that it’s too specific for their use cases

Note

I think that they haven’t released some of their commonly used code is not good.

Internationalization

  • DFA is translated into 10 languages
  • The have a custom wiki-like language for things to be translated
  • They rewrote the gettext protocol.

Caching

  • Server
  • HTTP
  • Browser
  • $http
  • Application

AngularJS in review

advantages

  • Leverages standard web technologies
  • New engineers get up to speed quickly
  • Testing is deeply embedded in the Angular way
  • Velocity of development is excellent
  • Passionate framework team
  • Growing community of framework users

disadvantages

  • AngularJS scenarios are ignored, poorly documented, and not at all obvious to use.
  • AngularJS unit testing technologies are currently in flux.
  • AngularJS documentation is quite buggy and is missing some key conceptional content.

realities

  • Flexible, powerful, but also complex
  • Dependency Injection is awesome, but a mind-bender for many JS engineers
  • Does not attempt to solve all key problems in large-scale web application design
  • Mixing client/server-side templating can be messy, yet it may be unavoidable.

Closing thoughts:

I wish I came out of this talk knowing something about how AngularJS actually works.

The documentation and style of what I see in the AngularJS docs makes me think of a modernized Dojo.