Lightning Talk Presentations from the Recent AngularJS DC Meetup

Last week I participated in a series of lightning talks at the AngularJS DC Meetup, hosted by Difference Engine, and I thought I'd share the links to the slide decks and demos presented (unfortunately, the equipment recording the entire event failed, otherwise I would just share that).

Not all of the presenters have posted their material, but here what's been shared so far:

• Meredith Myers, mostly on a whim, created a cool Angular app that applies API data about rat sightings in New York City to a mapping library called Leaflet.  From her description, it sounds like Leaflet is super-easy to use.  Her presentation can be found at http://meredithmmyers.com/ratmap-presentation/#/ and her application (with a link to the GitHub repo) can be found at http://meredithmmyers.com/ratmap/#/.

• Brandon Boswell gave a presentation on Angular best practices when dealing with large applications:  http://www.slideshare.net/brandonkboswell/brandon-boswellpresentation.

• Carl Gieringer gave a very interesting talk about leveraging some of the functionality in the $resource service to perform data transformations and attach behaviors to the objects retrieved via REST.  As someone who's used $resource to retrieve a set of data objects and then tossed those objects over to a different service function to do things like transform string dates into JavaScript dates, studying his technique is now part of my to-do list.  The presentation, which ends with a link to a GitHub project illustrating part of the technique, is available at http://www.slideshare.net/carlgieringer/object-oriented-ngresource.

• Evan Johnson of Andela, who co-sponsored the evening, gave a talk about Andela's effort to train intelligent young men and women in Nigeria to be web and mobile application developers, and their program that matches US programmers as mentors to these students.  Their presentation is at http://www.slideshare.net/evanrjohnson/andela-angularjs-dc-meetup.

• Louis Wilbrink presented an introduction to Angular Material, the combination of AngularJS with Google's Material Design language for Android and the web.  He also created a demo app that he uses to keep track of his contracting hours at http://contract-timer.louiswilbrink.com/#/.

• Finally, I gave a ten-minute presentation on $http interceptors in AngularJS:  event functions triggered during the request and response phase of HTTP calls made by the built-in Angular services.  You can find that at http://www.slideshare.net/bcswartz/angularjs-http-interceptors-explanation-and-examples (I wrote the slides such that they're fairly self-explanatory on their own).

Using Grunt to Concatenate Only the JavaScript/CSS Files Used in Index.html

One of the most common uses of the Grunt task runner is to build a deployment package out of your development code for your website or web application, and part of that build process is usually a task that concatenates the CSS and JavaScript files into singular (or at least fewer) files for optimal download.

The grunt-contrib-concat Grunt plugin allows you to configure a concatenation task to target individual files or entire directories, like so:

concat: {
            js: {
                src: [ 'dev/jquery/jquery.js', 'dev/angular/services/*.js', 'dev/angular/directives/*.js' ],
                dest: '../build/combined.js',
                options: {
                    separator: ';'
                }
            },
        }

The only drawback is that you have to update the task's "src" property as you add or remove CSS and JavaScript assets from your web application.

As I was playing around with Grunt on a personal project, I came to wonder: could I create a Grunt task or set of tasks that could figure out which files to concatenate based on the <link> and <script> tags in my code?  Here's what I came up with.

My project is a single page web application powered by AngularJS.  It has an index.html file that serves as the "single page" that displays the appropriate view fragment (HTML files stored in a "views" directory) for a given page/route in the application.  None of those view fragments require additional CSS or JavaScript resources, so my index.html page pulls down all of the necessary CSS and JavaScript files.

In my index.html file, I wrapped my blocks of <link> and <script> tags with special HTML "build" comments, a set for my CSS block and a set for my JavaScript block:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>My HTML Page</title>

    <!--build-css-start-->
    <link rel="stylesheet" media="screen" href="assets/app.css" />
    <link rel="stylesheet" media="screen" href="packages/bootstrap/dist/css/bootstrap.css" />
    <!--build-css-end-->

</head>
<body ng-app="demoApp">

    <!--Div where my Angular views will be displayed-->
    <div ng-view></div>

    <!--build-js-start-->
    <script type="text/javascript" src="packages/angular/angular.js" ></script>
    <script type="text/javascript" src="common/app.js" ></script>
    <script type="text/javascript" src="controllers/loginController.js" ></script>
    <script type="text/javascript" src="controllers/logoutController.js" ></script>
    <script type="text/javascript" src="services/authService.js" ></script>
    <script type="text/javascript" src="services/session.js" ></script>
    <!--build-js-end-->

</body>
</html>

I then created a Grunt task powered by the grunt-replace plugin that finds and parses those blocks via regex, extracting and modifying the file path within each "src" and "href" attribute and appending them to arrays stored as Grunt configuration properities. Each block is replaced by a single <link> and <script> tag pointed at the combined CSS and JavaScript file. The overall build task then executes the concat task, which concatenates all of the files in the respective configuration arrays into the combined files.

So when I run the master build task against my original set of development files:

...I end up with a build directory containing the index.html file, the views folders with the view HTML files, and a single CSS and JavaScript file: 

...and the index.html file itself looks like this:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>My HTML Page</title>

    <link rel="stylesheet" media="screen" href="combined.css"/>

</head>
<body ng-app="demoApp">

    <!--Div where my Angular views will be displayed-->
    <div ng-view></div>

    <script type="text/javascript" src="combined.js"></script>

</body>
</html>

Cool, right?

If you want to try it out for yourself, the entire Gruntfile used to power the build task is below, with comments:

	module.exports = function( grunt )
	{
	grunt.initConfig({
	//Create jsResources and cssResources configuration properties
	jsResources: [],
	cssResources: [],
	clean: {
	build: {
	dot: true,
	src: [ '../build/**/*' ]
	}
	},
	copy: {
	build: {
	files: [
	{
	cwd: '../app/',
	dest: '../build/',
	expand: true,
	//Copy over the index.html file and all the files in the "views" directory
	src: [ 'index.html', 'views/**' ]
	}
	]
	}
	},
	replace: {
	gather: {
	files: [
	{
	cwd: '../app/',
	dest: '../build/',
	expand: true,
	src: [ 'index.html' ]
	}
	],
	options: {
	patterns: [
	{
	//Grab the <!--build-js-start--> and <!--build-js-end--> comments and everything in-between
	match: /\<\!\-\-build\-js\-start[\s\S]*build\-js\-end\-\-\>/,
	replacement: function ( matchedString ) {
	//Grab all of the src attributes from the <script> tags
	var jsArray = matchedString.match( /(src\s?\=\s?[\'\"])([^\'\"]*)([\'\"])/g );
	jsArray.forEach( function( element ) {
	//Get just the value of the src attribute (the file path to the JS file)
	var resourceTarget = element.match( /(src\s?\=\s?[\'\"])([^\'\"]*)([\'\"])/ )[ 2 ];
	targetConfig = grunt.config( 'jsResources' );
	//Alter the path for use with the concat task
	targetConfig.push( '../app/' + resourceTarget );
	//Add the path to the JS file to the jsResources configuration property
	grunt.config( 'jsResources', targetConfig );
	});
	//Replace the entire build-js-start to build-js-end block with this <script> tag
	return '<script type="text/javascript" src="combined.js"></script>';
	}
	},
	{
	//Grab the <!--build-css-start--> and <!--build-css-end--> comments and everything in-between
	match: /\<\!\-\-build\-css\-start[\s\S]*build\-css\-end\-\-\>/,
	replacement: function ( matchedString ) {
	//Grab all of the href attributes from the <href> tags
	var cssArray = matchedString.match( /(href\s?\=\s?[\'\"])([^\'\"]*)([\'\"])/g );
	cssArray.forEach( function( element ) {
	var resourceTarget = element.match( /(href\s?\=\s?[\'\"])([^\'\"]*)([\'\"])/ )[ 2 ];
	var targetConfig = grunt.config( 'cssResources' );
	//Alter the path for use with the concat task
	targetConfig.push( '../app/' + resourceTarget );
	//Add the path to the CSS file to the cssResources configuration property
	grunt.config( 'cssResources', targetConfig );
	});
	//Replace the entire build-css-start to build-css-end block with this <link> tag
	return '<link rel="stylesheet" media="screen" href="combined.css"/>';
	}
	}
	]
	}
	}
	},
	concat: {
	js: {
	//Concatenate all of the files in the jsResources configuration property
	src: [ '<%= jsResources %>' ],
	dest: '../build/combined.js',
	options: {
	separator: ';'
	}
	},
	css: {
	//Concatenate all of the files in the cssResources configuration property
	src: [ '<%= cssResources %>' ],
	dest: '../build/combined.css'
	}
	}
	});
	grunt.loadNpmTasks( 'grunt-contrib-clean' );
	grunt.loadNpmTasks( 'grunt-contrib-concat' );
	grunt.loadNpmTasks( 'grunt-contrib-copy' );
	grunt.loadNpmTasks( 'grunt-replace' );
	grunt.registerTask( 'build', 'Creates a build from the files in the app directory', function() {
	//So the user doesn't have to add '--force' to the command to clean the build directory
	grunt.option( 'force', true );
	grunt.task.run ( [
	'clean:build',
	'copy:build',
	'replace:gather',
	'concat:css',
	'concat:js'
	]);
	});
	};

view raw gruntfile.js hosted with ❤ by GitHub