The document discusses the YUI framework and its application (App) framework. It provides an overview of the App framework's core components - Models, Model Lists, Views and Controllers. It includes code examples for implementing a basic TODO list application using these components, including defining a Todo model, Todo list, views and syncing data to local storage. It notes upcoming changes in YUI 3.5 will include renaming controllers to routers and updating some properties to attributes.

1. YUI! E l'App Framewok:
l'MVC secondo Yahoo!
Lucio Grenzi
l.grenzi@gmail.com

2. Who am I?
• Delphi developer for 11 years
• Now freelance and Asp.net developer
• Javascript addicted
Nonantolando.blogspot.com
https://plus.google.com/108943068354277861330
http://it.linkedin.com/pub/lucio-grenzi/27/2bb/2a
Lucio Grenzi 2
l.grenzi@gmail.com – Freelance

3. Who am I?
• Delphi developer for 11 years
• Now freelance and Asp.net developer
• Javascript addicted
Nonantolando.blogspot.com
https://plus.google.com/108943068354277861330
http://it.linkedin.com/pub/lucio-grenzi/27/2bb/2a
Lucio Grenzi 3
l.grenzi@gmail.com – Freelance

4. Agenda
• Brief introduction Yui
• What's new on Yui 3.4.x
• How App framework works
• What's expected on Yui 3.5
Lucio Grenzi 4
l.grenzi@gmail.com – Freelance

5. YUI is a free, open source JavaScript and CSS
framework for building richly interactive web
applications.
• Fast
• Complete
• Industrial Strength
• Free & Open
Lucio Grenzi 5
l.grenzi@gmail.com – Freelance

6. One more javascript framework?
• jQuery
• ExtJS
• Dojo
• Yui
• …..
Lucio Grenzi 6
l.grenzi@gmail.com – Freelance

7. What's new on Yui 3.4
• The new Calendar component is now included in the build. This is a very
early release consisting of Calendar’s core functionality. Skinning and
additional features will continue to be added ahead of the 3.4.0 launch.
• The App Framework, YUI’s new suite of MVC infrastructure components, is
fully functional and ready for use.
• ScrollView now supports vertical paging, includes a scrollview-list plugin to
add CSS classnames to immediate list elements, as well several bug fixes
and refactoring
• You will also find updates to the Graphics API, performance enhancements
in Base, bug fixes in Dial, and many more additions throughout the library.
Lucio Grenzi 7
l.grenzi@gmail.com – Freelance

8. Yui App framework = jQuery + Backbone.js ?
• The YUI 3 app framework is heavily inspired by
Backbone.js.
• App framework is tightly integrated on the
framework and takes advantage of YUI's
fantastic custom event system and extensible
component infrastructure
Lucio Grenzi 8
l.grenzi@gmail.com – Freelance

9. Yui App framework blocks
• Model
• Model list
• View
• Controller
Lucio Grenzi 9
l.grenzi@gmail.com – Freelance

10. Model
is a lightweight Attribute-based data model with
methods for getting, setting, validating, and
syncing attribute values to a persistence layer
or server, as well as events for notifying
listeners of model changes.
Lucio Grenzi 10
l.grenzi@gmail.com – Freelance

11. Model list
is an array-like ordered list of Model instances
with methods for adding, removing, sorting,
filtering, and performing other actions on
models in the list.
All events fired by a model automatically bubble
up to all the lists that contain that model, so
lists serve as convenient aggregators for model
events.
Lucio Grenzi 11
l.grenzi@gmail.com – Freelance

12. View
represents a renderable piece of an application's
user interface, and provides hooks for easily
subscribing to and handling delegated DOM
events on a view's container element.
Lucio Grenzi 12
l.grenzi@gmail.com – Freelance

13. Controller
provides URL-based same-page routing using
HTML5 history (pushState) or the location
hash, depending on what the user's browser
supports.
Lucio Grenzi 13
l.grenzi@gmail.com – Freelance

14. Todo Model
TodoModel = Y.TodoModel = Y.Base.create('todoModel', Y.Model, [], {
sync: LocalStorageSync('todo'),
toggleDone: function () {
this.set('done', !this.get('done')).save();
}
}, {
ATTRS: {
done: {value: false},
text: {value: ''}
}
});
Lucio Grenzi 14
l.grenzi@gmail.com – Freelance

15. ToDo List
TodoList = Y.TodoList = Y.Base.create('todoList', Y.ModelList, [], {
model: TodoModel,
sync : LocalStorageSync('todo'),
done: function () {
return Y.Array.filter(this.toArray(), function (model) {
return model.get('done');
});
},
remaining: function () {
return Y.Array.filter(this.toArray(), function (model) {
return !model.get('done');
});
}});
Lucio Grenzi 15
l.grenzi@gmail.com – Freelance

16. TodoAppView (1/2)
TodoAppView = Y.TodoAppView = Y.Base.create('todoAppView', Y.View, [], {
container: Y.one('#todo-app'),
inputNode: Y.one('#new-todo'),
template: Y.one('#todo-stats-template').getContent(),
events: {
'#new-todo': {keypress: 'createTodo'},
'.todo-clear': {click: 'clearDone'},
'.todo-item': {
mouseover: 'hoverOn',
mouseout : 'hoverOff'
}
}
Lucio Grenzi 16
l.grenzi@gmail.com – Freelance

17. TodoAppView (2/2)
initializer: function () {
var list = this.todoList = new TodoList();
list.after('add', this.add, this);
list.after('reset', this.reset, this);
list.after(['add', 'reset', 'remove', 'todoModel:doneChange'], this.render, this); list.load(); },
render: function () {
var todoList = this.todoList,
stats = this.container.one('#todo-stats'),
numRemaining, numDone;
if (todoList.isEmpty()) { stats.empty(); return this; }
numDone = todoList.done().length;
numRemaining = todoList.remaining().length;
Lucio Grenzi 17
l.grenzi@gmail.com – Freelance

18. TodoView (1/2)
TodoView = Y.TodoView = Y.Base.create('todoView', Y.View, [], {
container: '<li class="todo-item"/>',
template: Y.one('#todo-item-template').getContent(),
events: {
'.todo-checkbox': {click: 'toggleDone'},
'.todo-content': {
click: 'edit',
focus: 'edit'
},
'.todo-input' : {
blur : 'save',
keypress: 'enter'
},
'.todo-remove': {click: 'remove'}
}
Lucio Grenzi 18
l.grenzi@gmail.com – Freelance

19. TodoView (2/2)
edit: function () {
this.container.addClass('editing');
this.inputNode.focus(); },
enter: function (e) {
if (e.keyCode === 13) { // enter key
Y.one('#new-todo').focus();
} },
remove: function (e) {
e.preventDefault();
this.constructor.superclass.remove.call(this);
this.model.destroy({'delete': true}); },
save: function () {
this.container.removeClass('editing');
this.model.set('text', this.inputNode.get('value')).save(); },
toggleDone: function () { this.model.toggleDone(); }
Lucio Grenzi 19
l.grenzi@gmail.com – Freelance

20. LocalStorageSync (1/2)
function LocalStorageSync(key) {
var localStorage;
if (!key) { Y.error('No storage key specified.'); }
if (Y.config.win.localStorage) { localStorage = Y.config.win.localStorage;}
var data = Y.JSON.parse((localStorage && localStorage.getItem(key)) || '{}');
function destroy(id) {
var modelHash;
if ((modelHash = data[id])) {
delete data[id];
save();
}
return modelHash;
}
Lucio Grenzi 20
l.grenzi@gmail.com – Freelance

21. LocalStorageSync (2/2)
return function (action, options, callback) {
var isModel = Y.Model && this instanceof Y.Model;
switch (action) {
case 'create': // intentional fallthru
case 'update': callback(null, set(this));
return;
case 'read': callback(null, get(isModel && this.get('id')));
return;
case 'delete': callback(null, destroy(isModel && this.get('id')));
return;
} };
Lucio Grenzi 21
l.grenzi@gmail.com – Freelance

22. What's next? (3.5.0)
• Y.Controller is now Y.Router
• New route handler signature
• Some properties are now attributes
• Documentation updated
Lucio Grenzi 22
l.grenzi@gmail.com – Freelance

23. References
• http://yuilibrary.com/projects/yui3/
• https://github.com/yui/yui3
• http://yuilibrary.com/yui/docs/app/app-todo.html
• http://www.yuiblog.com/blog/2011/12/12/app-framework-350/
Lucio Grenzi 23
l.grenzi@gmail.com – Freelance

24. Questions?
Lucio Grenzi 24
l.grenzi@gmail.com – Freelance

25. Thank you
Creative Commons via tcmaker.org
Lucio Grenzi 25
l.grenzi@gmail.com – Freelance