Александр Белецкий "Архитектура javascript...
TRANSCRIPT
Large Scale JavaScriptapplications
@alexbeletskyhttp://beletsky.nethttp://github.com/alexanderbeletsky
Big Credits to:
Addy OsmaniAddy Osmani is a rebel JavaScript blogger, speaker and a UI Developer for AOL (yes, we're still around!). He is also a member of the jQuery [Bug Triage/Docs/Front-end] teams where he assists with bugs, documentation and developer evangelism. His recent open-source projects include TodoMVC, which helps developers compare JavaScript MVC frameworks. For more on Addy’s work, check out his official website AddyOsmani.com for tutorials and magazines such as .net for his thoughts and commentaries on the state of the web.
JavaScript appsevolution
Early JavaScript application
● Mainly for web design
● Copy/Paste pattern commonly used
● Very poor browser support
● Lack of “community” knowledge base
● Low performace
Modern JavaScript application
● AJAX era started
● Adoption and respect by masses
● Huge improvement on standard and vendors
● Performance boosted
● New web assembly language
● Expertice & Best practices
Modern web app: GMail
Modern web app: Yandex Maps
Modern web app: Debitoor
“Modern web appstend to be more (or equaly) complexon front endrather on back end”
In fact,
JavaScript language is important...
Front-end developmentcould be complex...
What is Large scale app?
“In my view, large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser.”
- Addy Osmani
Complexity is handled by applying architectural approach
Patterns & Frameworks
Namespace
Module Facade Mediator Observer
Namespace pattern
“Namespacing is a technique employed to avoid collisions with other objects or variables in the global namespace”
Goal: avoid names collision and provide facilities to organize blocks of functionality into easily managable groups
Namespace pattern implementation
Namespace
Module Facade Mediator Observer
Module pattern
“The module pattern is a popular design that pattern that encapsulates 'privacy', state and organization using closures”
Goal: It provides a way of wrapping a mix of public and private methods and variables, protecting pieces from leaking into the global scope and accidentally colliding with another developer's interface
Module pattern implementation
Namespace
Module Facade Mediator Observer
Facade pattern
“ The facade pattern provides a convenient higher-level interface to a larger body of code, hiding its true underlying complexity. Think of it as simplifying the API being presented to other developers”
Goal: to hide implementation-specific details about a body of functionality contained in individual modules. The implementation of a module can change without the clients really even knowing about it.
Facade pattern implementation
Facade pattern implementation
Provides the open API for the rest of the application
Namespace
Module Facade Mediator Observer
Mediator pattern
“ The mediator is a behavioral design pattern that allows us to expose a unified interface through which the different parts of a system may communicate”
Goal: promotes loose coupling by ensuring that instead of components referring to each other explicitly, their interaction is handled through this central point. This can help us decouple systems and improve the potential for component reusability.
Mediator pattern implementation
Facade pattern implementation
Subscribe for particular event / Publish this event
Namespace
Module Facade Mediator Observer
Observer pattern
“ The Observer is a design pattern which allows an object (known as a subscriber) to watch another object (the publisher), where we provide a means for the subscriber and publisher form a listen and broadcast relationship”
Goal: the promotion of loose coupling. Rather than single objects calling on the methods of other objects directly, they instead subscribe to a specific task or activity of another object and are notified when it occurs.
Observer pattern implementation
https://gist.github.com/661855
Observer pattern implementation
RequireJS and AMD
RequireJS: file and module loader
RequreJS: Usage example
RequireJS: Main script
RequireJS uses Asynchronous Module Definitionto load modules
AMD: module example
Putting thing together
Proposed Architecture
Module Facade Mediator
RequireJS AMD
● Loosely coupled
● Broken into independent modules
● Flexible (framework agnostic)
Demo application
backbone-aura
Further reading:● Learning JavaScript Design Patterns
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
● Patterns For Large-Scale JavaScript Application Architecturehttp://addyosmani.com/largescalejavascript
● Writing Modular JavaScript With AMD, CommonJS & ES Harmonyhttp://addyosmani.com/writing-modular-js/
● Scalable JavaScript Application Architecturehttp://www.youtube.com/watch?v=vXjVFPosQHw&feature=youtu.be
Thank you.
http://beletsky.net@alexbeletsky