Creating Scalable Web-Applications

Transcript

1. Creating scalable Web Applications @BastianHofmann

2. The usual Scaling Talk

3. Big Data Servers Caching Query Optimization Database Sharding Load Balancing

   Indices

4. But what about the frontend?

5. Rendering performance Asset loading Content Delivery Networks HTTP Caching Minifying

   JavaScript Image Compression Sprites Smooth animations

6. This talk will not be about any of this!

7. Application architecture

8. Structure

9. Code and component re-use

10. Rapid Development

11. Large code-bases

12. Frameworks to the rescue

13. ?

14. Most Web Frameworks are incomplete

15. None
16. None
17. None
18. None
19. None
20. None
21. None
22. None

23. webserver HTML browser JS

24. e duplication de duplication ode duplication code duplication code duplication

    code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplication code duplicatio code duplicat code duplic code dup code du code cod co co

25. So?

26. None
27. None
28. None
29. None
30. None
31. None
32. None
33. None

34. Questions? Ask!

35. http://speakerdeck.com/u/bastianhofmann

36. None

37. Mojito http://developer.yahoo.com/cocktails/mojito/

38. Meteor http://www.meteor.com

39. https://github.com/bashofmann/meteor_shoutbox_demo

40. DEMO

41. What about existing applications?

42. Legacy Code

43. Incremental Refactoring

44. many roads

45. The next SoundCloud http://backstage.soundcloud.com/2012/06/building-the- next-soundcloud/

46. None

47. status quo

48. webserver loadbalancer pgsql memcached mongodb services

49. webserver

50. None

51. Large, Old Codebase

52. MVC

53. None

54. complicated routing

55. PHP templates

56. lazy DB queries in view

57. None

58. Duplication and only some Code re-use

59. We can do better

60. Components

61. None

62. Self contained

63. Can be addressed and rendered separately

64. Server JS Browser JSON HTML HTML

65. JS is part of the component

66. Share code between server and client

67. Templates, Validation, Entities,...

68. It needs to be fast

69. We called them Widgets

70. PHP Controller Mustache Template JavaScript view class Widget Providing data

    Handling browser events Displaying data

71. Why no models in the frontend? http://backbonejs.org/#Model

72. None

73. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

74. Remember: self contained

75. Do not fetch data directly

76. Sssssssslllloooooowww

77. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

    Account Account Account Account Account Publication1 Publication2 Publication3

78. Require stuff

79. http://www.infoq.com/presentations/Evolution-of-Code- Design-at-Facebook/

80. The Preparer

81. Requirements

82. Resolver

83. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

84. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

85. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

86. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

87. None

88. EntityRequirement

89. None

90. Request Cache

91. Multi-GET

92. ServiceRequirement

93. None

94. Required / Optional

95. None

96. Hides storage specific logic from controllers

97. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces

    Connector Implementations

98. Widget Widget Widget Widget Preparer Fetch Requirements Resolver Resolver Services

    Connector Interfaces Connector Implementations

99. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces

    Connector Implementations Batch requirements and pass them to resolvers

100. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces

     Connector Implementations Call Services as effective as possible (Multi-GET,...)

101. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces

     Connector Implementations Attach fetched data to Requirements and pass them back to the preparer

102. Widget Widget Widget Widget Preparer Resolver Resolver Services Connector Interfaces

     Connector Implementations Distribute fetched data to the widgets that required it

103. Requirement doesn't need to be only data

104. WidgetRequirement

105. None

106. RequestDataRequirement

107. None

108. Data dependencies within a widget

109. => Callbacks

110. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

     CALLBACK CALLBACK CALLBACK

111. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

     CALLBACK CALLBACK CALLBACK

112. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

     CALLBACK CALLBACK CALLBACK
113. None

114. PHP 5.5 Generators https://wiki.php.net/rfc/generators

115. public function collect() { yield array( new EntityRequirement( 'account', Account::class,

     array('accountId' => $this->requestContect->getAccountId()) ), ); yield array( new ServiceRequirement( 'scienceDisciplines', AccountService::class, 'getScienceDisciplines', array('account' => $this->account) ) ); }

116. Data dependencies between Widgets

117. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

118. Prefills

119. None
120. None

121. Rendering

122. HTML

123. JSON

124. Templates

125. Mustache } http://mustache.github.com/

126. None

127. Helper Methods

128. • nl2br • truncate • pluralize • wordwrap • highlight

     • ...

129. http://pecl.php.net/package/v8js V8js

130. JavaScript

131. WidgetViews

132. None

133. Loading widgets from JavaScript

134. None

135. Rendering callbacks

136. None

137. Benefits

138. Enables developers to only focus on their components

139. Easier Refactoring

140. Error Handling

141. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

142. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

     EXCEPTION

143. Profile Publications Publication Publication Publication LeftColumn Image Instiution Menu

144. Testing

145. None

146. Bandit Algorithm http://untyped.com/untyping/2011/02/11/stop-ab-testing- and-make-out-like-a-bandit/

147. Caching of Components

148. Profile Publications Publication Publication Publication AboutMe LeftColumn Image Instiution Menu

     <esi:include src="..." />

149. Faster UX

150. window.history.pushState

151. Conclusion?

152. Think about your architecture

153. Refactor and make it better continuously

154. Frontend and backend are part of the same application

155. Don't rewrite your whole codebase in one go

156. h"p://twi"er.com/Bas2anHofmann h"p://profiles.google.com/bashofmann h"p://lanyrd.com/people/Bas2anHofmann h"p://speakerdeck.com/u/bas2anhofmann h"ps://github.com/bashofmann mail@bas2anhofmann.de