This document discusses strategies for developing large JavaScript applications. It covers topics like single page applications, frameworks like Angular and Backbone, asset management, performance tuning, and unit testing. The presentation provides case studies of specific frameworks, discusses concepts like metadata managers and design patterns, and demonstrates tools for debugging and testing code.
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
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?
SugarCRM에서 BackboneJS, PHP API Framework을 이용하여 싱글페이지어플리케이션을 개발
백엔드 및 프론트엔드 프레임워크 구성
Single Page Application
Resources/Assets Management
What is MVC Front-end Framework
Case Study: AngularJS
Case Study: BackboneJS
Performance Tuning
Debugging
Memory Leak
Demo
좋은것은 없다 다만 MVC 패턴이 잘갖춰진 프레임워크를 고르자
Asset Packaging (or more descriptively, packaging code for the browser)
싱글페이지개발에선 템플릿엔진이 필수
중복되는 파일을 줄이고 다운로드하는 파일 사이즈를 줄이는 방법
데모와 함께 소개
데모와 함께 소개
이제 체계적인 코드를 생성할 수 있는 준비가 끝났기때문에 설계에 대해서 깊게 알아보도록 합니다.
A joy is not to be attached deeply cause attachement brings suffer
JS 경우 event based async 랭귀지이기때문에 설계가 중요
Front-end also follows software design patterns
데모와 함께 소개
Angular같은경우 $watch사용에 주의
Angular같은경우 $watch사용에 주의
A joy is not to be attached deeply cause attachement brings suffer