javascript tools

PTG internal keynote session for knowledge exchange

Transcript

1. Javascript Toolset Or how not to hate javascript development
2. Warning ! Very opinionated slides ahead…
3. This toolset fit my wetware But maybe not your workflow, but don’t worry this is just a small subset… Nix mindset Command line Dead simple
4. Automate workflow for any kind of Project YEOMAN
5. Scaffold, write less code with yo Build, Preview and Test with Grunt Manage dependencies with Bower
7. Helps run repetitive tasks.
8. Linting Compiling Minification Testing Conversion Documentation Deployment And more
9. http://Gruntjs.com
10. Edit package.json Specify Grunt plugins and metadata. { "name": “rain-maker", "version": "0.0.1", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-uglify": "~0.2.0“ } }
11. module.exports = function(grunt){ grunt.initConfig({ uglify: { build: { src: 'app.js', dest: 'build/app.min.js' } }, jshint: { all: ['**/*.js']} }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.registerTask('default', ['jshint', 'uglify']); }; Grunt.js Config tasks and add plugins.
12. npm install -g grunt-cli npm install grunt-<taskname> --save-dev
13. C:\Users\guillermo grunt Running “jshint:all” (jshint) task Running “uglify:build” (uglify) task Done.
14. A package manager for the web.
15. The old way of doing things. 1. That lib is 6 months old? Better update. 2. Open up the site 3. Download the lib 4. Copy from ~/Downloads 5. Paste to app folder 6. Wire in with script tags
16. New Hotness npm install -g bower bower seach ember Search results: ember git://github.com/components/ember ember-data-shim git://github.com/components/ember-data.git ember-mocha-adapter git://github.com/teddyzeenny/ember-mocha-adapter.git ember-data git://github.com/components/ember-data.git ember.js git://github.com/emberjs/ember.js ember-model git://github.com/ebryn/ember-model.git ember-testing-httpRespond git://github.com/trek/ember-testing-httpRespond.git C:\Users\guillermo\demo>bower install ember --save-dev bower cached git://github.com/components/ember.git#1.3.1 bower validate 1.3.1 against git://github.com/components/ember.git#*
17. http://bower.io
18. yo
19. It scaffolds out boilerplate.
20. Can prescribe helpful Grunt tasks.
21. Can automatically install dependencies you need.
22. C:\Users\guillermo\demo>npm install -g yo C:\Users\guillermo\demo>yo [?] What would you like to do? (Use arrow keys) > Run the Chrome-extension generator (0.2.5) Run the Ember generator (0.7.1) Run the Mocha generator (0.1.1) Run the Webapp generator (0.4.4) Update your generators Install a generator Find some help Get me out of here! C:\User\guillermo\demo\site>yo webapp [ ? ] What more would you like? › Bootstrap for Sass RequireJS Modernizr
24. C:\User\guillermo\demo\site>grunt serve
25. You can now edit and LiveReload!
26. http://yeoman.io
27. Require modules like node
28. Little demo session
29. C:\Users\guillermo\other_demo> npm init C:\Users\guillermo\other_demo> git init C:\Users\guillermo\other_demo> echo "node_modules" > .gitignore C:\Users\guillermo\other_demo>mkdir public C:\Users\guillermo\other_demo>touch public/index.html C:\Users\guillermo\other_demo> touch app.js C:\Users\guillermo\other_demo>git commit -am "Initial commit“ C:\Users\guillermo\other_demo>npm install -g http-server C:\Users\guillermo\other_demo>cd public http-server (server now listening on http://localhost:8080)
30. C:\Users\guillermo\other_demo>npm install -g browserify Install browserify so we can build our application
31. Write our first application
32. Build… Production à C:\Users\guillermo\other_demo>browserify app.js -o public/app.js Debug à C:\Users\guillermo\other_demo>browserify –d app.js -o public/app.js
33. And the code will look like…
34. Installing modules with npm C:\Users\guillermo\other_demo>npm install domready --save
35. Using the domready with a require.
36. Images Credits: Author Name link Rudolf Vlček Tool http://www.flickr.com/photos/30493186@N03/10545482994/in/photolist-h4SmGj-cYoBhy-95uyfv-7Lj7VJ-8EatV2-aofrKU- 7MCeQZ-eaxeQe-bAQ45X-7TP7j3-adbMyX-eLFBcg-bRHn2v-bRHngB-7zAa53-7Sf1GC-e2FgnR-8cKJEH-8cKJuK-8cKJwi-e3oR2D- dSqxYe-9RMCCP-beyeDF-eaxeNK-8iy9Dy-9exNXh-7SP4bh-9C4Jw5-8hgLn6-89SnVS-bmZ4oG-a4J3Ps-fkXJBG-eDShmT-dmfPyj- 9ybNQj-9oTFad-8NSLUg-brK877-89pyhx-8JQGQB-8JTJKd-8JTJRA-8JQFzc-8JQGZv-bpwzoL-9E7aqu-aFc7rn-cqDuQm-9anfRi Catherine Kolodziej warning sign http://www.flickr.com/photos/43244219@N04/8866489274/in/photolist-evv5mJ-eaPe6L-bFi4dT-93Cq5v-bntV1e-9ydZxP-fsoFh5- e1muox-eUmZrs-9eTNye-92V7NL-eoa4vt-b9Vroi-gmTfxS-aBhBB5-9AS9EF-cLaFu3-adGjxB-9BY2D9-dk2Dmi-9Vguob-8GQ9uM- a6FMCk-akkWCt-8M7H65-8SqeqX-bkcenU-9rmWep-83h77u-9EZC2J-8JtAPu-849nX3-csCeNd-9Vguo1-8aYBNU-7zqEm3-bE2gbS- dgajDz-gshGwM-eHjxrx Presentations and blogs: http://net.tutsplus.com/tutorials/javascript-ajax/building-apps-with-the-yeoman-workflow/ http://net.tutsplus.com/tutorials/tools-and-tips/say-yo-to-yeoman/ https://speakerdeck.com/addyosmani/automating-front-end-workflow http://codeofrob.com/blog.html http://yeoman.io/ http://bower.io/ http://browserify.org/ http://gruntjs.com/ http://kroltech.com/2013/12/boilerplate-web-app-using-backbone-js-expressjs-node-js-mongodb/