FOWA2013: The rise of single page applications

Preview:

DESCRIPTION

In the last couple of years we have seen an explosion of single-page applications beyond the traditional complex applications, making its way into the mainstream and the consequent appearance of frameworks to facilitate the creation of these apps. In this session we will cover the motivations and implications of creating single-page apps, as well as the current state of the industry, the trends that are starting to arise in the field and the role of nodejs to facilitate the initial render process on the server side before handing over the control to the browser, as a way to speed up the initial rendering on mobile devices.

Citation preview

#FOWA

Caridy PatiñoPrincipal Frontend Engineer at Yahoo!

caridy@yahoo-inc.com@caridy

The Time Machine (2002)

Safety Not Guaranteed (2012)

The rise ofsingle-page applications

from web applicationsto single-page applications

evolution of web applications

urls

url fragments

websites

ajax

complex apps became popular

our amazing big brains

http://www.flickr.com/photos/pennstatelive/8972110324/

back/forward buttons were patchedusing fragments to improve usability

the broken webwas eventually fixed

performance

we hack things to avoiddisrupting the workflow witha full page reload to fulfill anaction as a consequence of a

user interaction

single-page applications

support for multiple statesto react to user interaction

users can switch betweendifferent states in no time

... and doing so without breakingany of the core features of the web

(history, url, openness)

building single-pageapplications today

Mojito

EmberJS

AngularJSRendr

BackboneMeteor

DerbyJS

YAF

React

support a chain of user interactionsto fulfill an operation without

a full page refresh

patterns

MV* for the win

url driven web applications

conventions over configurations

libraries over frameworks

UI data bindings

the /#!/ugly/ url is fading out

initial rendering on the server

nodejs as the server runtime

server produces the initial state of the application, then passing the control to the browser to continue function

as a single page application

progressive enhancement,graceful degradation,

and performance as a feature

performance as a way toenhance user experience

only seconds of our users’ attention

modown is a set of libraries and components to powersingle page applications

modown is coming soon!

npmjs.org/search?q=modowngithub.com/yui/

github.com/yahoo/

Thanks

@caridy