app framework — you’ve been wanting this
DESCRIPTION
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.TRANSCRIPT
![Page 1: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/1.jpg)
YUI App FrameworkYou’ve Been Wanting This
Eric Ferraiuolo@ericf
![Page 2: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/2.jpg)
MVC
![Page 3: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/3.jpg)
♥ Backbone
![Page 4: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/4.jpg)
Model
![Page 5: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/5.jpg)
Y.Model
• Manages data/state
• Observable attributes
• Coalesced change event
• Contains business logic
• Has data-syncing layer
![Page 6: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/6.jpg)
Y.ModelList
foo
foo
foo
foo
foo
foo
foo
set()
1
2
3
4
5
6
7
![Page 7: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/7.jpg)
Y.ModelList
foo
foo
foo
foo
foo
foo
foo
}foo:changeset()
1
2
3
4
5
6
7
![Page 8: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/8.jpg)
View
![Page 9: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/9.jpg)
Y.View
• Containment
• Render-able (you provide rendering logic)
• BYO-Template
• Declarative event subscriptions
• Lightweight
![Page 10: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/10.jpg)
Router
![Page 11: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/11.jpg)
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
![Page 12: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/12.jpg)
Y.Router Examplevar 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!'
![Page 13: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/13.jpg)
Y.Router Examplevar 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!'
![Page 14: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/14.jpg)
Y.Router Examplevar 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!'
![Page 15: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/15.jpg)
Y.Router Examplevar 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!'
![Page 16: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/16.jpg)
Y.Router Examplevar 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!'
![Page 17: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/17.jpg)
Y.Router Examplevar 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!'
![Page 18: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/18.jpg)
Y.Router Mechanics
Y.Router
Y.History
history:change
popstate
hashchange
pushState()
save/replace()
![Page 19: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/19.jpg)
Built on Solid Core
•Y.Base
•Y.Attribute
•Y.EventTarget
•Y.io
•Y.JSON
•Y.Array
•Y.ArrayList
•Y.Node
•Y.History
![Page 20: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/20.jpg)
4.6KB
![Page 21: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/21.jpg)
BIGCommunity Adoption
![Page 22: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/22.jpg)
What’s ComingApp Framework — 3.5.0
![Page 23: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/23.jpg)
Y.App
![Page 24: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/24.jpg)
Foundation and Structure
![Page 25: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/25.jpg)
Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true },
user: { type : Y.UserView, parent: 'users' } }});
![Page 26: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/26.jpg)
Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true },
user: { type : Y.UserView, parent: 'users' } }});
![Page 27: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/27.jpg)
Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true },
user: { type : Y.UserView, parent: 'users' } }});
![Page 28: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/28.jpg)
Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true },
user: { type : Y.UserView, parent: 'users' } }});
![Page 29: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/29.jpg)
Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true },
user: { type : Y.UserView, parent: 'users' } }});
![Page 30: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/30.jpg)
Sample Users Appvar 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. });});
![Page 31: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/31.jpg)
Sample Users Appvar 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. });});
![Page 32: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/32.jpg)
Sample Users Appvar 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. });});
![Page 33: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/33.jpg)
Sample Users Appvar 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. });});
![Page 34: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/34.jpg)
Sample Users Appvar 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. });});
![Page 35: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/35.jpg)
Sample Users Appvar 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. });});
![Page 36: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/36.jpg)
Sample Users Appvar 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. });});
![Page 37: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/37.jpg)
Enhanced Navigation
![Page 38: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/38.jpg)
Enhanced Navigation
![Page 39: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/39.jpg)
![Page 40: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/40.jpg)
pushState + Ajax = pjax
![Page 41: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/41.jpg)
pushState + Ajax = pjax• Handles link clicks
• Update full URL
• Dynamically load & render content
• Ajax !=== XHR
• Browser’s Back/Forward buttons work!
• Seamless
![Page 42: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/42.jpg)
Y.Router
Y.History
Y.PjaxBase
Y.Pjax
Y.Pjax
![Page 43: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/43.jpg)
Server
Y.Pjax
Y.Pjax Mechanics
navigate()
XHR
link click DOM
setContent()
![Page 44: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/44.jpg)
Recap Y.App• Is a View
• Is a Router
• Uses PjaxBase
• Has an activeView
• Manages View lifecycles & transitions
• Instantiate or sub-class
![Page 45: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/45.jpg)
Templating
![Page 46: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/46.jpg)
{{#with handlebars}}
![Page 47: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/47.jpg)
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>
![Page 48: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/48.jpg)
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>
![Page 49: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/49.jpg)
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>
![Page 50: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/50.jpg)
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>
![Page 51: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/51.jpg)
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>
![Page 52: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/52.jpg)
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>
![Page 53: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/53.jpg)
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>
![Page 54: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/54.jpg)
Y.HandlebarsYUI().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)); });
![Page 55: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/55.jpg)
Y.HandlebarsYUI().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)); });
![Page 56: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/56.jpg)
Y.HandlebarsYUI().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)); });
![Page 57: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/57.jpg)
Y.HandlebarsYUI().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)); });
![Page 58: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/58.jpg)
Y.HandlebarsYUI().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)); });
![Page 59: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/59.jpg)
Y.HandlebarsYUI().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)); });
![Page 60: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/60.jpg)
Server-Side
![Page 61: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/61.jpg)
![Page 62: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/62.jpg)
Guides
![Page 64: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/64.jpg)
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
![Page 65: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/65.jpg)
![Page 66: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/66.jpg)
PhotosNearMe (Y.App)
![Page 67: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/67.jpg)
Place (Y.Model)
Photos (Y.ModelList)
PhotosNearMe (Y.App)
![Page 68: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/68.jpg)
GridView (Y.View)
PhotosNearMe (Y.App)
![Page 69: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/69.jpg)
![Page 70: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/70.jpg)
PhotosNearMe (Y.App)
![Page 71: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/71.jpg)
Photo (Y.Model)
PhotosNearMe (Y.App)Place (Y.Model)
![Page 72: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/72.jpg)
LightboxView (Y.View)
PhotosNearMe (Y.App)
![Page 73: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/73.jpg)
Future…App Framework — 3.6.0+
![Page 74: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/74.jpg)
Dealing with Data• Improved data access
• Model sync layers
• Data binding
![Page 75: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/75.jpg)
Breadth & Depth• View extensions & plugins
• View-based widgets
• More mobile
• More server
![Page 76: App framework — You’ve Been Wanting This](https://reader037.vdocuments.site/reader037/viewer/2022110115/54bd62c44a79599c0a8b46a9/html5/thumbnails/76.jpg)
Questions?Ask away!
Eric Ferraiuolo@ericf