Blog of Appliness

Misko Hevery

headshot

APPLINESS: Hello Misko! Thank you very much for your time, we are honored to have you featured in Appliness. Can you tell us a bit about Misko1yourself?

Miško Hevery: Thanks for having me! I work for Google and my passion is make developers productive. I want to help build the next awesome apps, not necessarily directly, but indirectly by elevating the software development discipline. For many years I have focused both internally in Google as well as in Open Source community in sharing my passion for writing better software through testing.

About three years ago, I have become passionate about making it easy to build large scale interactive AJAX style applications on the web. I am a firm believer, that unless the easy stuff is easy, the complex stuff is impossible.

Before Google, I have worked in Adobe, Sun, and even Intel. I say even Intel, since Intel builds chips not web-applications, and I am a hardware engineer by training, which has switched to software and then to web-applications.

When did you start coding? What peaked your interest in development?

It all started when my dad in 1984 read in the magazine about personal computers and he had to get one. But back then we lived in a tiny village in Slovakia, and we must have been the first family to own a personal computer in the county, if not the first. I became enamored with programming, starting with BASIC as my first programming language at the age of eight, and I have not stopped coding since.

About Angular

Misko3Can you tell us a bit about Angular and how you came to develop it, it’s history?

Every web-application is really just once complex marshaling problem. We marshal data from the DB, through the HTTP into the heap and to the DOM for the user to read, and then we do it all again in reverse order. At first this is fun, but after you build few applications, you very quickly get tired of marshaling your data through these layers, and I wanted to do something about it.

Specifically, I wanted to make web-apps so easy that anyone could do it. I set my eye on web-designers, and I wondered if I could bring the DB to the HTML, such that any static web-server serving your local mom and pop pizza shop could throw in some HTML sugar and have a web-site which could send email, persist form data, all without having to maintain or understand any backend technologies. The result was a service which provided a library which then allowed the web-designer to turn any static page into a dynamic one.

The turning point came when I was working on internal Google project. After 6 months of building a GWT application with three engineers, we were getting frustrated with the lack of good feature velocity. I bragged that I could redo this app in Angular in two weeks, and my team called me on it. I lost the bet, because it took me three weeks, but after our codebase shrunk to one 17th the original size people paid attention. At this point Angular was not what it is today, and the application build in Angular was more or less one big hack, but it showed what is possible with declarative approach.

From that moment on, my job was to turn Angular into a real framework. At first we used it for our internal Google application, but soon other teams started to notice. Specifically the Doubleclick for Advertisers team, which was just in the midst of doing a rewrite, became our toughest customer, building a large scale enterprise applications on top of it.

Three more software engineers and two more years later and we had Angular v1.0 to share with the world.

What problem did AngularJS solve for developers?

HTML and browsers are awesome for serving static documents. Turning static pages into dynamic ones is possible with JavaScript, but the fact that the platform was not originally designed to serve dynamic applications shows painfully every step of the way.

Angular increases the abstraction level of the browser to make it more suitable for building dynamic web-applications. It does this not by creating new syntax, but by teaching the old browsers new tricks. Angular is instantly familiar to web-developers since it just HTML with features which make building dynamic pages easy.

Angular provides data binding, components, dependency injection, and a testing for the application.

How is it unique from other frameworks?Misko2

Most developers see a complex problem and they write a function for it, and then tell everyone to use it. I do things differently. I don’t want to hide the problem behind a function, I want the problem to go away. I don’t want others to run into the problem and say, “I wonder if anyone has solved this and put it behind a function that I can use”. I want the problem to be leveled with the ground, so that when the next developer passes through, there is nothing to snag on. I want the developer to pass by without even realizing that there used to be nasty problem hiding here, the developer should be blissfully ignorant. When you think this way, the result is not a library which has functions for common problems, the result is a browser with fever-sharp edges. When you develop in Angular, you are developing in a better browser, where things just work, and when you look at the application code it is clean, succinct, and free of functions which hide the problems. It’s just you and the browser. I often say that Angular is what the web browser would have been, had it been designed for applications, but I think this Twitter quote says it better: Pretty sure that HTML6 is going under the codename @angularjs!

Is it accurate to categorize AngularJS as a ‘framework’? If not, what is a more accurate description?

Most people are familiar with libraries and framework terminology. Library is a collection of functions which do useful things, where the developer is fully in charge. Framework is a piece of code which is in charge and calls your application to fill in the details of the application behavior. Frameworks typically force the implementation to follow its rules, and implement its interfaces.

If I had to choose, I would say that Angular is a framework, but I think a better description is that it is a better browser. Frameworks are needed whenever the platform one is building up does not match the needs of application developer. HTML has lots of frameworks and libraries, because it was not intended for building dynamic applications, rather it was designed for building static documents. When building an iOS app, developers don’t start by choosing a framework, instead they just build the application. The reason for that is that the iOS platform matches the needs of the application developers. This is in stark contrast to HTML.

For this reason I don’t think of AngularJS as a framework but as a better browser which better matches the needs of web-application developers. You may argue that it is just another way to describe a framework, but I would like to point out one difference. If you look at an AngularJS application, there is complete lack of an angular API. There is nothing to inherit, nothing to call, and no complex life cycle for your controllers to follow. This is a stark contrast to most frameworks which force you to implement its interfaces, call its API and live by its lifecycle and its events. It really is just a better browser.

What are some of the most common misconceptions about AngularJS and how it works? Misko4

When most developers look at the framework, the knee jerk reaction is to dismiss it as just another templating framework. But even here, Angular is unique. Most templating frameworks consume String template and merge it with data to produce a String output which then gets .innerHTML into the DOM. This is great the first time, but subsequent updates clobber the user state, such as selection and cursor location. Angular, on the other hand, consumes DOM template, not String template, and the result is a live, continuously updating view which updates only the relevant parts of the page. The result is two way data-binding which is seamlessly updates the DOM and makes the application model the single source of truth at all times.

The second misconception is that Angular must be slow or unsuitable for large scale applications, because it does dirty checking. While it is true that dirty checking is how get the model change notification, it turns out that with some clever optimization it is not slow at all. Just about every well designed page is within the capability of event old legacy browsers.

What should developers ‘unlearn’ in order to use Angular most effectively?

The number one question we get is how to get a hold of DOM in the controller and how to register listeners on it. Developers have come to accept DOM manipulation as a necessary evil, and rely on it in even the most basic of UIs.

Another thing unique about Angular is that there is no main method to the application which would bootstrap the framework. Through the magic of Dependency Injection the applications assemble themselves in the right way automatically.

How can Angular be used to make the browser ‘smarter’?

I think the most powerful and unique thing about Angular is that it allows the application developer to extend the browser vocabulary to turn HTML int a DSL (domain specific language). This allows the developer to build a specifically tailored constructs which fit the application need. It also turns the HTML into a declarative description of how the application is put together. Given new developers coming onto the project clear map of how the application is put together.

Are there any plugins you recommend for using with Angular? Any other tools?

Yeoman – is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

  • testacular – Spectacular test runner for JavaScript.
  • ngmodules – Collection of common Angular modules.
  • AngularStrap – AngularJS bindings for Twitter Bootstrap.
  • AngularUI – Common UI widgets.

What is in store for new features in Angular?

One of the biggest complaints of all AJAX-style applications is that they are not crawlable by the search engines. To solve this the site needs to provide server-side rendering of the site, so that it can be indexed by the crawler.  The second issue is that AJAX applications do not render until after the Javascript has downloaded and executed. This makes the AJAX application appear slower at startup than classical application. Both of these issues can be solved by server side pre-rendering, but it requires that the AJAX application efficiently reconnects with the server render HTML.

The next area is to add declarative animations to the HTML for the directives which change the DOM structure.

Finally, we would like to add lazy code loading. This will further speed up the application since it would allow only the code which is needed for rendering of the current page to be downloaded.

Misko5

About Testing

What was your contribution to JSTestDriver?

I was always unsatisfied with the way the JavaScript tests are executed. The need to switch to a browser and refresh it to execute the tests, would break my workflow. I wanted the tests to execute all the time in the background without any developer interaction on every file save. By running the tests all the time, the developer would get instant feedback whenever something would get broken.

JSTestDrive was the first iteration of that idea, and it was implement by Jeremie Lenfant-Engelmann and Cory Smith. JSTestDriver is not a new way to write the tests as any test framework can be used for writing the tests. It is not a new assertion since any assertion framework can be used. It is a new way of getting the JavaScript code to the browser and executing it.

With the popularity of node, the ideas behind JSTestDriver have been re-implemented into an even slicker package in Testacular by Vojta Jina. This reimplementation takes all of the learnings behind the JSTD and corrects many of the its shortcomings.

Testacular allows execution of all 1,600 AngularJS tests in about 3 seconds. This means that we can run all angular tests from our IDE on every save. This fundamentally changes the way one develops code in JavaScript.

Misko6Can you tell us about this tool? How does it help JavaScript developers?

Testacular is responsible for breaking out of the browser sandbox. The reason why existing test runners are cumbersome, is that browsers by design are sandboxed from the host OS. This makes it difficult to get the new code into the browser and the results out of the browser window and into the IDE for the developer.

Testacular solves this by running an HTTP server which provides a way to capture browsers. Then any number of browsers, even on remote machines or mobile devices can connect to the server and become slaves. Testacular sets up web-socket connection to the browser to allow the tests to break out of the browser sandbox. Testacular then watches the file system and pushes the changed files to the browsers for instance execution. The result is super fast, seamless, and enjoyable testing experience.

What types of testing should developers plan for their code? 

Any project needs a lot of unit tests to prove that the behavior of the individual classes is correct. These unit tests can than with the help of Testacular be executed on every file save for instant feedback. But angular goes further, it provides standard mocks for all external Angular services such as XHR and browser location, so that Angular applications can be tested with minimal effort. The dependency injection system can then be used to assemble the application with key services mocked out.

However unit-tests do not prove that the individual classes and bindings are correctly hooked up. For this reason Angular also comes with Scenario runner which understands the inner workings of Angular to provide scenarios which do not need to do application pooling to verify that the server has responded.

At what point in the development cycle should they plan for each type of testing?

Testing must be baked into the development process from the very first line of code written, otherwise you end up with code which does not lend itself for testing. This results in hard to understand tests, which are very brittle, propagating the myth that testing does not catch any bugs.

What are some key points to remember to write testable code?Misko7

- Use dependency injection, rather than creating your own dependencies or looking them up in global variables.

Always interact with your direct dependencies, rather than breaking the Law of Demeter.

- Avoid work in constructor, since the constructors can not be mocked out in tests.

- Singletons which enforce their own uniqueness reply on global variables, and global variables are an  anti-pattern.

For deeper discussion refer to Guide to Writing Testable Code.

What are some of the more common mistakes developers make when writing testable code?

I think you want to ask, what are the most common mistakes when writing code, and that is that it is not testable. They either don’t write tests, or write them after the fact. The beauty of writing the tests before is that they make you think about the API first, and then the implementation. Also no one writes a convoluted test, when the code to be tested is yet to be written. One writes convoluted tests only as a necessity of existing code. Most developers write code first, which means that their API is incidental to the implementation. This is what makes the test convoluted, and forces you to do things like excessive mocking and monkey patching.

Do you have any other favorite debugging tools?

Not really, since tests usually prevent the need to do complex debugging.

Misko8

About Stuff

Can you tell us about any other open source projects you have contributed to?

In the past I was working on Testability Explorer, which was an attempt to help diagnose testability problems in the code. It was meant as a feedback tool, which would suggest dependencies.

Are there any projects you have on the side or would like to focus on more in the future?

I believe in doing one thing and doing it well. Having too many things to focus on will most likely result in poor performance on each of them. Better to have one project for which you get recognition than ten, which no one has ever heard of.

What are some of the advancements in browser technology you’ve been most excited about?

Object.observe

Web-components and shadow DOM

What are some of your favorite HTML5 or web standard additions?

I don’t think that I have anyone in particular, but I am a big fan of anything which will allow the web to become more ubiquitous.

What do you like to do in your spare time? Do you have spare time?

I used to have spare time, it was nice. Now I have kids, and any free time goes to them, and I love spending time with them and learning from them.

Comments

comments

Powered by Facebook Comments

Leave a Reply