App framework — You’ve Been Wanting This

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

Backbone

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

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

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• Bookmark-able URLs• Browser back/forward buttons work!• Wire-up application states to routes

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!

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

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

BIGCommunity Adoption

What’s ComingApp Framework — 3.5.0

Foundation and Structure

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

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

Enhanced Navigation

pushState + Ajax = pjax

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

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

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

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

Templating

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>

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));});

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://photosnear.me• https://github.com/ericf/photosnear.me

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

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

App framework — You’ve Been Wanting This

by Eric Ferraiuolo

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 109

Statistics