Large Scale JavaScript Application Architecture

Transcript

1. Large Scale JavaScript Large Scale JavaScript Application Architecture Application Architecture
2. ahumphreys87 ahumphreys87 JavaScript Architect at Bede Gaming. JavaScript Game Framework that powers cross platform Bingo client and Slots games. Node.js Slots Engine, Chat Server. Node.js API facade. Core contributor to Marionette.js Issue triaging, Pull Request reviews. Bug fixing. New features!
3. Introduction Introduction What is a large JavaScript application? Common Pitfalls. Useful Patterns. How frameworks apply these principles. Questions???
4. Over 100,000 LOC? Over Xmb in size? Lots of files? Hard to maintain What is a Large JavaScript What is a Large JavaScript Application? Application?
5. "A large JavaScript application is a non-trivial application that requires significant effort to maintain and where most of the data manipulation takes place in the browser." Addy Osmani
6. Modularise Modularise Break the large application up. Think of logical components. Different sections on the screen?
7. 4 Questions 4 Questions 1. Can I reuse my modules? 2. Will my application still function if this breaks? 3. Is it testable? 4. Does it depend on anything else?
8. Common Pitfalls Common Pitfalls Tight coupling. Event webs. Lack of tests.
9. Tight Coupling Tight Coupling Modules depend on each other. What happens if another module breaks? Can we reuse this module? Can you test it?
10. Event Webs Event Webs
11. Often caused by tight coupling. Modules fire events between each other. Debugging becomes difficult. Untestable.
12. Loosen up! Loosen up! Loosely coupled modules. They can be reused. They don't depend on others. They are easy to test. Create a Facade. Create a Mediator.
13. Facade Facade
14. Abstracts complexity. Exposes a simple interface. bind/trigger. Modules only communicate with the facade.
15. Mediator Mediator
16. The "brains" of the application. Performs application specific actions based on the events. Controls what the facade listens for. Controls what the facade sends where.
17. The Result The Result Modules can break without breaking the full application. Modules can be tested independently. Modules can be reused.
18. How do the big guns do it? How do the big guns do it? Backbone.Radio Services Vanilla Classes Directives Services 2 way data binding Flux Action / Dispatcher Components Components. Actions Routes / Controllers
19. Questions??? Questions???