YUI App Framework  You’ve Been Wanting This                     Eric Ferraiuolo                              @ericf
MVC
Backbone
Model
Y.Model• Manages data/state• Observable attributes• Coalesced change event• Contains business logic• Has data-syncing layer
Y.ModelList          1   foo          2   foo          3   fooset()     4   foo          5   foo          6   foo         ...
Y.ModelList                   }        1    foo        2    foo        3    fooset()   4    foo      foo:change        5  ...
View
Y.View• Containment• Render-able (you provide rendering logic)• BYO-Template• Declarative event subscriptions• Lightweight
Router
Y.Controller Y.Router• Basic navigation management• Uses HTML5 pushState & popstate   • Degrades to hash-based history• Bo...
Y.Router Examplevar router = new Y.Router();router.route(/library/:lib/, function (req) {    var lib = req.params.lib;    ...
Y.Router Examplevar router = new Y.Router();router.route(/library/:lib/, function (req) {    var lib = req.params.lib;    ...
Y.Router Examplevar router = new Y.Router();router.route(/library/:lib/, function (req) {    var lib = req.params.lib;    ...
Y.Router Examplevar router = new Y.Router();router.route(/library/:lib/, function (req) {    var lib = req.params.lib;    ...
Y.Router Examplevar router = new Y.Router();router.route(/library/:lib/, function (req) {    var lib = req.params.lib;    ...
Y.Router Examplevar router = new Y.Router();router.route(/library/:lib/, function (req) {    var lib = req.params.lib;    ...
Y.Router Mechanics            Y.Router              history:change   save/replace()                               popstate...
Built on Solid Core•Y.Base          •Y.ArrayList•Y.Attribute     •Y.Node•Y.EventTarget   •Y.History•Y.io•Y.JSON•Y.Array
4.6KB
BIGCommunity Adoption
What’s ComingApp Framework — 3.5.0
Y.App
Foundation and Structure
Sample Users Appvar usersApp = new Y.App({    views: {        users: {             type    : Y.UsersView,             pres...
Sample Users Appvar usersApp = new Y.App({    views: {        users: {             type    : Y.UsersView,             pres...
Sample Users Appvar usersApp = new Y.App({    views: {        users: {             type    : Y.UsersView,             pres...
Sample Users Appvar usersApp = new Y.App({    views: {        users: {             type    : Y.UsersView,             pres...
Sample Users Appvar usersApp = new Y.App({    views: {        users: {             type    : Y.UsersView,             pres...
Sample Users Appvar users = new Y.UsersList();usersApp.route(/user/, function () {    this.showView(users, {modelList: use...
Sample Users Appvar users = new Y.UsersList();usersApp.route(/user/, function () {    this.showView(users, {modelList: use...
Sample Users Appvar users = new Y.UsersList();usersApp.route(/user/, function () {    this.showView(users, {modelList: use...
Sample Users Appvar users = new Y.UsersList();usersApp.route(/user/, function () {    this.showView(users, {modelList: use...
Sample Users Appvar users = new Y.UsersList();usersApp.route(/user/, function () {    this.showView(users, {modelList: use...
Sample Users Appvar users = new Y.UsersList();usersApp.route(/user/, function () {    this.showView(users, {modelList: use...
Sample Users Appvar users = new Y.UsersList();usersApp.route(/user/, function () {    this.showView(users, {modelList: use...
Enhanced Navigation
Enhanced Navigation
pushState + Ajax =     pjax
pushState + Ajax = pjax• Handles link clicks• Update full URL• Dynamically load & render content• Ajax !=== XHR• Browser’s...
Y.Pjax Y.Router             Y.PjaxBase Y.Pjax Y.History
Y.Pjax Mechanics                          setContent()link click   navigate()      DOM              Y.Pjax                ...
Recap Y.App• Is a View• Is a Router• Uses PjaxBase• Has an activeView• Manages View lifecycles & transitions• Instantiate ...
Templating
{{#with handlebars}}
Handlebars Templates<script id="entry-template" type="text/x-handlebars-template">    <div class="entry">        <h1><{{ti...
Handlebars Templates<script id="entry-template" type="text/x-handlebars-template">    <div class="entry">        <h1><{{ti...
Handlebars Templates<script id="entry-template" type="text/x-handlebars-template">    <div class="entry">        <h1><{{ti...
Handlebars Templates<script id="entry-template" type="text/x-handlebars-template">    <div class="entry">        <h1><{{ti...
Handlebars Templates<script id="entry-template" type="text/x-handlebars-template">    <div class="entry">        <h1><{{ti...
Handlebars Templates<script id="entry-template" type="text/x-handlebars-template">    <div class="entry">        <h1><{{ti...
Handlebars Templates<script id="entry-template" type="text/x-handlebars-template">    <div class="entry">        <h1><{{ti...
Y.HandlebarsYUI().use(handlebars, node-base, function (Y) {      var template = Y.one(#entry-template).getContent(),      ...
Y.HandlebarsYUI().use(handlebars, node-base, function (Y) {      var template = Y.one(#entry-template).getContent(),      ...
Y.HandlebarsYUI().use(handlebars, node-base, function (Y) {      var template = Y.one(#entry-template).getContent(),      ...
Y.HandlebarsYUI().use(handlebars, node-base, function (Y) {      var template = Y.one(#entry-template).getContent(),      ...
Y.HandlebarsYUI().use(handlebars, node-base, function (Y) {      var template = Y.one(#entry-template).getContent(),      ...
Y.HandlebarsYUI().use(handlebars, node-base, function (Y) {      var template = Y.one(#entry-template).getContent(),      ...
Server-Side
Guides
Photos Near Me http://photosnear.me
Photos Near Me• Built with App Framework• Uses Y.App and Y.Handlebars• ~ 650 Lines of JavaScript• Responsive Design• http:...
PhotosNearMe (Y.App)
PhotosNearMe (Y.App)Place (Y.Model)                  Photos (Y.ModelList)
PhotosNearMe (Y.App)GridView (Y.View)
PhotosNearMe (Y.App)
PhotosNearMe (Y.App)Place (Y.Model)                  Photo (Y.Model)
PhotosNearMe (Y.App)LightboxView (Y.View)
Future…App Framework — 3.6.0+
Dealing with Data• Improved data access• Model sync layers• Data binding
Breadth & Depth• View extensions & plugins• View-based widgets• More mobile• More server
Questions?  Ask away!              Eric Ferraiuolo                       @ericf
App framework — You’ve Been Wanting This
App framework — You’ve Been Wanting This
App framework — You’ve Been Wanting This
App framework — You’ve Been Wanting This
Upcoming SlideShare
Loading in …5
×

App framework — You’ve Been Wanting This

4,786
-1

Published on

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.

Published in: Technology, Business
1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,786
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
100
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

App framework — You’ve Been Wanting This

  1. 1. YUI App Framework You’ve Been Wanting This Eric Ferraiuolo @ericf
  2. 2. MVC
  3. 3. Backbone
  4. 4. Model
  5. 5. Y.Model• Manages data/state• Observable attributes• Coalesced change event• Contains business logic• Has data-syncing layer
  6. 6. Y.ModelList 1 foo 2 foo 3 fooset() 4 foo 5 foo 6 foo 7 foo
  7. 7. Y.ModelList } 1 foo 2 foo 3 fooset() 4 foo foo:change 5 foo 6 foo 7 foo
  8. 8. View
  9. 9. Y.View• Containment• Render-able (you provide rendering logic)• BYO-Template• Declarative event subscriptions• Lightweight
  10. 10. Router
  11. 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. 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. 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. 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. 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. 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. 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. 18. Y.Router Mechanics Y.Router history:change save/replace() popstate Y.History pushState() hashchange
  19. 19. Built on Solid Core•Y.Base •Y.ArrayList•Y.Attribute •Y.Node•Y.EventTarget •Y.History•Y.io•Y.JSON•Y.Array
  20. 20. 4.6KB
  21. 21. BIGCommunity Adoption
  22. 22. What’s ComingApp Framework — 3.5.0
  23. 23. Y.App
  24. 24. Foundation and Structure
  25. 25. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  26. 26. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  27. 27. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  28. 28. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  29. 29. Sample Users Appvar usersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: users } }});
  30. 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. 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. 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. 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. 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. 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. 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. 37. Enhanced Navigation
  38. 38. Enhanced Navigation
  39. 39. pushState + Ajax = pjax
  40. 40. pushState + Ajax = pjax• Handles link clicks• Update full URL• Dynamically load & render content• Ajax !=== XHR• Browser’s Back/Forward buttons work!• Seamless
  41. 41. Y.Pjax Y.Router Y.PjaxBase Y.Pjax Y.History
  42. 42. Y.Pjax Mechanics setContent()link click navigate() DOM Y.Pjax XHR Server
  43. 43. Recap Y.App• Is a View• Is a Router• Uses PjaxBase• Has an activeView• Manages View lifecycles & transitions• Instantiate or sub-class
  44. 44. Templating
  45. 45. {{#with handlebars}}
  46. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 59. Server-Side
  60. 60. Guides
  61. 61. Photos Near Me http://photosnear.me
  62. 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. 63. PhotosNearMe (Y.App)
  64. 64. PhotosNearMe (Y.App)Place (Y.Model) Photos (Y.ModelList)
  65. 65. PhotosNearMe (Y.App)GridView (Y.View)
  66. 66. PhotosNearMe (Y.App)
  67. 67. PhotosNearMe (Y.App)Place (Y.Model) Photo (Y.Model)
  68. 68. PhotosNearMe (Y.App)LightboxView (Y.View)
  69. 69. Future…App Framework — 3.6.0+
  70. 70. Dealing with Data• Improved data access• Model sync layers• Data binding
  71. 71. Breadth & Depth• View extensions & plugins• View-based widgets• More mobile• More server
  72. 72. Questions? Ask away! Eric Ferraiuolo @ericf
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×