How to Troubleshoot Apps for the Modern Connected Worker
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
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
