App framework — You’ve Been Wanting This
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

App framework — You’ve Been Wanting This

on

  • 4,921 views

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. ...

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.

Statistics

Views

Total Views
4,921
Views on SlideShare
4,807
Embed Views
114

Actions

Likes
14
Downloads
98
Comments
1

6 Embeds 114

http://lanyrd.com 96
http://paper.li 6
https://twitter.com 6
http://a0.twimg.com 3
http://us-w1.rockmelt.com 2
http://www.trunkly.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • really cool share, thanks Eric.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

App framework — You’ve Been Wanting This Presentation Transcript

  • 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 fooset() 4 foo 5 foo 6 foo 7 foo
  • 7. Y.ModelList } 1 foo 2 foo 3 fooset() 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 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!
  • 13. 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!
  • 14. 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!
  • 15. 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!
  • 16. 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!
  • 17. 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!
  • 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. BIGCommunity Adoption
  • 22. What’s ComingApp Framework — 3.5.0
  • 23. Y.App
  • 24. Foundation and Structure
  • 25. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  • 26. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  • 27. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  • 28. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  • 29. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  • 30. 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. });});
  • 31. 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. });});
  • 32. 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. });});
  • 33. 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. });});
  • 34. 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. });});
  • 35. 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. });});
  • 36. 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. });});
  • 37. Enhanced Navigation
  • 38. Enhanced Navigation
  • 39. pushState + Ajax = pjax
  • 40. pushState + Ajax = pjax• Handles link clicks• Update full URL• Dynamically load & render content• Ajax !=== XHR• Browser’s Back/Forward buttons work!• Seamless
  • 41. Y.Pjax Y.Router Y.PjaxBase Y.Pjax Y.History
  • 42. Y.Pjax Mechanics setContent()link click navigate() DOM Y.Pjax XHR Server
  • 43. Recap Y.App• Is a View• Is a Router• Uses PjaxBase• Has an activeView• Manages View lifecycles & transitions• Instantiate or sub-class
  • 44. Templating
  • 45. {{#with handlebars}}
  • 46. 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>
  • 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. 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));});
  • 54. 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));});
  • 55. 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));});
  • 56. 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));});
  • 57. 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));});
  • 58. 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));});
  • 59. Server-Side
  • 60. Guides
  • 61. Photos Near Me http://photosnear.me
  • 62. 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
  • 63. PhotosNearMe (Y.App)
  • 64. PhotosNearMe (Y.App)Place (Y.Model) Photos (Y.ModelList)
  • 65. PhotosNearMe (Y.App)GridView (Y.View)
  • 66. PhotosNearMe (Y.App)
  • 67. PhotosNearMe (Y.App)Place (Y.Model) Photo (Y.Model)
  • 68. PhotosNearMe (Y.App)LightboxView (Y.View)
  • 69. Future…App Framework — 3.6.0+
  • 70. Dealing with Data• Improved data access• Model sync layers• Data binding
  • 71. Breadth & Depth• View extensions & plugins• View-based widgets• More mobile• More server
  • 72. Questions? Ask away! Eric Ferraiuolo @ericf