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.
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!'
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.
});
});
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));
});
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