SlideShare a Scribd company logo

Dreamforce 2015 Session - Angular-ifying your visualforce pages

Abhinav Gupta
Abhinav Gupta
Abhinav GuptaSalesforce MVP (8x), Architect, Blogger, & Author at Concret.io

A practical guide to being productive when using Angluar.js apps with Visualforce pages. We will demonstrate best practices for structuring Single Page Apps inside your Visualforce pages for static resources, mavensmate resource bundles and resource editing with Aside.io & the Welkin suite. By the end of the session you will understand the best way to use Angular.js for your projects. More on this one here: http://www.tgerm.com/2015/09/slides-code-my-dreamforce-2015-session-angularjs-visualforce.html

Dreamforce 2015 Session - Angular-ifying your visualforce pages

1 of 30
Download to read offline
Angular-ifying your
Visualforce pages
Abhinav Gupta
@abhinavguptas
Bringing productivity and fun of web development into Visualforce pages.
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize
or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the
forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any
projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding
strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or
technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for
our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate
of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with
completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability
to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our
limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential
factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year
and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are
available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and
may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are
currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Safe Harbor
Salesforce MVP (5x) & Architect
Founder of Concretio Apps
@abhinavguptas
Speakers
Angular app structuring, industry standard guidelines from
Google’s Angular style guide.
Ionic template apps.
Angular App Structuring in “Salesforce” reviewed in 4 approaches with pros/cons.
Approach 1: Using couple of static resources and supporting VF pages per SPA.
Approach 2: Mavensmate resource bundles.
Approach 3: Aside.io zipped resource editing.
Approach 4: Welkin Suite zipped resource editing.
Live demos of above approaches in a Salesforce org.
Agenda
Angular App Structuring
How web in general understands Angular app structure
App structure for simple app with 1 directive and 1 service.
sampleapp
├── app.css
├── app.js
├── app-controller.js
├── app-controller_test.js
├── components
│ └── foo
│ ├── foo.js
│ ├── foo-directive.js
│ ├── foo-directive_test.js
│ ├── foo-service_test.js
│ ├── foo-service_test.js
├── index.html
Google’s Angular Style Guide
http://google.github.io/styleguide/angularjs-google-style.html

Recommended

Angular-ifying Your Visualforce Pages
Angular-ifying Your Visualforce PagesAngular-ifying Your Visualforce Pages
Angular-ifying Your Visualforce PagesSalesforce Developers
 
S1 and Visualforce Publisher Actions
S1 and Visualforce Publisher ActionsS1 and Visualforce Publisher Actions
S1 and Visualforce Publisher ActionsPeter Chittum
 
Chatter Publisher Actions and Salesforce1
Chatter Publisher Actions and Salesforce1Chatter Publisher Actions and Salesforce1
Chatter Publisher Actions and Salesforce1Salesforce Developers
 
Salesforce1 UX Overview for ISVs and Partners
Salesforce1 UX Overview for ISVs and PartnersSalesforce1 UX Overview for ISVs and Partners
Salesforce1 UX Overview for ISVs and PartnersSalesforce Partners
 
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJS
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJSNgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJS
NgForce: A JS Library For Quickly Building Salesforce Apps Using AngularJSSalesforce Developers
 
Visualforce in Salesforce1: Optimizing your User Interface for Mobile
Visualforce in Salesforce1: Optimizing your User Interface for MobileVisualforce in Salesforce1: Optimizing your User Interface for Mobile
Visualforce in Salesforce1: Optimizing your User Interface for MobileSalesforce Developers
 

More Related Content

What's hot

Roadmap Lightning Updates (November 3, 2016)
Roadmap Lightning Updates (November 3, 2016)Roadmap Lightning Updates (November 3, 2016)
Roadmap Lightning Updates (November 3, 2016)Salesforce Partners
 
Make Your Visualforce Pages Responsive
Make Your Visualforce Pages ResponsiveMake Your Visualforce Pages Responsive
Make Your Visualforce Pages ResponsiveSalesforce Developers
 
Taking Flow to the Next Level with Just Enough Code
Taking Flow to the Next Level with Just Enough CodeTaking Flow to the Next Level with Just Enough Code
Taking Flow to the Next Level with Just Enough CodeSalesforce Developers
 
Mini-Workshop: Responsive Web Design with Visualforce and Bootstrap
Mini-Workshop: Responsive Web Design with Visualforce and BootstrapMini-Workshop: Responsive Web Design with Visualforce and Bootstrap
Mini-Workshop: Responsive Web Design with Visualforce and BootstrapKeir Bowden
 
Force.com Canvas: Salesforce1, SAML, & Apex...Oh My!
Force.com Canvas: Salesforce1, SAML, & Apex...Oh My!Force.com Canvas: Salesforce1, SAML, & Apex...Oh My!
Force.com Canvas: Salesforce1, SAML, & Apex...Oh My!Salesforce Developers
 
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSalesforce Developers
 
Dreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap
Dreamforce 14 : Responsive Design with Visualforce and Twitter BootstrapDreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap
Dreamforce 14 : Responsive Design with Visualforce and Twitter BootstrapKeir Bowden
 
Create Kpi fiori apps
Create Kpi fiori appsCreate Kpi fiori apps
Create Kpi fiori appsAjay593954
 
Making External Web Pages Interact With Visualforce
Making External Web Pages Interact With VisualforceMaking External Web Pages Interact With Visualforce
Making External Web Pages Interact With VisualforceSalesforce Developers
 
JavaScript Integration with Visualforce
JavaScript Integration with VisualforceJavaScript Integration with Visualforce
JavaScript Integration with VisualforceSalesforce Developers
 
Building Cross-platform Mobile Apps with Force.com and PhoneGap
Building Cross-platform Mobile Apps with Force.com and PhoneGapBuilding Cross-platform Mobile Apps with Force.com and PhoneGap
Building Cross-platform Mobile Apps with Force.com and PhoneGapSalesforce Developers
 
Building Cross-platform Mobile Apps with Force.com and PhoneGap
Building Cross-platform Mobile Apps with Force.com and PhoneGapBuilding Cross-platform Mobile Apps with Force.com and PhoneGap
Building Cross-platform Mobile Apps with Force.com and PhoneGapSalesforce Developers
 
Salesforce.com API Series: Service Cloud Console Deep Dive
Salesforce.com API Series: Service Cloud Console Deep DiveSalesforce.com API Series: Service Cloud Console Deep Dive
Salesforce.com API Series: Service Cloud Console Deep DiveSalesforce Developers
 
Spring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSpring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSalesforce Developers
 
ISV Tech Enablement Webinar April 2017
ISV Tech Enablement Webinar April 2017ISV Tech Enablement Webinar April 2017
ISV Tech Enablement Webinar April 2017Salesforce Partners
 
Intro to the Salesforce Mobile SDK: Building iOS Apps Webinar
Intro to the Salesforce Mobile SDK: Building iOS Apps WebinarIntro to the Salesforce Mobile SDK: Building iOS Apps Webinar
Intro to the Salesforce Mobile SDK: Building iOS Apps WebinarSalesforce Developers
 
Process Automation on Lightning Platform Workshop
Process Automation on Lightning Platform WorkshopProcess Automation on Lightning Platform Workshop
Process Automation on Lightning Platform WorkshopSalesforce Developers
 
How to guide-fiori-mm_en_xx
How to guide-fiori-mm_en_xxHow to guide-fiori-mm_en_xx
How to guide-fiori-mm_en_xxLokesh Modem
 
Make Your App Lightning Ready with Winter '17 (December 8, 2016)
Make Your App Lightning Ready with Winter '17 (December 8, 2016)Make Your App Lightning Ready with Winter '17 (December 8, 2016)
Make Your App Lightning Ready with Winter '17 (December 8, 2016)Salesforce Partners
 

What's hot (20)

Roadmap Lightning Updates (November 3, 2016)
Roadmap Lightning Updates (November 3, 2016)Roadmap Lightning Updates (November 3, 2016)
Roadmap Lightning Updates (November 3, 2016)
 
Make Your Visualforce Pages Responsive
Make Your Visualforce Pages ResponsiveMake Your Visualforce Pages Responsive
Make Your Visualforce Pages Responsive
 
Taking Flow to the Next Level with Just Enough Code
Taking Flow to the Next Level with Just Enough CodeTaking Flow to the Next Level with Just Enough Code
Taking Flow to the Next Level with Just Enough Code
 
Mini-Workshop: Responsive Web Design with Visualforce and Bootstrap
Mini-Workshop: Responsive Web Design with Visualforce and BootstrapMini-Workshop: Responsive Web Design with Visualforce and Bootstrap
Mini-Workshop: Responsive Web Design with Visualforce and Bootstrap
 
Force.com Canvas: Salesforce1, SAML, & Apex...Oh My!
Force.com Canvas: Salesforce1, SAML, & Apex...Oh My!Force.com Canvas: Salesforce1, SAML, & Apex...Oh My!
Force.com Canvas: Salesforce1, SAML, & Apex...Oh My!
 
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview Webinar
 
Dreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap
Dreamforce 14 : Responsive Design with Visualforce and Twitter BootstrapDreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap
Dreamforce 14 : Responsive Design with Visualforce and Twitter Bootstrap
 
Create Kpi fiori apps
Create Kpi fiori appsCreate Kpi fiori apps
Create Kpi fiori apps
 
Making External Web Pages Interact With Visualforce
Making External Web Pages Interact With VisualforceMaking External Web Pages Interact With Visualforce
Making External Web Pages Interact With Visualforce
 
JavaScript Integration with Visualforce
JavaScript Integration with VisualforceJavaScript Integration with Visualforce
JavaScript Integration with Visualforce
 
Building Cross-platform Mobile Apps with Force.com and PhoneGap
Building Cross-platform Mobile Apps with Force.com and PhoneGapBuilding Cross-platform Mobile Apps with Force.com and PhoneGap
Building Cross-platform Mobile Apps with Force.com and PhoneGap
 
Building Cross-platform Mobile Apps with Force.com and PhoneGap
Building Cross-platform Mobile Apps with Force.com and PhoneGapBuilding Cross-platform Mobile Apps with Force.com and PhoneGap
Building Cross-platform Mobile Apps with Force.com and PhoneGap
 
Salesforce.com API Series: Service Cloud Console Deep Dive
Salesforce.com API Series: Service Cloud Console Deep DiveSalesforce.com API Series: Service Cloud Console Deep Dive
Salesforce.com API Series: Service Cloud Console Deep Dive
 
Spring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSpring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview Webinar
 
ISV Tech Enablement Webinar April 2017
ISV Tech Enablement Webinar April 2017ISV Tech Enablement Webinar April 2017
ISV Tech Enablement Webinar April 2017
 
Intro to the Salesforce Mobile SDK: Building iOS Apps Webinar
Intro to the Salesforce Mobile SDK: Building iOS Apps WebinarIntro to the Salesforce Mobile SDK: Building iOS Apps Webinar
Intro to the Salesforce Mobile SDK: Building iOS Apps Webinar
 
Process Automation on Lightning Platform Workshop
Process Automation on Lightning Platform WorkshopProcess Automation on Lightning Platform Workshop
Process Automation on Lightning Platform Workshop
 
How to guide-fiori-mm_en_xx
How to guide-fiori-mm_en_xxHow to guide-fiori-mm_en_xx
How to guide-fiori-mm_en_xx
 
Make Your App Lightning Ready with Winter '17 (December 8, 2016)
Make Your App Lightning Ready with Winter '17 (December 8, 2016)Make Your App Lightning Ready with Winter '17 (December 8, 2016)
Make Your App Lightning Ready with Winter '17 (December 8, 2016)
 
Pilots for Partners
Pilots for PartnersPilots for Partners
Pilots for Partners
 

Viewers also liked

Advanced Apex Webinar
Advanced Apex WebinarAdvanced Apex Webinar
Advanced Apex Webinarpbattisson
 
Salesforce1 + VR = Immersive Data Visualization
Salesforce1 + VR = Immersive Data VisualizationSalesforce1 + VR = Immersive Data Visualization
Salesforce1 + VR = Immersive Data Visualizationpbattisson
 
Df14 Building Machine Learning Systems with Apex
Df14 Building Machine Learning Systems with ApexDf14 Building Machine Learning Systems with Apex
Df14 Building Machine Learning Systems with Apexpbattisson
 
How Force.com developers do more in less time
How Force.com developers do more in less timeHow Force.com developers do more in less time
How Force.com developers do more in less timeAbhinav Gupta
 
Release & Change management in salesforce
Release & Change management in salesforceRelease & Change management in salesforce
Release & Change management in salesforceKalyan Lanka ☁
 
Microservice-based Architecture on the Salesforce App Cloud
Microservice-based Architecture on the Salesforce App CloudMicroservice-based Architecture on the Salesforce App Cloud
Microservice-based Architecture on the Salesforce App Cloudpbattisson
 

Viewers also liked (7)

Advanced Apex Webinar
Advanced Apex WebinarAdvanced Apex Webinar
Advanced Apex Webinar
 
Salesforce1 + VR = Immersive Data Visualization
Salesforce1 + VR = Immersive Data VisualizationSalesforce1 + VR = Immersive Data Visualization
Salesforce1 + VR = Immersive Data Visualization
 
Df14 Building Machine Learning Systems with Apex
Df14 Building Machine Learning Systems with ApexDf14 Building Machine Learning Systems with Apex
Df14 Building Machine Learning Systems with Apex
 
Play with force.com metadata
Play with force.com metadataPlay with force.com metadata
Play with force.com metadata
 
How Force.com developers do more in less time
How Force.com developers do more in less timeHow Force.com developers do more in less time
How Force.com developers do more in less time
 
Release & Change management in salesforce
Release & Change management in salesforceRelease & Change management in salesforce
Release & Change management in salesforce
 
Microservice-based Architecture on the Salesforce App Cloud
Microservice-based Architecture on the Salesforce App CloudMicroservice-based Architecture on the Salesforce App Cloud
Microservice-based Architecture on the Salesforce App Cloud
 

Similar to Dreamforce 2015 Session - Angular-ifying your visualforce pages

AngularJS App In Two Weeks
AngularJS App In Two WeeksAngularJS App In Two Weeks
AngularJS App In Two WeeksPeter Chittum
 
Building JavaScript Applications on the Salesforce1 Platform
Building JavaScript Applications on the Salesforce1 PlatformBuilding JavaScript Applications on the Salesforce1 Platform
Building JavaScript Applications on the Salesforce1 PlatformSalesforce Developers
 
Igor Androsov on Mobilizing Salesforce Data with 12 Factor App on Heroku
Igor Androsov on Mobilizing Salesforce Data with 12 Factor App on HerokuIgor Androsov on Mobilizing Salesforce Data with 12 Factor App on Heroku
Igor Androsov on Mobilizing Salesforce Data with 12 Factor App on HerokuIgor Androsov
 
Singapore dev user group
Singapore   dev user groupSingapore   dev user group
Singapore dev user groupTroy Sellers
 
Enterprise Heroku for Java
Enterprise Heroku for JavaEnterprise Heroku for Java
Enterprise Heroku for JavaAyumu Aizawa
 
Lightning Web Components - A new era, René Winkelmeyer
Lightning Web Components - A new era, René WinkelmeyerLightning Web Components - A new era, René Winkelmeyer
Lightning Web Components - A new era, René WinkelmeyerCzechDreamin
 
Spring 17 ISV Release Readiness (February 16, 2017)
Spring 17 ISV Release Readiness (February 16, 2017)Spring 17 ISV Release Readiness (February 16, 2017)
Spring 17 ISV Release Readiness (February 16, 2017)Salesforce Partners
 
TDX19 - Accelerate DevOps with GitLab and Salesforce
TDX19 - Accelerate DevOps with GitLab and SalesforceTDX19 - Accelerate DevOps with GitLab and Salesforce
TDX19 - Accelerate DevOps with GitLab and SalesforceDoug Ayers
 
Hands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.comHands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.comSalesforce Developers
 
ISV Lightning Webinar Series - Part 1 (December 1, 2015)
ISV Lightning Webinar Series - Part 1 (December 1, 2015)ISV Lightning Webinar Series - Part 1 (December 1, 2015)
ISV Lightning Webinar Series - Part 1 (December 1, 2015)Salesforce Partners
 
Enterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsSalesforce Developers
 
Force.com Friday: Intro to Force.com
Force.com Friday: Intro to Force.comForce.com Friday: Intro to Force.com
Force.com Friday: Intro to Force.comSalesforce Developers
 
Migrating Visualforce Pages to Lightning
Migrating Visualforce Pages to LightningMigrating Visualforce Pages to Lightning
Migrating Visualforce Pages to LightningSalesforce Developers
 
Forcelandia 2016 Wave App Development
Forcelandia 2016   Wave App DevelopmentForcelandia 2016   Wave App Development
Forcelandia 2016 Wave App DevelopmentSkip Sauls
 
Lightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE EvolvedLightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE EvolvedSalesforce Developers
 
Heroku Introduction: Scaling customer facing apps & services
Heroku Introduction: Scaling customer facing apps & servicesHeroku Introduction: Scaling customer facing apps & services
Heroku Introduction: Scaling customer facing apps & servicesJohn Stevenson
 
San Diego Salesforce User Group - Lightning Overview
San Diego Salesforce User Group - Lightning OverviewSan Diego Salesforce User Group - Lightning Overview
San Diego Salesforce User Group - Lightning OverviewVivek Chawla
 

Similar to Dreamforce 2015 Session - Angular-ifying your visualforce pages (20)

AngularJS App In Two Weeks
AngularJS App In Two WeeksAngularJS App In Two Weeks
AngularJS App In Two Weeks
 
Building JavaScript Applications on the Salesforce1 Platform
Building JavaScript Applications on the Salesforce1 PlatformBuilding JavaScript Applications on the Salesforce1 Platform
Building JavaScript Applications on the Salesforce1 Platform
 
Igor Androsov on Mobilizing Salesforce Data with 12 Factor App on Heroku
Igor Androsov on Mobilizing Salesforce Data with 12 Factor App on HerokuIgor Androsov on Mobilizing Salesforce Data with 12 Factor App on Heroku
Igor Androsov on Mobilizing Salesforce Data with 12 Factor App on Heroku
 
Singapore dev user group
Singapore   dev user groupSingapore   dev user group
Singapore dev user group
 
Enterprise Heroku for Java
Enterprise Heroku for JavaEnterprise Heroku for Java
Enterprise Heroku for Java
 
Lightning Web Components - A new era, René Winkelmeyer
Lightning Web Components - A new era, René WinkelmeyerLightning Web Components - A new era, René Winkelmeyer
Lightning Web Components - A new era, René Winkelmeyer
 
Spring 17 ISV Release Readiness (February 16, 2017)
Spring 17 ISV Release Readiness (February 16, 2017)Spring 17 ISV Release Readiness (February 16, 2017)
Spring 17 ISV Release Readiness (February 16, 2017)
 
TDX19 - Accelerate DevOps with GitLab and Salesforce
TDX19 - Accelerate DevOps with GitLab and SalesforceTDX19 - Accelerate DevOps with GitLab and Salesforce
TDX19 - Accelerate DevOps with GitLab and Salesforce
 
Hands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.comHands-on Workshop: Intermediate Development with Heroku and Force.com
Hands-on Workshop: Intermediate Development with Heroku and Force.com
 
ISV Lightning Webinar Series - Part 1 (December 1, 2015)
ISV Lightning Webinar Series - Part 1 (December 1, 2015)ISV Lightning Webinar Series - Part 1 (December 1, 2015)
ISV Lightning Webinar Series - Part 1 (December 1, 2015)
 
Enterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web ComponentsEnterprise-grade UI with open source Lightning Web Components
Enterprise-grade UI with open source Lightning Web Components
 
Force.com Friday: Intro to Force.com
Force.com Friday: Intro to Force.comForce.com Friday: Intro to Force.com
Force.com Friday: Intro to Force.com
 
Migrating Visualforce Pages to Lightning
Migrating Visualforce Pages to LightningMigrating Visualforce Pages to Lightning
Migrating Visualforce Pages to Lightning
 
Spring '16 Release Preview Webinar
Spring '16 Release Preview Webinar Spring '16 Release Preview Webinar
Spring '16 Release Preview Webinar
 
Forcelandia 2016 Wave App Development
Forcelandia 2016   Wave App DevelopmentForcelandia 2016   Wave App Development
Forcelandia 2016 Wave App Development
 
Salesforce platform session 2
 Salesforce platform session 2 Salesforce platform session 2
Salesforce platform session 2
 
Lightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE EvolvedLightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE Evolved
 
Force.com Friday - Intro to Visualforce
Force.com Friday - Intro to VisualforceForce.com Friday - Intro to Visualforce
Force.com Friday - Intro to Visualforce
 
Heroku Introduction: Scaling customer facing apps & services
Heroku Introduction: Scaling customer facing apps & servicesHeroku Introduction: Scaling customer facing apps & services
Heroku Introduction: Scaling customer facing apps & services
 
San Diego Salesforce User Group - Lightning Overview
San Diego Salesforce User Group - Lightning OverviewSan Diego Salesforce User Group - Lightning Overview
San Diego Salesforce User Group - Lightning Overview
 

More from Abhinav Gupta

What is Einstein Data Detect?
What is Einstein Data Detect?What is Einstein Data Detect?
What is Einstein Data Detect?Abhinav Gupta
 
Safeguarding Salesforce: Mastering Data Security with Data Mask
Safeguarding Salesforce: Mastering Data Security with Data MaskSafeguarding Salesforce: Mastering Data Security with Data Mask
Safeguarding Salesforce: Mastering Data Security with Data MaskAbhinav Gupta
 
🤖 Understanding 4 Waves of AI
🤖 Understanding 4 Waves of AI 🤖 Understanding 4 Waves of AI
🤖 Understanding 4 Waves of AI Abhinav Gupta
 
AI & Evolving Customer Trust Dynamics (1).pdf
AI & Evolving Customer Trust Dynamics  (1).pdfAI & Evolving Customer Trust Dynamics  (1).pdf
AI & Evolving Customer Trust Dynamics (1).pdfAbhinav Gupta
 
Salesforce Functions History - Launch to Retirement (2019-2023)
Salesforce Functions History - Launch to Retirement (2019-2023)Salesforce Functions History - Launch to Retirement (2019-2023)
Salesforce Functions History - Launch to Retirement (2019-2023)Abhinav Gupta
 
Unlocking the Puzzle of Modern Customer Wants.pdf
Unlocking the Puzzle of Modern  Customer Wants.pdfUnlocking the Puzzle of Modern  Customer Wants.pdf
Unlocking the Puzzle of Modern Customer Wants.pdfAbhinav Gupta
 
NFT Collectors - Understanding AI Puke Art
NFT Collectors - Understanding AI Puke ArtNFT Collectors - Understanding AI Puke Art
NFT Collectors - Understanding AI Puke ArtAbhinav Gupta
 
What’s Web3 for Salesforce?
What’s Web3 for Salesforce?What’s Web3 for Salesforce?
What’s Web3 for Salesforce?Abhinav Gupta
 
Generative AI Art - The Dark Side
Generative AI Art - The Dark SideGenerative AI Art - The Dark Side
Generative AI Art - The Dark SideAbhinav Gupta
 
Whats, Whys and Hows of NFTs?
Whats, Whys and Hows of NFTs?Whats, Whys and Hows of NFTs?
Whats, Whys and Hows of NFTs?Abhinav Gupta
 
Mental Peace at Work during Pandemic
Mental Peace at Work during PandemicMental Peace at Work during Pandemic
Mental Peace at Work during PandemicAbhinav Gupta
 
Salesforce restriction rules <2 min Summary
Salesforce restriction rules <2 min SummarySalesforce restriction rules <2 min Summary
Salesforce restriction rules <2 min SummaryAbhinav Gupta
 
Simplified CI/CD Flows for Salesforce via SFDX - Downunder Dreamin - Sydney
Simplified CI/CD Flows for Salesforce via SFDX - Downunder Dreamin - SydneySimplified CI/CD Flows for Salesforce via SFDX - Downunder Dreamin - Sydney
Simplified CI/CD Flows for Salesforce via SFDX - Downunder Dreamin - SydneyAbhinav Gupta
 
Salesforce CI (Continuous Integration) - SFDX + Bitbucket Pipelines
Salesforce CI (Continuous Integration) - SFDX + Bitbucket PipelinesSalesforce CI (Continuous Integration) - SFDX + Bitbucket Pipelines
Salesforce CI (Continuous Integration) - SFDX + Bitbucket PipelinesAbhinav Gupta
 
Building a layoff proof career
Building a layoff proof careerBuilding a layoff proof career
Building a layoff proof careerAbhinav Gupta
 
Fun with Jenkins & Salesforce
Fun with Jenkins & SalesforceFun with Jenkins & Salesforce
Fun with Jenkins & SalesforceAbhinav Gupta
 
Intro to Apex - Salesforce Force Friday Webinar
Intro to Apex - Salesforce Force Friday Webinar Intro to Apex - Salesforce Force Friday Webinar
Intro to Apex - Salesforce Force Friday Webinar Abhinav Gupta
 
Building Chrome Extensions For Salesforce
Building Chrome Extensions  For SalesforceBuilding Chrome Extensions  For Salesforce
Building Chrome Extensions For SalesforceAbhinav Gupta
 
Learning salesforce-mobile-way
Learning salesforce-mobile-wayLearning salesforce-mobile-way
Learning salesforce-mobile-wayAbhinav Gupta
 
Parsing XML & JSON in Apex
Parsing XML & JSON in ApexParsing XML & JSON in Apex
Parsing XML & JSON in ApexAbhinav Gupta
 

More from Abhinav Gupta (20)

What is Einstein Data Detect?
What is Einstein Data Detect?What is Einstein Data Detect?
What is Einstein Data Detect?
 
Safeguarding Salesforce: Mastering Data Security with Data Mask
Safeguarding Salesforce: Mastering Data Security with Data MaskSafeguarding Salesforce: Mastering Data Security with Data Mask
Safeguarding Salesforce: Mastering Data Security with Data Mask
 
🤖 Understanding 4 Waves of AI
🤖 Understanding 4 Waves of AI 🤖 Understanding 4 Waves of AI
🤖 Understanding 4 Waves of AI
 
AI & Evolving Customer Trust Dynamics (1).pdf
AI & Evolving Customer Trust Dynamics  (1).pdfAI & Evolving Customer Trust Dynamics  (1).pdf
AI & Evolving Customer Trust Dynamics (1).pdf
 
Salesforce Functions History - Launch to Retirement (2019-2023)
Salesforce Functions History - Launch to Retirement (2019-2023)Salesforce Functions History - Launch to Retirement (2019-2023)
Salesforce Functions History - Launch to Retirement (2019-2023)
 
Unlocking the Puzzle of Modern Customer Wants.pdf
Unlocking the Puzzle of Modern  Customer Wants.pdfUnlocking the Puzzle of Modern  Customer Wants.pdf
Unlocking the Puzzle of Modern Customer Wants.pdf
 
NFT Collectors - Understanding AI Puke Art
NFT Collectors - Understanding AI Puke ArtNFT Collectors - Understanding AI Puke Art
NFT Collectors - Understanding AI Puke Art
 
What’s Web3 for Salesforce?
What’s Web3 for Salesforce?What’s Web3 for Salesforce?
What’s Web3 for Salesforce?
 
Generative AI Art - The Dark Side
Generative AI Art - The Dark SideGenerative AI Art - The Dark Side
Generative AI Art - The Dark Side
 
Whats, Whys and Hows of NFTs?
Whats, Whys and Hows of NFTs?Whats, Whys and Hows of NFTs?
Whats, Whys and Hows of NFTs?
 
Mental Peace at Work during Pandemic
Mental Peace at Work during PandemicMental Peace at Work during Pandemic
Mental Peace at Work during Pandemic
 
Salesforce restriction rules <2 min Summary
Salesforce restriction rules <2 min SummarySalesforce restriction rules <2 min Summary
Salesforce restriction rules <2 min Summary
 
Simplified CI/CD Flows for Salesforce via SFDX - Downunder Dreamin - Sydney
Simplified CI/CD Flows for Salesforce via SFDX - Downunder Dreamin - SydneySimplified CI/CD Flows for Salesforce via SFDX - Downunder Dreamin - Sydney
Simplified CI/CD Flows for Salesforce via SFDX - Downunder Dreamin - Sydney
 
Salesforce CI (Continuous Integration) - SFDX + Bitbucket Pipelines
Salesforce CI (Continuous Integration) - SFDX + Bitbucket PipelinesSalesforce CI (Continuous Integration) - SFDX + Bitbucket Pipelines
Salesforce CI (Continuous Integration) - SFDX + Bitbucket Pipelines
 
Building a layoff proof career
Building a layoff proof careerBuilding a layoff proof career
Building a layoff proof career
 
Fun with Jenkins & Salesforce
Fun with Jenkins & SalesforceFun with Jenkins & Salesforce
Fun with Jenkins & Salesforce
 
Intro to Apex - Salesforce Force Friday Webinar
Intro to Apex - Salesforce Force Friday Webinar Intro to Apex - Salesforce Force Friday Webinar
Intro to Apex - Salesforce Force Friday Webinar
 
Building Chrome Extensions For Salesforce
Building Chrome Extensions  For SalesforceBuilding Chrome Extensions  For Salesforce
Building Chrome Extensions For Salesforce
 
Learning salesforce-mobile-way
Learning salesforce-mobile-wayLearning salesforce-mobile-way
Learning salesforce-mobile-way
 
Parsing XML & JSON in Apex
Parsing XML & JSON in ApexParsing XML & JSON in Apex
Parsing XML & JSON in Apex
 

Recently uploaded

Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptxForklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptxbriancriswell1979
 
Scaling up renewable energy investments in West Africa
Scaling up renewable energy investments in West AfricaScaling up renewable energy investments in West Africa
Scaling up renewable energy investments in West AfricaFrancois Stepman
 
Space expansion: cultural considerations, long term perspectives, and spiritu...
Space expansion: cultural considerations, long term perspectives, and spiritu...Space expansion: cultural considerations, long term perspectives, and spiritu...
Space expansion: cultural considerations, long term perspectives, and spiritu...Giulio Prisco
 
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...Francois Stepman
 
DAY 05 Book of Revelation 2-18-24 PPT.pptx
DAY 05 Book of Revelation 2-18-24 PPT.pptxDAY 05 Book of Revelation 2-18-24 PPT.pptx
DAY 05 Book of Revelation 2-18-24 PPT.pptxFamilyWorshipCenterD
 
"SACRED WAY" Athens - VENUE- presentation
"SACRED WAY" Athens - VENUE- presentation"SACRED WAY" Athens - VENUE- presentation
"SACRED WAY" Athens - VENUE- presentationVicky Evangeliou
 
AWS RDS Data API and CloudTrail. Who drop the table_.pdf
AWS RDS Data API and CloudTrail. Who drop the table_.pdfAWS RDS Data API and CloudTrail. Who drop the table_.pdf
AWS RDS Data API and CloudTrail. Who drop the table_.pdfVladimir Samoylov
 
1.2 Ingredients Used for Sandwiches 1.3 Culinary Terms.pptx
1.2 Ingredients Used for Sandwiches 1.3 Culinary Terms.pptx1.2 Ingredients Used for Sandwiches 1.3 Culinary Terms.pptx
1.2 Ingredients Used for Sandwiches 1.3 Culinary Terms.pptxNinia
 
Partnerships for Resilient Prosperity in the Caribbean
Partnerships for Resilient Prosperity in the CaribbeanPartnerships for Resilient Prosperity in the Caribbean
Partnerships for Resilient Prosperity in the CaribbeanCaribbean Development Bank
 
Ammunition and it's types and use in forensic ballistics
Ammunition and it's types and use in forensic ballisticsAmmunition and it's types and use in forensic ballistics
Ammunition and it's types and use in forensic ballisticsshubhamdwivedi7521
 
ONLINE RESORT BOOKING SYSTEM WEBSITE 1.pptx
ONLINE RESORT BOOKING SYSTEM WEBSITE 1.pptxONLINE RESORT BOOKING SYSTEM WEBSITE 1.pptx
ONLINE RESORT BOOKING SYSTEM WEBSITE 1.pptxDivyaPatel621561
 
Present and Future Requisites for Prosperity in the Caribbean
Present and Future Requisites for Prosperity in the CaribbeanPresent and Future Requisites for Prosperity in the Caribbean
Present and Future Requisites for Prosperity in the CaribbeanCaribbean Development Bank
 
KKrish - DOVE Leadership Program Concept
KKrish - DOVE Leadership Program ConceptKKrish - DOVE Leadership Program Concept
KKrish - DOVE Leadership Program ConceptKarthik Krishna
 
Supporting Resilient Prosperity in the Caribbean
Supporting Resilient Prosperity in the CaribbeanSupporting Resilient Prosperity in the Caribbean
Supporting Resilient Prosperity in the CaribbeanCaribbean Development Bank
 

Recently uploaded (15)

Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptxForklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
Forklift Telehandler ONLY Operator Training Revised_7.6.2022.pptx
 
Scaling up renewable energy investments in West Africa
Scaling up renewable energy investments in West AfricaScaling up renewable energy investments in West Africa
Scaling up renewable energy investments in West Africa
 
An Inviting Church
An Inviting ChurchAn Inviting Church
An Inviting Church
 
Space expansion: cultural considerations, long term perspectives, and spiritu...
Space expansion: cultural considerations, long term perspectives, and spiritu...Space expansion: cultural considerations, long term perspectives, and spiritu...
Space expansion: cultural considerations, long term perspectives, and spiritu...
 
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
West Africa Scene Setting African Continental Master Plan (CMP) for electrici...
 
DAY 05 Book of Revelation 2-18-24 PPT.pptx
DAY 05 Book of Revelation 2-18-24 PPT.pptxDAY 05 Book of Revelation 2-18-24 PPT.pptx
DAY 05 Book of Revelation 2-18-24 PPT.pptx
 
"SACRED WAY" Athens - VENUE- presentation
"SACRED WAY" Athens - VENUE- presentation"SACRED WAY" Athens - VENUE- presentation
"SACRED WAY" Athens - VENUE- presentation
 
AWS RDS Data API and CloudTrail. Who drop the table_.pdf
AWS RDS Data API and CloudTrail. Who drop the table_.pdfAWS RDS Data API and CloudTrail. Who drop the table_.pdf
AWS RDS Data API and CloudTrail. Who drop the table_.pdf
 
1.2 Ingredients Used for Sandwiches 1.3 Culinary Terms.pptx
1.2 Ingredients Used for Sandwiches 1.3 Culinary Terms.pptx1.2 Ingredients Used for Sandwiches 1.3 Culinary Terms.pptx
1.2 Ingredients Used for Sandwiches 1.3 Culinary Terms.pptx
 
Partnerships for Resilient Prosperity in the Caribbean
Partnerships for Resilient Prosperity in the CaribbeanPartnerships for Resilient Prosperity in the Caribbean
Partnerships for Resilient Prosperity in the Caribbean
 
Ammunition and it's types and use in forensic ballistics
Ammunition and it's types and use in forensic ballisticsAmmunition and it's types and use in forensic ballistics
Ammunition and it's types and use in forensic ballistics
 
ONLINE RESORT BOOKING SYSTEM WEBSITE 1.pptx
ONLINE RESORT BOOKING SYSTEM WEBSITE 1.pptxONLINE RESORT BOOKING SYSTEM WEBSITE 1.pptx
ONLINE RESORT BOOKING SYSTEM WEBSITE 1.pptx
 
Present and Future Requisites for Prosperity in the Caribbean
Present and Future Requisites for Prosperity in the CaribbeanPresent and Future Requisites for Prosperity in the Caribbean
Present and Future Requisites for Prosperity in the Caribbean
 
KKrish - DOVE Leadership Program Concept
KKrish - DOVE Leadership Program ConceptKKrish - DOVE Leadership Program Concept
KKrish - DOVE Leadership Program Concept
 
Supporting Resilient Prosperity in the Caribbean
Supporting Resilient Prosperity in the CaribbeanSupporting Resilient Prosperity in the Caribbean
Supporting Resilient Prosperity in the Caribbean
 

Dreamforce 2015 Session - Angular-ifying your visualforce pages

  • 1. Angular-ifying your Visualforce pages Abhinav Gupta @abhinavguptas Bringing productivity and fun of web development into Visualforce pages.
  • 2. Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements. Safe Harbor
  • 3. Salesforce MVP (5x) & Architect Founder of Concretio Apps @abhinavguptas Speakers
  • 4. Angular app structuring, industry standard guidelines from Google’s Angular style guide. Ionic template apps. Angular App Structuring in “Salesforce” reviewed in 4 approaches with pros/cons. Approach 1: Using couple of static resources and supporting VF pages per SPA. Approach 2: Mavensmate resource bundles. Approach 3: Aside.io zipped resource editing. Approach 4: Welkin Suite zipped resource editing. Live demos of above approaches in a Salesforce org. Agenda
  • 5. Angular App Structuring How web in general understands Angular app structure
  • 6. App structure for simple app with 1 directive and 1 service. sampleapp ├── app.css ├── app.js ├── app-controller.js ├── app-controller_test.js ├── components │ └── foo │ ├── foo.js │ ├── foo-directive.js │ ├── foo-directive_test.js │ ├── foo-service_test.js │ ├── foo-service_test.js ├── index.html Google’s Angular Style Guide http://google.github.io/styleguide/angularjs-google-style.html
  • 7. App structure when service and directive are unrelated sampleapp ├── app.css ├── app.js ├── app-controller.js ├── app-controller_test.js ├── components │ └── foo │ ├── foo.js │ ├── foo-directive.js │ ├── foo-directive_test.js │ └── bar │ ├── bar.js │ ├── bar-directive.js │ ├── bar-directive_test.js ├── index.html Google’s Angular Style Guide http://google.github.io/styleguide/angularjs-google-style.html
  • 8. Ionic’s structure for a sample “Tabs” app http://ionicframework.com/getting-started/ How it looks├── css │ └── style.css ├── img │ └── ionic.png ├── index.html ├── js │ ├── app.js │ ├── controllers.js │ └── services.js ├── lib │ └── ionic │ ├── …(ionic dist) └── templates ├── chat-detail.html ├── tab-account.html ├── tab-chats.html ├── tab-dash.html └── tabs.html
  • 9. Angular multi tabs SPA in “Salesforce” A simple tasks and events management app
  • 10. For quick glimpse and management of tasks and events. Built using Angular and Ionic (UI) Single Page app Multiple tabs, like Dashboard, Tasks & Events App Overview
  • 12. Angular App Structuring in “Salesforce” How to port generalised ng app structures to visualforce pages ?
  • 13. ├── classes │ ├── RemoteTKController.cls │ ├── TestRemoteTKController.cls ├── components │ ├── RemoteTK.component └── staticresources ├── ioniclib.resource Shared Metadata
  • 14. Approach 1 - Using multiple static resources and pages https://developer.salesforce.com/blogs/developer-relations/2014/04/building-beautiful-mobile-apps-in-visualforce-using-angularjs-and-ionic-part-1.html Raja Rao DV Developer Advocate @salesforce @rajaraodv Very good series of blogs with videos on creating SPAs in VF
  • 15. 4 partial VF pages & 3 additional static resources needed for a simple app ├── pages │ ├── myapp_index_html.page │ ├── myapp_tab_dash_html.page │ ├── myapp_tab_events_html.page │ ├── myapp_tab_tasks_html.page │ ├── myapp_tabs_html.page └── staticresources ├── myapp_app_js.resource ├── myapp_controllers_js.resource ├── myapp_services_js.resource Approach 1 - App Structure
  • 16. Live demos Live illustration of Approach 1 Angular app in a Salesforce Org.
  • 17. Approach 1 Review - GOOD & BAD parts GOOD Good for prototyping at rapid pace. Less Conflicts: In case, multiple developers are working on different views of the same page. BAD Performance could be slow, because HTML templates are loading from VF pages. Grouping of related files is based on filename, no clear structure. Too much scattered metadata, when multiple SPAs exists in a single Org, i.e. 5 extra pages and 3 static resources for a single VF page.
  • 18. Approach 2 - MavensMate Resource Bundles http://mavensmate.com/ http://www.joe-ferraro.com/2012/12/mavensmate-resource-bundles/
  • 19. Approach 2 - App Structure Maven’s ResourceBundle offering exploded directory structure for StaticResource “tabs_app_mavens” ├── resource-bundles │ └── tabs_app_mavens.resource │ ├── css │ ├── img │ ├── js │ │ ├── app.js │ │ ├── controllers.js │ │ └── services.js │ └── templates │ ├── tab-dash.html │ ├── tab-events.html │ ├── tab-tasks.html │ └── tabs.html Just 1 StaticResource for partials, styles and scripts ├── pages │ ├── tabs_app_mavens.page └── staticresources ├── tabs_app_mavens.resource
  • 20. Live demos Live illustration of Approach 2 Angular app in a Salesforce Org.
  • 21. Approach 2 - GOOD & BAD parts GOOD Familiar structure for new web developers to productively code Angular apps in Salesforce. Limited metadata per VF page and SPA. BAD File conflicts when multiple developers working on different views of same VF page or SPA. Mavensmate save speeds are slow at times, which might be a big turn down. Aside.IO wins here by huge margin.
  • 22. Approach 3 - Aside.IO zipped static resources https://www.aside.io/
  • 23. Quite similar to Mavens, but all browser based tabs_app_aside.resource ├── css ├── js │ ├── app.js │ ├── controller.js │ └── services.js └── templates ├── tab-dash.html ├── tab-events.html ├── tab-tasks.html └── tabs.html Approach 3 - App Structure Just 1 StaticResource for partials, styles and scripts ├── pages │ ├── tabs_app_aside.page └── staticresources ├── tabs_app_aside.resource
  • 24. Live demos Live illustration of Approach 3 Angular app in a Salesforce Org.
  • 25. BAD Not able to save any file in zip apart from js, css, txt and html File conflicts when multiple developers working on different views of same VF page or SPA. Approach 3 - GOOD & BAD parts GOOD Blazing fast SAVE speeds (biggest advantage). Some what familiar structure for new web developers to productively code Angular apps in Salesforce. Limited metadata per VF page and SPA.
  • 26. Approach 4 - Welkin Suite (Windows Users Only) http://welkinsuite.com/
  • 27. Approach 4 - App Structure Similar to MavensMate, could be nice option for VisualStudio lovers
  • 28. Questions ? Happy to answer any related queries later via twitter @abhinavguptas
  • 29. Session Code Samples https://github.com/abhinavguptas/Dreamforce-2015-Session-Angular-ifying-your- Visualforce-pages Raja Rao’s Salesforce Blog https://developer.salesforce.com/blogs/developer-relations/2014/04/building- beautiful-mobile-apps-in-visualforce-using-angularjs-and-ionic-part-1.html Google Angular Style Guide http://google.github.io/styleguide/angularjs-google-style.html MavensMate IDE http://mavensmate.com/ Using MavensMate Resource Bundle http://www.joe-ferraro.com/2012/12/mavensmate-resource-bundles/ ASIDE IDE https://www.aside.io/ Welkin Suite IDE http://welkinsuite.com/ Resources Source: placeholder