SlideShare uma empresa Scribd logo
1 de 25
Yeoman
Introducing the 3 wise men of
web development
Intro
• Web Developer
• Mobile Developer
• @jrcryer
three wise men?
Yeoman
• Modern Workflows for Modern Apps
• Version 1.0 RC1
• Three key components
• Yo
• Bower
• Grunt
Yo
• Scaffolding tool
• Similar Rails Generators
• Scaffolds project structure, defaults and Gruntfile
• Existing generators for:
• AngularJS, Chrome App, Flask, Silex, Sinatra, Firefox OS...
Yo: Generators
• Node Modules
• Available via NPM
• Rolling your own
npm search yeoman-generator
http://yeoman.io/generators.html#writing-your-first-generator
Bower
• Package Manager for the web
• Created at Twitter
• Runs over Git
• No system wide dependencies
• No cross project dependencies
• Flattens dependency tree
Bower: Dependencies
• Dependencies are documented in bower.json
• Bower CLI tool allows:
• Searching for dependencies
• Installing dependencies
• Registering packages
• Packages available for:
• jQuery, D3, three.js, Backbone, Modernizr,AngularJS...
Grunt
• JavaScript Build tool
• Automation of repetitive developer tasks
• Allows developers to test, preview and build projects
• Plugins used to mix and match per project
• Configurable tasks
Grunt: Plugins
• Node Module
• JavaScript / CoffeeScript
• Creating a plugin:
• Plugins available for:
• HTMLmin, Mocha, PHPUnit, RECESS, SCSS / LESS
http://gruntjs.com/creating-plugins
Grunt DevTools
Demo Time!
Getting Started!
• InstallingYo, Grunt and Bower:
• Installing a Generator
npm install -g yo grunt-cli bower
npm install -g generator-backbone generator-mocha
Creating a project
• Create a new empty project folder
• Scaffolding the project
mkdir -p ~/projects/backbone && cd ~/projects/backbone
yo backbone
building App
• Create a Model
• Create a Collection
• Create aView
• Create a Router
yo backbone:model url
yo backbone:collection url
yo backbone:view url
yo backbone:router url
The Router
var UrlRouter = Backbone.Router.extend({
routes: {
"" : "onAppLoad"
},
onAppLoad: function() {
var url = new UrlCollection();
var view = new UrlView({
el: '#urls',
collection: url
});
}
});
TheView
...
events: {
"submit form": "create",
},
create: function(e) {
e.preventDefault();
var input = this.$el.find('input');
var value = input.val();
if (value) {
this.collection.create({longUrl: value});
input.val("");
input.focus();
}
}
...
The Model
var UrlModel = Backbone.Model.extend({
defaults: {},
url: "https://www.googleapis.com/urlshortener/v1/url"
});
Updating theView
initialize: function() {
this.collection.on('change', this.render, this);
},
render: function() {
var list = this.$el.find('.items');
list.html('');
_.each(this.collection.models, function(model) {
list.append(this.template({model: model.toJSON()}));
}, this);
return this;
},
Adding a URL Template
<div class="url">
<span class="long">
<a href="<%= model.longUrl %>"><%= model.longUrl %></a>
</span>
<span class="short">
<a href="<%= model.id %>"><%= model.id %></a>
</span>
</div>
Adding a Dependency
• Finding a dependency:
• Installing a dependency:
bower search backbone.localStorage
bower install backbone.localStorage
The Collection
var UrlCollection = Backbone.Collection.extend({
cache: new Backbone.LocalStorage("urls"),
model: UrlModel,
initialize: function() {
this.on('change', this.cacheUrl, this);
this.add(this.cache.findAll());
},
cacheUrl: function(model) {
this.cache.create(model);
}
});
Testing
• Mocha + Expect
describe('Give a URL', function () {
it('should have a URL for Google Shortener API', function () {
var model = new UrlModel();
expect(model.url).to.eql("https://www.googleapis.com/urlshortener/v1/url");
});
});
• Running the tests:
grunt test
Preview + Building
• Previewing:
• Building:
grunt server
grunt build
Fin!

Mais conteúdo relacionado

Mais procurados

Deploy Node.js application in Heroku using Eclipse
Deploy Node.js application in Heroku using EclipseDeploy Node.js application in Heroku using Eclipse
Deploy Node.js application in Heroku using EclipseJitendra Zaa
 
Bower - A package manager for the web
Bower - A package manager for the webBower - A package manager for the web
Bower - A package manager for the webLarry Nung
 
"13 ways to run web applications on the Internet" Andrii Shumada
"13 ways to run web applications on the Internet" Andrii Shumada"13 ways to run web applications on the Internet" Andrii Shumada
"13 ways to run web applications on the Internet" Andrii ShumadaFwdays
 
Production Ready Javascript With Grunt
Production Ready Javascript With GruntProduction Ready Javascript With Grunt
Production Ready Javascript With GruntXB Software, Ltd.
 
Advanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsAdvanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsk88hudson
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpMatthew Davis
 
Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with GruntVlad Filippov
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend
 
ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!Chang W. Doh
 
Site Testing with CasperJS
Site Testing with CasperJSSite Testing with CasperJS
Site Testing with CasperJSJoseph Scott
 
How we maintain 200+ Drupal sites in Georgetown University
How we maintain 200+ Drupal sites in Georgetown UniversityHow we maintain 200+ Drupal sites in Georgetown University
How we maintain 200+ Drupal sites in Georgetown UniversityOvadiah Myrgorod
 
Puppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node APIPuppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node APIWilson Su
 
Dockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber ExampleDockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber ExampleShashikant Jagtap
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Gruntbenko
 
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Hervé Vũ Roussel
 

Mais procurados (20)

Deploy Node.js application in Heroku using Eclipse
Deploy Node.js application in Heroku using EclipseDeploy Node.js application in Heroku using Eclipse
Deploy Node.js application in Heroku using Eclipse
 
Bower - A package manager for the web
Bower - A package manager for the webBower - A package manager for the web
Bower - A package manager for the web
 
"13 ways to run web applications on the Internet" Andrii Shumada
"13 ways to run web applications on the Internet" Andrii Shumada"13 ways to run web applications on the Internet" Andrii Shumada
"13 ways to run web applications on the Internet" Andrii Shumada
 
Production Ready Javascript With Grunt
Production Ready Javascript With GruntProduction Ready Javascript With Grunt
Production Ready Javascript With Grunt
 
Advanced front-end automation with npm scripts
Advanced front-end automation with npm scriptsAdvanced front-end automation with npm scripts
Advanced front-end automation with npm scripts
 
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and GulpOptimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp
 
Preprocessor Workflow with Grunt
Preprocessor Workflow with GruntPreprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
Grunt to automate JS build
Grunt to automate JS buildGrunt to automate JS build
Grunt to automate JS build
 
ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!
 
Frontend Build Tools - CC FE & UX
Frontend Build Tools - CC FE & UXFrontend Build Tools - CC FE & UX
Frontend Build Tools - CC FE & UX
 
Angular2 ecosystem
Angular2 ecosystemAngular2 ecosystem
Angular2 ecosystem
 
Site Testing with CasperJS
Site Testing with CasperJSSite Testing with CasperJS
Site Testing with CasperJS
 
How we maintain 200+ Drupal sites in Georgetown University
How we maintain 200+ Drupal sites in Georgetown UniversityHow we maintain 200+ Drupal sites in Georgetown University
How we maintain 200+ Drupal sites in Georgetown University
 
Puppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node APIPuppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node API
 
Bower power
Bower powerBower power
Bower power
 
Dockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber ExampleDockerizing BDD : Ruby-Cucumber Example
Dockerizing BDD : Ruby-Cucumber Example
 
Front-end development automation with Grunt
Front-end development automation with GruntFront-end development automation with Grunt
Front-end development automation with Grunt
 
Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS Superfast Automated Web Testing with CasperJS & PhantomJS
Superfast Automated Web Testing with CasperJS & PhantomJS
 
Webpack DevTalk
Webpack DevTalkWebpack DevTalk
Webpack DevTalk
 

Destaque

Testing angular js
Testing angular jsTesting angular js
Testing angular jsgalan83
 
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
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
 
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
 
UrbanCode Deploy course and product overview slides
UrbanCode Deploy course and product overview slidesUrbanCode Deploy course and product overview slides
UrbanCode Deploy course and product overview slidesIBM Rational software
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 

Destaque (20)

Testing angular js
Testing angular jsTesting angular js
Testing angular js
 
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 AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
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
 
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
 
UrbanCode Deploy course and product overview slides
UrbanCode Deploy course and product overview slidesUrbanCode Deploy course and product overview slides
UrbanCode Deploy course and product overview slides
 
What is ux?
What is ux?What is ux?
What is ux?
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 

Semelhante a Yeoman

From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Introducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.jsIntroducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.jsRichard Rodger
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGuillaume Laforge
 
Back to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteBack to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteYves Goeleven
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-upTroy Miles
 
Web development - technologies and tools
Web development - technologies and toolsWeb development - technologies and tools
Web development - technologies and toolsYoann Gotthilf
 
Android gradle-build-system-overview
Android gradle-build-system-overviewAndroid gradle-build-system-overview
Android gradle-build-system-overviewKevin He
 
Introduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureIntroduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureColin Mackay
 
Practical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.jsPractical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.jsasync_io
 
Introduction to Node.js: What, why and how?
Introduction to Node.js: What, why and how?Introduction to Node.js: What, why and how?
Introduction to Node.js: What, why and how?Christian Joudrey
 
Using JHipster 4 for generating Angular/Spring Boot apps
Using JHipster 4 for generating Angular/Spring Boot appsUsing JHipster 4 for generating Angular/Spring Boot apps
Using JHipster 4 for generating Angular/Spring Boot appsYakov Fain
 
Deliver Python Apps with Docker
Deliver Python Apps with DockerDeliver Python Apps with Docker
Deliver Python Apps with DockerAnton Egorov
 
Nodejs getting started
Nodejs getting startedNodejs getting started
Nodejs getting startedTriet Ho
 
Learn Electron for Web Developers
Learn Electron for Web DevelopersLearn Electron for Web Developers
Learn Electron for Web DevelopersKyle Cearley
 
How to Contribute to Apache Usergrid
How to Contribute to Apache UsergridHow to Contribute to Apache Usergrid
How to Contribute to Apache UsergridDavid M. Johnson
 
e10sとアプリ間通信
e10sとアプリ間通信e10sとアプリ間通信
e10sとアプリ間通信Makoto Kato
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMartinSotirov
 

Semelhante a Yeoman (20)

From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Node and Azure
Node and AzureNode and Azure
Node and Azure
 
Introducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.jsIntroducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.js
 
20120816 nodejsdublin
20120816 nodejsdublin20120816 nodejsdublin
20120816 nodejsdublin
 
Google App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and GaelykGoogle App Engine Java, Groovy and Gaelyk
Google App Engine Java, Groovy and Gaelyk
 
Back to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteBack to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static website
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 
Web development - technologies and tools
Web development - technologies and toolsWeb development - technologies and tools
Web development - technologies and tools
 
Android gradle-build-system-overview
Android gradle-build-system-overviewAndroid gradle-build-system-overview
Android gradle-build-system-overview
 
Introduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azureIntroduction to node js - From "hello world" to deploying on azure
Introduction to node js - From "hello world" to deploying on azure
 
Practical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.jsPractical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.js
 
Introduction to Node.js: What, why and how?
Introduction to Node.js: What, why and how?Introduction to Node.js: What, why and how?
Introduction to Node.js: What, why and how?
 
Using JHipster 4 for generating Angular/Spring Boot apps
Using JHipster 4 for generating Angular/Spring Boot appsUsing JHipster 4 for generating Angular/Spring Boot apps
Using JHipster 4 for generating Angular/Spring Boot apps
 
Deliver Python Apps with Docker
Deliver Python Apps with DockerDeliver Python Apps with Docker
Deliver Python Apps with Docker
 
Nodejs getting started
Nodejs getting startedNodejs getting started
Nodejs getting started
 
Ember - introduction
Ember - introductionEmber - introduction
Ember - introduction
 
Learn Electron for Web Developers
Learn Electron for Web DevelopersLearn Electron for Web Developers
Learn Electron for Web Developers
 
How to Contribute to Apache Usergrid
How to Contribute to Apache UsergridHow to Contribute to Apache Usergrid
How to Contribute to Apache Usergrid
 
e10sとアプリ間通信
e10sとアプリ間通信e10sとアプリ間通信
e10sとアプリ間通信
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
 

Último

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
 
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
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
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
 
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
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
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
 
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
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
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
 
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
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
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
 

Último (20)

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
 
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...
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
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
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
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
 
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
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
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
 
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)
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
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?
 

Yeoman

  • 1. Yeoman Introducing the 3 wise men of web development
  • 2. Intro • Web Developer • Mobile Developer • @jrcryer
  • 4. Yeoman • Modern Workflows for Modern Apps • Version 1.0 RC1 • Three key components • Yo • Bower • Grunt
  • 5. Yo • Scaffolding tool • Similar Rails Generators • Scaffolds project structure, defaults and Gruntfile • Existing generators for: • AngularJS, Chrome App, Flask, Silex, Sinatra, Firefox OS...
  • 6. Yo: Generators • Node Modules • Available via NPM • Rolling your own npm search yeoman-generator http://yeoman.io/generators.html#writing-your-first-generator
  • 7. Bower • Package Manager for the web • Created at Twitter • Runs over Git • No system wide dependencies • No cross project dependencies • Flattens dependency tree
  • 8. Bower: Dependencies • Dependencies are documented in bower.json • Bower CLI tool allows: • Searching for dependencies • Installing dependencies • Registering packages • Packages available for: • jQuery, D3, three.js, Backbone, Modernizr,AngularJS...
  • 9. Grunt • JavaScript Build tool • Automation of repetitive developer tasks • Allows developers to test, preview and build projects • Plugins used to mix and match per project • Configurable tasks
  • 10. Grunt: Plugins • Node Module • JavaScript / CoffeeScript • Creating a plugin: • Plugins available for: • HTMLmin, Mocha, PHPUnit, RECESS, SCSS / LESS http://gruntjs.com/creating-plugins
  • 13. Getting Started! • InstallingYo, Grunt and Bower: • Installing a Generator npm install -g yo grunt-cli bower npm install -g generator-backbone generator-mocha
  • 14. Creating a project • Create a new empty project folder • Scaffolding the project mkdir -p ~/projects/backbone && cd ~/projects/backbone yo backbone
  • 15. building App • Create a Model • Create a Collection • Create aView • Create a Router yo backbone:model url yo backbone:collection url yo backbone:view url yo backbone:router url
  • 16. The Router var UrlRouter = Backbone.Router.extend({ routes: { "" : "onAppLoad" }, onAppLoad: function() { var url = new UrlCollection(); var view = new UrlView({ el: '#urls', collection: url }); } });
  • 17. TheView ... events: { "submit form": "create", }, create: function(e) { e.preventDefault(); var input = this.$el.find('input'); var value = input.val(); if (value) { this.collection.create({longUrl: value}); input.val(""); input.focus(); } } ...
  • 18. The Model var UrlModel = Backbone.Model.extend({ defaults: {}, url: "https://www.googleapis.com/urlshortener/v1/url" });
  • 19. Updating theView initialize: function() { this.collection.on('change', this.render, this); }, render: function() { var list = this.$el.find('.items'); list.html(''); _.each(this.collection.models, function(model) { list.append(this.template({model: model.toJSON()})); }, this); return this; },
  • 20. Adding a URL Template <div class="url"> <span class="long"> <a href="<%= model.longUrl %>"><%= model.longUrl %></a> </span> <span class="short"> <a href="<%= model.id %>"><%= model.id %></a> </span> </div>
  • 21. Adding a Dependency • Finding a dependency: • Installing a dependency: bower search backbone.localStorage bower install backbone.localStorage
  • 22. The Collection var UrlCollection = Backbone.Collection.extend({ cache: new Backbone.LocalStorage("urls"), model: UrlModel, initialize: function() { this.on('change', this.cacheUrl, this); this.add(this.cache.findAll()); }, cacheUrl: function(model) { this.cache.create(model); } });
  • 23. Testing • Mocha + Expect describe('Give a URL', function () { it('should have a URL for Google Shortener API', function () { var model = new UrlModel(); expect(model.url).to.eql("https://www.googleapis.com/urlshortener/v1/url"); }); }); • Running the tests: grunt test
  • 24. Preview + Building • Previewing: • Building: grunt server grunt build
  • 25. Fin!