The Missing Link in Single Page Web Apps
August Lilleaas
Single page web app = no page reloads, the entire application is JS, no fallbacks.
Think Gmail.
The web as an application platform.
The web was not made for building applications. Therefore, the web sucks for building applications!
- Everyone
What makes native application frameworks better than the web?
1. Views
Tree structure of views.
UIView *redView = [[UIView alloc] initWithFrame:
CGRectMake(0, 0, 100, 100)];
[redView setBackgroundColor:UIColorRed];
redView.clipsToBounds = NO;
UIView *blueView = [[UIView alloc] initWithFrame:
CGRectMake(20, 20, 100, 100)]
[blueView setBackgroundColor:UIColorBlue];
[redView addSubview:blueView];
2. Events
Each view listens to events.
|
Subclass, touchesBegan:withEvent: etc. Or addGestureRecognizer:
|
|
Subclass, onTouchEvent, onKeyUp, ..
|
|
Subclass, mousePressEvent, keyPressEvent, ...
|
3. Propagation of events
Events bubble upwards in the tree of views.
Tree structure of views.
Views listen to events.
Events propagate/bubble up the tree.
Tree structure of DOM elements.
DOM elements listen to events.
Events propagate/bubble up the tree.
|
Subclass, touchesBegan:withEvent: etc. Or addGestureRecognizer:
|
|
Subclass, onTouchEvent, onKeyUp, ..
|
|
Subclass, mousePressEvent, keyPressEvent, ...
|
 |
addEventListener
|
4. High level view handling
Ways of managing views that are useful to applications.
UIViewController
Controls one root view. Manages events, orientation, navigation, subviews, and general lifecycle.
UINavigationController
Android, QT, WP7, ....
also have similar abstractions
On the web, we use the built-in ....
???
The missing link:
Navstack.js
- Go from page to page
- Pages has URLs
- Reconstruct page from URL
Not good enough
routes({
"/events": EventsController.index,
"/events/:id": AttendantsController.index,
"/events/:id/tab-:tabname": TabController.show,
"/": myapp.RootController.show
});The primary goal [..] is ensuring that the code that runs when you enter a state programmatically is the same as the code that runs when you enter a state through the URL.
Thanks for listening!
Questions?