yui app-framework

YUI! E l'App Framewok: l'MVC secondo Yahoo!

Lucio Grenzi

[email protected]

Lucio [email protected] – Freelance

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


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


4

Agenda

• Brief introduction Yui• What's new on Yui 3.4.x• How App framework works• What's expected on Yui 3.5


5

YUI is a free, open source JavaScript and CSS framework for building richly interactive web

applications. • Fast• Complete• Industrial Strength• Free & Open


6

One more javascript framework?

• jQuery• ExtJS• Dojo• Yui• …..


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.


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


9

Yui App framework blocks

• Model• Model list• View• Controller


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.


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.


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.


13

Controller

provides URL-based same-page routing using HTML5 history (pushState) or the location hash, depending on what the user's browser supports.


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


15

ToDo ListTodoList = 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'); }); }});


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'

}

}


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;


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'}

}


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


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;

}


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;

} };


22

What's next? (3.5.0)

• Y.Controller is now Y.Router• New route handler signature• Some properties are now attributes• Documentation updated


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/


24

Questions?


25

Thank you

Creative Commons via tcmaker.org

yui app-framework

Technology