Yeoman AngularJS and D3 - A solid stack for web apps

Yeoman,
AngularJS and
D3.js
Solid stack for web apps
Created by
Oscar Villarreal / @climboid
Suman Paul / @sumankpaul

Structure of the course
Intros
Dive into Yeoman
Dive into Angular
Dive into D3.js
Projects throughout all points
Master project using all 3 tools

Oscar Villarreal
UI Lead
JS Generalist
AngularJS
D3JS
CSS
Rock climb
oscarvillareal.com
@climboid

Suman Paul
UI Lead
JS Generalist
AngularJS
Grunt
Yeoman
CSS

Mexico and India

We are very similar in many ways, especially when it comes to
working hard and being passionate about our teams

We need to
achieve utopia
faster & better

How do we achieve a higher
level of productivity?
The secret sauce is in using the right tools

Using the right tools also means that we have the power to do
things better and more organized with richer interactions

"A collection of tools and best practices working in harmony
to make developing for the web even better"
Allows you to quickly assemble files and folders along with
boilerplate code.
Uses grunt for all of its tasks
Uses Bower for all of the project dependencies
Via the use of generators one can scaffold projects very
quickly

Grunt
Takes care of minification, compilation (sass, coffeescript), unit
testing etc
Automation

Bower
A package manager for the web, mainly front end packaging
management.

Generator
A 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 work
Live example

Lets install Yeoman
You will need NodeJS
Make sure you have git installed as well
If you use SASS you will need ruby and compass
Use this link for windows installs (courtesy of Suman Paul)
npm install -g yo
npm install -g generator-webapp
npm install -g generator-angular

What is an MVC framework
A pattern for your code that separates interaction and view
Where does it come from? (smalltalk)
How has it evolved in the front end
DOJO Toolkit
JavaScript MVC
Backbone.js - Jeremy Ashkenas
Spine.js
Knockout.js MVVM
Ember.js - Yehuda Katz & Tom Dale
AngularJS - Misko Hevery

You can still create a mess
with angular...
The key is to learn and understand what Angular is doing to
avoid making a mess

Who contributes to Angular?
Google
Misko Hevery
Igor Minar
Vojta Jina
Matias Niemela
Brian Ford

The key in angular is always
think about the data, not the
DOM, the DOM will take care of
its self so long as it is data
binded with the corresponding
$scope of a given controller

Core concepts of angular
the 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 angular
Your main app module

'use strict';
angular.module('App', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});

Router

A router allows you to glue a controller to a view, creates a
scope 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: '/'
});

Controller

Instantiation of a new controller object along with its child
scope
'use strict';
angular.module('App')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});

View

ng-view
Templates that interpolate scope objects that are part of a
given 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>

$scope

Keeps your logic contained to that controller unless you are
using $rootScope
$scope will allow you to interpolate its properties in a given
view
$scope.hello = "world"
<div ng-bind="hello">...</div>
<div>{{hello}}... </div>

What gets rendered in the ... ?

$scope

.controller('MainCtrl', function ($scope) {
$scope.hello = [
{ title:'me',color:'blue',value:2 },
{ title:'you',color:'red',value:0 }
];
$scope.btnClicked = function(){ ... };
$scope.falsy = false;
});


<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>

Services

Something that spans multiple controllers and doesn't have a
view tied to it.
'use strict';
.service('Welcoming', function Calculations() {
return{
sayHello: function(){ return 'hello' },
sayGoodbye: function(){ return 'goodbye' }
}
});

Constants

Maintained across the entire application. Can be injected as a
service. Use this for constants within your application.
'use strict';
.constant('Pi', 3.141516);

Custom Directives

UI components, charts, visualization... anything that has
specific html conversion and needs to be part of the given
scope.
'use strict';
.directive('chart', function () {
return {
restrict: 'E',
controller: function($scope, $element){ ... },
templateUrl: 'my-dialog.html',
link: function (scope, element) {
scope.name = 'Jeff';
}
};
});

Goodies of Angular and
Yeoman
Karma test runner
ngMin for minification / concatenation
Live reload
...

Lets make an Angular app
If 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 Canvas
Kinetic JS
Fabric JS
three 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 SVG
D3.js
Raphael
Bonsai JS

Why choose D3.js
Full 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

Who's behind D3.js
Mike Bostock
Jason Davies
many others
"I suggest keeping an eye on the work of
Bret Victor and Mike Bostock. Both are
cutting edge. Bret Victor visualises
programming, sees and thinks beautifully,
just starting to blossom (see
worrydream.com). Mike Bostock (see
bost.ocks.org) developed the open-source
D3, Data-Driven Documents (d3js.org)."
Edward Tufte

Structure of a D3 visualization
Include the library
svg container <svg> "magic" <svg>
Create your scales using the right domain and range
Some boiler plate for your svg container
Create SVG items
Data bind the SVG item attributes
Enter, update, exit

Mike Bostocks
recommendations
For reusable charts

Things to know about when
using D3
SVG (elements & attributes)
Scales (linear, log, exp, ordinal, ... )
Utility functions (max, min, extent, ...)
Boilerplate process

11/16/13

JS-CHANNEL

Some maps maybe?

localhost:8000/#/57

1/1

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, create
them using the generator
Include d3 using bower
Insert the d3 code into a directive
Insert the directive into the aboutUs route

Yeoman AngularJS and D3 - A solid stack for web apps

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Yeoman AngularJS and D3 - A solid stack for web apps

Similar to Yeoman AngularJS and D3 - A solid stack for web apps (20)

Recently uploaded

Recently uploaded (20)

Yeoman AngularJS and D3 - A solid stack for web apps