SlideShare a Scribd company logo
1 of 42
Download to read offline
@byrichardpowell
byrichardpowell.co.uk
Friday, 6 December 13
@serverdensity
blog.serverdensity.com

Friday, 6 December 13
Monitor your infastructure
Friday, 6 December 13
Friday, 6 December 13
25 TB of data per month

Friday, 6 December 13
Friday, 6 December 13
Friday, 6 December 13
Friday, 6 December 13
Y U NO ?
Manage Dependencies
Bind Data
Manage Scope/Child Views

Friday, 6 December 13
Y U NO ?
Support IE7
Progressive Enhancement

Friday, 6 December 13
Todo MVC

378 Lines of code

218 Lines of code

todomvc.com/
Friday, 6 December 13
378 Lines of code

218 Lines of code

todomvc.com/
Friday, 6 December 13
funnyant.com/choosing-javascript-mvc-framework/

Friday, 6 December 13
The Basics

Friday, 6 December 13
An Angular App

Friday, 6 December 13
A Todo List: HTML

Friday, 6 December 13
A Todo List: Controller

Friday, 6 December 13
A Router

Friday, 6 December 13
Client to Server

Friday, 6 December 13
The Awesome

Friday, 6 December 13
Directives

Friday, 6 December 13
Nesting Scopes

Friday, 6 December 13
Nesting Scopes

bit.ly/18aYNgz
bit.ly/1eYrs88
Friday, 6 December 13
Filters

Friday, 6 December 13
Animation

Friday, 6 December 13
Animation

bit.ly/1g7n6yG
Friday, 6 December 13
Testing

Friday, 6 December 13
Unit Testing

Friday, 6 December 13
E2e Testing

Friday, 6 December 13
Karma
karma-runner.github.io/0.10/index.html

Protractor
https://github.com/angular/protractor

Friday, 6 December 13
Friday, 6 December 13
Handles Boilerplate
Provides Scaffolding
Can configure Grunt
Manage dependencies

Friday, 6 December 13
$ npm install -g yo
$ npm install -g generator-webapp
$ npm install -g generator-angular

* Generators

Friday, 6 December 13
$ yo angular

$ bower install angular-ui

* Generators

Friday, 6 December 13
Backbone + Require
Angular + Express
Ember
Mocha
Front-End Boilerplates
Wordpress
Hoodie
Three.js
Chrome Apps
CoffeeScript + Source Maps
Reveal
and more

npmjs.org/search?q=yeoman-gene
Friday, 6 December 13
* Generators

Friday, 6 December 13
Linting
Compiling
Minification
Testing
Documentation
Deployment
Live Reload
and more...

Friday, 6 December 13
$ grunt server
$ grunt test
$ grunt build

* Generators

Friday, 6 December 13
Do we need to serve the
UI via a backend?

Friday, 6 December 13
What more do you need?
• Partials
• URL Routing
• Templating
• Build tools

Friday, 6 December 13
Friday, 6 December 13
blog.serverdensity.com/
@serverdensity

byrichardpowell.co.uk
@byrichardpowell

Friday, 6 December 13

More Related Content

Viewers also liked

Viewers also liked (9)

Metadata and me
Metadata and meMetadata and me
Metadata and me
 
A Quick and Dirty D3.js Tutorial
A Quick and Dirty D3.js TutorialA Quick and Dirty D3.js Tutorial
A Quick and Dirty D3.js Tutorial
 
Come migliorare le performance di WordPress con il Visual Composer
Come migliorare le performance di WordPress con il Visual ComposerCome migliorare le performance di WordPress con il Visual Composer
Come migliorare le performance di WordPress con il Visual Composer
 
Javascript testing: tools of the trade
Javascript testing: tools of the tradeJavascript testing: tools of the trade
Javascript testing: tools of the trade
 
Using Composer to create manageable WordPress websites
Using Composer to create manageable WordPress websitesUsing Composer to create manageable WordPress websites
Using Composer to create manageable WordPress websites
 
WordPress Database: What's behind those 12 tables
WordPress Database: What's behind those 12 tablesWordPress Database: What's behind those 12 tables
WordPress Database: What's behind those 12 tables
 
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma JavaScript Test-Driven Development with Jasmine 2.0 and Karma
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
 
WordPress Template Hierarchy
WordPress Template HierarchyWordPress Template Hierarchy
WordPress Template Hierarchy
 
Getting Started With Grunt for WordPress Development
Getting Started With Grunt for WordPress DevelopmentGetting Started With Grunt for WordPress Development
Getting Started With Grunt for WordPress Development
 

Similar to Angular js, Yeomon & Grunt

Butter Web Browsing with Margarine
Butter Web Browsing with MargarineButter Web Browsing with Margarine
Butter Web Browsing with Margarine
Wayne Walls
 
Cloudify Your Business
Cloudify Your BusinessCloudify Your Business
Cloudify Your Business
Wayne Walls
 
Performance & Responsive Web Design
Performance & Responsive Web DesignPerformance & Responsive Web Design
Performance & Responsive Web Design
Zach Leatherman
 
2013 06-27-securecoding-en - jug pch
2013 06-27-securecoding-en - jug pch2013 06-27-securecoding-en - jug pch
2013 06-27-securecoding-en - jug pch
Sébastien GIORIA
 

Similar to Angular js, Yeomon & Grunt (20)

Graph Applications for the Enterprise, FAST - David Colebatch @ GraphConnect ...
Graph Applications for the Enterprise, FAST - David Colebatch @ GraphConnect ...Graph Applications for the Enterprise, FAST - David Colebatch @ GraphConnect ...
Graph Applications for the Enterprise, FAST - David Colebatch @ GraphConnect ...
 
Enterprise graph applications
Enterprise graph applicationsEnterprise graph applications
Enterprise graph applications
 
Drupal, rotative numérique pour un groupe de presse
Drupal, rotative numérique pour un groupe de presseDrupal, rotative numérique pour un groupe de presse
Drupal, rotative numérique pour un groupe de presse
 
Drupal - Digital publishing platform for Press & Media group
Drupal - Digital publishing platform for Press & Media groupDrupal - Digital publishing platform for Press & Media group
Drupal - Digital publishing platform for Press & Media group
 
Butter Web Browsing with Margarine
Butter Web Browsing with MargarineButter Web Browsing with Margarine
Butter Web Browsing with Margarine
 
Cloudify Your Business
Cloudify Your BusinessCloudify Your Business
Cloudify Your Business
 
NATO IST Symposium 2013
NATO IST Symposium 2013NATO IST Symposium 2013
NATO IST Symposium 2013
 
Why and How to integrate Hadoop and NoSQL?
Why and How to integrate Hadoop and NoSQL?Why and How to integrate Hadoop and NoSQL?
Why and How to integrate Hadoop and NoSQL?
 
DevOps Nirvana: Seven Steps to a Peaceful Life on AWS (ARC210) | AWS re:Inven...
DevOps Nirvana: Seven Steps to a Peaceful Life on AWS (ARC210) | AWS re:Inven...DevOps Nirvana: Seven Steps to a Peaceful Life on AWS (ARC210) | AWS re:Inven...
DevOps Nirvana: Seven Steps to a Peaceful Life on AWS (ARC210) | AWS re:Inven...
 
Performance & Responsive Web Design
Performance & Responsive Web DesignPerformance & Responsive Web Design
Performance & Responsive Web Design
 
Secure Coding for Java - An Introduction
Secure Coding for Java - An IntroductionSecure Coding for Java - An Introduction
Secure Coding for Java - An Introduction
 
Secure Coding for Java - An introduction
Secure Coding for Java - An introductionSecure Coding for Java - An introduction
Secure Coding for Java - An introduction
 
2013 06-27-securecoding-en - jug pch
2013 06-27-securecoding-en - jug pch2013 06-27-securecoding-en - jug pch
2013 06-27-securecoding-en - jug pch
 
2013 - Matías Paterlini: Escalando PHP con sharding y Amazon Web Services
2013 - Matías Paterlini: Escalando PHP con sharding y Amazon Web Services 2013 - Matías Paterlini: Escalando PHP con sharding y Amazon Web Services
2013 - Matías Paterlini: Escalando PHP con sharding y Amazon Web Services
 
Escalando una PHP App con DB sharding - PHP Conference
Escalando una PHP App con DB sharding - PHP ConferenceEscalando una PHP App con DB sharding - PHP Conference
Escalando una PHP App con DB sharding - PHP Conference
 
Ebay: DB Capacity planning at eBay
Ebay: DB Capacity planning at eBayEbay: DB Capacity planning at eBay
Ebay: DB Capacity planning at eBay
 
Drupalcon PDX Swagger
Drupalcon PDX SwaggerDrupalcon PDX Swagger
Drupalcon PDX Swagger
 
Chicago AWS user group meetup - May 2014 at Cohesive
Chicago AWS user group meetup - May 2014 at CohesiveChicago AWS user group meetup - May 2014 at Cohesive
Chicago AWS user group meetup - May 2014 at Cohesive
 
Chicago AWS user group meetup - May 2014 at Cohesive
Chicago AWS user group meetup - May 2014 at CohesiveChicago AWS user group meetup - May 2014 at Cohesive
Chicago AWS user group meetup - May 2014 at Cohesive
 
FUTURESTACK13: What’s New and Upcoming with New Relic from Patrick Lightbody,...
FUTURESTACK13: What’s New and Upcoming with New Relic from Patrick Lightbody,...FUTURESTACK13: What’s New and Upcoming with New Relic from Patrick Lightbody,...
FUTURESTACK13: What’s New and Upcoming with New Relic from Patrick Lightbody,...
 

More from Richard Powell

Draw stuff at @jsnortheast
Draw stuff at @jsnortheastDraw stuff at @jsnortheast
Draw stuff at @jsnortheast
Richard Powell
 

More from Richard Powell (10)

Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.Backbone to React. What it says about awesome UI Code.
Backbone to React. What it says about awesome UI Code.
 
Designing user on-boarding
Designing user on-boardingDesigning user on-boarding
Designing user on-boarding
 
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert DaysData Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
 
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & RickshawTime-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
 
D3 Rickshaw and Backbone in 50 minutes
D3 Rickshaw and Backbone in 50 minutesD3 Rickshaw and Backbone in 50 minutes
D3 Rickshaw and Backbone in 50 minutes
 
Real-time collaborative drawing
Real-time collaborative drawingReal-time collaborative drawing
Real-time collaborative drawing
 
Front end-performance
Front end-performanceFront end-performance
Front end-performance
 
Angular.js, Yeomon & Grunt
Angular.js, Yeomon & GruntAngular.js, Yeomon & Grunt
Angular.js, Yeomon & Grunt
 
Draw stuff at @jsnortheast
Draw stuff at @jsnortheastDraw stuff at @jsnortheast
Draw stuff at @jsnortheast
 
HTML5 Canvas @SuperMondays, Newcastle
HTML5 Canvas @SuperMondays, NewcastleHTML5 Canvas @SuperMondays, Newcastle
HTML5 Canvas @SuperMondays, Newcastle
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

Angular js, Yeomon & Grunt