JavaScript Modularity Explained: A Guide to Modular JavaScript

1. Modular JavaScript @sander_mak @pbakker

2. Modularity

3. intro JavaScript

4. pitfalls JS

5. Module

6. Systems Java

8. JavaScript

9. modularity

10. Why

11. Modularity?

12. Modularity is key

13. to maintainable code

14. Modularity 101 Encapsulation Maintainability Flexible composition Sanity

15. Modularity 101 Remember

16. Java? Low

17. Coupling High

18. Cohesion

19. Modularity in Java Bundle A + package org.myapi - package org.myapi.impl - package org.util Bundle B + package org.other.api Bundle C + package org.other.impl Imports Imports

20. Modularity in Java The

21. only

22. modularity

23. solution

24. for

25. Java

26. today OSGi

27. Why modularity in JavaScript? We

28. run

29. into

30. the

31. same

32. maintainability

33. problems

34. as

35. on

36. the

37. server

38. side... So... 20% 80% Java JavaScript 50% 50% then now

39. Text And

40. it

41. might

42. even

43. be

44. worse....

45. JavaScript Modularity 101 Globals

46. Anonymous functions Anonymous

47. functions

48. prevent

49. putting

50. something

51. in

52. global

53. scope This

54. method

55. executes,

56. but

57. is

58. not

59. visible

60. in

61. global

62. scope

63. Namespacing: a common approach This only makes things slightly better... We still force myLibrary into global scope! static names

64. Leaking visibility Do

65. not

66. make

67. private

68. methods

69. public! myhelper

70. is

71. now

72. public public

73. Leaking visibility Instead: myhelper

74. is

75. now

76. private

77. Comparing

78. JavaScript

79. Module

80. Systems

81. Module Wish list Browser

82. support Stable Available

83. now Specified Manage dependencies

84. Module options Asynchronous

85. Module

86. Definition CommonJS ES6

87. Harmony

88. Modules

89. Module comparison AMD C.JS ES6 Spec-by- GitHub Spec-by- Wiki Ecma standard (in

90. progress) Spec? Impls? RequireJS Curl.js ... Browserify Node.js ... Browser first Server first Both Environment - Where can you play with ES6 modules? Traceur?

91. Module comparison AMD C.JS ES6 Yes No No Async? Format? Objects Functions ... Objects Available? Yes Yes No Objects Functions ...

92. Module comparison AMD CommonJS ES6

93. HarmonyRevise with latest syntax

94. Universal

95. Module

96. Definition Can’t we have it all?

97. NO!Pick

98. one. And

99. stick

100. with

101. it. (unless

102. you

103. are

104. a

105. library

106. author)

107. Why RequireJS? Robust

108. AMD

109. implementation Browser-based,

110. no

111. build

112. step Lazy-loading Optimizer:

113. r.js Backwards

114. compat.

115. with

116. globals jQuery

117. supports

118. AMD

119. RequireJS: end-to-end index.html main.js That.

120. Is.

121. All. mymodule-1.2.js

122. RequireJS: ‘advanced’ Require Require Named Modules Conditional Dependencies

123. From legacy to modules Globals RequireJS

124. Shims

125. Another example AngularJS

126. Services

127. model Dependency

128. Injection What

129. about

130. well

131. defined

132. interfaces? What

133. about

134. dynamic

135. services? Why

136. a

137. second

138. module

139. definition?

140. Service definition

141. Dependency Injection Injecting the service

142. Modularity

143. across

144. the

145. wire

146. RESTful

147. Web

148. Service JS

149. Module JS

150. Module JS

151. Module RESTful

152. Web

153. Service A typical web application

154. admin.general.ui admin.login.rest admin.orders.ui admin.products.ui admin.security customers.rest frontend.filters frontend.ui orders.rest products.rest orders.mongo customers.mongo products.mongo search.rest search.indexer

155. Demo bit.ly/modularjs

156. What about... ‘The

157. Future’

158. Future-proof modules Modularizing

159. was

160. the

161. hard

162. part.

163. Tech

164. is

165. secondary ‘Transpile’

166. ES

167. 6

168. modules Google

169. Traceur

170. or

171. Square’s

172. ES

173. transpiler But:

174. spec

175. far

176. from

177. final Library

178. author:

179. UMD Otherwise,

180. just

181. pick

182. one

183. Future:

184. JavaScript services https://github.com/osgi/design/raw/master/rfps/ rfp-0159-JavaScript-Microservices.pdf OSGi RFP 159 JavaScript

185. Micro

186. Services

187. Questions? @sander_mak @pbakker bit.ly/modularjs

JavaScript Modularity Explained: A Guide to Modular JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to JavaScript Modularity Explained: A Guide to Modular JavaScript

Similar to JavaScript Modularity Explained: A Guide to Modular JavaScript (20)

More from Sander Mak (@Sander_Mak)

More from Sander Mak (@Sander_Mak) (20)

Recently uploaded

Recently uploaded (20)

JavaScript Modularity Explained: A Guide to Modular JavaScript