0
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 pr...
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 ou...
We need to be
more productive
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
Start with your workflow
"A collection of tools and best practices working in harmony
to make developing for the web even better"
Allows you to qui...
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 c...
What is an MVC framework
A pattern for your code that separates interaction and view
Where does it come from? (smalltalk)
...
Why choose Angular?
No silver bullet
You can still create a mess
with angular...
The key is to learn and understand what Angular is doing to
avoid making a mes...
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
b...
Core concepts of angular
the ng...
ng-app="App"
ng-view
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<bod...
Core concpets of angular
Your main app module

'use strict';
angular.module('App', [])
.config(function ($routeProvider) {...
Core concepts of angular
Router

A router allows you to glue a controller to a view, creates a
scope underneath that contr...
Core concepts of angular
Controller

Instantiation of a new controller object along with its child
scope
'use strict';
ang...
Core concepts of angular
View

ng-view
Templates that interpolate scope objects that are part of a
given controller or are...
Core concepts of angular
$scope

Keeps your logic contained to that controller unless you are
using $rootScope
$scope will...
Core concepts of angular
$scope

angular.module('App')
.controller('MainCtrl', function ($scope) {
$scope.hello = [
{ titl...
Core concepts of angular
Services

Something that spans multiple controllers and doesn't have a
view tied to it.
'use stri...
Core concepts of angular
Constants

Maintained across the entire application. Can be injected as a
service. Use this for c...
Core concepts of angular
Custom Directives

UI components, charts, visualization... anything that has
specific html conver...
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 clon...
What is the canvas?
<canvas> "magic" </canvas>
Used to draw graphics, on the fly, via scripting (usually
JavaScript)
Upon ...
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...
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 ...
wuhu!
Who's behind D3.js
Mike Bostock
Jason Davies
many others
"I suggest keeping an eye on the work of
Bret Victor and Mike Bos...
Structure of a D3 visualization
Include the library
svg container <svg> "magic" <svg>
Create your scales using the right d...
Mike Bostocks
recommendations
For reusable charts
Things to know about when
using D3
SVG (elements & attributes)
Scales (linear, log, exp, ordinal, ... )
Utility functions ...
Lets create our own
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, heigh...
Lets create our final repo!
Create an angular application using Yeoman
That app should have two routes, main and aboutUs, ...
Yeoman AngularJS and D3 - A solid stack for web apps
Upcoming SlideShare
Loading in...5
×

Yeoman AngularJS and D3 - A solid stack for web apps

8,811

Published on

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.

Published in: Technology, Art & Photos
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,811
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
81
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "Yeoman AngularJS and D3 - A solid stack for web apps"

  1. 1. Yeoman, AngularJS and D3.js Solid stack for web apps Created by Oscar Villarreal / @climboid Suman Paul / @sumankpaul
  2. 2. 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
  3. 3. Oscar Villarreal UI Lead JS Generalist AngularJS D3JS CSS Rock climb oscarvillareal.com @climboid
  4. 4. Suman Paul UI Lead JS Generalist AngularJS Grunt Yeoman CSS
  5. 5. Mexico and India We are very similar in many ways, especially when it comes to working hard and being passionate about our teams
  6. 6. We need to be more productive
  7. 7. We need to achieve utopia faster & better
  8. 8. How do we achieve a higher level of productivity? The secret sauce is in using the right tools
  9. 9. Using the right tools also means that we have the power to do things better and more organized with richer interactions
  10. 10. Start with your workflow
  11. 11. "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
  12. 12. Grunt Takes care of minification, compilation (sass, coffeescript), unit testing etc Automation
  13. 13. Bower A package manager for the web, mainly front end packaging management.
  14. 14. Generator A way to instantiate convention over configuration Boilerplate code
  15. 15. Who contributes to Yeoman? Addy Osmani, Hemanth HM and some of the best in the world
  16. 16. How does Yeoman work Live example
  17. 17. 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
  18. 18. 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
  19. 19. Why choose Angular?
  20. 20. No silver bullet
  21. 21. You can still create a mess with angular... The key is to learn and understand what Angular is doing to avoid making a mess
  22. 22. Who contributes to Angular? Google Misko Hevery Igor Minar Vojta Jina Matias Niemela Brian Ford
  23. 23. 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
  24. 24. 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>
  25. 25. 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: '/' }); });
  26. 26. Core concepts of angular 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: '/' });
  27. 27. Core concepts of angular 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' ]; });
  28. 28. Core concepts of angular 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>
  29. 29. Core concepts of angular $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 ... ?
  30. 30. 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>
  31. 31. Core concepts of angular Services Something that spans multiple controllers and doesn't have a view tied to it. 'use strict'; angular.module('App') .service('Welcoming', function Calculations() { return{ sayHello: function(){ return 'hello' }, sayGoodbye: function(){ return 'goodbye' } } });
  32. 32. Core concepts of angular Constants Maintained across the entire application. Can be injected as a service. Use this for constants within your application. 'use strict'; angular.module('App') .constant('Pi', 3.141516);
  33. 33. Core concepts of angular Custom Directives UI components, charts, visualization... anything that has specific 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'; } }; });
  34. 34. Goodies of Angular and Yeoman Karma test runner ngMin for minification / concatenation Live reload ...
  35. 35. Lets make an Angular app If you have Yeoman installed follow the presenter If you do not have Yeoman installed please clone this repo
  36. 36. 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
  37. 37. Third party libraries for Canvas Kinetic JS Fabric JS three JS
  38. 38. 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
  39. 39. Third party libraries for SVG D3.js Raphael Bonsai JS
  40. 40. 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
  41. 41. wuhu!
  42. 42. 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
  43. 43. 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
  44. 44. Mike Bostocks recommendations For reusable charts
  45. 45. Things to know about when using D3 SVG (elements & attributes) Scales (linear, log, exp, ordinal, ... ) Utility functions (max, min, extent, ...) Boilerplate process
  46. 46. Lets create our own
  47. 47. 11/16/13 JS-CHANNEL Some maps maybe? localhost:8000/#/57 1/1
  48. 48. 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")
  49. 49. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×