ng-pdx meetup presentation

Modern web development using the contemporary tools

Transcript

1. Modern web-dev using bangular ng-pdx Pallab Mahmud 8/26/2015
2. Why angular ? o Comprehensive o Well designed MVC o Data: POJO o Extend HTML o Writing test o Community size/ meet-ups o Dependency injection o Angular 2.0 o Typescript: Elegance o Modular: Pick your modules o Modern: ES6, Green browsers o No $scope o Mobile First – Performance, Speed o 5x Faster – utilizing web workers http://bit.ly/1fb35ca
3. Angular cons o 1.x to 2.0 transformation o Learning curve o Dirty checking o SE indexing o Try others? http://todomvc.com/
4. Why node ? o JS on server o Non-blocking o NPM, Community size o Real-time app o Long-polling/ socket.io o Asynchronous concurrency o In production: o Walmart o Paypal o Netflix o LinkedIn o NYTimes o When not to use node o Not strongly typed o JS bad parts o Async way of thinking could kill you someday
5. Let’s do stuff…
6. Install dev-tools o Git –tools o https://msysgit.github.io/ o Node & npm o https://nodejs.org/ o Python 2.x o https://www.python.org/downloads/ o Yeoman o Gulp o Bower
7. yeoman o Code-scaffolding made easy o Generators: http://yeoman.io/generators/ o Popular ones o Angular o Angular-fullstack o Gulp-angular o Install npm install –-global yo
8. Bower and gulp o Install Bower npm install –-global bower o Install a package bower install –-save bootstrap o Install gulp npm install –-global gulp
9. bangular o It uses: o Install npm install –g generator-bangular o Useful commands: yo bangular gulp build gulp serve yo bangular:directive <name> yo bangular:filter <name> yo bangular:route <name> yo bangular:api <name> yo bangular:service <name> yo bangular:factory <name>
10. Atom-editor o Webstorm, Sublime, Visual studio o Download and install o https://atom.io o Shortcuts: o [Ctrl] + [Shift] + [p]: Menu/Command palette o [Ctrl] + [p]: Quick file nav o [Ctrl] + [\]: Close file nav tree o [Ctrl] + [r]: Jump between function o Packages o Alignment: o install: $apm install alignment o usage: select and [Ctrl] + [Alt] + [a] o Jshint: $apm install alignment o docblockr: $apm install docblockr o Emmet: $apm install emmet o Theme: > cd ~/.atom/packages > git clone https://github.com/jesseweed/seti-ui --depth=1
11. Generate project o Open git-bash mkdir demo cd demo yo bangular > select good old JSON > selecting module: select all of them by pressing space > everything else : default
12. Project structure
13. Demo repo location o Clone the repo if you want to git clone https://github.com/pmahmud/cdk-ngfullstack-demo.git
14. Thank you  @pallmahmud https://github.com/pmahmud https://www.linkedin.com/in/pmahmud