Modular JavaScript in an OSGi World - S Mak
- 2. an
- 3. OSGi
- 7. Module
- 10. OSGi Future
- 11. of
- 12. modular
- 13. webapps
- 14. Why
- 15. Modularity?
- 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
- 31. Text And
- 32. it
- 33. might
- 34. even
- 35. be
- 36. worse....
- 39. functions
- 40. prevent
- 41. putting
- 42. something
- 43. in
- 44. global
- 45. scope IIFE:
- 46. ’Immediately
- 47. invoked
- 48. function
- 49. expression’
- 52. is
- 53. ’private’
- 54. Comparing
- 55. JavaScript
- 56. Module
- 57. Systems
- 59. Module
- 61. Harmony
- 62. Modules
- 64. GitHub Spec-by-
- 65. Wiki Ecma
- 66. standard
- 67. (in
- 69. Curl.js
- 70. ... Browserify
- 71. Node.js
- 72. ... Browser
- 73. first Server
- 83. Harmony
- 85. Harmony
- 87. Harmony
- 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)
- 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
- 128. Is.
- 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
- 137. Injection!=
- 138. Think
- 139. import vs.
- 140. new Module
- 141. loading package
- 142. deps vs.
- 143. OSGi
- 150. services
- 152. Injection!=
- 153. Think
- 154. import vs.
- 155. new Module
- 157. deps vs.
- 158. OSGi
- 165. services
- 167. Angular
- 168. modules
- 169. must
- 170. be
- 171. known
- 172. at
- 173. ‘startup’
- 175. Module All
- 176. Angular
- 177. modules
- 178. must
- 179. be
- 180. known
- 181. at
- 182. ‘startup’
- 184. Module All
- 185. Angular
- 186. modules
- 187. must
- 188. be
- 189. known
- 190. at
- 191. ‘startup’
- 192. Dependency injection
- 194. module
- 195. dependency
- 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
- 229. OpenSocial
- 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
- 296. /static/js/module.js
- 297. /static/js/..*.js
- 298. /static/templates
- 299. /static/css
- 301. /static/js/module.js
- 302. /static/js/..*.js
- 303. /static/templates
- 304. /static/css
- 308. Main frontend bundle
- 309. Angular
- 310. module
- 311. per
- 313. /static/js/module.js
- 314. /static/js/..*.js
- 315. /static/templates
- 316. /static/css
- 318. /static/js/module.js
- 319. /static/js/..*.js
- 320. /static/templates
- 321. /static/css
- 325. Main frontend bundle
- 326. Angular
- 327. module
- 328. per
- 330. /static/js/module.js
- 331. /static/js/..*.js
- 332. /static/templates
- 333. /static/css
- 335. /static/js/module.js
- 336. /static/js/..*.js
- 337. /static/templates
- 338. /static/css
- 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
- 389. /static/module1/*.js
- 395. ! /static/main.js
- 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:
- 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:
- 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:
- 543. Future:
- 545. import
- 546. Future:
- 548. element
- 549. definition
- 550. Future:
- 553. databinding
- 554. Future:
- 556. (Polymer
- 557. specific,
- 558. ultimately
- 559. calls
- 560. into
- 561. Web
- 562. Components
- 563. standard
- 564. API)
- 565. Future: