AngularJS blog series – Introduction

1 Comment

Greetings from your AppNexus Discovery Engineering team in San Francisco! In the spirit of AppNexians sharing, the team here is going to write a series of blog posts about technologies we’ve used to create Twixt, a brand-new application for direct media buying. (If you haven’t heard about Twixt, check out twixt.it)

twixt_logo.pngTwixt is a single page web app, or SPA, built using a number of client and server technologies. The application client that runs in a users browser relies mainly on the JavaScript framework AngularJS. Through these blog posts, we are going to help you better understand what AngularJS (“Angular” for short) is and how we use it.

A single page app, or SPA, is a web app that loads itself mostly all at once at a single URL. Well-organized JavaScript then runs as a single application within the page, making AJAX calls to the server to load information and perform tasks, but never changing the base URL (although the path after the # may change – more on this later). HTML fragments may be loaded from the server to provide layouts for the app, but these are assembled (along with data) into views and injected into the Document Object Model (DOM) by the application itself – everything is handled on the fly by JavaScript.

Single page web apps are popular these days as they allow for the smoothest “desktop app in a browser” experience. There is less flicker between pages and “persistent UI” is truly persistent. If you’ve used Gmail, Google Maps, or listened to SoundCloud, then you’ve used a single page app, and many other big industry players treat large sections of their sites as SPAs.

Technologies

Let’s take a step back for a minute. The arrival of AJAX, jQuery, and vastly improved JavaScript engines such as SpiderMonkey and V8 made creating rich user experiences in the browser possible, and then easier than ever. Developers capitalized on the ubiquitous power of modern computers to push more and more heavy lifting to the client (browser) side.

Not surprisingly, code complexity on the client also rapidly increased. It’s not uncommon to have thousands of lines of JavaScript and jQuery on just a few HTML pages. This code can often be hard to understand and maintain, disorganized and difficult to test.

term3_5_copy0.jpg

This didn’t happen yet

Then came the rise of the machines, (ahem) JavaScript frameworks/libraries, such as Backbone, JavaScriptMVC, SproutCore, Ember and AngularJS. These frameworks all support time-tested patterns such as Model View Controller (MVC), which brings logical order to such UI code complexity. The MVC pattern has been around since the 1970s and implemented in a variety of languages such as Smalltalk, java Spring, symfony php, .Net, PureMVC actionscript and more.

Recently the MVC pattern has gained wide adoption in web development. In addition, these JS frameworks do routing, state management and other concepts relevant to navigating around an application (things we used to think of as “browsing” with traditional websites). The layers of complexity that were tamed by these frameworks also led to a new frontier of SPAs.

logo300.png

Right, Angular

And so now to AngularJS: Developers use the AngularJS framework to build single page web apps. AngularJS is a comprehensive framework: it has opinions on how it expects web apps to be written and what best practices should be followed; it provides a large set of framework features such as data binding, a module system, dependency injection, directives, and support for MVC; it supports important long-term sustainability features such as unit testing, end to end (e2e) testing and more.

In this blog series, we’ll take a deep dive into selected features of AngularJS technology with callouts about how we used it in the Twixt app. We plan to write blog posts about:

  • MVC in AngularJS
  • Directives
  • Routing
  • Useful patterns
  • And more

We’re open to suggestions! If there’s a topic you’d like us to cover, something you’d like to understand better, or questions we can answer, please let us know. We will try to accommodate and enlighten.

This is the first post in the series MVC in AngularJS.

There are some great resources for learning more about AngularJS including:

This entry was posted in AngularJS, Architecture, Front-end feature, Javascript. Bookmark the permalink.

1 Comment
  • Emily

    Thanks for sharing your expertise! Looking forward to the series.