Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JS Tools for modern webapp

JS Tools for modern webapp

Avatar for Nedeljko Damnjanovic

Nedeljko Damnjanovic

March 18, 2014
Tweet

More Decks by Nedeljko Damnjanovic

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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.
  5. 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>" } }
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. { "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": "*" } }
  12. gruntfile.js • configure or define tasks and load Grunt plugins

    • consists of ◦ wrapper function ▪ configuration of tasks ▪ loading plugins ▪ defining tasks
  13. • 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: {...} });
  14. • 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']);
  15. 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']); };
  16. 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
  17. 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
  18. picture a build process • It should take in files,

    modify them, and output the new ones
  19. just tell me how • npm install gulp • npm

    install gulp-minify-css gulp-swig • create a Gulpfile.js file
  20. 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
  21. 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'); }); });
  22. 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
  23. 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