Abstractie (Dutch)

853 views

Published on

De slides van mijn college over abstractie, zoals gegeven aan de Rijksuniversiteit Groningen.

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

  • Be the first to like this

No Downloads
Views
Total views
853
On SlideShare
0
From Embeds
0
Number of Embeds
209
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Abstractie (Dutch)

  1. 1. Write('A');
  2. 2. abstractie
  3. 3. wat? waarom? hoe? valkuilen conclusie
  4. 4. wat?
  5. 5. “Abstraction is the process of generalization by reducing the information content of a concept in order to retain only information which is relevant for a particular purpose.” -- Wikipedia (ed.)
  6. 6. waarom?
  7. 7. bestanden vensters mappen knoppen multi-tasking invoer velden
  8. 8. hoe?
  9. 9. printChar('N'); char[] anBuffer = new char[255]; printChar('a'); int anLength = 0; printChar('a'); do { printChar('m'); inp = readChar(); printChar(':'); anBuffer[anLength] = inp; printChar(' '); anLength++; while (inp != 'n'); char[] vnBuffer = new char[255]; int vnLength = 0; printChar('H'); char inp; printChar('a'); do { printChar('l'); inp = readChar(); printChar('l'); vnBuffer[vnLength] = inp; printChar('o'); vnLength++; printChar(' '); while (inp != 'n'); int i = 0; while(i < vnLength) { printChar('A'); printChar(vnBuffer[i]); printChar('c'); i++; printChar('h'); } printChar('t'); printChar(' '); printChar('e'); i = 0; printChar('r'); while(i < anLength) { printChar('n'); printChar(anBuffer[i]); printChar('a'); i++; printChar('a'); } printChar('m'); printChar(':');
  10. 10. printChar('N'); char[] anBuffer = new char[255]; printChar('a'); int anLength = 0; printChar('a'); do { printChar('m'); inp = readChar(); printChar(':'); anBuffer[anLength] = inp; printChar(' '); anLength++; while (inp != 'n'); char[] vnBuffer = new char[255]; int vnLength = 0; printChar('H'); char inp; printChar('a'); do { printChar('l'); inp = readChar(); printChar('l'); vnBuffer[vnLength] = inp; printChar('o'); vnLength++; printChar(' '); while (inp != 'n'); int i = 0; while(i < vnLength) { printChar('A'); printChar(vnBuffer[i]); printChar('c'); i++; printChar('h'); } printChar('t'); printChar(' '); printChar('e'); i = 0; printChar('r'); while(i < anLength) { printChar('n'); printChar(anBuffer[i]); printChar('a'); i++; printChar('a'); } printChar('m'); printChar(':');
  11. 11. printChar('N'); char[] anBuffer = new char[255]; printChar('a'); int anLength = 0; printChar('a'); do { printChar('m'); inp = readChar(); printChar(':'); anBuffer[anLength] = inp; printChar(' '); anLength++; while (inp != 'n'); char[] vnBuffer = new char[255]; int vnLength = 0; printChar('H'); char inp; printChar('a'); do { printChar('l'); inp = readChar(); printChar('l'); vnBuffer[vnLength] = inp; printChar('o'); vnLength++; printChar(' '); while (inp != 'n'); int i = 0; while(i < vnLength) { printChar('A'); printChar(vnBuffer[i]); printChar('c'); i++; printChar('h'); } printChar('t'); printChar(' '); printChar('e'); i = 0; printChar('r'); while(i < anLength) { printChar('n'); printChar(anBuffer[i]); printChar('a'); i++; printChar('a'); } printChar('m'); printChar(':');
  12. 12. printChars(new char[] { 'N', 'a', 'a', 'm', ':', ' '}, 6); char[] vnBuf = new char[255]; int vnLength = readChars(vnBuf); printChars(new char[] { 'A', 'c', 'h', 't', 'e', 'r', 'n', 'a', 'a', 'm', ':', ' '}, 12); char[] anBuf = new char[255]; int anLength = readChars(vnBuf); printChars(new char[] {'H', 'a', 'l', 'l', 'o', ' '}, 6); printChars(vnBuf, vnLength); printChars(anBuf, anLength);
  13. 13. String voornaam = readLine("Naam: "); String achternaam = readLine("Achternaam: "); print("Hallo " + voornaam + " " + achternaam);
  14. 14. FullName fn = FullName.read(); fn.printGreeting();
  15. 15. readNameAndPrintGreeting();
  16. 16. goed abstractie niveau?
  17. 17. readNameAndPrintGreeting(); nieuwe eis: vraag ook naar leeftijd
  18. 18. readNameAndPrintGreeting(); nieuwe eis: vraag ook naar leeftijd ✖
  19. 19. FullName fn = FullName.read(); fn.printGreeting(); nieuwe eis: vraag ook naar leeftijd
  20. 20. FullName fn = FullName.read(); fn.printGreeting(); nieuwe eis: vraag ook naar leeftijd ✖
  21. 21. String voornaam = readLine("Naam: "); String achternaam = readLine("Achternaam: "); print("Hallo " + voornaam + " " + achternaam); nieuwe eis: vraag ook naar leeftijd
  22. 22. String voornaam = readLine("Naam: "); String achternaam = readLine("Achternaam: "); int leeftijd = stringToInt(readLine("Leeftijd: ")); print("Hallo " + voornaam + " " + achternaam + ", jij bent " + leeftijd + " jaar oud."); nieuwe eis: vraag ook naar leeftijd ✔
  23. 23. goed abstractie niveau afhankelijk van
  24. 24. goed abstractie niveau afhankelijk van gebruik nu
  25. 25. goed abstractie niveau afhankelijk van gebruik nu gebruik later
  26. 26. Web applicaties in Java/Seam
  27. 27. Model View Controller
  28. 28. Data: Hibernate @Entity public class Blog { protected String _title = ""; public String getTitle() { return _title; } public void setTitle(String value) { _title = value; } @ManyToOne protected User _author; public User getAuthor() { return _author; } public void setAuthor(User author) { _title = value; } @OneToMany(mappedBy="_blog", targetEntity=BlogEntry.class) @Cascade(...) protected List<BlogEntry> _entries; public List<BlogEntry> getEntries() { return _entries; } public void setEntries(List<BlogEntry> entries) { _entries = entries; } }
  29. 29. View: JSF <html ...> ... <body> ... <h:form> <table> <tr><td><h:outputText value="Title: "/></td> <td><h:inputText value="#{editBlogEntry.e.title}" /></td> </tr><tr> <td><h:outputText value="Created: "/></td> <td><rich:calendar value="#{editBlogEntry.e.created}" popup="true" datePattern="dd/MM/yyyy" .../></td> </tr><tr> <td><h:outputText value="Content: "/></td> <td><h:inputTextarea value="#{editBlogEntry.e.content}"/></td> </tr><tr> <td><h:outputText value="Status: "/></td> <td><h:selectOneMenu value="#{editBlogEntry.e.status}"> <s:selectItems value="#{editBlogEntry.blogEntryStatusList}" var="blogEntryStatus" label="#{blogEntryStatus.name}" /> <s:convertEntity/> </h:selectOneMenu></td> </tr> </table> <h:actionLink action=”#{editBlogEntry.save()}”/> </h:form> ... </body> </html>
  30. 30. Controller @Stateful @Name(“editBlogEntry”) public class EditBlogEntry { ... @In @Out private BlogEntry e; public void setE(e) { this.e = e; } public BlogEntry getE() { return this.e; } public void save() { em.persist(e); } ... }
  31. 31. Configuratie <?xml version="1.0" ?> <web-app ...> <context-param> <param-name>facelets.LIBRARIES</param-name> <param-value>/WEB-INF/blog.taglib.xml</param-value> </context-param> <filter> <filter-name>Seam Filter</filter-name> <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class> </filter> <filter> <filter-name>UrlRewriteFilter</filter-name> <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class> <init-param> <param-name>logLevel</param-name> <param-value>WARN</param-value> </init-param> </filter> <filter-mapping> <filter-name>Seam Filter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <filter-mapping> <filter-name>UrlRewriteFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet> <servlet-name>Seam Resource Servlet</servlet-name> <servlet-class>org.jboss.seam.servlet.SeamResourceServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.seam</url-pattern> </servlet-mapping> ... </web-app>
  32. 32. allemaal hetzelfde
  33. 33. allemaal hetzelfde Gebruiker
  34. 34. allemaal hetzelfde Gebruiker maken wijzigen verwijderen koppelen
  35. 35. allemaal hetzelfde Gebruiker Bericht maken wijzigen verwijderen koppelen
  36. 36. allemaal hetzelfde Gebruiker Bericht maken maken wijzigen wijzigen verwijderen verwijderen koppelen koppelen
  37. 37. allemaal hetzelfde Gebruiker Bericht Reactie maken maken wijzigen wijzigen verwijderen verwijderen koppelen koppelen
  38. 38. allemaal hetzelfde Gebruiker Bericht Reactie maken maken maken wijzigen wijzigen wijzigen verwijderen verwijderen verwijderen koppelen koppelen koppelen
  39. 39. allemaal hetzelfde Gebruiker Bericht Reactie maken maken maken wijzigen wijzigen wijzigen verwijderen verwijderen verwijderen koppelen koppelen koppelen boiler plate code
  40. 40. Data @Entity public class Blog { protected String _title = ""; public String getTitle() { return _title; } public void setTitle(String value) { _title = value; } @ManyToOne protected User _author; public User getAuthor() { return _author; } public void setAuthor(User author) { _title = value; } @OneToMany(mappedBy="_blog", targetEntity=BlogEntry.class) @Cascade(...) protected List<BlogEntry> _entries; public List<BlogEntry> getEntries() { return _entries; } public void setEntries(List<BlogEntry> entries) { _entries = entries; } }
  41. 41. Data @Entity public class Blog { protected String _title = ""; public String getTitle() { return _title; } public void setTitle(String value) { _title = value; } @ManyToOne protected User _author; public User getAuthor() { entity Blog { return _author; author -> User (inverse=User.blogs) } title :: String public void setAuthor(User author) { entries <> Set<BlogEntry> _title = value; } } @OneToMany(mappedBy="_blog", targetEntity=BlogEntry.class) @Cascade(...) protected List<BlogEntry> _entries; public List<BlogEntry> getEntries() { return _entries; } public void setEntries(List<BlogEntry> entries) { _entries = entries; } }
  42. 42. <html ...> ... <body> ... Pagina’s <h:form> <table> <tr><td><h:outputText value="Title: "/></td> @Stateful @Name(“editBlogEntry”) <td><h:inputText value="#{editBlogEntry.e.title}" /></td> public class EditBlogEntry { </tr><tr> ... <td><h:outputText value="Created: "/></td> @In @Out <td><rich:calendar value="#{editBlogEntry.e.created}" private BlogEntry e; popup="true" datePattern="dd/MM/yyyy" .../></td> public void setE(e) { </tr><tr> this.e = e; <td><h:outputText value="Content: "/></td> } <td><h:inputTextarea value="#{editBlogEntry.e.content}"/></td> </tr><tr> public BlogEntry getE() { <td><h:outputText value="Status: "/></td> return this.e; <td><h:selectOneMenu value="#{editBlogEntry.e.status}"> } <s:selectItems value="#{editBlogEntry.blogEntryStatusList}" public void save() { var="blogEntryStatus" label="#{blogEntryStatus.name}" /> em.persist(e); <s:convertEntity/> } </h:selectOneMenu></td> ... </tr> } </table> <h:actionLink action=”#{editBlogEntry.save()}”/> </h:form> ... </body> </html>
  43. 43. <html ...> ... <body> ... Pagina’s <h:form> <table> <tr><td><h:outputText value="Title: "/></td> @Stateful @Name(“editBlogEntry”) <td><h:inputText value="#{editBlogEntry.e.title}" /></td> public class EditBlogEntry { </tr><tr> ... <td><h:outputText value="Created: "/></td> @In @Out <td><rich:calendar value="#{editBlogEntry.e.created}" private BlogEntry e; popup="true" datePattern="dd/MM/yyyy" .../></td> public void setE(e) { </tr><tr> this.e = e; <td><h:outputText value="Content: "/></td> } <td><h:inputTextarea value="#{editBlogEntry.e.content}"/></td> </tr><tr> public BlogEntry getE() { <td><h:outputText value="Status: "/></td> return this.e; <td><h:selectOneMenu value="#{editBlogEntry.e.status}"> } <s:selectItems value="#{editBlogEntry.blogEntryStatusList}" public void save() { var="blogEntryStatus" label="#{blogEntryStatus.name}" /> em.persist(e); <s:convertEntity/> } </h:selectOneMenu></td> ... </tr> } </table> <h:actionLink action=”#{editBlogEntry.save()}”/> </h:form> ... </body> </html> define page editBlogEntry(e : BlogEntry) { form{ table{ row{ "Title: " input(e.title) } row{ "Created: " input(e.created) } row{ "Content: " input(e.content) } row{ "Status: " input(e.status) } action("Save", save()) } } action save() { e.save(); return blogEntry(e); } }
  44. 44. <html ...> ... <body> ... Pagina’s <h:form> <table> <tr><td><h:outputText value="Title: "/></td> @Stateful @Name(“editBlogEntry”) <td><h:inputText value="#{editBlogEntry.e.title}" /></td> public class EditBlogEntry { </tr><tr> ... <td><h:outputText value="Created: "/></td> @In @Out <td><rich:calendar value="#{editBlogEntry.e.created}" private BlogEntry e; popup="true" datePattern="dd/MM/yyyy" .../></td> public void setE(e) { </tr><tr> this.e = e; <td><h:outputText value="Content: "/></td> } <td><h:inputTextarea value="#{editBlogEntry.e.content}"/></td> </tr><tr> public BlogEntry getE() { <td><h:outputText value="Status: "/></td> return this.e; <td><h:selectOneMenu value="#{editBlogEntry.e.status}"> } <s:selectItems value="#{editBlogEntry.blogEntryStatusList}" public void save() { var="blogEntryStatus" label="#{blogEntryStatus.name}" /> em.persist(e); <s:convertEntity/> } </h:selectOneMenu></td> ... </tr> } </table> <h:actionLink action=”#{editBlogEntry.save()}”/> </h:form> ... </body> </html>
  45. 45. <html ...> ... <body> ... Pagina’s <h:form> <table> <tr><td><h:outputText value="Title: "/></td> @Stateful @Name(“editBlogEntry”) <td><h:inputText value="#{editBlogEntry.e.title}" /></td> public class EditBlogEntry { </tr><tr> ... <td><h:outputText value="Created: "/></td> @In @Out <td><rich:calendar value="#{editBlogEntry.e.created}" private BlogEntry e; popup="true" datePattern="dd/MM/yyyy" .../></td> public void setE(e) { </tr><tr> this.e = e; <td><h:outputText value="Content: "/></td> } <td><h:inputTextarea value="#{editBlogEntry.e.content}"/></td> </tr><tr> public BlogEntry getE() { <td><h:outputText value="Status: "/></td> return this.e; <td><h:selectOneMenu value="#{editBlogEntry.e.status}"> } <s:selectItems value="#{editBlogEntry.blogEntryStatusList}" public void save() { var="blogEntryStatus" label="#{blogEntryStatus.name}" /> em.persist(e); <s:convertEntity/> } </h:selectOneMenu></td> ... </tr> } </table> <h:actionLink action=”#{editBlogEntry.save()}”/> </h:form> ... </body> </html> define page editBlogEntry(e : BlogEntry) { derive editPage from e }
  46. 46. 10-50x
  47. 47. WebDSL code WebDSL compiler Java applicatie (Java, JSF, Hibernate)
  48. 48. valkuilen
  49. 49. entity User { username :: String password :: Secret } entity Update { user -> User date :: DateTime text :: Text }
  50. 50. entity User { username :: String password :: Secret } entity Update { user -> User date :: DateTime text :: Text } define page home() { for(u : Update) { output(u.user.username) ": " output(u.text) spacer } }
  51. 51. entity User { username :: String password :: Secret } entity Update { user -> User date :: DateTime text :: Text } define page home() { for(u : Update) { output(u.user.username) ": " output(u.text) spacer } }
  52. 52. define page home() { header{ "Twitr" } spacer for(u : Update) { output(u.user.username) ": " output(u.text) spacer } "(C) Zef Hemel" }
  53. 53. define page login() { header{ "Twitr" } spacer var u : User form { "Login: " input(u) action("Login", login()) action login() { session.user := u; return home(); } } spacer "(C) Zef Hemel" }
  54. 54. define page login() { header{ "Twitr" } spacer var u : User form { "Login: " input(u) action("Login", login()) action login() { session.user := u; return home(); } } spacer "(C) Zef Hemel" }
  55. 55. template abstractie!
  56. 56. define template main() { header{ "Twitr" } spacer body() "(C) Zef Hemel" } define page home() { main() define body() { for(u : Update) { output(u.user.username) ": " output(u.text) spacer } } }
  57. 57. WebDSL code Template expander WebDSL compiler Java applicatie (Java, JSF, Hibernate)
  58. 58. template expander define page home() { main() define body() for(u : Update) { output(u.user.username) ": " output(u.text) spacer } } } define page home() { header{ "Twitr" } spacer for(u : Update) { output(u.user.username) ": " output(u.text) spacer } "(C) Zef Hemel" }
  59. 59. maar... JSF had ook al templates
  60. 60. WebDSL code Template expander WebDSL compiler Java applicatie templates (Java, JSF, Hibernate)
  61. 61. WebDSL code Template expander templates WebDSL compiler Java applicatie templates (Java, JSF, Hibernate)
  62. 62. WebDSL code herimplementeert templates Template expander templates WebDSL compiler Java applicatie templates (Java, JSF, Hibernate)
  63. 63. abstraction inversion WebDSL code herimplementeert templates Template expander templates WebDSL compiler Java applicatie templates (Java, JSF, Hibernate)
  64. 64. abstraction inversion WebDSL code herimplementeert templates Template expander templates WebDSL compiler slechte abstractie Java applicatie templates (Java, JSF, Hibernate)
  65. 65. “All non-trivial abstractions, to some degree, are leaky.” -- Joel Spolsky
  66. 66. abstracties verbergen implementatie
  67. 67. abstracties verbergen implementatie dat lukt eigenlijk nooit volledig
  68. 68. abstracties verbergen implementatie dat lukt eigenlijk nooit volledig WebDSL templates
  69. 69. abstracties verbergen implementatie dat lukt eigenlijk nooit volledig WebDSL templates NFS/SMB
  70. 70. abstracties verbergen implementatie dat lukt eigenlijk nooit volledig WebDSL templates NFS/SMB twee-dimensionale arrays
  71. 71. abstracties verbergen implementatie dat lukt eigenlijk nooit volledig WebDSL templates NFS/SMB twee-dimensionale arrays SQL
  72. 72. conclusie
  73. 73. abstractie is essentieel
  74. 74. abstractie is essentieel moeilijk
  75. 75. denk kritisch na
  76. 76. denk kritisch na heb ik dit vaker gedaan?
  77. 77. denk kritisch na heb ik dit vaker gedaan? gaat iemand dit vaker doen?
  78. 78. ja? abstraheer
  79. 79. webdsl.org zef.me

×