Howard Lewis Ship

Presentations

Modern Application Foundations: Underscore and Twitter Bootstrap

We're all increasingly in the business of writing richly interactive applications using HTML and JavaScript … that's a given. But the devil's in the details, and most applications get those details wrong. Building visually attractive applications that work in all browsers takes a lot of work ... and good as jQuery is, as more logic moves to the browser, something as sophisticated as jQuery is needed for data, not DOM, and that's Underscore.

Applications are moving from the server into the browser, and that can be a good, and rewarding, thing ... but compared to the rich infrastructure available to any Java program, what's available to JavaScript running in the browser is pretty anemic. jQuery is great at manipulating the DOM, but rich client applications do a lot more than that, and too often, this leads to lots of code and lots of bugs.

Underscore is your client-side infrastructure: a set of unobtrusive functional programming tools that can make your JavaScript slick, performant, readable ... and compatible with older browsers.

However, Underscore doesn't make your application look pretty: that's the job of Twitter's Bootstrap: a standard set of CSS rules that give your applications a modern "Web 2.0" look and feel. Bootstrap is developed by experts to look good across all the major browsers. We'll dive into how to use Bootstrap: how to get good looking results up quickly, how all the CSS classes work together, and how to get even better results using the bundled jQuery plugins.

Testing Web Applications with Geb

If you build web applications and cringe at the phrase "but how are we going to test it?" you're going to love Geb: the browser automation and testing tool. Geb is a Groovy framework for testing web applications: it builds on Selenium, but draws ideas from jQuery and elsewhere to make it productive and fun to test your applications in-browser.

Geb is rich with ideas to keep your tests clear, concise and maintainable. It is useful in all major testing frameworks: JUnit, TestNG, and Spock. We'll see how to navigate around the browser, clicking links, submitting forms, and verifying results. We'll also see Geb Pages and Modules, which allow you to define elements inside a page once, and reference them across many tests. Basically, Geb removes the excuses for not testing your web application, and that's a great thing!

Backbone.js: Run Your Application Inside The Browser

Follow the trends and you'll notice that, increasingly, web applications are running in the browser. That can be great news … until you have to write the JavaScript for all that client-side behavior. Fortunately, a new breed of client-side MVC frameworks have emerged, including Backbone.js. You still have controllers, models, and views … just in the browser.

Backbone might seem familiar, especially to Rails developers: it has the models, controllers, and views you'd expect in a server-side framework … but it all runs in place, inside the browser. The server ends up as the source & sink of data. We'll investigate the basics of using Backbone, how to create dynamic, interactive views, and how to get and save data. We'll see how concise and readable the JavaScript can be, especially when using CoffeeScript. Much of the complexity of modern web applications simply falls away when all rendering and client logic moves to the browser … as long as you have a proper backbone to hang that logic on.

CoffeeScript: JavaScript Elegantly Refactored

Over the last few years, JavaScript has gained popularity with ever increasing speed. It has gone from being the "Red Headed Stepchild" of programming languages (as described by its creator, Brendan Eich), coded in ten days flat, and now ubiquitous in browsers, on servers, and inside smart phones. JavaScript fluency is increasingly essential for anyone doing anything for the web, yet for all the advances in adoption, JavaScript is full of syntactic and behavior weirdness ... full of hidden gotchas, odd special cases, and counter intuitive idioms.

CoffeeScript is "a little language that compiles into JavaScript" . CoffeeScript syntax is pragmatic and elegant, borrowing ideas from Ruby, Python, and elsewhere. CoffeeScript tackles the problems in JavaScript, but leaves its roots intact. The end result is a language that is elegant, readable and something you'll look forward to coding in.

Sure, Google and many others have proven that you can accomplish amazing things in JavaScript: but that doesn't make the language any prettier, or any easier to code in. Ordinary JavaScript leaves you open to any number of trivial coding errors that can cause you lots of grief at runtime; a missing comma, an extra newline, and suddenly your code does something completely wrong.

CoffeeScript grafts a new syntax onto JavaScript that works better with JavaScript's fundamentally functional nature, such as list comprehensions, function binding and destructuring assignment. It also adds features that really quickly become dear to you, such as string interpolation, heredocs (multi-line strings), extended regular expressions, and a proper class system.

CoffeeScript also includes a fair number of wonderful heresies ... such as jettisoning the curly braces of the C language world in exchange for Python-style indentation. In CoffeeScript, every statement (even an if ... then) is an expression whose result can be stored, and every function returns a value.

Despite all these features; CoffeeScript is fully interoperable with JavaScript, so you can easily use it with jQuery, Underscore, or whatever other frameworks you have cooking: browser-side or server-side. And for all the cool stuff it adds, the mapping to JavaScript is close enough that debugging is not a great challenge.

Whether you dabble in a bit of client-side logic or are hip deep in NodeJS, you owe it to yourself to take a peek at this elegant language that lets you keep what you like about JavaScript and improves on everything that makes you want to pull your hair out!

AngularJS: HTML the way You Want It

Call it "single page" or "rich client", but modern web applications have advanced far beyond the "click this link and wait for the page to render" approach. Clients demand that pages react immediately to the user: no waiting allowed. Frameworks like jQuery and Backbone may let you manage the DOM and respond to events ... but AngularJS goes far past that: it lets you seamlessly marry your data objects, controllers, and the UI together gracefully and naturally ... or create your own HTML elements or attributes as needed. Rather than work with HTML the way the W3C provides it, you can create the markup you want.

AngularJS, by Google, describes itself as a "Superheroic JavaScript MVW Framework" (that's "Model-View-Whatever"). AngularJS is about freedom: freedom from the annoyances related to working directly with the DOM (even through a layer of jQuery or Backbone), and freedom to define your own HTML vocabulary and make it Just Work. It reworks HTML to make dynamic views normal and natural, and was designed with interoperability, extensibility, and testability as top priorities.

We'll cover the basics of setting up a page with AngularJS and delve into its core concepts: templates, bindings, scopes, controllers, routing, partial templates, and its dependency injection framework. From there we'll discuss communication with the server as well as how to extend AngularJS.