JavaScript Architektur

1,467 views

Published on

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
1,467
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Architektur

  1. 1. Enterprise JavaScript Architekturen Tuesday 29 October 13
  2. 2. WER BIN ICH? • Sebastian Springer • https://github.com/sspringer82 • @basti_springer Tuesday 29 October 13
  3. 3. Eine Softwarearchitektur ist einer der Architekturtypen in der Informatik und beschreibt die grundlegenden Komponenten und deren Zusammenspiel innerhalb eines Softwaresystems. Tuesday 29 October 13
  4. 4. Wie strukturiere ich meine JavaScript-Applikation? Tuesday 29 October 13
  5. 5. Wartbarkeit und Erweiterbarkeit Tuesday 29 October 13
  6. 6. Tuesday 29 October 13
  7. 7. Server Tuesday 29 October 13
  8. 8. Client Server Tuesday 29 October 13
  9. 9. Client Server Tuesday 29 October 13
  10. 10. Client Request Server Tuesday 29 October 13
  11. 11. Client Request Server Tuesday 29 October 13
  12. 12. Client Request Response Server Tuesday 29 October 13
  13. 13. Client Request HTTP Response Server Tuesday 29 October 13
  14. 14. Response? Header Body Tuesday 29 October 13
  15. 15. Response? Statuscode Header Body Tuesday 29 October 13
  16. 16. Response? Statuscode Header Body Tuesday 29 October 13 ContentType
  17. 17. Response? Statuscode Header HTML Tuesday 29 October 13 Body ContentType
  18. 18. Response? Statuscode Header HTML Tuesday 29 October 13 Body ContentType CSS
  19. 19. Response? Statuscode Header HTML Body JavaScript Tuesday 29 October 13 ContentType CSS
  20. 20. Pro Datei, maximal zwei Sprachen Tuesday 29 October 13
  21. 21. . └── public ├── css ├── js │   ├── news │   │   ├── models │   │   └── views │   └── user │   ├── models │   └── views └── test ├── news │   ├── models │   └── views └── user ├── models └── views Tuesday 29 October 13
  22. 22. Multi Page vs. Single Page Tuesday 29 October 13
  23. 23. Multi Page App Einstiegsseite Tuesday 29 October 13
  24. 24. Multi Page App Einstiegsseite Tuesday 29 October 13 Modul 1
  25. 25. Multi Page App Einstiegsseite Tuesday 29 October 13 Modul 1
  26. 26. Multi Page App Einstiegsseite Tuesday 29 October 13 Modul 1 Modul 2
  27. 27. Multi Page App Einstiegsseite Tuesday 29 October 13 Modul 1 Modul 2
  28. 28. Einstiegsseite Tuesday 29 October 13
  29. 29. JSON Einstiegsseite Tuesday 29 October 13
  30. 30. JSON Einstiegsseite Tuesday 29 October 13
  31. 31. Modul 1 JSON Einstiegsseite Tuesday 29 October 13
  32. 32. Modul 1 JSON Einstiegsseite Tuesday 29 October 13 JSON
  33. 33. Modul 1 JSON Einstiegsseite Tuesday 29 October 13 JSON
  34. 34. Modul 1 JSON Modul 2 Einstiegsseite Tuesday 29 October 13 JSON
  35. 35. Modul 1 JSON Modul 2 Einstiegsseite JSON JSON Tuesday 29 October 13
  36. 36. Modul 1 JSON Modul 2 Einstiegsseite JSON JSON Tuesday 29 October 13
  37. 37. Modul 1 JSON Modul 2 Einstiegsseite JSON Modul 3 JSON Tuesday 29 October 13
  38. 38. MV*?! Tuesday 29 October 13
  39. 39. MVC Tuesday 29 October 13
  40. 40. Model Tuesday 29 October 13
  41. 41. Model Tuesday 29 October 13 View
  42. 42. Controller Model Tuesday 29 October 13 View
  43. 43. Tuesday 29 October 13
  44. 44. MVVM Tuesday 29 October 13
  45. 45. Model Tuesday 29 October 13
  46. 46. Model Tuesday 29 October 13 Businesslogik
  47. 47. Model ViewModel Tuesday 29 October 13 Businesslogik
  48. 48. Model ViewModel Tuesday 29 October 13 Businesslogik UI-Logik
  49. 49. Model ViewModel Tuesday 29 October 13 Businesslogik UI-Logik
  50. 50. Model ViewModel Tuesday 29 October 13 Businesslogik UI-Logik
  51. 51. Model ViewModel View Tuesday 29 October 13 Businesslogik UI-Logik
  52. 52. Model ViewModel View Tuesday 29 October 13 Businesslogik UI-Logik Darstellung
  53. 53. Model ViewModel View Tuesday 29 October 13 Businesslogik UI-Logik Darstellung
  54. 54. Model ViewModel View Tuesday 29 October 13 Businesslogik UI-Logik Darstellung
  55. 55. Model ViewModel Businesslogik UI-Logik DataBinding View Tuesday 29 October 13 Darstellung
  56. 56. Tuesday 29 October 13
  57. 57. Modulloader Tuesday 29 October 13
  58. 58. require.js Tuesday 29 October 13
  59. 59. index.html Tuesday 29 October 13
  60. 60. index.html config Tuesday 29 October 13
  61. 61. index.html config Tuesday 29 October 13 require.js
  62. 62. index.html config main Tuesday 29 October 13 require.js
  63. 63. index.html config main App Tuesday 29 October 13 require.js
  64. 64. Requirejs Optimizer Tuesday 29 October 13
  65. 65. Ember Tuesday 29 October 13
  66. 66. Router Tuesday 29 October 13
  67. 67. Controller Router Tuesday 29 October 13
  68. 68. Controller Router Tuesday 29 October 13 Templates
  69. 69. Controller Router Tuesday 29 October 13 Templates Model
  70. 70. Controller Router Templates Components Tuesday 29 October 13 Model
  71. 71. Controller Router Templates Components Tuesday 29 October 13 Model
  72. 72. Controller Router Templates Components Tuesday 29 October 13 Model
  73. 73. JavaScript auf dem Server? Tuesday 29 October 13
  74. 74. Node.js & Express Tuesday 29 October 13
  75. 75. Node.js C-Libs Tuesday 29 October 13
  76. 76. Node.js C-Libs Tuesday 29 October 13
  77. 77. Node.js C-Libs Standard Library Interne Module Tuesday 29 October 13
  78. 78. Node.js C-Libs Standard Library Interne Module Tuesday 29 October 13
  79. 79. Node.js C-Libs Standard Library Interne Module Tuesday 29 October 13
  80. 80. Node.js C-Libs Standard Library Interne Module Tuesday 29 October 13 NPM
  81. 81. Node.js C-Libs Standard Library Interne Module Tuesday 29 October 13 NPM
  82. 82. Express HTTP-Modul Connect Middleware Express Tuesday 29 October 13 Webserver, Request, Response Routing
  83. 83. Routing app.<method>(url, [callback...], callback) Tuesday 29 October 13
  84. 84. Routing app.<method>(url, [callback...], callback) get post put delete ... Tuesday 29 October 13
  85. 85. Routing app.<method>(url, [callback...], callback) get post put delete ... Tuesday 29 October 13
  86. 86. Routing app.<method>(url, [callback...], callback) get post put delete ... Tuesday 29 October 13 function (req, res, next) { ... next(); }
  87. 87. Routing app.<method>(url, [callback...], callback) get post put delete ... Tuesday 29 October 13 function (req, res, next) { ... next(); }
  88. 88. Routing app.<method>(url, [callback...], callback) get post put delete ... Tuesday 29 October 13 function (req, res, next) { ... next(); }
  89. 89. Middleware app.use([path], function) Tuesday 29 October 13
  90. 90. Middleware app.use([path], function) function (req, res, next) { ... next(); } Tuesday 29 October 13
  91. 91. Middleware app.use([path], function) function (req, res, next) { ... next(); } Tuesday 29 October 13
  92. 92. Meteor Tuesday 29 October 13
  93. 93. Meteor Synchronisierung Live Updates Pakete Tuesday 29 October 13
  94. 94. Realtime Tuesday 29 October 13
  95. 95. HTTP Server Realtime Server Tuesday 29 October 13 Request Response Message Client Client
  96. 96. Server Tuesday 29 October 13 Client
  97. 97. Server Tuesday 29 October 13 Client
  98. 98. Server Client Request (http) Tuesday 29 October 13
  99. 99. Server Client Request (http) Tuesday 29 October 13
  100. 100. Server Client Request (http) Response (http) Tuesday 29 October 13
  101. 101. Server Client Request (http) Response (http) Tuesday 29 October 13
  102. 102. Server Client Request (http) Response (http) Switch Protocol Tuesday 29 October 13
  103. 103. Server Client Request (http) Response (http) Switch Protocol Tuesday 29 October 13
  104. 104. Server Client Request (http) Response (http) Switch Protocol Messages Tuesday 29 October 13
  105. 105. Ext JS, dojo, etc? Tuesday 29 October 13
  106. 106. Fragen? Tuesday 29 October 13
  107. 107. Kontakt Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82 Tuesday 29 October 13

×