Large-scale Javascript applications benefit from a modular approach that let code be reused both within the application and across repeated implementations. In this session, we'll look at the modular approach used to build reusable Javascript modules in the Red Hat mobile field workforce management application (WFM) showcased in this year's Summit middleware keynote demo. Reusable modules for WFM are packaged as node package manager (npm) modules, providing a consistent format for both server and client sides using Node.js and Browserify. Modules are loosely coupled using the Mediator pattern and they broadcast user actions and state changes giving the application and other modules the opportunity to hook into those events. Additionally, visual components are packaged in a framework-agnostic manner, providing reusable UI components. You'll leave this session understanding the challenges faced when building reusable modules for large-scale applications, and the solutions employed in building out the reusable WFM modules.

1. Write powerful Javascript
modules to make your apps
DRY
DevNation 2016

2. Brian Leathem
@bleathem

3. Field Workforce Management

4. Modularity

6. Nuts and bolts

10. Modularity in Software Engineering

13. At large scale

14. Keynote Microservices

15. At small scales: Keeping your code DRY

16. Don't
Repeat
Yourself

17. Why DRY?

18. Bring it back to
javascript

19. Front-end and back-end

20. Javascript Libraries

21. Javascript Build Tools

22. Testing

23. Frontend / UI

24. Javascript Libraries

26. Other libraries

27. More prescriptive frameworks

28. Cordova plugins

29. CSS libraries

30. Block
Element
Modifier

31. Backend

32. Module Packaging & Delivery

33. Module Repository
Bower is dead.
Npm is king.
Jspm is looking good.

34. WFM
Modularity

35. Considerations for a module system

36. WFM
Design Goals

37. WFM
Design Constraints

41. In the module:
module.exports = 'wfm.camera';
In the application:
require('fh-wfm-camera')

42. Mediator Pattern
https://addyosmani.com/largescalejavascript/

43. mediator.subscribe('wfm:workorder:create:',
function(object, ts) {
self.create(object, ts)
.then(function(object) {
Mediator
.publish('done:wfm:workorder:create:'+ ts,
object);
});
Mediator Pattern in a cloud app

44. WFM Architecture

46. RainCatcher Modules
https://github.com/feedhenry-raincatcher

47. Demo