What percentage of your web-app is written in JavaScript? Don’t be surprised if it’s more than half of your codebase. With the advent of HTML5 and single-page-applications driven by RESTful backends, the amount of JavaScript keeps growing. On the Java side, OSGi allows us to create modular, flexible applications. But how does this translate to the client-side? Isn’t a ‘single-page-application’ fundamentally at odds with modularity? In this session we take a look at the currently available tools for modularity in JavaScript. There are several ways you can combine existing JavaScript module systems with OSGi-based development on the backend. We discuss tradeoffs between these different approaches based on real-world experience with large JavaScript front-ends and OSGi back-ends. In particular an example combining OSGi, RequireJS and AngularJS is presented. Along with practical advice based on current technology, we also look forward at relevant upcoming standards such as Web Components. After this session you’ll have a solid grasp of modular JavaScript development in an OSGi world. Bio: After getting his master's degree in Software Technology, Sander became a software developer/architect. Currently he works as Senior Software Engineer for Luminis Technologies, specializing in modular Java and JavaScript development. Additionally, data analysis and machine learning are part of his ever growing list of interests. Sander loves sharing knowledge, for example through his blog (at http://branchandbound.net) and by writing for the Dutch Java Magazine. He speaks regularly at various international developer conferences (including JavaOne, J-Fall, JEEConf), sharing his passion for Java, alternative JVM languages and related technologies.

1. Modular JavaScript
in

2. an

3. OSGi

4. world
@sander_mak

6. JavaScript?
JS

7. Module

8. Systems
JavaScript

10. OSGi
Future

11. of

12. modular

13. webapps

14. Why

15. Modularity?

16. Modularity is
key

18.
!
to maintainable code

19. Why modularity in JavaScript?
We

20. run

21. into

22. the

23. same

24. maintainability

25.
problems

26. as

27. on

28. the

29. server

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

31. Text
And

32. it

33. might

34. even

35.
be

36. worse....

37. JavaScript Modularity 101
Globals

38. Anonymous functions
Anonymous

39. functions

40. prevent

41.
putting

42. something

43. in

44. global

45. scope
IIFE:

46. ’Immediately

47. invoked

48. function

49.
expression’

51. Poor man’s ‘Modules’
myhelper

52. is

53. ’private’

54. Comparing

55. JavaScript

56.
Module

57. Systems

58. Module options
Asynchronous

59. Module

60. Definition
CommonJS
ES6

61. Harmony

62. Modules

63. Module comparison
AMD
C.JS
ES6
Spec-by-

64.
GitHub
Spec-by-

65.
Wiki
Ecma

66.
standard

67.
(in

68. progress)
Spec? Impls?
RequireJS

69.
Curl.js

70.
...
Browserify

71.
Node.js

72.
...
Browser

73.
first
Server

74.
first
Both
Environment
-

75. Module comparison
!AMD

76. Module comparison
!AMD

77. Module comparison
!AMD

78. Module comparison
!AMD

79. Module comparison
!AMD
!CommonJS

80. Module comparison
!AMD
!CommonJS

81. Module comparison
!AMD
!CommonJS

82. Module comparison
!AMD
!CommonJS
!ES6

83. Harmony

84. Module comparison
!AMD
!CommonJS
!ES6

85. Harmony

86. Module comparison
!AMD
!CommonJS
!ES6

87. Harmony

88. Module comparison
!AMD
!CommonJS
!ES6

89. Harmony

90. !Universal

91. Module

92. Definition
Can’t we have it all?

93. !Universal

94. Module

95. Definition
Can’t we have it all?

96. NO!Pick

97. one.

98.
And

99. stick

100. with

101. it.

102.
!
(unless

103. you

104. are

105. a

106. library

107. author)

108. Why RequireJS?
Robust

109. AMD

110. implementation

111.
Browser-based,

112. no

113. build

114. step

115.
Lazy-loading

116.
Optimizer:

117. r.js

118.
Backwards

119. compatible

120. with

121. globals

122.
jQuery

123. supports

124. AMD

125. RequireJS: end-to-end
!index.html

126. RequireJS: end-to-end
!index.html
!main.js

127. RequireJS: end-to-end
!index.html
!main.js
That.

128. Is.

129. All.
!mymodule-1.2.js

130. From legacy to modules
Globals
!RequireJS

131. Shims

132. From legacy to modules
Globals
!RequireJS

133. Shims

134. From legacy to modules
Globals
!RequireJS

135. Shims

136. Dependency injection
Dependency

137. Injection!=

138.
Think

139. import vs.

140. new
Module

141. loading
package

142.
deps
vs.

143. OSGi

150. services

151. Dependency injection
Dependency

152. Injection!=

153.
Think

154. import vs.

155. new
Module

156. loading
Option:
package

157.
deps
vs.

158. OSGi

165. services

166. Dependency injection
All

167. Angular

168. modules

169. must

170. be

171. known

172. at

173. ‘startup’

174. Dependency injection
AMD

175. Module
All

176. Angular

177. modules

178. must

179. be

180. known

181. at

182. ‘startup’

183. Dependency injection
Angular

184. Module
All

185. Angular

186. modules

187. must

188. be

189. known

190. at

191. ‘startup’

192. Dependency injection

193. Dependency injection
Angular

194. module

195. dependency

196. Dependency injection
Injecting

197. the

198. service

199. JavaScript

201.
OSGi

202.
Modularity

203. across

204. the

205. wire

206. JS

207. Module JS

208. Module JS

209. Module
OSGi services
Apache Felix
OSGi services
OSGi services
OSGi bundles
REST WebSockets
The high-level idea(l)

210. OpenSocial

211. gadget

212. container

213.
RequireJS

214. +

215. Angular

216. module

217. per

218. bundle

219.
RequireJS

220. +

221. One

222. ‘modular’

223. frontend

224. bundle
We

225. evolved

226. through

227. 3

228. implementations
The abstract idea(l)

229. OpenSocial

230. gadgets
Dashboard
Gadget

231. 1

232. (iFrame)
Gadget

233. 2

234. (iFrame)

235. OpenSocial

236. gadgets
Amdatu

237. OpenSocial

238. (Apache

239. Shindig)

240.
OSGi

241. bundle

242.
Serve

243. static

244. resources

245.
Register

246. Gadget

247. as

248. service

249. (whiteboard)

250.
Standardized

251. XML

252. descriptor

253.
Initial

254. HTML

255. views

256.
Preferences
Gadget:

257. OpenSocial

258. gadgets
Every

259. gadget

260. isolated

261. (CSS,

262. JS

263. freedom)

264.
Frontend

265. dynamics

266. match

267. OSGi

268.
!
!
Every

269. gadget

270. isolated

271. (CSS/JS

272. sharing)
iFrames

273. suck:

274. sub-optimal

275. user

276. experience

277.
OpenSocial

278. is

279. dead

280.
!

281. Angular

282. module

283. per

284. bundle
Towards

285. a

286. true

287. Single

288. Page

289. Web-application
No

290. more

291. iFrames...

292. Angular

293. module

294. per

295. bundle
/META-INF/MANIFEST.MF

296.
/static/js/module.js

297.
/static/js/..*.js

298.
/static/templates

299.
/static/css

300.
/META-INF/MANIFEST.MF

301.
/static/js/module.js

302.
/static/js/..*.js

303.
/static/templates

304.
/static/css

305.
!
Bundle 1
Bundle 2
/META-INF/MANIFEST.MF

306.
/static/js/angular.js

307.
/static/js/require.js

308.
Main frontend bundle

309. Angular

310. module

311. per

312. bundle
/META-INF/MANIFEST.MF

313.
/static/js/module.js

314.
/static/js/..*.js

315.
/static/templates

316.
/static/css

317.
/META-INF/MANIFEST.MF

318.
/static/js/module.js

319.
/static/js/..*.js

320.
/static/templates

321.
/static/css

322.
!
Bundle 1
Bundle 2
/META-INF/MANIFEST.MF

323.
/static/js/angular.js

324.
/static/js/require.js

325.
Main frontend bundle

326. Angular

327. module

328. per

329. bundle
/META-INF/MANIFEST.MF

330.
/static/js/module.js

331.
/static/js/..*.js

332.
/static/templates

333.
/static/css

334.
/META-INF/MANIFEST.MF

335.
/static/js/module.js

336.
/static/js/..*.js

337.
/static/templates

338.
/static/css

339.
!
Bundle 1
Bundle 2
/META-INF/MANIFEST.MF

340.
/static/js/angular.js

341.
/static/js/require.js

342.
Main frontend bundle
Generates

343. Angular

344. module

345. per

346. bundle
Integrated

347. single-page

348. app

349. experience

350.
Modular/maintainable

351. JavaScript

352.
Separate

353. bundles

354. for

355. frontend

356. modules

357.
!
!
!
Dynamically

358. generated

359. JS

360. defies

361. optimization

362.
Addition

363. of

364. frontend

365. bundle

366. requires

367. reload

368.
Frontend

369. bundles

370. have

371. ‘hidden’

372. dependencies

373.
Concerns

374. like

375. (global)

376. navigation

377. tricky

378.
!

379. Single

380. frontend

381. bundle
Single

382. Page

383. Web-application:

384. UI-based

385. tooling

386. all

387. the

388. way
/META-INF/MANIFEST.MF

389.
/static/module1/*.js

390.
/static/module1/css/*.css

391.
/static/module1/templates/*.html

392.
!
/static/module2/*.js

393.
/static/module2/css/*.css

394.
/static/module2/templates/*.html

395.
!
/static/main.js

396.
Frontend bundle
!
/META-INF/MANIFEST.MF

397.
/static/main.js

398.
/static/main.css

399.
Gulp/
Grunt
!
Bower
!
etc.
Concatenation Minification generate AppCache manifest
CSS Auto prefixing
Processed Frontend bundle
CSS pre-processor (SASS/LESS)

400. Angular

401. module

402. per

403. bundle
Integrated

404. single-page

405. app

406. experience

407.
Modular/maintainable

408. JavaScript

409.
Use

410. modern

411. frontend

412. toolchains

413.
!
!
!
!
!
!
Lose

414. dynamic

415. addition

416. of

417. frontend

418. modules

419.
!
!

420. What about...
‘The

421. Future’

422. Future:

423. ES6 modules
‘Transpile’

424. ES

425. 6

426. modules

427.
Google

428. Traceur

429. or

430. Square’s

431. ES

432. transpiler

433.
But:

434. spec

435. far

436. from

437. final

439. Future:

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

441. Micro

442. Services

443. Future:

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

445. Micro

446. Services
-

447. No

448. activity

449. since

450. August

451. 2013

452. Future:

453. Web Components
W3C

454. working

455. draft
Custom

456. elements

457. -

458. ‘the

459. DOM

460. is

461. the

462. framework’

463.
Templates/Shadow

464. DOM

465. -

466. iFrameless

467. encapsulation

468.
HTML

469. imports

470. -

471. native

472. #include

473. for

474. the

475. web

476.
Native

477. 2-way

478. databinding

479. -

480. convenient

482. fast

484. Future:

485. Web Components
Not

486. strictly

487. about

488. JS

489. modularity:

491.
supposed

492. to

493. piggyback

494. on

495. ES6

496. modules
W3C

497. working

498. draft
Custom

499. elements

500. -

501. ‘the

502. DOM

503. is

504. the

505. framework’

506.
Templates/Shadow

507. DOM

508. -

509. iFrameless

510. encapsulation

511.
HTML

512. imports

513. -

514. native

515. #include

516. for

517. the

518. web

519.
Native

520. 2-way

521. databinding

522. -

523. convenient

525. fast

527. Future:

528. Web Components
Google

529. Polymer
X-Tags
Poly-fills

530.
Pre-defined

531. custom

532.
elements

533.
!
AngularJS

534. and

535.
Ember.js

536. will

537. migrate

538.
to

539. web

540. components

541. Future:

542. Web Components
color-picker.html

543. Future:

544. Web Components
color-picker.html
HTML

545. import

546. Future:

547. Web Components
color-picker.html
Custom

548. element

549.
definition

550. Future:

551. Web Components
color-picker.html
2-way

553.
databinding

554. Future:

555. Web Components
color-picker.html
Registration/initialization

556.
(Polymer

557. specific,

558. ultimately

559. calls

560. into

561.
Web

562. Components

563. standard

564. API)

565. Future:

566. Web Components
color-picker.html
index.html

567. Questions?
@sander_mak bit.ly/modularjs