App創業與實作App Entrepreneurship and implementation                       Week 06        Reusable Code at Clients: Layouts and...
CC (Creative Commons)姓名標示─非商業性─禁止改作本授權條款允許使用者重製、散布、傳輸著作,但不得為商業目的之使用,亦不得修改該著作。使用時必須按照著作人指定的方式表彰其姓名。
Modular JavaScript    Shan-Hung Wu      CS, NTHU,     Spring, 2013
Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and  layouts•...
Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and  layouts•...
Today’s JavaScript Clients are Very            Complex                                      4
Can you write JavaScript like that?                                      5
The Missing Topics• Object-oriented JavaScript  – Writing reusable classes• Modular GUI: components, containers, and  layo...
Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and  layouts•...
Why OOP in JavaScript?                         8
You Want This                        Toolbar          MailToolbar             CalendarToolbar• Pros:  – Reusable code in T...
Function Objects: A Review• In JavaScript, functions are objects  1. var User = function() {  2. this.name = ...  3. };  4...
Homework: the memory scheme?           1. var obj = new Object();           2. obj.x = 1;           3. obj.y = 2;         ...
Memory Scheme1.   var obj = new Object();                Object             prototype2.   obj.x = 1;                      ...
Prototype Chain1.   var obj = new Object();                Object             prototype2.   obj.x = 1;                    ...
OOP Goals• Inheritance   – The ability to define the behavior of one object in terms of     another by sub-classing• Polym...
OK, so how to define a subclass ofUser?                                     15
Classing & Subclassing1.    var User = function(name) {2.       this.name = name;                                         ...
Reusing Toolbar                  17
You Can Do This                         Toolbar          MailToolbar              CalendarToolbar• Toolbar:  – Basic look,...
Homework• How to define static members of a class?                                             19
Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and  layouts•...
Components, Containers, and Layouts2013/3/28                          21
Containing Relationship vs.                Is-a Relationship• Containing  relationship ≠ is-a  Relationship• Containing  r...
Page Life Cycle                 • onReady                 • Init. objects and                   their members             ...
Initialization• Right after the onReady() function is called• Each component and container should be  constructed and wire...
Render• Convert initialized components and containers  to html• Downward along the containing relationship  by recursively...
Layout• Positioning, sizing, and CSS calculation  between each container and its containing  components      – Upward recu...
Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and  layouts•...
What is MVC?               28
Why do we need MVC at clients?                                 29
Think about     Data• Despite of protocols  (SOAP, REST, etc.), you  want to store data  obtained from server  – Saves tim...
Trick1. Define JS objects that represent/wrap the   data2. Allow these objects to fire events (e.g.,   data_changed(oldVal...
Good design?A component is not reusable anymoreas it is dependent to data                                      32
Client-side MVC• Model is a collection of objects reflecting data and their  fields   – Fire data-related events   – Relat...
An Example Project Structure                               Application name                                MVC filesApplic...
Q&A      35
Upcoming SlideShare
Loading in...5
×

Week 06 Modular Javascript_Brandon, S. H. Wu

835

Published on

Week 06
Reusable Code at Clients: Layouts and MVC

吳尚鴻
(清大資工系專任教授)

(2013-03-28)

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
835
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Week 06 Modular Javascript_Brandon, S. H. Wu

  1. 1. App創業與實作App Entrepreneurship and implementation Week 06 Reusable Code at Clients: Layouts and MVC 吳尚鴻 (清大資工系專任教授) (2013-03-28)本授權條款允許使用者重製、散布、傳輸著作,但不得為商業目的之使用,亦不得修改該著作。使用時必須按照著作人指定的方式表彰其姓名。
  2. 2. CC (Creative Commons)姓名標示─非商業性─禁止改作本授權條款允許使用者重製、散布、傳輸著作,但不得為商業目的之使用,亦不得修改該著作。使用時必須按照著作人指定的方式表彰其姓名。
  3. 3. Modular JavaScript Shan-Hung Wu CS, NTHU, Spring, 2013
  4. 4. Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 2
  5. 5. Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 3
  6. 6. Today’s JavaScript Clients are Very Complex 4
  7. 7. Can you write JavaScript like that? 5
  8. 8. The Missing Topics• Object-oriented JavaScript – Writing reusable classes• Modular GUI: components, containers, and layouts – Writing assemblable GUI components• Client-side MVC – Maintaining tractable projects 6
  9. 9. Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 7
  10. 10. Why OOP in JavaScript? 8
  11. 11. You Want This Toolbar MailToolbar CalendarToolbar• Pros: – Reusable code in Toolbar 9
  12. 12. Function Objects: A Review• In JavaScript, functions are objects 1. var User = function() { 2. this.name = ... 3. }; 4. // as object 5. User.name = ...; 6. // as function 7. var ret = User(); 8. // as constructor 9. var usr = new User();• What does it really mean? 10
  13. 13. Homework: the memory scheme? 1. var obj = new Object(); 2. obj.x = 1; 3. obj.y = 2; 4. 5. var User = function(name) { 6. this.name = name; 7. }; 8. var usr = new User(); 11
  14. 14. Memory Scheme1. var obj = new Object(); Object prototype2. obj.x = 1; prototype : object __proto__ : object3. obj.y = 2; constructor: function4.5. var User = function(name) {6. this.name = name; obj7. }; __proto__ : object8. var usr = new User(); x: number y: number• __proto__ is not accessible directly User prototype – Only through prototype : object __proto__ : object Object.prototype constructor: function• Different objs reference usr the same prototype object __proto__ : object name: string 12
  15. 15. Prototype Chain1. var obj = new Object(); Object prototype2. obj.x = 1; prototype : object __proto__ : object3. obj.y = 2; constructor: function4.5. var User = function(name) {6. this.name = name; obj7. }; __proto__ : object8. var usr = new User(); x: number y: number• Members of an object are sought User prototype along the prototype prototype : object __proto__ : object constructor: function chain from bottom up usr – The first reached __proto__ : object wins name: string 13
  16. 16. OOP Goals• Inheritance – The ability to define the behavior of one object in terms of another by sub-classing• Polymorphism – The ability for two classes to respond to the same (collection of) methods• Encapsulation – Hidden details via private members – Not recommended since • Bad performance • The benefits of using private members is rather limited in the context of JavaScript (which is already lacking any form of type safety) 14
  17. 17. OK, so how to define a subclass ofUser? 15
  18. 18. Classing & Subclassing1. var User = function(name) {2. this.name = name; Object prototype3. };4. // define method (why in prototype?) prototype : object __proto__ : object5. User.prototype.getName = function() { constructor: function6. return this.name;7. }8.9. var usr = new User(); User prototype10. alert(usr instanceof User); // true11. alert(usr.getName()); prototype : object __proto__ : object12. Constructor : function getName : function13. // define subclass14. Var Vip = function(name, title) {15. User.call(this); usr16. this.title = title;17. } __proto__ : object name: string18. Vip.prototype = new User();19. Vip.prototype.constructor = Vip;20. // override method21. Vip.prototype.getName = function() {22. // if necessary: User.prototype.getName() Vip prototype23. // .call(this);24. return title + : + name; prototype : object __proto__ : object25. } constructor: function getName : function26. usr = new Vip(...);27. alert(usr instanceof Vip); // true usr28. alert(usr instanceof User); // true __proto__ : object29. alert(usr.getName()); // polymorphism name: string title: string 16
  19. 19. Reusing Toolbar 17
  20. 20. You Can Do This Toolbar MailToolbar CalendarToolbar• Toolbar: – Basic look, button events• MailToolbar and CalendarToolbar: – Buttons, event handler, and specialized look 18
  21. 21. Homework• How to define static members of a class? 19
  22. 22. Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 20
  23. 23. Components, Containers, and Layouts2013/3/28 21
  24. 24. Containing Relationship vs. Is-a Relationship• Containing relationship ≠ is-a Relationship• Containing relationship Component Layout – Between components – Visual level• Is-a relationship Container – Between classes – Code level2013/3/28 22
  25. 25. Page Life Cycle • onReady • Init. objects and their members Adjust relative sizing & placing• Load scripts• Class system • Component -> HTML• Dom Ready • Downward recursively 23
  26. 26. Initialization• Right after the onReady() function is called• Each component and container should be constructed and wired together2013/3/28 24
  27. 27. Render• Convert initialized components and containers to html• Downward along the containing relationship by recursively calling(), for example, onRender()2013/3/28 25
  28. 28. Layout• Positioning, sizing, and CSS calculation between each container and its containing components – Upward recursively – Done by the layout object associated with each container• Every time the layout changed, DOM will re- compute all elements in the site.2013/3/28 26
  29. 29. Agenda• The consequence of complex clients• Object-oriented JavaScript• Modular GUI: components, containers, and layouts• Client-side MVC 27
  30. 30. What is MVC? 28
  31. 31. Why do we need MVC at clients? 29
  32. 32. Think about Data• Despite of protocols (SOAP, REST, etc.), you want to store data obtained from server – Saves time if two components share the same data – Also reduces server load• What if one component change the data? – How to notify another component? 30
  33. 33. Trick1. Define JS objects that represent/wrap the data2. Allow these objects to fire events (e.g., data_changed(oldVal, newVal))3. Let Component objects listen to these data events 31
  34. 34. Good design?A component is not reusable anymoreas it is dependent to data 32
  35. 35. Client-side MVC• Model is a collection of objects reflecting data and their fields – Fire data-related events – Relational model at client-side – Can define advanced classes to ease data manipulation, e.g., searcher• View is a collection of component – E.g., Grids, trees, toolbar, etc. – Fires view-related events• Controllers bind views and models together – Listen to events from both views and models and handle them• Pros? 33
  36. 36. An Example Project Structure Application name MVC filesApplication start point 34
  37. 37. Q&A 35

×