As presented at JavaOne 2013

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. 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