A discussion about YUI's App Framework and how this suite of components provides the right type of foundation and structure for you to build your web applications with. We'll discuss the components of the App Framework that were released in 3.4.0, plus the new exciting stuff we've been working on for 3.5.0! Photos Near Me ( http://photosnear.me ) is an application that shows off the power of the App Framework and is using the newest components; the source is available on GitHub at: https://github.com/ericf/photosnear.me.

1. YUI App Framework
You’ve Been Wanting This
Eric Ferraiuolo
@ericf

2. MVC

3. Backbone

4. Model

5. Y.Model
• Manages data/state
• Observable attributes
• Coalesced change event
• Contains business logic
• Has data-syncing layer

6. Y.ModelList
1 foo
2 foo
3 foo
set() 4 foo
5 foo
6 foo
7 foo

7. Y.ModelList
}
1 foo
2 foo
3 foo
set() 4 foo foo:change
5 foo
6 foo
7 foo

8. View

9. Y.View
• Containment
• Render-able (you provide rendering logic)
• BYO-Template
• Declarative event subscriptions
• Lightweight

10. Router

11. Y.Controller Y.Router
• Basic navigation management
• Uses HTML5 pushState & popstate
• Degrades to hash-based history
• Bookmark-able URLs
• Browser back/forward buttons work!
• Wire-up application states to routes

12. Y.Router Example
var router = new Y.Router();
router.route('/library/:lib/', function (req) {
var lib = req.params.lib;
if (lib === 'yui') {
Y.log('YUI Library is awesome!');
}
});
router.save('/library/yui/');
// => 'YUI Library is awesome!'

13. Y.Router Example
var router = new Y.Router();
router.route('/library/:lib/', function (req) {
var lib = req.params.lib;
if (lib === 'yui') {
Y.log('YUI Library is awesome!');
}
});
router.save('/library/yui/');
// => 'YUI Library is awesome!'

14. Y.Router Example
var router = new Y.Router();
router.route('/library/:lib/', function (req) {
var lib = req.params.lib;
if (lib === 'yui') {
Y.log('YUI Library is awesome!');
}
});
router.save('/library/yui/');
// => 'YUI Library is awesome!'

15. Y.Router Example
var router = new Y.Router();
router.route('/library/:lib/', function (req) {
var lib = req.params.lib;
if (lib === 'yui') {
Y.log('YUI Library is awesome!');
}
});
router.save('/library/yui/');
// => 'YUI Library is awesome!'

16. Y.Router Example
var router = new Y.Router();
router.route('/library/:lib/', function (req) {
var lib = req.params.lib;
if (lib === 'yui') {
Y.log('YUI Library is awesome!');
}
});
router.save('/library/yui/');
// => 'YUI Library is awesome!'

17. Y.Router Example
var router = new Y.Router();
router.route('/library/:lib/', function (req) {
var lib = req.params.lib;
if (lib === 'yui') {
Y.log('YUI Library is awesome!');
}
});
router.save('/library/yui/');
// => 'YUI Library is awesome!'

18. Y.Router Mechanics
Y.Router
history:change
save/replace()
popstate
Y.History
pushState()
hashchange

19. Built on Solid Core
•Y.Base •Y.ArrayList
•Y.Attribute •Y.Node
•Y.EventTarget •Y.History
•Y.io
•Y.JSON
•Y.Array

20. 4.6KB

21. BIG
Community Adoption

22. What’s Coming
App Framework — 3.5.0

23. Y.App

24. Foundation and Structure

25. Sample Users App
var usersApp = new Y.App({
views: {
users: {
type : Y.UsersView,
preserve: true
},
user: {
type : Y.UserView,
parent: 'users'
}
}
});

26. Sample Users App
var usersApp = new Y.App({
views: {
users: {
type : Y.UsersView,
preserve: true
},
user: {
type : Y.UserView,
parent: 'users'
}
}
});

27. Sample Users App
var usersApp = new Y.App({
views: {
users: {
type : Y.UsersView,
preserve: true
},
user: {
type : Y.UserView,
parent: 'users'
}
}
});

28. Sample Users App
var usersApp = new Y.App({
views: {
users: {
type : Y.UsersView,
preserve: true
},
user: {
type : Y.UserView,
parent: 'users'
}
}
});

29. Sample Users App
var usersApp = new Y.App({
views: {
users: {
type : Y.UsersView,
preserve: true
},
user: {
type : Y.UserView,
parent: 'users'
}
}
});

30. Sample Users App
var users = new Y.UsersList();
usersApp.route('/user/', function () {
this.showView('users', {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView('user', {model: user}, function (view) {
// Called after transition.
});
});

31. Sample Users App
var users = new Y.UsersList();
usersApp.route('/user/', function () {
this.showView('users', {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView('user', {model: user}, function (view) {
// Called after transition.
});
});

32. Sample Users App
var users = new Y.UsersList();
usersApp.route('/user/', function () {
this.showView('users', {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView('user', {model: user}, function (view) {
// Called after transition.
});
});

33. Sample Users App
var users = new Y.UsersList();
usersApp.route('/user/', function () {
this.showView('users', {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView('user', {model: user}, function (view) {
// Called after transition.
});
});

34. Sample Users App
var users = new Y.UsersList();
usersApp.route('/user/', function () {
this.showView('users', {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView('user', {model: user}, function (view) {
// Called after transition.
});
});

35. Sample Users App
var users = new Y.UsersList();
usersApp.route('/user/', function () {
this.showView('users', {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView('user', {model: user}, function (view) {
// Called after transition.
});
});

36. Sample Users App
var users = new Y.UsersList();
usersApp.route('/user/', function () {
this.showView('users', {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView('user', {model: user}, function (view) {
// Called after transition.
});
});

37. Enhanced Navigation

38. Enhanced Navigation

40. pushState + Ajax =
pjax

41. pushState + Ajax = pjax
• Handles link clicks
• Update full URL
• Dynamically load & render content
• Ajax !=== XHR
• Browser’s Back/Forward buttons work!
• Seamless

42. Y.Pjax
Y.Router
Y.PjaxBase
Y.Pjax
Y.History

43. Y.Pjax Mechanics
setContent()
link click navigate() DOM
Y.Pjax
XHR
Server

44. Recap Y.App
• Is a View
• Is a Router
• Uses PjaxBase
• Has an activeView
• Manages View lifecycles & transitions
• Instantiate or sub-class

45. Templating

46. {{#with handlebars}}

47. Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1><{{title}}</h1>
{{#if author}}
<p class="author">{{author}}</p>
{{/if}}
<div class="body">{{body}}</div>
</div>
</script>

48. Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1><{{title}}</h1>
{{#if author}}
<p class="author">{{author}}</p>
{{/if}}
<div class="body">{{body}}</div>
</div>
</script>

49. Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1><{{title}}</h1>
{{#if author}}
<p class="author">{{author}}</p>
{{/if}}
<div class="body">{{body}}</div>
</div>
</script>

50. Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1><{{title}}</h1>
{{#if author}}
<p class="author">{{author}}</p>
{{/if}}
<div class="body">{{body}}</div>
</div>
</script>

51. Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1><{{title}}</h1>
{{#if author}}
<p class="author">{{author}}</p>
{{/if}}
<div class="body">{{body}}</div>
</div>
</script>

52. Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1><{{title}}</h1>
{{#if author}}
<p class="author">{{author}}</p>
{{/if}}
<div class="body">{{body}}</div>
</div>
</script>

53. Handlebars Templates
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1><{{title}}</h1>
{{#if author}}
<p class="author">{{author}}</p>
{{/if}}
<div class="body">{{body}}</div>
</div>
</script>

54. Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {
var template = Y.one('#entry-template').getContent(),
render = Y.Handlebars.compile(template),
entry = {
title : 'The Adventures of Tom Selleck',
body : 'Tom crossed the river in his Ferrari…',
author: 'Ryan Grove'
};
Y.one('#entry').setContent(render(entry));
});

55. Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {
var template = Y.one('#entry-template').getContent(),
render = Y.Handlebars.compile(template),
entry = {
title : 'The Adventures of Tom Selleck',
body : 'Tom crossed the river in his Ferrari…',
author: 'Ryan Grove'
};
Y.one('#entry').setContent(render(entry));
});

56. Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {
var template = Y.one('#entry-template').getContent(),
render = Y.Handlebars.compile(template),
entry = {
title : 'The Adventures of Tom Selleck',
body : 'Tom crossed the river in his Ferrari…',
author: 'Ryan Grove'
};
Y.one('#entry').setContent(render(entry));
});

57. Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {
var template = Y.one('#entry-template').getContent(),
render = Y.Handlebars.compile(template),
entry = {
title : 'The Adventures of Tom Selleck',
body : 'Tom crossed the river in his Ferrari…',
author: 'Ryan Grove'
};
Y.one('#entry').setContent(render(entry));
});

58. Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {
var template = Y.one('#entry-template').getContent(),
render = Y.Handlebars.compile(template),
entry = {
title : 'The Adventures of Tom Selleck',
body : 'Tom crossed the river in his Ferrari…',
author: 'Ryan Grove'
};
Y.one('#entry').setContent(render(entry));
});

59. Y.Handlebars
YUI().use('handlebars', 'node-base', function (Y) {
var template = Y.one('#entry-template').getContent(),
render = Y.Handlebars.compile(template),
entry = {
title : 'The Adventures of Tom Selleck',
body : 'Tom crossed the river in his Ferrari…',
author: 'Ryan Grove'
};
Y.one('#entry').setContent(render(entry));
});

60. Server-Side

62. Guides

63. Photos Near Me
http://photosnear.me

64. Photos Near Me
• Built with App Framework
• Uses Y.App and Y.Handlebars
• ~ 650 Lines of JavaScript
• Responsive Design
• http://photosnear.me
• https://github.com/ericf/photosnear.me

66. PhotosNearMe (Y.App)

67. PhotosNearMe (Y.App)
Place (Y.Model)
Photos (Y.ModelList)

68. PhotosNearMe (Y.App)
GridView (Y.View)

70. PhotosNearMe (Y.App)

71. PhotosNearMe (Y.App)
Place (Y.Model)
Photo (Y.Model)

72. PhotosNearMe (Y.App)
LightboxView (Y.View)

73. Future…
App Framework — 3.6.0+

74. Dealing with Data
• Improved data access
• Model sync layers
• Data binding

75. Breadth & Depth
• View extensions & plugins
• View-based widgets
• More mobile
• More server

76. Questions?
Ask away!
Eric Ferraiuolo
@ericf