SlideShare une entreprise Scribd logo
1  sur  50
Télécharger pour lire hors ligne
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 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
Yeoman AngularJS and D3 - A solid stack for web apps
"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
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 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: '/'
});
});
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: '/'
});
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'
];
});
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>
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 ... ?
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 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' }
}
});
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);
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';
}
};
});
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
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 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
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, 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

Contenu connexe

En vedette

Front end workflow with yeoman
Front end workflow with yeomanFront end workflow with yeoman
Front end workflow with yeomanhassan hafez
 
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanPatrick Buergin
 
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data RESTJavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data RESTRodrigo Cândido da Silva
 
Web Design and Development Life Cycle and Technologies
Web Design and Development Life Cycle and TechnologiesWeb Design and Development Life Cycle and Technologies
Web Design and Development Life Cycle and TechnologiesAbdul Rahman Sherzad
 
HTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebHTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebPeter Lubbers
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!Christian Heilmann
 
Full-Stack User Experiences: A Marriage of Design & Technology (Dawn Ressel a...
Full-Stack User Experiences: A Marriage of Design & Technology (Dawn Ressel a...Full-Stack User Experiences: A Marriage of Design & Technology (Dawn Ressel a...
Full-Stack User Experiences: A Marriage of Design & Technology (Dawn Ressel a...Rosenfeld Media
 
The Next Generation of Continuous Delivery
The Next Generation of Continuous DeliveryThe Next Generation of Continuous Delivery
The Next Generation of Continuous DeliveryIBM UrbanCode Products
 
Full stack development with Node and NoSQL - Austin Node.JS Group - October ...
Full stack development with Node and NoSQL -  Austin Node.JS Group - October ...Full stack development with Node and NoSQL -  Austin Node.JS Group - October ...
Full stack development with Node and NoSQL - Austin Node.JS Group - October ...Matthew Groves
 
Intro to D3: Data-Driven Documents
Intro to D3: Data-Driven DocumentsIntro to D3: Data-Driven Documents
Intro to D3: Data-Driven DocumentsFlatiron School
 
Responsive Web Design Basics
Responsive Web Design BasicsResponsive Web Design Basics
Responsive Web Design BasicsAustin Walker
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsRasheed Waraich
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 WorkshopUX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 WorkshopMatt Gibson
 
BTK Designing for the web 2016 - UX
BTK Designing for the web 2016 - UXBTK Designing for the web 2016 - UX
BTK Designing for the web 2016 - UXLukas Oppermann
 
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Ido Green
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive AgePon Kattera
 

En vedette (20)

Front end workflow with yeoman
Front end workflow with yeomanFront end workflow with yeoman
Front end workflow with yeoman
 
Kickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with YeomanKickstarting Node.js Projects with Yeoman
Kickstarting Node.js Projects with Yeoman
 
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data RESTJavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
JavaOne LATAM 2016 - RESTful Services Simplificado com Spring Data REST
 
Web Design and Development Life Cycle and Technologies
Web Design and Development Life Cycle and TechnologiesWeb Design and Development Life Cycle and Technologies
Web Design and Development Life Cycle and Technologies
 
HTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the WebHTML5 WebSocket: The New Network Stack for the Web
HTML5 WebSocket: The New Network Stack for the Web
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
Yeoman
YeomanYeoman
Yeoman
 
Full-Stack User Experiences: A Marriage of Design & Technology (Dawn Ressel a...
Full-Stack User Experiences: A Marriage of Design & Technology (Dawn Ressel a...Full-Stack User Experiences: A Marriage of Design & Technology (Dawn Ressel a...
Full-Stack User Experiences: A Marriage of Design & Technology (Dawn Ressel a...
 
The Next Generation of Continuous Delivery
The Next Generation of Continuous DeliveryThe Next Generation of Continuous Delivery
The Next Generation of Continuous Delivery
 
Full stack development with Node and NoSQL - Austin Node.JS Group - October ...
Full stack development with Node and NoSQL -  Austin Node.JS Group - October ...Full stack development with Node and NoSQL -  Austin Node.JS Group - October ...
Full stack development with Node and NoSQL - Austin Node.JS Group - October ...
 
Intro to D3: Data-Driven Documents
Intro to D3: Data-Driven DocumentsIntro to D3: Data-Driven Documents
Intro to D3: Data-Driven Documents
 
Responsive Web Design Basics
Responsive Web Design BasicsResponsive Web Design Basics
Responsive Web Design Basics
 
Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Spring Framework
Spring FrameworkSpring Framework
Spring Framework
 
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 WorkshopUX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
 
BTK Designing for the web 2016 - UX
BTK Designing for the web 2016 - UXBTK Designing for the web 2016 - UX
BTK Designing for the web 2016 - UX
 
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
Modern Web Applications Utilizing HTML5 (Dev Con TLV 06-2013)
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive Age
 

Similaire à Yeoman AngularJS and D3 - A solid stack for web apps

The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistMark Fayngersh
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Againjonknapp
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptAndrew Lovett-Barron
 
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Community
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletonGeorge Nguyen
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesMark Roden
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!Roberto Messora
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB
 
Quick start with AngularJS
Quick start with AngularJSQuick start with AngularJS
Quick start with AngularJSIuliia Baranova
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiJared Faris
 

Similaire à Yeoman AngularJS and D3 - A solid stack for web apps (20)

The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
 
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
JavaScripters Event Oct 22, 2016 · 2:00 PM: Common Mistakes made by Angular D...
 
Training On Angular Js
Training On Angular JsTraining On Angular Js
Training On Angular Js
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
 
Quick start with AngularJS
Quick start with AngularJSQuick start with AngularJS
Quick start with AngularJS
 
Building Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript SpaghettiBuilding Rich User Experiences Without JavaScript Spaghetti
Building Rich User Experiences Without JavaScript Spaghetti
 

Dernier

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 

Dernier (20)

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 

Yeoman AngularJS and D3 - A solid stack for web apps

  • 1. Yeoman, AngularJS and D3.js Solid stack for web apps Created by Oscar Villarreal / @climboid Suman Paul / @sumankpaul
  • 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. Oscar Villarreal UI Lead JS Generalist AngularJS D3JS CSS Rock climb oscarvillareal.com @climboid
  • 4. Suman Paul UI Lead JS Generalist AngularJS Grunt Yeoman CSS
  • 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. We need to be more productive
  • 7. We need to achieve utopia faster & better
  • 8. How do we achieve a higher level of productivity? The secret sauce is in using the right tools
  • 9. Using the right tools also means that we have the power to do things better and more organized with richer interactions
  • 10. Start with your workflow
  • 12. "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
  • 13. Grunt Takes care of minification, compilation (sass, coffeescript), unit testing etc Automation
  • 14. Bower A package manager for the web, mainly front end packaging management.
  • 15. Generator A way to instantiate convention over configuration Boilerplate code
  • 16. Who contributes to Yeoman? Addy Osmani, Hemanth HM and some of the best in the world
  • 17. How does Yeoman work Live example
  • 18. 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
  • 19. 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
  • 22. You can still create a mess with angular... The key is to learn and understand what Angular is doing to avoid making a mess
  • 23. Who contributes to Angular? Google Misko Hevery Igor Minar Vojta Jina Matias Niemela Brian Ford
  • 24. 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
  • 25. 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>
  • 26. 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: '/' }); });
  • 27. 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: '/' });
  • 28. 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' ]; });
  • 29. 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>
  • 30. 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 ... ?
  • 31. 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>
  • 32. 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' } } });
  • 33. 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);
  • 34. 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'; } }; });
  • 35. Goodies of Angular and Yeoman Karma test runner ngMin for minification / concatenation Live reload ...
  • 36. Lets make an Angular app If you have Yeoman installed follow the presenter If you do not have Yeoman installed please clone this repo
  • 37. 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
  • 38. Third party libraries for Canvas Kinetic JS Fabric JS three JS
  • 39. 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
  • 40. Third party libraries for SVG D3.js Raphael Bonsai JS
  • 41. 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
  • 42. wuhu!
  • 43. 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
  • 44. 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
  • 46. Things to know about when using D3 SVG (elements & attributes) Scales (linear, log, exp, ordinal, ... ) Utility functions (max, min, extent, ...) Boilerplate process
  • 49. 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")
  • 50. 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