Post on 11-Nov-2014
description
transcript
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!