The View layer in SproutCore is a powerful and thick layer. In fact, I'm going to start by asserting that the View layer will likely be the most complex layer in your application.

The reason for this being that the View layer has the difficult task of presenting the abstract computational logic and data in a manner both meaningful and easy-to-use for the human being on the other side of the screen. On top of this, it has to work with multiple rendering engines and display sizes and still be fast, smooth, and beautiful.

So, we might as well get comfortable with the idea right now. Designing and developing a User Interface (UI) is hard work. It requires the web developer to move back and forth between the programmatic language of JavaScript and the semantic languages of HTML and Cascading Style Sheets (CSS). It requires foresight and nuance and a healthy dose of iteration.

Fortunately for us, SproutCore has done all of the difficult tasks already and so we don't need to worry about things such as optimized rendering, delegating events, handling keystrokes, hardware accelerated animating, and other core view functions. Instead, we can focus more on the configuration and styling of our views and the overall user experience.

This brings me to the two roles of the View layer in SproutCore: to dynamically generate HTML for display and to respond to user events. As mentioned earlier, the View layer interacts with the Display layer by providing HTML for display and we will look at how this is done shortly. What may be new to you though is that the View layer is also the first responder for all user driven events. This means that views receive the mouse, touch, keyboard, and other user events first and can decide to modify them appropriately and/or send the action deeper.

So, unlike a rigid template-based web application, SproutCore views are meant to be dynamic and responsive. Because of this, the user may interact directly with the View layer for some time before the layer needs to pass the user intent down to a lower layer.