Scalable JavaScript
Applications

Dmytro Tarasenko
April 2012
Agenda
•
•
•
•
•
•
•

JavaScript trend
OOP in JavaScript
MVC
Application entities
MVC Example
Layers
Best practices
JS Trend: Languages evolution
OOP
C++, Java, C#, Python

Structured
C, Pascal, Algol, Ada

Assemblers

Machine code
JS Trend: JavaScript evolution
Big frameworks
Dojo, ExtJs, YUI

Small libraries
Backbone, Midori, MochiKit

Self created l...
JS Trend: Big applications
Why JS environment has been changing?

Because of big WEB applications
OOP: Abstraction
Single page
application
Classes, modules,
layers
HTML, CSS, DOM
and BOM abstraction
OOP: Classes
name
extension
constructor
destructor
configuration
mixins
requires
publics/privates
statics
OOP: Class definition
Ext.define('MyClass', {
extend : 'MyBaseClass',
requires: 'MyClass2',
method : Ext.emptyFn,
statics ...
OOP: Class usage

var mc = Ext.create('MyClass');
mc.methodFromMyBaseClass();
mc.method();
MyClass.func();
MyClass.prop;

...
MVC
MVC: Model

• Data container;
• CRUD operations;
• Only data related logic;
• Uses alone and in stores;
• Controlled by a ...
MVC: View
•
•
•
•
•

Data representation
Validations
View logic
Stand alone widgets
Controlled by controller
MVC: Controller
Application entities
Reader

Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store
Application entities: Reader

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• Convert...
Application entities: Writer

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• Convert...
Application entities: Locale

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• English...
Application entities: MVC

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• Model View...
Application entities: Static Data

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• Sp...
Application entities: Store

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• Stores a...
Application entities: Utils

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• Shared f...
Application entities: Mixins

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• Multipl...
Application entities: Configuration

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• ...
Application entities: Plugins

Reader
Plugins

Writer

Config

Locale

App
Mixins

MVC

Static
Data

Utils
Store

• Works ...
Application entities: File structure
MVC Example
MVC Example
MVC Example: Views

FeedList
ArticleList
ArticlePreview
MVC Example: Controllers

Feed
Article
MVC Example: Models

Feed
Article
MVC Example: Stores

Feed
Article
MVC Example: FeedList view
Ext.define('FV.view.FeedList', {
extend: 'Ext.panel.Panel',
alias : 'widget.feedlist',
initComp...
MVC Example: Feed controller
Ext.define('FV.controller.Feed', {
extend: 'Ext.app.Controller',
stores: ['FV.store.Article']...
MVC Example: Feed model
Ext.define('FV.model.Feed', {
extend: 'Ext.data.Model',
fields: [
{name: 'url', type: 'string'},
{...
MVC Example: Feed store
Ext.define('FV.store.Feed', {
extend: 'Ext.data.Store',
model : 'FV.model.Feed',
data : [
{name: '...
Layers
Concrete app
(App NS)

Reusable layer
(XXX NS)

Base library
(Ext NS)

Browser
(window NS)
Scalable consists of…

• OOP (architecture and design patterns)
• Program entities (store, reader, writer,…)
• Class loose...
Best practices
•
•
•
•
•
•
•
•
•

Documented code conventions (JsDuck)
MVC
Class loose coupling
Code Repository (SVN, Git)...
Questions
Upcoming SlideShare
Loading in...5
×

Scalable java script applications

269

Published on

Presentation about big JavaScript application design and architecture.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
269
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Scalable java script applications"

  1. 1. Scalable JavaScript Applications Dmytro Tarasenko April 2012
  2. 2. Agenda • • • • • • • JavaScript trend OOP in JavaScript MVC Application entities MVC Example Layers Best practices
  3. 3. JS Trend: Languages evolution OOP C++, Java, C#, Python Structured C, Pascal, Algol, Ada Assemblers Machine code
  4. 4. JS Trend: JavaScript evolution Big frameworks Dojo, ExtJs, YUI Small libraries Backbone, Midori, MochiKit Self created libraries DOM, BOM oriented
  5. 5. JS Trend: Big applications Why JS environment has been changing? Because of big WEB applications
  6. 6. OOP: Abstraction Single page application Classes, modules, layers HTML, CSS, DOM and BOM abstraction
  7. 7. OOP: Classes name extension constructor destructor configuration mixins requires publics/privates statics
  8. 8. OOP: Class definition Ext.define('MyClass', { extend : 'MyBaseClass', requires: 'MyClass2', method : Ext.emptyFn, statics : { prop: 123, func: Ext.emptyFn } });
  9. 9. OOP: Class usage var mc = Ext.create('MyClass'); mc.methodFromMyBaseClass(); mc.method(); MyClass.func(); MyClass.prop; // static function // 123
  10. 10. MVC
  11. 11. MVC: Model • Data container; • CRUD operations; • Only data related logic; • Uses alone and in stores; • Controlled by a controller
  12. 12. MVC: View • • • • • Data representation Validations View logic Stand alone widgets Controlled by controller
  13. 13. MVC: Controller
  14. 14. Application entities Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store
  15. 15. Application entities: Reader Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Converts server data to JSON • Preprocesses data • Decodes data • Used in models and stores
  16. 16. Application entities: Writer Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Converts data from JSON to server format • Postprocesses data • Encodes data • Used in models and stores
  17. 17. Application entities: Locale Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • English to Russian translation • Loads and stores language database • __(‘String’) method • Used everywhere
  18. 18. Application entities: MVC Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Model View Controller pattern
  19. 19. Application entities: Static Data Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Splits data and logic • Used in stores, templates, ...
  20. 20. Application entities: Store Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Stores array of models • Filterable • Sortable • CRUD operations • Usage: Grids, Lists, Trees, …
  21. 21. Application entities: Utils Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Shared functions • Shared properties • Shared classes • Constants • Used everywhere
  22. 22. Application entities: Mixins Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Multiple inheritance emulation • Similar to class • Used in other classes
  23. 23. Application entities: Configuration Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Affects the entire application • Contains shared options • Used in classes
  24. 24. Application entities: Plugins Reader Plugins Writer Config Locale App Mixins MVC Static Data Utils Store • Works like a mixin, but has a visual part • Adds small visual effect to view • Used in every view
  25. 25. Application entities: File structure
  26. 26. MVC Example
  27. 27. MVC Example
  28. 28. MVC Example: Views FeedList ArticleList ArticlePreview
  29. 29. MVC Example: Controllers Feed Article
  30. 30. MVC Example: Models Feed Article
  31. 31. MVC Example: Stores Feed Article
  32. 32. MVC Example: FeedList view Ext.define('FV.view.FeedList', { extend: 'Ext.panel.Panel', alias : 'widget.feedlist', initComponent: function() { this.items = [{ xtype: 'dataview', store: this.store }]; this.callParent(arguments); } });
  33. 33. MVC Example: Feed controller Ext.define('FV.controller.Feed', { extend: 'Ext.app.Controller', stores: ['FV.store.Article'], models: ['FV.model.Feed'], init: function() { this.control({ 'feedlist dataview': { selectionchange: this.loadFeed } }); }, loadFeed: function(selModel, selected) { var store = this.getArticlesStore(); var feed = selected[0]; store.load({params: {feed: feed.get('url')}}); } });
  34. 34. MVC Example: Feed model Ext.define('FV.model.Feed', { extend: 'Ext.data.Model', fields: [ {name: 'url', type: 'string'}, {name: 'name', type: 'string'} ] });
  35. 35. MVC Example: Feed store Ext.define('FV.store.Feed', { extend: 'Ext.data.Store', model : 'FV.model.Feed', data : [ {name: 'Sencha Blog', url: '…'}, {name: 'Sencha Forums', url: '…'}, {name: 'Ajaxian', url: '…'} ] });
  36. 36. Layers Concrete app (App NS) Reusable layer (XXX NS) Base library (Ext NS) Browser (window NS)
  37. 37. Scalable consists of… • OOP (architecture and design patterns) • Program entities (store, reader, writer,…) • Class loose coupling
  38. 38. Best practices • • • • • • • • • Documented code conventions (JsDuck) MVC Class loose coupling Code Repository (SVN, Git) Code review Every day refactoring Architect Project knowledge sharing (dashboard) Unit tests
  39. 39. Questions
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×