JS Tools for modern webapp

Transcript

1. JS Tools for modern webapps
2. WHAT?!?!
3. Package managers • common thing these days (composer, maven, npm) What is package manager? • a tool that allows you to specify a list of dependencies for your library or application • provide a reliable, standard mechanism for installing software created by third-parties - ne moramo da znamo kako se neka biblioteka instalira, kako se kompajlira, build-a. treba da pratimo konvencije packaga manager • provide dependency management - ako jedna biblioteka zahteva druge dve, da bi se instalira, package manager ce nam skrenuti paznju i reci nam da treba i te dve da instaliramo, takodje ako imamo vec tu instalirano, nested tree, specific version requierements for dependencies, so that compatible versions work together • keep you up to date with new versions and easily upgrades • reproduce stack for new developer • keep dependecies out of your repo
5. npm • npm, short for Node Package Manager ◦ online repository for the publishing of open-source Node.js projects ◦ command-line utility for interacting with said repository that aids in package installation, version management ◦ dependency management ▪ node project with a package.json file, you can run npm install from the project root and npm will install all the dependencies listed in the package.json • used for backend projects, but also on frontend • nested tree • many other browser-oriented tools mentioned later are themselves npm packages
6. his majesty - bower • JAM, Component, Volo, Ender ◦ script loading, scaffolding, compile/build • Bower - package manager for FE ◦ created by Twitter ◦ can contain any assets a website might need, such as CSS, JavaScript or images ◦ install bower - npm install -g bower
7. bowercc • we do per project configuration by including a .bowerrc json file in the root of a project folder { "directory" : "components", "json" : "bower.json", "endpoint" : "https://Bower.herokuapp.com", "searchpath" : "", "shorthand_resolver" : "" } • directory - local directory name and location in which the components will be installed. • json - name of the json file which contains the values describing (i.e. name, version, main, dependencies) a Bower component • endpoint - registry that is search, by name, for a component. The default registry is at https://Bower.herokuapp.com and can be viewed as a json object at https://Bower.herokuapp. com/packages. • searchpath - an array of additional registries that can be searched if the component is not found at the first registry indicated by endpoint. • shorthand_resolver - Define a custom template for shorthand component names.
8. bower.json { "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>", "<name>": "<folder>", "<name>": "<package>" }, "devDependencies": { "<test-framework-name>": "<version>" } }
9. bower - a bit more • bower search, bower cache clean, bower install • bower install jquery ◦ specific version, commit, tagged version, master, save dev ◦ (bower install jquery#1.7.0) • if next version of library comes out - bower update • i don’t need it anymore - bower uninstall jquery • The biggest difference is that npm does nested dependency tree, which doesn't work that well on the front-end, while Bower requires a flat dependency tree • many projects use both is that they use Bower for front-end packages and npm for developer tools like Grunt, JSHint, CoffeeScript
10. JavaScript Task Runner • Why use a task runner? ◦ Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. ◦ using different tools for above tasks, do it manually ◦ automation, less tasks - easier job • 2 main stream task runners ◦ grunt.js ◦ gulp.js
11. grunt • Why use Grunt? ◦ community - huge ecosystem that grows everyday (as we speak :O) ◦ utility ◦ flexible - hundreds of plugins, you can automate anything you can think of ▪ you’re so special? create your own task
12. grunt, nice to meet you • built on top of Node.js • task-based command-line tool that speeds up workflows • install grunt cli npm install -g grunt -cli • run the version of Grunt which has been installed next to a Gruntfile • npm init create a package.json file in the root directory • Gruntfile.js file in the root directory
13. package.json • file defines data about the project such as the project name, version and author • package.json file is also responsible for managing dependencies • run npm install to fetch all the packages and store them in node_modules
14. { "name" : "SampleGrunt", "version" : "0.1.0", "author" : "Mike Cunsolo", "private" : true, "devDependencies" : { "grunt" : "~0.4.0", "grunt-contrib-cssmin": "*", "grunt-contrib-sass": "*", "grunt-contrib-uglify": "*", "grunt-contrib-watch": "*", "grunt-cssc": "*", "grunt-htmlhint": "*", "matchdep": "*" } }
15. gruntfile.js • configure or define tasks and load Grunt plugins • consists of ◦ wrapper function ▪ configuration of tasks ▪ loading plugins ▪ defining tasks
16. • wrapper function is the core, all is inside that function • takes grunt as parameter module.exports = function(grunt) { // Configuration, Tasks and Plugins. }; • configuration ◦ grunt.initConfig: object containing the project configuration as well as any task configurations ▪ pkg: grunt.file.readJSON('package.json') - imports config data from package.json ▪ task: {...}, task_two: {...} });
17. • loading plugins ◦ plugins you wish to use. These need to be specified in your package.json file and installed using npm install. ▪ // Load the Grunt plugins. grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-jshint'); ▪ require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks); • grunt.registerTask method is used specify a set of tasks that should run when the grunt command is executed. ◦ // Register the default tasks. grunt.registerTask('default', ['watch']);
18. module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), jshint: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], options: { // options here to override JSHint defaults globals: { jQuery: true, console: true, module: true, document: true } } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint', 'qunit'] } }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('jshint', ['jshint']); };
19. gulp • new streaming build system • precipitous rise • what’s the difference? ◦ use of streams ▪ more control over your flow and relieves you of temporary folders and files. you put a file in and you get a file out ◦ code-over-configuration makes for a simpler and more intuitive build ▪ strict plugin guidelines assure plugins stay simple and work the way you expect. With a minimal API surface ▪ more readable ◦ each plugin should only perform a single action
20. what's so bad? • Plugins do multiple things ▪ Want a banner? Use the javascript minifier • Plugins do things that don't need to be plugins ▪ Need to run your tests? Use a plugin • Grunt config format is a mess that tries to do everything ▪ Not idiomatic with "the node way" • Headache of temp files/folders due to bad flow control
22. picture a build process • It should take in files, modify them, and output the new ones
24. just tell me how • npm install gulp • npm install gulp-minify-css gulp-swig • create a Gulpfile.js file
25. main functions • gulp.task(name, fn) - registers the function with a name • gulp.run(tasks...) - runs all tasks with maximum concurrency • gulp.watch(glob, fn) - runs a function when a file that matches the glob changes • gulp.src(glob) - returns a readable stream • gulp.dest(folder) - returns a writable stream
26. var gulp = require('gulp'); var jshint = require('gulp-jshint'); var concat = require('gulp-concat'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify'); // Lint JS gulp.task('lint', function() { gulp.src('./src/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // Concat & Minify JS gulp.task('minify', function(){ gulp.src('./src/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); // Default gulp.task('default', function(){ gulp.run('lint', 'minify'); // Watch JS Files gulp.watch("./src/*.js", function(event){ gulp.run('lint', 'minify'); }); });
27. yeoman • best practices • yo - the scaffolding tool • grunt/gulp - the build tool • bower - for package management npm install -g yo • yo can generate several types of applications, but it needs help from plug-ins, or generators to get the job done. • To scaffold a web application, you'll need to grab the web app generator
28. usage npm install -g generator-angular # install generator yo angular # scaffold out a AngularJS project bower install angular-ui # install a dependency for your project from Bower grunt test # test your app grunt serve # preview your app (formerly `grunt server`) grunt # build the application for deployment