Crazy Speed Web Development

                                      Web Application Team, KTH

                                      A.J <andrwj@kthcorp.com>




Monday, 17 October, 11
Monday, 17 October, 11
Monday, 17 October, 11
2011년 중반이후 자바스크립트 개발 흐름의 변화




Monday, 17 October, 11
No altering Variable
                                                    Moduliz
                             No Side-Effects
                         Functional Programming     Reduce
                             High-Order function
                                                    Fast De
                             Monad
                                                    Large S




Monday, 17 October, 11
Functional Programming

                         No altering Variable
                                                Moduliz
                         No Side-Effects
                                                Reduce
                         High-Order function
                                                Fast De
                         Monad
                                                Large S




Monday, 17 October, 11
Functional Programming

                         No altering Variable
                                                Moduliz
                         No Side-Effects
                                                Reduce
                         High-Order function
                                                Fast De
                         Monad
                                                Large S




Monday, 17 October, 11
Functional Programming

                         No altering Variable
                                                Moduliz
                         No Side-Effects
                                                Reduce
                         High-Order function
                                                Fast De
                         Monad
                                                Large S




Monday, 17 October, 11
Functional Programming

                         No altering Variable
                                                Moduliz
                         No Side-Effects
                                                Reduce
                         High-Order function
                                                Fast De
                         Monad
                                                Large S




Monday, 17 October, 11
Functional Programming

                         No altering Variable
                                                Modulization
                         No Side-Effects
                                                Reduce Bug
                         High-Order function
                                                Fast Development
                         Monad
                                                Large Scale Application




Monday, 17 October, 11
MVVM




Monday, 17 October, 11
MVVM




Monday, 17 October, 11
MVVM
                           View                   HTML5 + declarative bindings

                              Automatic


                         ViewModel                JavaScript + observables


                              AJAX / form posts




                          “Model”                 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
Kevin Dangoor



                         ServerJS              2009년 1월




Monday, 17 October, 11
Kevin Dangoor



                         ServerJS              2009년 1월




Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Yabble
Monday, 17 October, 11
Module         Binary Data
                                                       Ratified Standards
                                      Package        Text Encoding
                                      Unit Testing   File System
                                                     Operating System
                                                     Socket Communication
                         ongoing discussions
                                                     Async. & Sync I/O
                                                     console logging
                                                     events

Monday, 17 October, 11
Module         Binary Data
                                                       Ratified Standards
                                      Package        Text Encoding
                                      Unit Testing   File System
                                                     Operating System
                                                     Socket Communication
                         ongoing discussions
                                                     Async. & Sync I/O
                                                     console logging
                                                     events

Monday, 17 October, 11
Module         Binary Data
                                                       Ratified Standards
                                      Package        Text Encoding
                                      Unit Testing   File System
                                                     Operating System
                                                     Socket Communication
                         ongoing discussions
                                                     Async. & Sync I/O
                                                     console logging
                                                     events

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
roject

cript

work

wser




 Monday, 17 October, 11
roject

cript

work

wser




 Monday, 17 October, 11
Facebook Spartan project

cript

work

wser




Monday, 17 October, 11
Facebook Spartan project

                         using only HTML5 & Javascript

work

wser




Monday, 17 October, 11
Facebook Spartan project

                         using only HTML5 & Javascript

                         UI framework

wser




Monday, 17 October, 11
Facebook Spartan project

                         using only HTML5 & Javascript

                         UI framework

                         optimized for Mobile WebKit Browser




Monday, 17 October, 11
boxbase


                          hbox


                          vbox




Monday, 17 October, 11
boxbase


                          hbox


                          vbox




Monday, 17 October, 11
Javelin.JS   event handling

                             module
                         Underscore.JS   & templeting

                           iScroll v4        scrolling

                          Tokenizer
                                          input utility
                          Typeahead




Monday, 17 October, 11
Javelin.JS          event handling

                         Underscore.JS   module & templeting

                           iScroll v4               scrolling

                           Tokenizer
                                                 input utility
                          Typeahead




Monday, 17 October, 11
table        scrubber                image

                     table_view       scene stack             tokenizer

                   simple tooltip     page header            view toggle

                          scene      button tooltips          close icon

                           link          button             action scroller

                         typeahead   clearable text input

                         textinput    labeled text input




Monday, 17 October, 11
table        scrubber                image

                     table_view       scene stack             tokenizer

                   simple tooltip     page header            view toggle

                          scene      button tooltips          close icon

                           link          button             action scroller

                         typeahead   clearable text input

                         textinput    labeled text input




Monday, 17 October, 11
Monday, 17 October, 11
Easily build Network Application in JS

                         4430 modules

                         CommonJS API




Monday, 17 October, 11
Easily build Network Application in JS

                         4430 modules

                         CommonJS API




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
RingoJS           Akshell
                         SproutCore        Common Node
                         v8cgi             CouchDB
                         MongoDB           Flusspferd
                         JSBuild           GPSEE
                         XULJet            Joyent Smart Platform
                         PINF JavaScript   Narwhal (JavaScript platform)




Monday, 17 October, 11
Common JS




Monday, 17 October, 11
CommonJS
                                 MVVM
                         Functional Programming


Monday, 17 October, 11

D5 crazy speed web development