Writing a massive javascript app

Writing a massive javascript app
Hojoon Park
Sr. Software Engineer
LinkedIn
www.linkedin.com/in/justindoit

2
Over the last 3 years,
 Single Page Application (BackboneJS, AngularJS)
 Template System(Handlebars, Dust.LI)
 Web Framework (SugarAPIFramework, Java Play Framework)
 Unit Test (JasmineJS, SinonJS)

3
Agenda
 Web Frameworks
 Single Page Application
 Case Study
 Performance Tuning
 Demo

Avoid spaghetti code in Front-end development
4
 Too much copy/paste
 Too much 3rd party recourses
 Hard to debug the errors

5
Web Frameworks, recommend?
 Play
 Spring
 Ruby on Rails
 Yii
 Node.JS
 …
 Angular
 Backbone
 jQuery
 YUI
 Require
 Knockout
 Bootstrap
 …

6
Case Study: BackboneJS on PHP
 Pure SPA
 Metadata Manager
 Data Manager

7
Case Study: BackboneJS on Java Play
 Hybrid Web Application
 sbt-concat, sass compiler
 Model Hierarchy

8
Case Study: AngularJS on Java Play
 Pure SPA
 Grunt Builder
 Less compiler by Grunt

9
What is SPA (Single Page Application)?
 Routing
 Angular RouteProvider / Backbone Router
 MVC Framework
 Models as the single source
 Views observe model changes
 Minimized DOM dependent-code
 Asset Packaging

10
SPA (Single Page Application)
Cons. Pros.
SEO Optimization
No longer server side loading
(Read data thru AJAX)
Higher Risk, Higher Reward
(Memory Leak)
Client/Server code partitioning
Large File Size No Page Refresh

11
Consideration for SPA
 Resources/Assets Management
 JS/CSS compressor
 Template compiler
 Additional: LESS/SASS compiler

12
Why Asset Management is important?
 Continuously growing JS/CSS resources
 Duplicated JS files / version inconsistency

13
Sync vs. Async
Sync Async
Controller
Web framework
(Compiler plugin,
AssetManager)
Front-end Tools
(Require.JS, Inject.JS)
Pros. No delay on click Lazy Load
Cons. Longer loading time Loading on click

14
Anatomy: Directory(1)
 By Resource Type

15
Anatomy: Directory(2)
 By Feature

16
Asset Packaging: Play Framework
 sbt-concat plugin
 JavascriptMinifierCompiler

17
Asset Packaging: Yii Framework
 AssetManager

18
Build asset packages without web framework
 Resources/Assets Management
 JS/CSS compressor
 Template compiler
 Additional: LESS/SASS compiler
Build System
Tool
Bower
Package
Manager

19
Metadata Manager
 Sort the dependent modules
DashableListView
extends: ListView
FlexListView
extends: ListView
ListView
RecordListView
Extends: FlexListView
ListView
DashableListView
extends: ListView
FlexListView
extends: ListView
RecordListView
Extends: FlexListView

/**
* Sorts components in the order they should be declared as classes. This is required since a parent
* widget class must likewise be declared before a child that depends on it.
* @param {String} type Metadata type e.g. field, view. layout
* @param {Array} components List of modules
* @param {String} module Module name
* @return {Array} Sorted components
*/
_sortControllers : function(type, components, module) {
var updated = {}, nameMap = {}, entries = {},
updateWeights = function(entry){
var controller = entry.controller;
// Here we decrement the weight of any extended components. Note, that if sorting platform
// specific components (e.g. portal), and one "extends from" a base component, that parent
// will have already been declared since _sortControllers first gets called with base components
if (_.isObject(controller) && _.isString(controller.extendsFrom) &&
entries[controller.extendsFrom] && !updated[controller.extendsFrom])
{
// Negative weights as we want to load those first
entries[controller.extendsFrom].weight--;
updated[controller.extendsFrom] = true;
updateWeights(entries[controller.extendsFrom]);
}
};
// Start by creating a mapping from short name to final class name and precompiling all the controllers that are strings
_.each(components, function(entry, name) {
if (entry.controller) {
var controller = entry.controller,
className = (module || "") + app.utils.capitalizeHyphenated(name) + app.utils.capitalize(type);
nameMap[className] = name;
20
Metadata Manager: cont.
 Implementation

Great Design patterns are reusable, modular
expressions of what’s going on in your code.
They allow you to communicate to other
developers simply by the way you code,
in addition to being easily maintainable
themselves
21
Why Patterns?

22
Software design patterns
 Factory
 Singleton
 MVC
 Strongly OOP
 Mixin
 Event Driven

23
Object Oriented Programming
 Code Reuse and recycling
 Design Benefits
 More features,
same amount of time
ListView
FlexListView
SubPanelListView
DashableListView
SelectionListView RecordListView

ListView MergeDuplicateView
Tooltip
Mixin pool
24
Decorator: Mixin (plugin)
RecordListView
extends: ListView
ErrorDecoration
Editable
MergeDuplicates
CreateView
Audit
FindDuplicates
Timeago
ActivityStreamView

25
BackboneJS: Life-cycle of View Component
Initialize Bind events
Render
template
Unbind
events
Dispose
Register Watchers
Trigger
Unregister

26
AngularJS: Life-cycle of scope
Creation
Watcher
registration
Model
mutation
Mutation
observation
Scope
destruction

He who binds himself to a joy
Does the winged life destroy;
But he who kisses the joy as it flies
Lives in eternity's sun rise.
27
William Blake

28
Performance tuning
 Remove duplicate listeners
 Watcher optimization
 Backbone: _events stack
 Angular: $__watchers in $digest cycle
 How many watchers will be incurred?

30
Memory Management
 Dispose safe
Initialize Bind events
Render
Dispose Unbind events
Register Watchers
Trigger
Unregister

31
Memory Management: cont.
 Catch while unit testing

32
Debugging
 Firebug
 Chrome developer tool
 Network filtering
 Recording
 Profiler
 Local Storage in resources tab

33
Unit Test
 Jasmine, Karma, Sinon
 Travis CI
 Selenium WebDriver

Writing a massive javascript app

More Related Content

What's hot

Similar to Writing a massive javascript app

Recently uploaded

Writing a massive javascript app

Editor's Notes