tool & libraries for modern web app development
DESCRIPTION
Technology choices for building applications using modern tech stack. Prominent HTML5, JS & CSS3 tools are covered.TRANSCRIPT
![Page 1: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/1.jpg)
The new school of webAn overview on E2E Modern Web App
development
![Page 2: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/2.jpg)
Website vs Web App
![Page 3: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/3.jpg)
Technology Choice
Semantics + Interaction + Style
![Page 4: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/4.jpg)
Know your platform well
Detecting the capabilities● prior to deployment
http://html5test.com/ ● at run-time
![Page 5: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/5.jpg)
![Page 6: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/6.jpg)
Segmenting the JS landscape
Library
CODE
FrameworkUI
![Page 7: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/7.jpg)
Code Frameworks
"An architecture framework establishes a common practice for creating, interpreting, analyzing and using architecture descriptions within a particular domain of application.” --Wikipedia
![Page 8: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/8.jpg)
![Page 9: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/9.jpg)
Battle
Of
Frameworks
![Page 10: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/10.jpg)
Infoq.com Comparison -2013
![Page 11: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/11.jpg)
Code Libraries
![Page 12: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/12.jpg)
UI Frameworks
![Page 13: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/13.jpg)
UI Libraries
UKI
EaselJS
PaperJSRaphael
w2UIReact
UIBoxLivePipe
Mochikit UI
XUIAlloy UI
![Page 14: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/14.jpg)
Documentation Generators
docco
JSDoc
Doxx
YUIDoc
![Page 15: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/15.jpg)
Code Coverage & Quality
JesCov
JSCoverageJUTE
Script Cover
![Page 16: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/16.jpg)
Unit Testing
![Page 17: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/17.jpg)
Test Driven Development
![Page 18: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/18.jpg)
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
![Page 19: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/19.jpg)
Workflow Management
![Page 20: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/20.jpg)
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
![Page 21: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/21.jpg)
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
![Page 22: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/22.jpg)
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.
![Page 23: Tool & Libraries for modern web app development](https://reader033.vdocuments.us/reader033/viewer/2022051513/5462734cb4af9f6c1c8b475c/html5/thumbnails/23.jpg)
Thanks!