SlideShare a Scribd company logo
Gil Fink

Building Scalable JavaScript Apps
Agenda
• The challenge we face
• Suggested solution
• The patterns
The Challenge
How would you define a scalable JavaScript app
architecture?
Non-trivial apps require significant developer
effort to maintain, where a browser plays a big
role in data manipulation and display
Scalable JavaScript App Examples
Gmail
Twitter
Facebook
Yahoo! Homepage
and more
Current Architecture
Might contain a mixture of the following:
Custom Widgets

Modules

Application Core

MV* Framework

JavaScript Libraries and Toolkits
Current Architecture – Cont.
Possible Problems
How much of the app is reusable?
Can single modules exist on their own
independently?
Can a single module be tested independently?
How much modules depend on other modules
in the system?
Is the application parts tightly coupled?
If a specific part fails, can the application still
work?
Suggested Solution: Mixing JS Patterns
Module Pattern

Façade Pattern

Mediator/Event
Aggregator
Suggested Solution
Module

Module

Module

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

…

Facade

Pub / Sub

Core
Libraries

jQuery

Application Core

Backbone
.js

postal.js

…
Modular JavaScript Review
Proven JavaScript patterns for creating modular
JavaScript
Leverage JavaScript’s built-in features
“Modularize” code into reusable objects
Prototype Pattern
Module Pattern
Revealing Module Pattern
Revealing Prototype Pattern
Or use libraries like RequireJS or Almond
Module Patterns
// Module pattern
var Car = function () {
// private variables
// private functions
return {
// public members
};
};

//Revealing prototype pattern
var Car = function (elm) {
// variables defined here
}
Car.prototype = function () {
// functions defined here
return {
// public members defined
// here as with revealing
// module pattern
};
}();
Module Patterns

Demo
Modules
Module

Module

Module

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

…

Facade

Pub / Sub

Core
Libraries

jQuery

Application Core

Backbone
.js

postal.js

…
Modules
Informs the application when something
interesting happens
Correctly publish events of interest
Shouldn’t concern about:
What objects or modules are being notified
Where these objects are based
How many objects subscribe to notifications
Application Core
Module

Module

Module

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

…

Facade

Pub / Sub

Core
Libraries

jQuery

Application Core

Backbone
.js

postal.js

…
The Application Core
Manages the module lifecycle
When is it safe for a module to start?
When should it stop?
Modules should execute automatically when started

Enables adding and removing modules without
breaking the app
Should handle detecting and managing of
errors
Uses the mediator pattern
The Façade
Module

Module

Module

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

…

Facade

Pub / Sub

Core
Libraries

jQuery

Application Core

Backbone
.js

postal.js

…
The Façade
• Convenient, high-level interfaces to larger code
that hide underlying complexity
• Limited public API of functionality

• Differs greatly from the reality of the
implementation
• Example:
var module = (function () {
…
return {
façade: function (args) {
// do something
}
};
}());
The Façade – Cont.
The Façade

Demo
The Façade
Will play a role of:
Abstraction to the application core
The façade sits in the middle between the core and
the modules
Ensure a consistent interface to the modules which is
available at all times
Should be the only thing that modules are aware of
If modules have API, they expose it using a façade
Mediator/Event Aggregator
Module

Module

Module

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

HTML / CSS /
JavaScript

…

Facade

Pub / Sub

Core
Libraries

jQuery

Application Core

Backbone
.js

postal.js

…
Mediator/Event Aggregator
Promotes loose coupling of components
Helps solve module coupling issues
Allow modules to broadcast or listen to
notifications from other modules
Notifications can be handled by any number of
modules at once
Mediator/Event Aggregator – Cont.
Mediator Implementation Example
var mediator = (function () {
var subscribe = function (channel, fn) {
…
},
publish = function (channel) {
…
},
return {
publish: publish,
subscribe: subscribe
};
}());
Mediator

Demo
Frameworks
Framework that leverages the proposed solution:
Most of the MV* frameworks include ways to apply the
architecture (AngularJS, Ember and Backbone for
example)
Aura: http://aurajs.com/
The Scalable Application Framework:
https://github.com/legalbox/lb_js_scalableApp
And many more

Can be a good start point to impose the patterns
Questions
Summary
•
•

Building big and scalable JavaScript app is very
challenging
Combining proven patterns can help to create
better software
Resources
Slide Deck and Demos - http://sdrv.ms/17riPkB
Nicholas Zakas: Scalable JavaScript Application
Architecture http://www.youtube.com/watch?v=vXjVFPosQHw
Addy Osmani: Scaling Your JavaScript Applications http://addyosmani.com/scalable-javascript-videos/
My Blog – http://www.gilfink.net
Follow me on Twitter – @gilfink
Thank You

More Related Content

What's hot

Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 
Creating MVC Application with backbone js
Creating MVC Application with backbone jsCreating MVC Application with backbone js
Creating MVC Application with backbone js
Mindfire Solutions
 
Model View Presenter
Model View Presenter Model View Presenter
Model View Presenter
rendra toro
 
Leveraging Web Analytics for Automatically Generating Mobile Navigation Model...
Leveraging Web Analytics for Automatically Generating Mobile Navigation Model...Leveraging Web Analytics for Automatically Generating Mobile Navigation Model...
Leveraging Web Analytics for Automatically Generating Mobile Navigation Model...
Ivano Malavolta
 
Industry-Standard Web Development Techniques for Angular
Industry-Standard Web Development Techniques for AngularIndustry-Standard Web Development Techniques for Angular
Industry-Standard Web Development Techniques for Angular
Jai Prakash Mishra
 
What is front-end development ?
What is front-end development ?What is front-end development ?
What is front-end development ?
Mahmoud Shaker
 
Angular Introduction
Angular IntroductionAngular Introduction
Angular Introduction
Anoop Kumar Sharma
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
Ron Reiter
 
Micro frontend: The microservices puzzle extended to frontend
Micro frontend: The microservices puzzle  extended to frontendMicro frontend: The microservices puzzle  extended to frontend
Micro frontend: The microservices puzzle extended to frontend
Audrey Neveu
 
Top 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web DevelopmentTop 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web Development
Technostacks Infotech Pvt. Ltd.
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
Russ Fustino
 
10 top web development frameworks (new version 21 11)
10 top web development frameworks (new version 21 11)10 top web development frameworks (new version 21 11)
10 top web development frameworks (new version 21 11)
Mandar Majmudar
 
UI5con 2017 - UI5 Components - More Performance...
UI5con 2017 - UI5 Components - More Performance...UI5con 2017 - UI5 Components - More Performance...
UI5con 2017 - UI5 Components - More Performance...
Peter Muessig
 
JavaCro'15 - Web UI best practice integration with Java EE 7 - Peter Lehto
JavaCro'15 - Web UI best practice integration with Java EE 7 - Peter LehtoJavaCro'15 - Web UI best practice integration with Java EE 7 - Peter Lehto
JavaCro'15 - Web UI best practice integration with Java EE 7 - Peter Lehto
HUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
Developing WordPress Plugins : For Begineers
Developing WordPress Plugins :  For BegineersDeveloping WordPress Plugins :  For Begineers
Developing WordPress Plugins : For Begineers
M A Hossain Tonu
 
Chatbot development with Microsoft Bot Framework and LUIS
Chatbot development with Microsoft Bot Framework and LUISChatbot development with Microsoft Bot Framework and LUIS
Chatbot development with Microsoft Bot Framework and LUIS
Md. Mahedee Hasan
 
Search Engine Optimization
Search Engine OptimizationSearch Engine Optimization
Search Engine Optimization
Mindfire Solutions
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project Coding
Hemant Sarthak
 
Md M. Khan Professional Experience
Md M. Khan Professional ExperienceMd M. Khan Professional Experience
Md M. Khan Professional Experience
Md Khan
 
Aeternity Blockchain - Ecosystem & Devtools [2019]
Aeternity Blockchain - Ecosystem & Devtools [2019]Aeternity Blockchain - Ecosystem & Devtools [2019]
Aeternity Blockchain - Ecosystem & Devtools [2019]
Przemysław Thomann
 

What's hot (20)

Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
 
Creating MVC Application with backbone js
Creating MVC Application with backbone jsCreating MVC Application with backbone js
Creating MVC Application with backbone js
 
Model View Presenter
Model View Presenter Model View Presenter
Model View Presenter
 
Leveraging Web Analytics for Automatically Generating Mobile Navigation Model...
Leveraging Web Analytics for Automatically Generating Mobile Navigation Model...Leveraging Web Analytics for Automatically Generating Mobile Navigation Model...
Leveraging Web Analytics for Automatically Generating Mobile Navigation Model...
 
Industry-Standard Web Development Techniques for Angular
Industry-Standard Web Development Techniques for AngularIndustry-Standard Web Development Techniques for Angular
Industry-Standard Web Development Techniques for Angular
 
What is front-end development ?
What is front-end development ?What is front-end development ?
What is front-end development ?
 
Angular Introduction
Angular IntroductionAngular Introduction
Angular Introduction
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
 
Micro frontend: The microservices puzzle extended to frontend
Micro frontend: The microservices puzzle  extended to frontendMicro frontend: The microservices puzzle  extended to frontend
Micro frontend: The microservices puzzle extended to frontend
 
Top 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web DevelopmentTop 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web Development
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
10 top web development frameworks (new version 21 11)
10 top web development frameworks (new version 21 11)10 top web development frameworks (new version 21 11)
10 top web development frameworks (new version 21 11)
 
UI5con 2017 - UI5 Components - More Performance...
UI5con 2017 - UI5 Components - More Performance...UI5con 2017 - UI5 Components - More Performance...
UI5con 2017 - UI5 Components - More Performance...
 
JavaCro'15 - Web UI best practice integration with Java EE 7 - Peter Lehto
JavaCro'15 - Web UI best practice integration with Java EE 7 - Peter LehtoJavaCro'15 - Web UI best practice integration with Java EE 7 - Peter Lehto
JavaCro'15 - Web UI best practice integration with Java EE 7 - Peter Lehto
 
Developing WordPress Plugins : For Begineers
Developing WordPress Plugins :  For BegineersDeveloping WordPress Plugins :  For Begineers
Developing WordPress Plugins : For Begineers
 
Chatbot development with Microsoft Bot Framework and LUIS
Chatbot development with Microsoft Bot Framework and LUISChatbot development with Microsoft Bot Framework and LUIS
Chatbot development with Microsoft Bot Framework and LUIS
 
Search Engine Optimization
Search Engine OptimizationSearch Engine Optimization
Search Engine Optimization
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project Coding
 
Md M. Khan Professional Experience
Md M. Khan Professional ExperienceMd M. Khan Professional Experience
Md M. Khan Professional Experience
 
Aeternity Blockchain - Ecosystem & Devtools [2019]
Aeternity Blockchain - Ecosystem & Devtools [2019]Aeternity Blockchain - Ecosystem & Devtools [2019]
Aeternity Blockchain - Ecosystem & Devtools [2019]
 

Viewers also liked

#COP20Avanza
#COP20Avanza #COP20Avanza
#COP20Avanza
COP20 Lima
 
Dianproyectoestatutoaduanero6 dediciembrede2011
Dianproyectoestatutoaduanero6 dediciembrede2011Dianproyectoestatutoaduanero6 dediciembrede2011
Dianproyectoestatutoaduanero6 dediciembrede2011
Rafael Maya Sanabria
 
Pedrezuela, Bolsa de empleo 30 de enero de 2012
Pedrezuela, Bolsa de empleo 30 de enero de 2012Pedrezuela, Bolsa de empleo 30 de enero de 2012
Pedrezuela, Bolsa de empleo 30 de enero de 2012
Pedrezuela Activa
 
New Drug Review Orbactiv Internal Medicine II FINAL
New Drug Review Orbactiv Internal Medicine II FINALNew Drug Review Orbactiv Internal Medicine II FINAL
New Drug Review Orbactiv Internal Medicine II FINAL
Amy Yeh
 
Analisis y diagnostico de la eficiencia energetica
Analisis y diagnostico de la eficiencia energeticaAnalisis y diagnostico de la eficiencia energetica
Analisis y diagnostico de la eficiencia energetica
Farid Mokhtar Noriega
 
EDICIÓN 209 El Comercio del Ecuador
EDICIÓN 209 El Comercio del EcuadorEDICIÓN 209 El Comercio del Ecuador
EDICIÓN 209 El Comercio del Ecuador
El Comercio del Ecuador
 
Abecedario
AbecedarioAbecedario
Abecedario
AndreaValladareso
 
Instruction Manual ARMASIGHT Mount AIM PRO, AIM PRO-L | Optics Trade
Instruction Manual ARMASIGHT Mount AIM PRO, AIM PRO-L | Optics TradeInstruction Manual ARMASIGHT Mount AIM PRO, AIM PRO-L | Optics Trade
Instruction Manual ARMASIGHT Mount AIM PRO, AIM PRO-L | Optics Trade
Optics-Trade
 
Spatial Earth Profile2
Spatial Earth Profile2Spatial Earth Profile2
Spatial Earth Profile2
Vishwas Nirgude
 
Plan de “Gestión Integral de Residuos” en las Escuelas - Guía parael alumno
Plan de “Gestión Integral  de Residuos” en las Escuelas - Guía parael alumnoPlan de “Gestión Integral  de Residuos” en las Escuelas - Guía parael alumno
Plan de “Gestión Integral de Residuos” en las Escuelas - Guía parael alumno
Daniel Delgado
 
Accuracy Post M&A disputes research
Accuracy Post M&A disputes researchAccuracy Post M&A disputes research
Accuracy Post M&A disputes research
Heiko Ziehms
 
Guide Métier de la Durabilité : Responsabilité sociétale dans l'hôtellerie
Guide Métier de la Durabilité : Responsabilité sociétale dans l'hôtellerie Guide Métier de la Durabilité : Responsabilité sociétale dans l'hôtellerie
Guide Métier de la Durabilité : Responsabilité sociétale dans l'hôtellerie
Ministère du Tourisme - Maroc
 
Specijalni rezervat prirode Zasavica
Specijalni rezervat prirode ZasavicaSpecijalni rezervat prirode Zasavica
Specijalni rezervat prirode Zasavica
Dragica Novakovic
 
Regimenes autocratas tradicionalistas y sistemas mixtos
Regimenes autocratas tradicionalistas y sistemas mixtosRegimenes autocratas tradicionalistas y sistemas mixtos
Regimenes autocratas tradicionalistas y sistemas mixtos
Carlos Lopez Mendizabal
 
Red Hot Chilli Peppers
Red Hot Chilli PeppersRed Hot Chilli Peppers
Red Hot Chilli Peppers
Checomtze
 
Mercado Pago Open Platform - Construí la solución de pagos que tu negocio nec...
Mercado Pago Open Platform - Construí la solución de pagos que tu negocio nec...Mercado Pago Open Platform - Construí la solución de pagos que tu negocio nec...
Mercado Pago Open Platform - Construí la solución de pagos que tu negocio nec...
melidevelopers
 
Turbulence and Computing: Beauty and the Beast - Assistant Professor Gianluca...
Turbulence and Computing: Beauty and the Beast - Assistant Professor Gianluca...Turbulence and Computing: Beauty and the Beast - Assistant Professor Gianluca...
Turbulence and Computing: Beauty and the Beast - Assistant Professor Gianluca...
Stanford School of Engineering
 
Enterprise Content Management am SharePoint mit ecspand
Enterprise Content Management am SharePoint mit ecspandEnterprise Content Management am SharePoint mit ecspand
Enterprise Content Management am SharePoint mit ecspand
Christian Kiesewetter
 
PinkSlipParty Elevator Pitch Feb.2012
PinkSlipParty Elevator Pitch Feb.2012PinkSlipParty Elevator Pitch Feb.2012
PinkSlipParty Elevator Pitch Feb.2012
Jane Rodríguez del Tronco
 

Viewers also liked (20)

#COP20Avanza
#COP20Avanza #COP20Avanza
#COP20Avanza
 
Dianproyectoestatutoaduanero6 dediciembrede2011
Dianproyectoestatutoaduanero6 dediciembrede2011Dianproyectoestatutoaduanero6 dediciembrede2011
Dianproyectoestatutoaduanero6 dediciembrede2011
 
Lodz Design Festival 2010
Lodz Design Festival 2010Lodz Design Festival 2010
Lodz Design Festival 2010
 
Pedrezuela, Bolsa de empleo 30 de enero de 2012
Pedrezuela, Bolsa de empleo 30 de enero de 2012Pedrezuela, Bolsa de empleo 30 de enero de 2012
Pedrezuela, Bolsa de empleo 30 de enero de 2012
 
New Drug Review Orbactiv Internal Medicine II FINAL
New Drug Review Orbactiv Internal Medicine II FINALNew Drug Review Orbactiv Internal Medicine II FINAL
New Drug Review Orbactiv Internal Medicine II FINAL
 
Analisis y diagnostico de la eficiencia energetica
Analisis y diagnostico de la eficiencia energeticaAnalisis y diagnostico de la eficiencia energetica
Analisis y diagnostico de la eficiencia energetica
 
EDICIÓN 209 El Comercio del Ecuador
EDICIÓN 209 El Comercio del EcuadorEDICIÓN 209 El Comercio del Ecuador
EDICIÓN 209 El Comercio del Ecuador
 
Abecedario
AbecedarioAbecedario
Abecedario
 
Instruction Manual ARMASIGHT Mount AIM PRO, AIM PRO-L | Optics Trade
Instruction Manual ARMASIGHT Mount AIM PRO, AIM PRO-L | Optics TradeInstruction Manual ARMASIGHT Mount AIM PRO, AIM PRO-L | Optics Trade
Instruction Manual ARMASIGHT Mount AIM PRO, AIM PRO-L | Optics Trade
 
Spatial Earth Profile2
Spatial Earth Profile2Spatial Earth Profile2
Spatial Earth Profile2
 
Plan de “Gestión Integral de Residuos” en las Escuelas - Guía parael alumno
Plan de “Gestión Integral  de Residuos” en las Escuelas - Guía parael alumnoPlan de “Gestión Integral  de Residuos” en las Escuelas - Guía parael alumno
Plan de “Gestión Integral de Residuos” en las Escuelas - Guía parael alumno
 
Accuracy Post M&A disputes research
Accuracy Post M&A disputes researchAccuracy Post M&A disputes research
Accuracy Post M&A disputes research
 
Guide Métier de la Durabilité : Responsabilité sociétale dans l'hôtellerie
Guide Métier de la Durabilité : Responsabilité sociétale dans l'hôtellerie Guide Métier de la Durabilité : Responsabilité sociétale dans l'hôtellerie
Guide Métier de la Durabilité : Responsabilité sociétale dans l'hôtellerie
 
Specijalni rezervat prirode Zasavica
Specijalni rezervat prirode ZasavicaSpecijalni rezervat prirode Zasavica
Specijalni rezervat prirode Zasavica
 
Regimenes autocratas tradicionalistas y sistemas mixtos
Regimenes autocratas tradicionalistas y sistemas mixtosRegimenes autocratas tradicionalistas y sistemas mixtos
Regimenes autocratas tradicionalistas y sistemas mixtos
 
Red Hot Chilli Peppers
Red Hot Chilli PeppersRed Hot Chilli Peppers
Red Hot Chilli Peppers
 
Mercado Pago Open Platform - Construí la solución de pagos que tu negocio nec...
Mercado Pago Open Platform - Construí la solución de pagos que tu negocio nec...Mercado Pago Open Platform - Construí la solución de pagos que tu negocio nec...
Mercado Pago Open Platform - Construí la solución de pagos que tu negocio nec...
 
Turbulence and Computing: Beauty and the Beast - Assistant Professor Gianluca...
Turbulence and Computing: Beauty and the Beast - Assistant Professor Gianluca...Turbulence and Computing: Beauty and the Beast - Assistant Professor Gianluca...
Turbulence and Computing: Beauty and the Beast - Assistant Professor Gianluca...
 
Enterprise Content Management am SharePoint mit ecspand
Enterprise Content Management am SharePoint mit ecspandEnterprise Content Management am SharePoint mit ecspand
Enterprise Content Management am SharePoint mit ecspand
 
PinkSlipParty Elevator Pitch Feb.2012
PinkSlipParty Elevator Pitch Feb.2012PinkSlipParty Elevator Pitch Feb.2012
PinkSlipParty Elevator Pitch Feb.2012
 

Similar to Building Scalable JavaScript Apps

Александр Белецкий "Архитектура Javascript приложений"
 Александр Белецкий "Архитектура Javascript приложений" Александр Белецкий "Архитектура Javascript приложений"
Александр Белецкий "Архитектура Javascript приложений"
Agile Base Camp
 
Design pattern
Design patternDesign pattern
Design pattern
Shreyance Jain
 
Modern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design PatternsModern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design Patterns
Volodymyr Voytyshyn
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
Fwdays
 
An overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-endAn overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-end
Saeid Zebardast
 
Design pattern in an expressive language java script
Design pattern in an expressive language java scriptDesign pattern in an expressive language java script
Design pattern in an expressive language java script
Amit Thakkar
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
Milan Korsos
 
Javascript Design Patterns
Javascript Design PatternsJavascript Design Patterns
Javascript Design Patterns
Lilia Sfaxi
 
Rp 6 session 2 naresh bhatia
Rp 6  session 2 naresh bhatiaRp 6  session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
sapientindia
 
From Containerization to Modularity
From Containerization to ModularityFrom Containerization to Modularity
From Containerization to Modularity
oasisfeng
 
Design patterns
Design patternsDesign patterns
Design patterns
Mobicules Technologies
 
Getting Started with Spring Framework
Getting Started with Spring FrameworkGetting Started with Spring Framework
Getting Started with Spring Framework
Edureka!
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf
Mverve1
 
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Katy Slemon
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
KNOWARTH - Software Development Company
 
Clean architecture with asp.net core
Clean architecture with asp.net coreClean architecture with asp.net core
Clean architecture with asp.net core
Sam Nasr, MCSA, MVP
 
A report on mvc using the information
A report on mvc using the informationA report on mvc using the information
A report on mvc using the information
Toushik Paul
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
RajkumarJangid7
 
Blast Mojo Overview
Blast Mojo OverviewBlast Mojo Overview
Blast Mojo Overview
loyalchow
 

Similar to Building Scalable JavaScript Apps (20)

Александр Белецкий "Архитектура Javascript приложений"
 Александр Белецкий "Архитектура Javascript приложений" Александр Белецкий "Архитектура Javascript приложений"
Александр Белецкий "Архитектура Javascript приложений"
 
Design pattern
Design patternDesign pattern
Design pattern
 
Modern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design PatternsModern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design Patterns
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
 
An overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-endAn overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-end
 
Design pattern in an expressive language java script
Design pattern in an expressive language java scriptDesign pattern in an expressive language java script
Design pattern in an expressive language java script
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 
Javascript Design Patterns
Javascript Design PatternsJavascript Design Patterns
Javascript Design Patterns
 
Rp 6 session 2 naresh bhatia
Rp 6  session 2 naresh bhatiaRp 6  session 2 naresh bhatia
Rp 6 session 2 naresh bhatia
 
From Containerization to Modularity
From Containerization to ModularityFrom Containerization to Modularity
From Containerization to Modularity
 
Design patterns
Design patternsDesign patterns
Design patterns
 
Getting Started with Spring Framework
Getting Started with Spring FrameworkGetting Started with Spring Framework
Getting Started with Spring Framework
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf5 Front End Frameworks to Master in Web Development.pdf
5 Front End Frameworks to Master in Web Development.pdf
 
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
 
Clean architecture with asp.net core
Clean architecture with asp.net coreClean architecture with asp.net core
Clean architecture with asp.net core
 
A report on mvc using the information
A report on mvc using the informationA report on mvc using the information
A report on mvc using the information
 
Javascript frameworks
Javascript frameworksJavascript frameworks
Javascript frameworks
 
Blast Mojo Overview
Blast Mojo OverviewBlast Mojo Overview
Blast Mojo Overview
 

More from Gil Fink

Becoming a Tech Speaker
Becoming a Tech SpeakerBecoming a Tech Speaker
Becoming a Tech Speaker
Gil Fink
 
Web animation on steroids web animation api
Web animation on steroids web animation api Web animation on steroids web animation api
Web animation on steroids web animation api
Gil Fink
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived
Gil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
Gil Fink
 
Being a tech speaker
Being a tech speakerBeing a tech speaker
Being a tech speaker
Gil Fink
 
Working with Data in Service Workers
Working with Data in Service WorkersWorking with Data in Service Workers
Working with Data in Service Workers
Gil Fink
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular Animations
Gil Fink
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
Gil Fink
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
Gil Fink
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
Gil Fink
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
Gil Fink
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type script
Gil Fink
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
Gil Fink
 
Web components
Web componentsWeb components
Web components
Gil Fink
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
Gil Fink
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
Gil Fink
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
Gil Fink
 

More from Gil Fink (20)

Becoming a Tech Speaker
Becoming a Tech SpeakerBecoming a Tech Speaker
Becoming a Tech Speaker
 
Web animation on steroids web animation api
Web animation on steroids web animation api Web animation on steroids web animation api
Web animation on steroids web animation api
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Being a tech speaker
Being a tech speakerBeing a tech speaker
Being a tech speaker
 
Working with Data in Service Workers
Working with Data in Service WorkersWorking with Data in Service Workers
Working with Data in Service Workers
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular Animations
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type script
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Web components
Web componentsWeb components
Web components
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
 

Recently uploaded

Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
CEPTES Software Inc
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Nicolás Lopéz
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 

Recently uploaded (20)

Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Salesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot WorkshopSalesforce AI & Einstein Copilot Workshop
Salesforce AI & Einstein Copilot Workshop
 
Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024Vertex AI Agent Builder - GDG Alicante - Julio 2024
Vertex AI Agent Builder - GDG Alicante - Julio 2024
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 

Building Scalable JavaScript Apps

  • 1. Gil Fink Building Scalable JavaScript Apps
  • 2. Agenda • The challenge we face • Suggested solution • The patterns
  • 3. The Challenge How would you define a scalable JavaScript app architecture? Non-trivial apps require significant developer effort to maintain, where a browser plays a big role in data manipulation and display
  • 4. Scalable JavaScript App Examples Gmail Twitter Facebook Yahoo! Homepage and more
  • 5. Current Architecture Might contain a mixture of the following: Custom Widgets Modules Application Core MV* Framework JavaScript Libraries and Toolkits
  • 7. Possible Problems How much of the app is reusable? Can single modules exist on their own independently? Can a single module be tested independently? How much modules depend on other modules in the system? Is the application parts tightly coupled? If a specific part fails, can the application still work?
  • 8. Suggested Solution: Mixing JS Patterns Module Pattern Façade Pattern Mediator/Event Aggregator
  • 9. Suggested Solution Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
  • 10. Modular JavaScript Review Proven JavaScript patterns for creating modular JavaScript Leverage JavaScript’s built-in features “Modularize” code into reusable objects Prototype Pattern Module Pattern Revealing Module Pattern Revealing Prototype Pattern Or use libraries like RequireJS or Almond
  • 11. Module Patterns // Module pattern var Car = function () { // private variables // private functions return { // public members }; }; //Revealing prototype pattern var Car = function (elm) { // variables defined here } Car.prototype = function () { // functions defined here return { // public members defined // here as with revealing // module pattern }; }();
  • 13. Modules Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
  • 14. Modules Informs the application when something interesting happens Correctly publish events of interest Shouldn’t concern about: What objects or modules are being notified Where these objects are based How many objects subscribe to notifications
  • 15. Application Core Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
  • 16. The Application Core Manages the module lifecycle When is it safe for a module to start? When should it stop? Modules should execute automatically when started Enables adding and removing modules without breaking the app Should handle detecting and managing of errors Uses the mediator pattern
  • 17. The Façade Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
  • 18. The Façade • Convenient, high-level interfaces to larger code that hide underlying complexity • Limited public API of functionality • Differs greatly from the reality of the implementation • Example: var module = (function () { … return { façade: function (args) { // do something } }; }());
  • 21. The Façade Will play a role of: Abstraction to the application core The façade sits in the middle between the core and the modules Ensure a consistent interface to the modules which is available at all times Should be the only thing that modules are aware of If modules have API, they expose it using a façade
  • 22. Mediator/Event Aggregator Module Module Module HTML / CSS / JavaScript HTML / CSS / JavaScript HTML / CSS / JavaScript … Facade Pub / Sub Core Libraries jQuery Application Core Backbone .js postal.js …
  • 23. Mediator/Event Aggregator Promotes loose coupling of components Helps solve module coupling issues Allow modules to broadcast or listen to notifications from other modules Notifications can be handled by any number of modules at once
  • 25. Mediator Implementation Example var mediator = (function () { var subscribe = function (channel, fn) { … }, publish = function (channel) { … }, return { publish: publish, subscribe: subscribe }; }());
  • 27. Frameworks Framework that leverages the proposed solution: Most of the MV* frameworks include ways to apply the architecture (AngularJS, Ember and Backbone for example) Aura: http://aurajs.com/ The Scalable Application Framework: https://github.com/legalbox/lb_js_scalableApp And many more Can be a good start point to impose the patterns
  • 29. Summary • • Building big and scalable JavaScript app is very challenging Combining proven patterns can help to create better software
  • 30. Resources Slide Deck and Demos - http://sdrv.ms/17riPkB Nicholas Zakas: Scalable JavaScript Application Architecture http://www.youtube.com/watch?v=vXjVFPosQHw Addy Osmani: Scaling Your JavaScript Applications http://addyosmani.com/scalable-javascript-videos/ My Blog – http://www.gilfink.net Follow me on Twitter – @gilfink