Introduction of yui app framework

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