Design space 2.0 live

Tech Stack (2/16/2015)


    . Angularjs

Things to know

	Single Pages Apps
	Angular
	NodeJs	http://techzonal.blogspot.com/2013/07/what-is-nodejs-and-its-basic.html
	NPM
	nodist	https://github.com/marcelklehr/nodist
	Yoeman	http://yeoman.io/
	Bower
	CommonJS, AMD (specifications)	Common JS api : ServerSide (node), AMD api suited for client side, RequireJS implementation. http://addyosmani.com/writing-modular-js/
	TDD
	Jasmine
	Testacular
	Protractor
	Grunt	less,jshint,bower,autoprefixer,fileblocks,rev,cssmin,imagemin,svgmin,htmlmin,concurrent,watch,karma,protractor
	FileBlocks	http://www.rrharvey.com/2013/12/insert-script-tags-automatically-using-grunt/
	usemin	https://github.com/yeoman/grunt-usemin
	html5boilerplate	http://html5boilerplate.com/
	Modernizr
	es5-shim

Tech Stack

AngularJS
Router	https://github.com/angular-ui/ui-router
	http://yeoman.io/
Jasmine		for BDD Testing
Testacular or Karma		TestRunner
Protractor		wrapper for Selium web driver
webdriver aka selenium

• do we use jade over html template (http://tylerhenkel.com/creating-apps-with-angular-and-node-using-yeoman/)

http://caniuse.com/

Installing Nodejs (Best)

Javascript:

http://www.codeorbits.com/blog/2013/07/07/defining-classes-in-javascript/

Tutorials

[Best,Start here ] http://angularjs.org/

https://github.com/jmcunningham/AngularJS-Learning

http://stackoverflow.com/questions/14333857/how-to-master-angularjs

http://codecondo.com/3-free-books-for-learning-angularjs/

http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/

http://bardevblog.wordpress.com/2013/07/28/setting-up-angularjs-angular-seed-node-js-and-karma/

https://egghead.io/

https://egghead.io/technologies/angularjs

http://flippinawesome.org/2013/09/03/the-angular-way/

http://www.ng-newsletter.com/posts/

http://www.thinkster.io/angularjs/GtaQ0oMGIl/a-better-way-to-learn-angularjs#item-51e78b7e505a417713000002

https://www.firebase.com/

https://github.com/curran/screencasts/tree/gh-pages/introToAngular (good) (Introduction to Angular.js in 50 Examples)

http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with

PluralSight : Courses

• http://pluralsight.com/training/Courses/TableOfContents/angularjs-fundamentals
• http://pluralsight.com/training/Courses/TableOfContents/angular-best-practices (**)
• http://pluralsight.com/training/Courses/TableOfContents/show-me-angular
• http://pluralsight.com/training/Courses/TableOfContents/building-angularjs-nodejs-apps-mean
• http://pluralsight.com/training/Courses/TableOfContents/angularjs-in-depth
• http://pluralsight.com/training/Courses/TableOfContents/angularjs-dotnet-developers

other Video tutorial

• http://www.thinkster.io/angularjs/r1gRPYp4kM/angularjs-tutorial-learn-to-build-modern-webapps

Modules:

User Authentication

http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

https://github.com/mrgamer/angular-login-example

l18N and l10N

https://github.com/angular-translate/angular-translate

Angular Seed:

http://yeoman.io/

https://github.com/angular-app/angular-app (Grunt)

https://github.com/ngbp/ngbp (ngBoilerplate)

https://github.com/clevertech/cleverstack-angular-seed

https://github.com/angular/angular-seed

http://www.jquery4u.com/angular-js/5-angular-js-seeds-bootstrap-apps/

https://github.com/yearofmoo/angularjs-seed-repo

https://github.com/linemanjs/lineman-angular-template

Design Pattern

• will use promise & call back http://fdietz.github.io/recipes-with-angular-js/consuming-external-services/deferred-and-promise.html
• Login & Authentication http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

Testing:

http://www.yearofmoo.com/2013/09/advanced-testing-and-debugging-in-angularjs.html

http://www.codeorbits.com/blog/2014/01/26/angularjs-end-to-end-testing-with-protractor-easy-set-up-with-yeoman/

https://egghead.io/lessons/angularjs-getting-started-with-protractor

MEAN Stack/ Nodejs

nvm

https://code.google.com/p/msysgit/

https://github.com/marcelklehr/nodist (added path variable C:\Users\salagappa\Projects\Mean\nodist\bin)

JSFiddle:

http://jsfiddle.net/mjaric/pJ5BR/

http://jsfiddle.net/api/post/library/pure/

AngularJS Batarang - Good Debugger

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

Models

http://odetocode.com/blogs/scott/archive/2014/03/17/building-better-models-for-angularjs.aspx

Interesting projects:

http://builtwith.angularjs.org

http://pkukielka.github.io/angular-panels/#demo

https://github.com/firebase/firereader

Mock Data:

http://jsfiddle.net/mjaric/pJ5BR/

https://www.debuggex.com/#cheatsheet

Testing Framework

http://www.codeorbits.com/blog/2014/01/26/angularjs-end-to-end-testing-with-protractor-easy-set-up-with-yeoman/

Best Practice Recommendations for Angular App Structure

• 
  
• https://github.com/angular/angular.js/wiki/Projects-using-AngularJS
• https://github.com/angular/angular.js/wiki/Best-Practices
• https://github.com/angular/angular-phonecat

Version:

http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html

https://github.com/angular/angular.js

Directives / Widget

http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

http://jsfiddle.net/revolunet/26ghx/

http://ivaynberg.github.io/select2/ (Loading remote data for font dropdown)

http://angular-ui.github.io/

http://wijmo.com/tag/angularjs-2/

http://angular-ui.github.io/ng-grid/

Grunt:

http://stackoverflow.com/questions/12346690/is-there-a-way-to-make-angularjs-load-partials-in-the-beginning-and-not-at-when

angular -color picker :

http://jsfiddle.net/g/LAJCa/

http://bgrins.github.io/spectrum/

http://kendo-labs.github.io/angular-kendo/#/

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

http://angular-widgets.github.io/angular-jqm/master/

https://github.com/petrkotek/angular-widgetarea-directive

Messaging - Pubsub

http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs

http://jsfiddle.net/ThomasBurleson/sv7D5/

Model:

http://stackoverflow.com/questions/16554580/what-is-the-advantage-of-using-restangular-over-ngresource

http://backbonejs.org/

http://www.breezejs.com/

Test Driven Development

e2e Testing:

e2e or end-to-end or UI testing is a methodology used to test whether the flow of an application is performing as designed from start to finish. In simple words, it is testing of your application from the user endpoint where the whole system is a black box with only the UI exposed to the user.

• Selenium automates browsers. That’s it.
• WebDriver (or Selenium 2) basically refers to the language bindings and the implementations of the individual browser controlling code.
• WebDriverJS has an important difference from other bindings in any other language - It is asynchronous.
• Now we need a testing framework to handle our tests. That is where Jasmine comes in.
• Protractor is a library by the Angular team which is a wrapper on WebDriverJS and Jasmine and is specifically tailored to make testing of Angular apps a breeze
• 1,500 AngularJS tests in WebStorm against Chrome Canary and Chrome in less than 5 seconds. (Testacular)
• Karma : A simple tool that allows you to execute JavaScript code in multiple real browsers.
• https://github.com/karma-runner/karma/raw/master/thesis.pdf
• https://github.com/angular/protractor/issues/9  (protractor + karma)
• http://savanne.be/articles/testing-with-angular-js/

http://webdriver.io/

Shell App using Node-webkit

https://github.com/rogerwang/node-webkit

apps written using node webkit : https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit

https://github.com/rogerwang/node-webkit/wiki

https://www.youtube.com/watch?v=d2tYH7vXMUM

High profile project : Adobde brackets

https://github.com/mllrsohn/node-webkit-builder

https://github.com/GoogleChrome/chrome-app-samples

npm install node-webkit-builder -g

npm install --global gulp

npm install gulp

npm install gulp-util

Back to Native application development -Shell Application

we build one of the complex single page application using angular, flex,firebreath (npapi plugin),C,C++.

This application is remarkable because , to get seamless interaction working with hardware over the browser is very challenging.  having conquered this  we ended with even more challenge .

lot of users install some wired plugins and malware (chrome extensions, active x etc) which disrupts the flow of our application

Not all the browser work the same way, the small nuance across the browser is enough to upset the user and we end up spending ton of time chasing these issues

Huge testing effort to test 64 browser os combination.

most browser are in the process of removing npapi plugins



so turned towards shell app to wrap our webapp.!! awesome success got our app working in a day thanks to node-webkit.


https://github.com/rogerwang/node-webkit

Testing Frameworks Review

Tools	Pros	cons
Selenium
Sikuli			https://code.google.com/p/sikuli-api/wiki/SikuliWebDriver
autoit
QTP
Watir
flex			https://code.google.com/p/flex-ui-selenium/ https://code.google.com/p/sfapi/ http://sourceforge.net/adobe/genie/wiki/Home/ http://stu-stern.blogspot.com/2010/02/flexmonkium-flexmonkeyselenium-bridge.html

http://sqa.stackexchange.com/questions/994/under-what-circumstances-is-sikuli-better-for-test-automation-than-selenium-or-w

http://www.sikuli.org/

http://robotframework.org/

Selenium : https://www.youtube.com/watch?v=nSjD0HVKaAA

http://www.guru99.com/introduction-webdriver-comparison-selenium-rc.html

https://github.com/smysnk/sikuli-framework

https://www.youtube.com/playlist?list=PLQVvvaa0QuDd2eLUw6i-Pbk3H_15Lfo3b

http://www.gliffy.com/blog/2012/07/12/the-road-to-html5-automating-visual-testing-with-sikuli/

http://blazemeter.com/blog/open-source-load-testing-tools-which-one-should-you-use

for Magento

https://github.com/magento/magento-performance-toolkit/blob/master/Magento%20Performance%20Toolkit%20User%20Guide.pdf

https://github.com/wg/wrk

JMeter

brew install jmeter --with-plugins

http://www.slideshare.net/ZeroTurnaround/stephane-landelleblastyourappwithgatling?related=1

http://www.simply-jags.com/2013/08/diy-tutorial-for-gatling-stress-tool.html

http://software.danielwatrous.com/load-testing-alternatives-for-large-scale-web-applications/

http://sysgears.com/articles/restful-service-load-testing-using-gatling-2/

http://www.testingtools.com/load-testing/

Locust

http://andrew-jones.com/blog/load-testing-with-locust/

https://truveris.github.io/articles/locust/

http://www.skurfer.com/talks/Locust.html#13

http://www.uvd.co.uk/blog/load-testing-vote-for-policies-with-locust-io/

http://wordpress7.centminmod.com/132/wordpress-super-cache-benchmark-locust-io-load-testing/

http://slides.com/jonatanheyman/load-testing-with-locust/#/4

https://news.ycombinator.com/item?id=9810274

https://cloud.google.com/solutions/distributed-load-testing-using-kubernetes

To Review:

http://testutils.org/multi-mechanize/