d5 crazy speed web development
DESCRIPTION
TRANSCRIPT
Crazy Speed Web Development
Web Application Team, KTH
A.J <[email protected]>
Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
2011년 중반이후 자바스크립트 개발 흐름의 변화
Monday, 17 October, 11
Functional Programming
No altering VariableModulization
Reduce Bug
Fast Development
Large Scale Application
No Side-Effects
Monad
High-Order function
Monday, 17 October, 11
Functional Programming
No altering VariableModulization
Reduce Bug
Fast Development
Large Scale Application
No Side-Effects
Monad
High-Order function
Monday, 17 October, 11
Functional Programming
No altering VariableModulization
Reduce Bug
Fast Development
Large Scale Application
No Side-Effects
Monad
High-Order function
Monday, 17 October, 11
Functional Programming
No altering VariableModulization
Reduce Bug
Fast Development
Large Scale Application
No Side-Effects
Monad
High-Order function
Monday, 17 October, 11
Functional Programming
No altering VariableModulization
Reduce Bug
Fast Development
Large Scale Application
No Side-Effects
Monad
High-Order function
Monday, 17 October, 11
Functional Programming
No altering VariableModulization
Reduce Bug
Fast Development
Large Scale Application
No Side-Effects
Monad
High-Order function
Monday, 17 October, 11
MVVM
Monday, 17 October, 11
MVVM
Monday, 17 October, 11
MVVM
“Model”
ViewModel
View
AJAX / form posts
Automatic
HTML5 + declarative bindings
JavaScript + observables
Any server-side technology
Monday, 17 October, 11
MVVM
Knockout.JS
Open Source
Active Development & Community
Template
Bind, Loop
Monday, 17 October, 11
Knockout.JS
Open Source
Active Development & Community
Template
Bind, Loop
Monday, 17 October, 11
scripts in <body>
<html><body><script> do_whatever_i_said();</script>.....</body></html>
Monday, 17 October, 11
CSS in Javascript
var div = document.getElementById(‘btn’);
div.onclick = function(e) { this.style.border = ‘2px dotted red’;
}
Monday, 17 October, 11
HTML in Javascript
var div = doc.createElement(‘div’);var ul = doc.createElement(‘ul’)var cnt = 0;div.appendChild( for (var cnt=0; cnt < 3; cnt++)
ul.appendChild( doc.createElement(‘li’) );
div.appendChild( ul );Monday, 17 October, 11
declarative binding
<button data-bind=”click: myhandler” >..</button>
Monday, 17 October, 11
loop using comment tag
<ul> <!-- ko.forEach mydatas --> <li><span class=”myCls”> .. </li> <!-- /ko --></ul>
Monday, 17 October, 11
2009년 1월
Kevin Dangoor
ServerJS
Monday, 17 October, 11
2009년 1월
Kevin Dangoor
ServerJS
Monday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
YabbleMonday, 17 October, 11
Module
Package
Unit Testing
Binary Data
Text Encoding
File System
Operating System
Socket Communication
Async. & Sync I/O
console logging
events
Ratified Standards
ongoing discussions
Monday, 17 October, 11
Module
Package
Unit Testing
Binary Data
Text Encoding
File System
Operating System
Socket Communication
Async. & Sync I/O
console logging
events
Ratified Standards
ongoing discussions
Monday, 17 October, 11
Module
Package
Unit Testing
Binary Data
Text Encoding
File System
Operating System
Socket Communication
Async. & Sync I/O
console logging
events
Ratified Standards
ongoing discussions
Monday, 17 October, 11
CommonJS-compatible async. module.
Monday, 17 October, 11
CommonJS-compatible async. module.
Monday, 17 October, 11
CommonJS-compatible async. module.
Monday, 17 October, 11
CommonJS-compatible async. module.
Monday, 17 October, 11
using only HTML5 & Javascript
UI framework
optimized for Mobile WebKit Browser
Facebook Spartan project
Monday, 17 October, 11
using only HTML5 & Javascript
UI framework
optimized for Mobile WebKit Browser
Facebook Spartan project
Monday, 17 October, 11
using only HTML5 & Javascript
UI framework
optimized for Mobile WebKit Browser
Facebook Spartan project
Monday, 17 October, 11
using only HTML5 & Javascript
UI framework
optimized for Mobile WebKit Browser
Facebook Spartan project
Monday, 17 October, 11
using only HTML5 & Javascript
UI framework
optimized for Mobile WebKit Browser
Facebook Spartan project
Monday, 17 October, 11
using only HTML5 & Javascript
UI framework
optimized for Mobile WebKit Browser
Facebook Spartan project
Monday, 17 October, 11
boxbase
hbox
vbox
Monday, 17 October, 11
boxbase
hbox
vbox
Monday, 17 October, 11
Javelin.JS
Underscore.JS
iScroll v4
Tokenizer
Typeahead
event handling
module & templeting
scrolling
input utility
Monday, 17 October, 11
Javelin.JS
Underscore.JS
iScroll v4
Tokenizer
Typeahead
event handling
module & templeting
scrolling
input utility
Monday, 17 October, 11
table
table_view
simple tooltip
scene
link
typeahead
textinput
tokenizer
view toggle
scrubber
scene stack
page header
button tooltips
button action scroller
close icon
clearable text input
labeled text input
image
Monday, 17 October, 11
table
table_view
simple tooltip
scene
link
typeahead
textinput
tokenizer
view toggle
scrubber
scene stack
page header
button tooltips
button action scroller
close icon
clearable text input
labeled text input
image
Monday, 17 October, 11
Monday, 17 October, 11
4430 modules
CommonJS API
Easily build Network Application in JS
Monday, 17 October, 11
4430 modules
CommonJS API
Easily build Network Application in JS
Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
Akshell
Common Node
CouchDB
Flusspferd
GPSEE
Joyent Smart Platform
Narwhal (JavaScript platform)
RingoJS
SproutCore
v8cgi
MongoDB
JSBuild
XULJet
PINF JavaScript
Monday, 17 October, 11
Common JS
Monday, 17 October, 11
CommonJS
MVVM
Functional Programming
Monday, 17 October, 11