Yui app-framework

1,852 views

Published on

Introduction of yui app framework

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,852
On SlideShare
0
From Embeds
0
Number of Embeds
472
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Yui app-framework

  1. 1. YUI! E lApp Framewok:lMVC secondo Yahoo!Lucio Grenzil.grenzi@gmail.com
  2. 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. 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. 4. Agenda• Brief introduction Yui• Whats new on Yui 3.4.x• How App framework works• Whats expected on Yui 3.5 Lucio Grenzi 4 l.grenzi@gmail.com – Freelance
  5. 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. 6. One more javascript framework?• jQuery• ExtJS• Dojo• Yui• ….. Lucio Grenzi 6 l.grenzi@gmail.com – Freelance
  7. 7. Whats 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. 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 YUIs fantastic custom event system and extensible component infrastructure Lucio Grenzi 8 l.grenzi@gmail.com – Freelance
  9. 9. Yui App framework blocks• Model• Model list• View• Controller Lucio Grenzi 9 l.grenzi@gmail.com – Freelance
  10. 10. Modelis 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. 11. Model listis 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. 12. Viewrepresents a renderable piece of an applications user interface, and provides hooks for easily subscribing to and handling delegated DOM events on a views container element. Lucio Grenzi 12 l.grenzi@gmail.com – Freelance
  13. 13. Controllerprovides URL-based same-page routing using HTML5 history (pushState) or the location hash, depending on what the users browser supports. Lucio Grenzi 13 l.grenzi@gmail.com – Freelance
  14. 14. Todo ModelTodoModel = 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. 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); }); }}); Lucio Grenzi 15 l.grenzi@gmail.com – Freelance
  16. 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. 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. 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. 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. 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. 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. 22. Whats 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. 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. 24. Questions? Lucio Grenzi 24 l.grenzi@gmail.com – Freelance
  25. 25. Thank youCreative Commons via tcmaker.org Lucio Grenzi 25 l.grenzi@gmail.com – Freelance

×