yeoman angularjs and d3 - a solid stack for web apps
DESCRIPTION
This was a course given in Bangalore India for JSChannel conf 2013. It encompases the use of angular js and d3 in a harmonious way and gives an overview over each of the frameworks / libraries.TRANSCRIPT
Yeoman,AngularJS and
D3.jsSolid stack for web apps
Created by
/
/
Oscar Villarreal @climboid
Suman Paul @sumankpaul
Structure of the courseIntrosDive into YeomanDive into AngularDive into D3.jsProjects throughout all pointsMaster project using all 3 tools
Oscar VillarrealUI LeadJS GeneralistAngularJSD3JSCSSRock climboscarvillareal.com@climboid
Suman PaulUI LeadJS GeneralistAngularJSGruntYeomanCSS
Mexico and India
We are very similar in many ways, especially when it comes toworking hard and being passionate about our teams
We need to bemore productive
We need toachieve utopiafaster & better
How do we achieve a higherlevel of productivity?
The secret sauce is in using the right tools
Using the right tools also means that we have the power to dothings better and more organized with richer interactions
Start with your workflow
"A collection of tools and best practices working in harmonyto make developing for the web even better"Allows you to quickly assemble files and folders along withboilerplate code.Uses grunt for all of its tasksUses Bower for all of the project dependenciesVia the use of generators one can scaffold projects veryquickly
GruntTakes care of minification, compilation (sass, coffeescript), unit
testing etcAutomation
BowerA package manager for the web, mainly front end packaging
management.
GeneratorA way to instantiate convention over configuration
Boilerplate code
Who contributes to Yeoman?Addy Osmani, Hemanth HM and some of the best in the world
How does Yeoman workLive example
Lets install YeomanYou will need Make sure you have git installed as wellIf you use SASS you will need ruby and compassUse for windows installs (courtesy of Suman Paul)
NodeJS
this linknpm install -g yonpm install -g generator-webappnpm install -g generator-angular
What is an MVC frameworkA pattern for your code that separates interaction and view
Where does it come from? (smalltalk)How has it evolved in the front end
DOJO ToolkitJavaScript MVCBackbone.js - Jeremy AshkenasSpine.jsKnockout.js MVVMEmber.js - Yehuda Katz & Tom DaleAngularJS - Misko Hevery
Why choose Angular?
No silver bullet
You can still create a messwith angular...
The key is to learn and understand what Angular is doing toavoid making a mess
Who contributes to Angular?Google
Misko Hevery
Igor Minar
Vojta Jina
Matias Niemela
Brian Ford
The key in angular is alwaysthink about the data, not the
DOM, the DOM will take care ofits self so long as it is data
binded with the corresponding$scope of a given controller
Core concepts of angularthe ng...ng-app="App"ng-view
<!doctype html><html> <head> <meta charset="utf-8"/> </head> <body ng-app="App"> <div class="container" ng-view></div> <script src="components/angular/angular.js"></script> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> </body></html>
Core concpets of angularYour main app module
'use strict';
angular.module('App', []) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); });
Core concepts of angularRouter
A router allows you to glue a controller to a view, creates ascope underneath that controller and maintains state within the
app.
$routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .when('/directory', { templateUrl: 'views/directory.html', controller: 'DirectoryCtrl' }) .otherwise({ redirectTo: '/'});
Core concepts of angularController
Instantiation of a new controller object along with its childscope
'use strict';
angular.module('App')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
Core concepts of angularViewng-view
Templates that interpolate scope objects that are part of agiven controller or are inherited prototypically.
<div class="hero-unit"> <h1>'Allo, 'Allo!</h1> <p>You now have</p> <ul> <li ng-repeat="thing in awesomeThings">{{thing}}</li> </ul> <p>installed.</p> <h3>Enjoy coding! - Yeoman</h3></div>
Core concepts of angular$scope
Keeps your logic contained to that controller unless you areusing $rootScope
$scope will allow you to interpolate its properties in a givenview
$scope.hello = "world"
What gets rendered in the ... ?
<div ng-bind="hello">...</div><div>{{hello}}... </div>
Core concepts of angular$scope
angular.module('App') .controller('MainCtrl', function ($scope) { $scope.hello = [ { title:'me',color:'blue',value:2 }, { title:'you',color:'red',value:0 } ]; $scope.btnClicked = function(){ ... }; $scope.falsy = false; });
<!-- main.html--><ul ng-if="!falsy"> <li ng-repeat="item in hello" ng-click="btnClicked()"> <div ng-bind="item.title"></div> <div>{{item.color}}</div> <input type="number" ng-model="item.value"/> </li></ul>
Core concepts of angularServices
Something that spans multiple controllers and doesn't have aview tied to it.
'use strict';
angular.module('App')
.service('Welcoming', function Calculations() {
return{
sayHello: function(){ return 'hello' },
sayGoodbye: function(){ return 'goodbye' }
}
});
Core concepts of angularConstants
Maintained across the entire application. Can be injected as aservice. Use this for constants within your application.
'use strict';
angular.module('App') .constant('Pi', 3.141516);
Core concepts of angularCustom Directives
UI components, charts, visualization... anything that hasspecific html conversion and needs to be part of the given
scope.
'use strict';
angular.module('App') .directive('chart', function () { return { restrict: 'E', controller: function($scope, $element){ ... }, templateUrl: 'my-dialog.html', link: function (scope, element) { scope.name = 'Jeff'; } }; });
Goodies of Angular andYeoman
Karma test runnerngMin for minification / concatenationLive reload...
Lets make an Angular appIf you have Yeoman installed follow the presenter
If you do not have Yeoman installed please clone this repo
What is the canvas?<canvas> "magic" </canvas>
Used to draw graphics, on the fly, via scripting (usually
JavaScript)
Upon clicking you need to find X and Y and compare to
elements inside of canvas
Can be super charged for webGL (context 3d)
If you need a lot of things in your visualization use Canvas
for it will not kill the DOM
Raster
Third party libraries for CanvasKinetic JSFabric JSthree JS
What is SVG?Scalable Vector Graphics, vector image format for 2
dimensional graphics
It is part of the DOM, can be styled using css
Because its part of the DOM one can attach events to it via
JavaScript
Vectors can be scaled and because of that they will look
beautifully on retina displays
Ability to use images as SVG format and even fonts
Third party libraries for SVGD3.js
RaphaelBonsai JS
Why choose D3.jsFull power and control over every single vector drawn
Extremely easy to data bind
Extremely easy to bind events
Its vectors so its works beautifully on all displays
Huge support from community
wuhu!
Who's behind D3.js
many others
Edward Tufte
Mike BostockJason Davies
"I suggest keeping an eye on the work ofBret Victor and Mike Bostock. Both are
cutting edge. Bret Victor visualisesprogramming, sees and thinks beautifully,
just starting to blossom (seeworrydream.com). Mike Bostock (see
bost.ocks.org) developed the open-sourceD3, Data-Driven Documents (d3js.org)."
Structure of a D3 visualizationInclude the librarysvg container <svg> "magic" <svg>Create your scales using the right domain and rangeSome boiler plate for your svg containerCreate SVG itemsData bind the SVG item attributesEnter, update, exit
Mike Bostocksrecommendations
For reusable charts
Things to know about whenusing D3
SVG (elements & attributes)Scales (linear, log, exp, ordinal, ... )Utility functions (max, min, extent, ...)Boilerplate process
Lets create our own
11/16/13 JS-CHANNEL
localhost:8000/#/57 1/1
Some maps maybe?
Code for maps
var width = 960, height = 500;
var projection = d3.geo.albersUsa() .scale(1000) .translate([width / 2, height / 2]);
var path = d3.geo.path() .projection(projection);
var mapContainer = d3.select("#usaMap").append("svg") .attr("width", width) .attr("height", height);
d3.json("/data/output.json", function(error, us) { mapContainer.insert("path", ".graticule") .datum(topojson.feature(us, us.objects.roads)) .attr("class", "land")
Lets create our final repo!Create an angular application using Yeoman
That app should have two routes, main and aboutUs, createthem using the generatorInclude d3 using bower
Insert the d3 code into a directiveInsert the directive into the aboutUs route