Tool & Libraries for modern web app development

767 views

Published on

Technology choices for building applications using modern tech stack. Prominent HTML5, JS & CSS3 tools are covered.

Published in: Software, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
767
On SlideShare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tool & Libraries for modern web app development

  1. 1. The new school of web An overview on E2E Modern Web App development
  2. 2. Website vs Web App
  3. 3. Technology Choice Semantics + Interaction + Style
  4. 4. Know your platform well Detecting the capabilities ● prior to deployment http://html5test.com/ ● at run-time
  5. 5. Segmenting the JS landscape Library CODE Framework UI
  6. 6. Code Frameworks "An architecture framework establishes a common practice for creating, interpreting, analyzing and using architecture descriptions within a particular domain of application.” --Wikipedia
  7. 7. B a t t l e O f F r a m e w o r k s
  8. 8. Infoq.com Comparison -2013
  9. 9. Code Libraries
  10. 10. UI Frameworks
  11. 11. UI Libraries UKI EaselJS PaperJS Raphael w2UIReact UIBoxLivePipe Mochikit UI XUIAlloy UI
  12. 12. Documentation Generators docco JSDoc Doxx YUIDoc
  13. 13. Code Coverage & Quality JesCov JSCoverage JUTE Script Cover
  14. 14. Unit Testing
  15. 15. Test Driven Development
  16. 16. 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
  17. 17. Workflow Management
  18. 18. 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
  19. 19. Doc. Creation YUIDoc docco JSDoc Doxx MV* Backbone Ember Angular Knockout jQuery mootools dojo prototype Routing DOM HistoryJS SammyJS NavJS Data AmplifyJS BreezeJS TDD Karma BusterJS jsTestDriver Mocha Quality JSLint JSHint SidekickJS Unit Test Jasmine jsDriver SinonJS Work Flow Yo Grunt Bower SparkyJS BrunchJS Coverage JesCov JSCoverage JUTE Scriptcover JCov
  20. 20. 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.
  21. 21. Thanks!

×