The document discusses JavaScript modularity and different module systems for JavaScript. It describes how modularity is important for maintainable code but vanilla JavaScript lacks built-in modularity. It then evaluates popular module systems like AMD, CommonJS, and ES6 modules, noting their differences in terms of being asynchronous, object formats, and browser support. The document recommends picking one module system and sticking with it for a project.

1. Modular JavaScript
@sander_mak
@pbakker

2. Modularity

3. intro
JavaScript

4. pitfalls
JS

5. Module

6. Systems
Java

7. +

8. JavaScript

9. modularity

10. y

11. M
Wh
ity?
ular
od

12. Modularity is
key

13.
to maintainable code

14. Modularity 101
Remember

15. Java?
Low

16. Coupling
High

17. Cohesion

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

19. Modularity in Java
OSGi
The

20. only

21. modularity

22.
solution

23. for

24. Java

25. today

26. Why modularity in JavaScript?
then
now
20%
50%
50%
80%
Java
JavaScript
So...
We

27. run

28. into

29. the

30. same

31. maintainability

32.
problems

33. as

34. on

35. the

36. server

37. side...

38. Text
en

39.
t

40. ev
igh

41. it

42. m
And
....
orse
e

43. w
b

44. JavaScript Modularity 101
Globals

45. Anonymous functions
Anonymous

46. functions

47. prevent

48.
putting

49. something

50. in

51. global

52. scope
This

53. method

54. executes,

55. but

56. is

57. not

58.
visible

59. in

60. global

61. scope

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

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

64. Leaking visibility
Do

65. not

66. make

67. private

68. methods

69. public!
public
myhelper

70. is

71. now

72. public

73. Leaking visibility
Do

74. not

75. make

76. private

77. methods

78. public!
public
myhelper

79. is

80. now

81. public

82. Leaking visibility
Instead:
myhelper

83. is

84. now

85. private

86. ript

87.
avaSc
ring

88. J
ompa
C
stems
le

89. Sy
Modu

90. Module Wish list
Specified
Browser

91. support
Stable
Available

92. now
Manage dependencies

93. Module options
Asynchronous

94. Module

95. Definition
CommonJS
ES6

96. Harmony

97. Modules

98. Module comparison
Spec?
Impls?
AMD
Spec-byGitHub
RequireJS
Curl.js
...
Browser
first
C.JS
Spec-byWiki
Browserify
Node.js
...
Server
first
ES6
Ecma
standard
-
Both
(in

99. progress)
Where can you play
with ES6 modules?
Traceur?
Environment

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

101. Module comparison
AMD

102. Module comparison
AMD

103. Module comparison
AMD

104. Module comparison
AMD

105. Module comparison
AMD
Common
JS

106. Module comparison
AMD
Common
JS

107. Module comparison
AMD
Common
JS

108. Module comparison
AMD
Common
JS
ES6

109. Harm
ony

110. Module comparison
AMD
Common
JS
ES6

111. Harm
ony

112. Module comparison
AMD
Common
JS
ES6

113. Harm
ony

114. Module comparison
AMD
Common
JS
ES6

115. Harm
ony

116. Can’t we have it all?
Universal

117. Module

118. D
efinition

119. Can’t we have it all?
Universal

120. Module

121. D
efinition

122. NO!
Pick

123. one.
And

124. stick

125. with

126. it.
(unless

127. you

128. are

129. a

130. library

131. author)

132. Why RequireJS?
Robust

133. AMD

134. implementation
Browser-based,

135. no

136. build

137. step
Lazy-loading
Optimizer:

138. r.js
Backwards

139. compatible

140. with

141. globals
jQuery

142. supports

143. AMD

144. RequireJS: end-to-end
index.htm
l

145. RequireJS: end-to-end
index.htm
l
main.js

146. RequireJS: end-to-end
index.htm
l
main.js
That.

147. Is.

148. All.
mymodul
e-1.2.js

149. RequireJS: ‘advanced’
Require
Require:
Lazy

150. loading

151. RequireJS: ‘advanced’
Require
Require:
Lazy

152. loading
Named
Modules

153. RequireJS: ‘advanced’
Require
Require:
Lazy

154. loading
Named
Modules
Conditional
Dependencies

155. From legacy to modules
RequireJS

156. Shims
Globals

157. From legacy to modules
RequireJS

158. Shims
Globals

159. From legacy to modules
RequireJS

160. Shims
Globals

161. Another example
AngularJS

162. Services

163. model
Dependency

164. Injection
What

165. about

166. well

167. defined

168. interfaces?
What

169. about

170. dynamic

171. services?
Why

172. a

173. second

174. module

175. definition?

176. Service definition

177. Service definition
AMD Module

178. Service definition
Angular Module

179. Dependency Injection

180. Dependency Injection
Angular module dependency

181. Dependency Injection
Injecting the service

182. Modularity

183.
across

184. the

185.
wire

186. A typical web application
JS

187. Module
JS

188. Module
RESTful

189.
Web

190. Service
JS

191. Module
RESTful

192.
Web

193. Service

194. Demo
bit.ly/modularjs

195. What about...
‘The

196. Future’

197. Future-proof modules
Modular
izing

198. wa
s

199. the

200. har
Tech

201. is

202. s
d

203. part.

204.
econdar
y
‘Transpile’

205. ES

206. 6

207. modules
Google

208. Traceur

209. or

210. Square’s

211. ES

212. transpiler
But:

213. spec

214. far

215. from

216. final
Library

217. author:

218. UMD
Otherwise,

219. just

220. pick

221. one

222. Future:

223. JavaScript services
OSGi RFP 159
JavaScript

224. Micro

225. Services
https://github.com/osgi/design/raw/master/rfps/
rfp-0159-JavaScript-Microservices.pdf

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