Tool & Libraries for modern web app development

The new school of webAn overview on E2E Modern Web App

development

Website vs Web App

Technology Choice

Semantics + Interaction + Style

Know your platform well

Detecting the capabilities● prior to deployment

http://html5test.com/ ● at run-time

Segmenting the JS landscape

Library

CODE

FrameworkUI

Code Frameworks

"An architecture framework establishes a common practice for creating, interpreting, analyzing and using architecture descriptions within a particular domain of application.” --Wikipedia

Battle

Of

Frameworks

Infoq.com Comparison -2013

Code Libraries

UI Frameworks

UI Libraries

UKI

EaselJS

PaperJSRaphael

w2UIReact

UIBoxLivePipe

Mochikit UI

XUIAlloy UI

Documentation Generators

docco

JSDoc

Doxx

YUIDoc

Code Coverage & Quality

JesCov

JSCoverageJUTE

Script Cover

Unit Testing

Test Driven Development

Build & Deployment● Minify all JavaScript code● Combine minified JavaScript into a single file ● Compile LESS/SASS CSS code ● Combine CSS code into single file● Validate HTML, JavaScript, and CSS● Run unit tests● Run functional tests● Execute load tests

Workflow Management

IDE Choice

WebStorm 5● No source cleanup for CSS especially no auto sorting of properties● Source formatter for CSS is not configurable enough

Eclipse 4 with WDT● No source cleanup for CSS● Source formatter for CSS is not configurable● Code navigation from HTML to CSS is not working

Aptana Studio 3● Does not fully support CSS3 ● Code navigation from HTML to CSS is not working.

Visual Studio 2012● No source cleanup for CSS● There is no project type for standalone HTML5 application● Source formatter for CSS is not configurable enough (I cannot get new line for each selector)● Code navigation from HTML to CSS is not working

Sublime Text 2

Doc.Creation

YUIDoc

docco

JSDoc

Doxx

MV*

Backbone

Ember

Angular

Knockout

jQuery

mootools

dojo

prototype

Routing

DOM

HistoryJS SammyJS NavJS

DataAmplifyJS

BreezeJS

TDD

Karma

BusterJS

jsTestDriver

Mocha

Quality JSLint

JSHint

SidekickJS

Unit Test

Jasmine jsDriver SinonJS

WorkFlow

Yo

Grunt

Bower

SparkyJS

BrunchJS

Coverage

JesCov

JSCoverage

JUTE

Scriptcover JCov

Recommendations

● Evaluate JavaScript Offerings First on Their Programming Model.● Use a JavaScript Code Framework.● Use a JavaScript Library to Add Functionality to a Framework.● Utilize a JavaScript UI Framework for Complex Business Applications.● Modularize.● Unit Test.● Enforce Code Quality.

Thanks!