SlideShare a Scribd company logo
1 of 34
Download to read offline
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?
29 
Don’t blame browser
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
34 
Demo

More Related Content

What's hot

Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.Richard Powell
 
REST based web applications with Spring 3
REST based web applications with Spring 3REST based web applications with Spring 3
REST based web applications with Spring 3Oliver Gierke
 
Spring Portlet MVC
Spring Portlet MVCSpring Portlet MVC
Spring Portlet MVCJohn Lewis
 
Rails 3.1 sneak peak
Rails 3.1 sneak peakRails 3.1 sneak peak
Rails 3.1 sneak peakOleg Kossoy
 
Mule flow complete
Mule flow completeMule flow complete
Mule flow completeSon Nguyen
 
Dropbox connector Mule ESB Integration
Dropbox connector Mule ESB IntegrationDropbox connector Mule ESB Integration
Dropbox connector Mule ESB IntegrationAnilKumar Etagowni
 
Spring MVC Architecture Tutorial
Spring MVC Architecture TutorialSpring MVC Architecture Tutorial
Spring MVC Architecture TutorialJava Success Point
 
Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Lou Sacco
 
Page life cycle
Page life cyclePage life cycle
Page life cycleanil4691
 
Spring 3.x - Spring MVC - Advanced topics
Spring 3.x - Spring MVC - Advanced topicsSpring 3.x - Spring MVC - Advanced topics
Spring 3.x - Spring MVC - Advanced topicsGuy Nir
 
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineDeploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineAlexander Zamkovyi
 
Code First with Serverless Azure Functions
Code First with Serverless Azure FunctionsCode First with Serverless Azure Functions
Code First with Serverless Azure FunctionsJeremy Likness
 
Java Server Faces (JSF) - Basics
Java Server Faces (JSF) - BasicsJava Server Faces (JSF) - Basics
Java Server Faces (JSF) - BasicsBG Java EE Course
 

What's hot (20)

Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.
 
Asp.net control
Asp.net controlAsp.net control
Asp.net control
 
Spring mvc
Spring mvcSpring mvc
Spring mvc
 
Mule esb :Data Weave
Mule esb :Data WeaveMule esb :Data Weave
Mule esb :Data Weave
 
REST based web applications with Spring 3
REST based web applications with Spring 3REST based web applications with Spring 3
REST based web applications with Spring 3
 
Spring Portlet MVC
Spring Portlet MVCSpring Portlet MVC
Spring Portlet MVC
 
Rails 3.1 sneak peak
Rails 3.1 sneak peakRails 3.1 sneak peak
Rails 3.1 sneak peak
 
Life cycle of web page
Life cycle of web pageLife cycle of web page
Life cycle of web page
 
Mule flow complete
Mule flow completeMule flow complete
Mule flow complete
 
Dropbox connector Mule ESB Integration
Dropbox connector Mule ESB IntegrationDropbox connector Mule ESB Integration
Dropbox connector Mule ESB Integration
 
Spring MVC Architecture Tutorial
Spring MVC Architecture TutorialSpring MVC Architecture Tutorial
Spring MVC Architecture Tutorial
 
Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014
 
Spring MVC Framework
Spring MVC FrameworkSpring MVC Framework
Spring MVC Framework
 
Page life cycle
Page life cyclePage life cycle
Page life cycle
 
Spring WebApplication development
Spring WebApplication developmentSpring WebApplication development
Spring WebApplication development
 
Spring 3.x - Spring MVC - Advanced topics
Spring 3.x - Spring MVC - Advanced topicsSpring 3.x - Spring MVC - Advanced topics
Spring 3.x - Spring MVC - Advanced topics
 
Deploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App EngineDeploying applications to Cloud with Google App Engine
Deploying applications to Cloud with Google App Engine
 
Code First with Serverless Azure Functions
Code First with Serverless Azure FunctionsCode First with Serverless Azure Functions
Code First with Serverless Azure Functions
 
Java Server Faces (JSF) - Basics
Java Server Faces (JSF) - BasicsJava Server Faces (JSF) - Basics
Java Server Faces (JSF) - Basics
 
Spring Web MVC
Spring Web MVCSpring Web MVC
Spring Web MVC
 

Similar to Writing a massive javascript app

using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'sAntônio Roberto Silva
 
Intro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptIntro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptjasonsich
 
Backbone.js and friends
Backbone.js and friendsBackbone.js and friends
Backbone.js and friendsGood Robot
 
PoP - “Platform of Platforms”: Framework for building Single-Page Application...
PoP - “Platform of Platforms”: Framework for building Single-Page Application...PoP - “Platform of Platforms”: Framework for building Single-Page Application...
PoP - “Platform of Platforms”: Framework for building Single-Page Application...Leonardo Losoviz
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17GreeceJS
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Previewvaluebound
 
Spring Live Sample Chapter
Spring Live Sample ChapterSpring Live Sample Chapter
Spring Live Sample ChapterSyed Shahul
 
Rest web service_with_spring_hateoas
Rest web service_with_spring_hateoasRest web service_with_spring_hateoas
Rest web service_with_spring_hateoasZeid Hassan
 
OttawaJS - React
OttawaJS - ReactOttawaJS - React
OttawaJS - Reactrbl002
 
Top 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptxTop 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptxBOSC Tech Labs
 
How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30fiyuer
 
React & Redux JS
React & Redux JS React & Redux JS
React & Redux JS Hamed Farag
 
High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2Niti Chotkaew
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax ApplicationsJulien Lecomte
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Artur Cistov
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteorSapna Upreti
 
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Luciano Mammino
 

Similar to Writing a massive javascript app (20)

using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
Intro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScriptIntro to React - Featuring Modern JavaScript
Intro to React - Featuring Modern JavaScript
 
Backbone.js and friends
Backbone.js and friendsBackbone.js and friends
Backbone.js and friends
 
PoP - “Platform of Platforms”: Framework for building Single-Page Application...
PoP - “Platform of Platforms”: Framework for building Single-Page Application...PoP - “Platform of Platforms”: Framework for building Single-Page Application...
PoP - “Platform of Platforms”: Framework for building Single-Page Application...
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
 
Spring Live Sample Chapter
Spring Live Sample ChapterSpring Live Sample Chapter
Spring Live Sample Chapter
 
Rest web service_with_spring_hateoas
Rest web service_with_spring_hateoasRest web service_with_spring_hateoas
Rest web service_with_spring_hateoas
 
Intro react js
Intro react jsIntro react js
Intro react js
 
OttawaJS - React
OttawaJS - ReactOttawaJS - React
OttawaJS - React
 
Top 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptxTop 10 Techniques For React Performance Optimization in 2022.pptx
Top 10 Techniques For React Performance Optimization in 2022.pptx
 
How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30
 
React & Redux JS
React & Redux JS React & Redux JS
React & Redux JS
 
High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2High Performance Ajax Applications 1197671494632682 2
High Performance Ajax Applications 1197671494632682 2
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
 
Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
 
JSF 2.0 Preview
JSF 2.0 PreviewJSF 2.0 Preview
JSF 2.0 Preview
 
User Interface
User InterfaceUser Interface
User Interface
 
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
Universal JS Web Applications with React - Luciano Mammino - Codemotion Rome ...
 

Recently uploaded

world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxnaveenithkrishnan
 
Content Regulation and Platforms: Navigating the Digital Landscape
Content Regulation and Platforms: Navigating the Digital LandscapeContent Regulation and Platforms: Navigating the Digital Landscape
Content Regulation and Platforms: Navigating the Digital LandscapeKhaled Koubaa
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
What Are The Best and Profitable Low Cap Altcoins With 1000x Potential.pptx
What Are The Best and Profitable Low Cap Altcoins With 1000x Potential.pptxWhat Are The Best and Profitable Low Cap Altcoins With 1000x Potential.pptx
What Are The Best and Profitable Low Cap Altcoins With 1000x Potential.pptxMySkinn Studio
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusSkylark Nobin
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxjayshuklatrainer
 
Blush Pink Minimal Fashion Presentation.pdf
Blush Pink Minimal Fashion Presentation.pdfBlush Pink Minimal Fashion Presentation.pdf
Blush Pink Minimal Fashion Presentation.pdfatchappell
 

Recently uploaded (10)

world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptx
 
Content Regulation and Platforms: Navigating the Digital Landscape
Content Regulation and Platforms: Navigating the Digital LandscapeContent Regulation and Platforms: Navigating the Digital Landscape
Content Regulation and Platforms: Navigating the Digital Landscape
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
What Are The Best and Profitable Low Cap Altcoins With 1000x Potential.pptx
What Are The Best and Profitable Low Cap Altcoins With 1000x Potential.pptxWhat Are The Best and Profitable Low Cap Altcoins With 1000x Potential.pptx
What Are The Best and Profitable Low Cap Altcoins With 1000x Potential.pptx
 
AP133abseq5
AP133abseq5AP133abseq5
AP133abseq5
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus Bonus
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
 
Blush Pink Minimal Fashion Presentation.pdf
Blush Pink Minimal Fashion Presentation.pdfBlush Pink Minimal Fashion Presentation.pdf
Blush Pink Minimal Fashion Presentation.pdf
 

Writing a massive javascript app

  • 1. Writing a massive javascript app Hojoon Park Sr. Software Engineer LinkedIn www.linkedin.com/in/justindoit
  • 2. 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. 3 Agenda  Web Frameworks  Single Page Application  Case Study  Performance Tuning  Demo
  • 4. Avoid spaghetti code in Front-end development 4  Too much copy/paste  Too much 3rd party recourses  Hard to debug the errors
  • 5. 5 Web Frameworks, recommend?  Play  Spring  Ruby on Rails  Yii  Node.JS  …  Angular  Backbone  jQuery  YUI  Require  Knockout  Bootstrap  …
  • 6. 6 Case Study: BackboneJS on PHP  Pure SPA  Metadata Manager  Data Manager
  • 7. 7 Case Study: BackboneJS on Java Play  Hybrid Web Application  sbt-concat, sass compiler  Model Hierarchy
  • 8. 8 Case Study: AngularJS on Java Play  Pure SPA  Grunt Builder  Less compiler by Grunt
  • 9. 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. 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. 11 Consideration for SPA  Resources/Assets Management  JS/CSS compressor  Template compiler  Additional: LESS/SASS compiler
  • 12. 12 Why Asset Management is important?  Continuously growing JS/CSS resources  Duplicated JS files / version inconsistency
  • 13. 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. 14 Anatomy: Directory(1)  By Resource Type
  • 15. 15 Anatomy: Directory(2)  By Feature
  • 16. 16 Asset Packaging: Play Framework  sbt-concat plugin  JavascriptMinifierCompiler
  • 17. 17 Asset Packaging: Yii Framework  AssetManager
  • 18. 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. 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
  • 20. /** * 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
  • 21. 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. 22 Software design patterns  Factory  Singleton  MVC  Strongly OOP  Mixin  Event Driven
  • 23. 23 Object Oriented Programming  Code Reuse and recycling  Design Benefits  More features, same amount of time ListView FlexListView SubPanelListView DashableListView SelectionListView RecordListView
  • 24. ListView MergeDuplicateView Tooltip Mixin pool 24 Decorator: Mixin (plugin) RecordListView extends: ListView ErrorDecoration Editable MergeDuplicates CreateView Audit FindDuplicates Timeago ActivityStreamView
  • 25. 25 BackboneJS: Life-cycle of View Component Initialize Bind events Render template Unbind events Dispose Register Watchers Trigger Unregister
  • 26. 26 AngularJS: Life-cycle of scope Creation Watcher registration Model mutation Mutation observation Scope destruction
  • 27. 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. 28 Performance tuning  Remove duplicate listeners  Watcher optimization  Backbone: _events stack  Angular: $__watchers in $digest cycle  How many watchers will be incurred?
  • 29. 29 Don’t blame browser
  • 30. 30 Memory Management  Dispose safe Initialize Bind events Render Dispose Unbind events Register Watchers Trigger Unregister
  • 31. 31 Memory Management: cont.  Catch while unit testing
  • 32. 32 Debugging  Firebug  Chrome developer tool  Network filtering  Recording  Profiler  Local Storage in resources tab
  • 33. 33 Unit Test  Jasmine, Karma, Sinon  Travis CI  Selenium WebDriver

Editor's Notes

  1. SugarCRM에서 BackboneJS, PHP API Framework을 이용하여 싱글페이지어플리케이션을 개발
  2. 백엔드 및 프론트엔드 프레임워크 구성 Single Page Application Resources/Assets Management What is MVC Front-end Framework Case Study: AngularJS Case Study: BackboneJS Performance Tuning Debugging Memory Leak Demo
  3. 좋은것은 없다 다만 MVC 패턴이 잘갖춰진 프레임워크를 고르자
  4. Asset Packaging (or more descriptively, packaging code for the browser)
  5. 싱글페이지개발에선 템플릿엔진이 필수
  6. 중복되는 파일을 줄이고 다운로드하는 파일 사이즈를 줄이는 방법
  7. 데모와 함께 소개
  8. 데모와 함께 소개 이제 체계적인 코드를 생성할 수 있는 준비가 끝났기때문에 설계에 대해서 깊게 알아보도록 합니다.
  9. A joy is not to be attached deeply cause attachement brings suffer
  10. JS 경우 event based async 랭귀지이기때문에 설계가 중요 Front-end also follows software design patterns
  11. 데모와 함께 소개
  12. Angular같은경우 $watch사용에 주의
  13. Angular같은경우 $watch사용에 주의
  14. A joy is not to be attached deeply cause attachement brings suffer
  15. 크롬 시크릿(incognito) 모드로 체크할것!
  16. 크롬 시크릿(incognito) 모드로 체크할것!
  17. Oauth-token