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

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

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

105. Module comparison AMD Common JS

108. Module comparison AMD Common JS ES6

109. Harm ony

111. Harm ony

113. Harm ony

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

152. loading Named Modules

154. loading Named Modules Conditional Dependencies

155. From legacy to modules RequireJS

156. Shims Globals

158. Shims Globals

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

Modular JavaScript

More Related Content

What's hot (10)

Viewers also liked (8)

Similar to Modular JavaScript (20)

More from NLJUG (20)

Recently uploaded (20)

Modular JavaScript