SlideShare a Scribd company logo
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

Recommended for you

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!

Description Force.com Canvas allows you to build a seamless, UI-level intergration with salesforce.com. Imagine bringing in your 3rd-party shipping information directly inside a Salesforce opportunity record and delivering your existing return processing application into your cases. Creating a single user interface for your external and Salesforce applications. With Force.com Canvas, you can leverage the power of your web app, inside the Salesforce user interface. And with the Salesforce1 Platform, you can deliver your app directly to your users' mobile devices. In this session, you will learn about new enhancements for Force.com Canvas coming in Summer οΏ½οΏ½οΏ½14. You will be able to leverage Force.com Canvas from the Salesforce1 Platform from more places than ever. We have also extended support for SAML authentication, allowing you to build seamless authentication into your existing SAML supporting applications. Finally, we will detail new foundational features like Apex lifecycle classes and Record Context in the signed request, which will allow your Canvas apps to deliver more information when you need it. We will be showing a number of code-level examples to help kick start your ideas and bring your apps directly inside of the Salesforce UI. Key Takeaways ::Displaying Force.com Canvas inside of Salesforce1: Mobile Navigation, Record Detail, Mobile Cards, Chatter Feed, Publisher ::Delivering Salesforce1 context in the Signed Request ::Leveraging SAML with Canvas to provide end-to-end authentication ::Customizing your Signed Request using the Canvas Apex Lifecycle class ::Providing record specific information in the Signed Request Intended Audience ::Salesforce Developers who want to see Force.com Canvas at the code level ::Salesforce Admins who want to see what is possible with Canvas Recommended Resourceshttps://developer.salesforce.com/en/events/webinars/forcedotcom-canvas-summer14?d=70130000000YrJz

force.com canvasui-level intergrationsalesforce.com
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

Slide deck from my Dreamforce 14 mini-workshop, providing an introduction to responsive web design by building a non-responsive Visualforce page using the standard components, then a responsive version using Bootstrap.

bootstrapdesignsalesforce
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview Webinar

Watch this webinar to discover new and updated Salesforce Platform features coming in the Summer '13 Release including: Force.com Canvas (GA) -- Force.com Canvas is now generally available and supports multiple canvases on a page, ability for canvases to talk to each other, distribution through standard packaging processes, and more. Chatter in Apex (GA) -- Chatter in Apex (formerly Connect in Apex) exposes Chatter API objects in Apex, and is now generally available with new classes and methods. The documentation can now be found in the Apex Developer’s Guide. Visualforce Updates -- There are several Visualforce enhancements including configurable timeout for JavaScript remoting, HTML5 output generation options, and various new components. API Updates -- Lots of API Updates including new objects, SOQL/SOSL clauses, and metadata types for easier deployments. ISVForce -- ISVForce has many new additions in Summer β€˜13 including an Environment Hub for storing easily switching between orgs, installing/uninstalling packages with the API, and creating trialforce signups using the API.

developersdeveloper forceanalytics api
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
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
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

Recommended for you

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

Join us to learn how to integrate the corporate portal or intranet with Salesforce. We'll discuss how to use Salesforce's standards-based authentication and JavaScript to enable rich interaction between web pages. Additionally, we'll be demoing Bracket Lab's popular TaskRay project management app to showcase such integration.

Create Kpi fiori apps
Create Kpi fiori appsCreate Kpi fiori apps
Create Kpi fiori apps

This document discusses creating KPI tiles in SAP Analytics. It provides an overview of the Manage KPIs and Reports app, which allows creating KPIs, reports, and applications. It describes how to create a KPI group, define a KPI, data source, semantics, and report. It also covers adding drilldown views and creating an application to publish the KPI tile. The document demonstrates these steps and provides information on roles and catalogs for accessing analytics content.

 
β€’by Ajay593954
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 allows developers to leverage their existing web development skills to build mobile apps that can access Force.com data and APIs. PhoneGap is an open source framework that allows wrapping HTML, CSS, and JavaScript into native mobile applications. Developers can use libraries like forcetk to integrate Force.com functionality and jQuery Mobile or Backbone.js for UI development. The demo apps show how to build data-driven mobile apps that retrieve and display Force.com records using PhoneGap and forcetk.

Angular multi tabs SPA
in
β€œSalesforce”
A simple tasks and events management app
​  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
App Demo
Angular App Structuring
in
β€œSalesforce”
How to port generalised ng app structures to visualforce pages ?

Recommended for you

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 allows developers to leverage their existing web development skills to build mobile apps that can access Force.com data and APIs. PhoneGap is an open source framework that allows wrapping HTML, CSS, and JavaScript into native mobile applications. Developers can use libraries like forcetk to integrate Force.com functionality and jQuery Mobile or Backbone.js for UI development. The demo apps show how to build data-driven mobile apps that retrieve and display Force.com records on both iOS and Android with a single codebase.

ISV Tech Enablement Webinar April 2017
ISV Tech Enablement Webinar April 2017ISV Tech Enablement Webinar April 2017
ISV Tech Enablement Webinar April 2017

The document announces the Salesforce Developer Conference (TrailheaDX) to be held June 26-28, 2017 in San Francisco. It will feature over 120 technical sessions, keynotes, an expo with over 40 partners and 25 Salesforce demos. Early bird tickets are $499. The document also provides an agenda for an ISV Monthly Technical Enablement meeting. Topics will include TrailheaDX, new Trailhead modules, person accounts, security review submission office hours, and Lightning Experience updates. Finally, the document summarizes requirements for apps to be considered "Lightning Ready" by Salesforce, including that all end-user use cases must work in Lightning Experience. It outlines steps

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

Salesforce Platform Mobile Services provides developers with tools to easily create mobile applications while leveraging existing skill sets like Visualforce, JavaScript and HTML 5. The open-source Salesforce Platform Mobile SDKs give you the flexibility to build native, web and hybrid apps for iOS and Android. This webinar is the second in a series focusing on the new Mobile SDK 2.0 features, and will demonstrate how to create your own native iOS mobile applications that interface with the Salesforce Platform. The webinar walks you through the development of a simple native iOS application that retrieves records from Salesforce Platform and displays them in a master-detail view. You will then implement the means to update a record’s details and send the updated results back to the service. Key Takeaways: Learn how to build iOS apps quickly with the Mobile SDK 2.0 See how to interact securely with Salesforce API’s using Objective-C Intended Audience: Developers experienced with Salesforce Platform and have a working understanding of Objective-C

force.commobile developmentsalesforce.com
β”œβ”€β”€ classes
β”‚ β”œβ”€β”€ RemoteTKController.cls
β”‚ β”œβ”€β”€ TestRemoteTKController.cls
β”œβ”€β”€ components
β”‚ β”œβ”€β”€ RemoteTK.component
└── staticresources
β”œβ”€β”€ ioniclib.resource
Shared Metadata
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
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
Live demos
Live illustration of Approach 1
Angular app in a Salesforce
Org.

Recommended for you

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

This document discusses responsive design using Visualforce and Twitter Bootstrap. It defines responsive design as providing an optimal viewing experience across devices by responding to screen size and orientation. It outlines the key techniques used in responsive design, including viewport meta tags, fluid grids, and CSS media queries. It then provides an overview of how Bootstrap can be used to build responsive user interfaces in Visualforce and demonstrates a sample blog application.

responsivedreamforcepicture
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

The Service Cloud portfolio provides a number of wholly cloud-based applications designed specifically in mind to integrate with your enterprise and deliver a rich 360-degree customer profile. At its basic core, the Service Cloud Console is an Application Framework which can be leveraged to: Present all relevant details in context in a single page presentation Integrate with 3rd party applications Connect with customers via telephony, Live Agent Web chat, and Knowledge integration Push information to your users as your data changes Watch this webinar to learn about the Service Cloud Integration toolkit as well as other declarative and programmatic options available to customize and get the most from the Service Cloud Console. Key Takeaways Learn how to integrate your legacy web applications with the Service Cloud Console Learn how to personalize the user experience with screen pops, launching primary tabs and subtabs, and setting tab titles Extend functionality with Visualforce and custom console components Intended Audience Force.com Developers, Technical Leads, Architects, Application Directors familiar with the Service Cloud, Visualforce and JavaScript

integrationdevelopervisualforce
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

This document provides an overview of SAP Fiori apps for the SAP ERP Materials Management (MM) application. It includes a matrix that maps available Fiori roles and their assigned apps to relevant SAP Best Practices baseline scope items. The matrix also identifies whether each app is transactional or analytical and whether it requires the SAP HANA platform. The document then provides descriptions, configurations, and usage instructions for key Fiori apps to support common MM processes such as procurement, inventory management, and purchasing on the SAP Best Practices baseline.

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.
Approach 2 - MavensMate Resource Bundles
http://mavensmate.com/
http://www.joe-ferraro.com/2012/12/mavensmate-resource-bundles/
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
Live demos
Live illustration of
Approach 2 Angular
app in a Salesforce
Org.

Recommended for you

Spring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSpring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview Webinar

The Spring '14 Release is chock-full of great updates for developers, such as the ability to perform DML operations in JavaScript and tons of API updates. Watch this webinar to discover new and upcoming Salesforce1 Platform features slated for this release including: Visualforce Updates: Visualforce enhancements in Spring ’14 include Visualforce Remote Objects for performing DML operations in JavaScript without the need for an Apex Controller, historical trending capabilities with the Analytics API, support for report chart components, PageReference URI support anchors, and several new components. Force.com Canvas: Force.com Canvas continues to add useful features like the ability to access a Canvas app in the Chatter Publisher and Feed, the ability to add a Canvas app to the Salesforce1 App Mobile Navigation, support for using events between a Canvas app and a Visualforce page, as well as a new debugging console. API Updates: New features have been added to SOQL, SOSL, REST API, SOAP API, Bulk API, Metadata API and the Streaming API. Additionally, we have opened up the ability to use the Data.com APIs, and added a new Place Order API to integrate Salesforce order data into any web or mobile application. Developer Console: New features have been added that let you search through all files for specific snippets in your organization, change look and feel settings on your console, along with several user-experience additions like context menus. Apex Code: Spring β€˜14 adds new classes, methods and interfaces. You can now access reports in Apex with the Analytics API and updates have been made to Chatter in Apex.

integrationdeveloperdeveloper force
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)

This document discusses making apps Lightning Ready and provides guidance on the Lightning Ready process. It states that to be Lightning Ready, 100% of an app's end-user use cases must work as expected in Lightning Experience. It notes requirements for existing and new apps and answers common questions. The document also covers two guiding principles of Lightning Readiness - that a new customer on Lightning Experience can install and use the app successfully, and an existing customer can adopt Lightning Experience and continue using the app successfully.

JavaScript Integration with Visualforce
JavaScript Integration with VisualforceJavaScript Integration with Visualforce
JavaScript Integration with Visualforce

JavaScript Integration with Visualforce Description Visualforce has come a long way when with its ability to integrate with JavaScript. Developers are no longer limited to simply looping Apex functions via the actionFunction component, with Remote Objects live in the last Summer release it is possible to create fully functional HTML5 applications without writing any Apex for basic cread, read, update, delete and query functions. Join Developer Evangelist Josh Birk as he walks through the various aspects of Visualforce which makes it easy to build applications in a variety of HTML5 frameworks and libraries. Key Takeaways ::Visualforce now supports a fine level of control over how the page is constructed ::With JavaScript Remoting and Remote Objects you can easily integrate the data layer into your application ::Integrating existing HTML5 frameworks and libraries is easy with Visualforce Intended Audience ::Existing Visualforce developers looking to keep up to date on the latest features when using JavaScript. ::HTML5 Developers interested in leverage Visualforce to build their applications. Recommended Resources: https://developer.salesforce.com/en/events/webinars/JavaScript_Integration_with_Visualforce

javascriptapexhtml5
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.
Approach 3 - Aside.IO zipped static resources
https://www.aside.io/
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
Live demos
Live illustration of
Approach 3
Angular app in a
Salesforce Org.

Recommended for you

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

Dreamforce16 Mobile Thater presentation on building Mobile apps Twelve-Factor App methodology. Demonstrate how to use of Salesforce, Swift 3, Xcode, Heroku REST API on Swagger & Node.

salesforceswift 3swagger
Process Automation on Lightning Platform Workshop
Process Automation on Lightning Platform WorkshopProcess Automation on Lightning Platform Workshop
Process Automation on Lightning Platform Workshop

Facing complex business automation requirements? Don't worry, we've got you covered! Attend this session to get hands-on with the App Cloud's powerful process automation tools: Process Builder, Flow, and Apex Code.

salesforce developerstrailheadx
Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)

This document guides you through your first days of styling your Visualforce Pages with a custom look and feel.

visualforce cssapexsalesforce.com
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.
Approach 4 - Welkin Suite (Windows Users Only)
http://welkinsuite.com/
Approach 4 - App Structure
Similar to MavensMate, could be nice option for VisualStudio lovers
Questions ?
Happy to answer any related queries later via twitter @abhinavguptas

Recommended for you

Interview questions
Interview questionsInterview questions
Interview questions

Time-based workflows allow users to configure actions that are triggered based on date and time criteria, like creating a task 7 days before a record's birthdate. The actions are the same as for immediate workflows. To modify an existing time-based workflow, the workflow must be deactivated, the criteria changed, and existing actions re-added. Records already meeting criteria won't re-trigger. Triggers can work across objects while workflows only update the object or related objects.

Salesforce course-training-material
Salesforce course-training-materialSalesforce course-training-material
Salesforce course-training-material

Krishna Reddy worked as a software engineer for 10 years before starting his own business. He created a mobile app development company that saw success initially but then began struggling with cash flow issues and delays in projects. He was able to get the company back on track by firing an unproductive employee, taking on only one project at a time, and developing better estimation practices.

 
β€’by sfdc232
MVC - Introduction
MVC - IntroductionMVC - Introduction
MVC - Introduction

The document discusses design patterns and the Model-View-Controller (MVC) architectural pattern. It describes the 23 Gang of Four design patterns categorized into creational, structural, and behavioral patterns. It then explains the MVC pattern, how it separates an application into the model, view, and controller components, and the typical request flow from request to response. Finally, it provides a brief history of ASP.NET MVC and the technologies used in ASP.NET MVC development.

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
Thank you

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 Responsive
Salesforce 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 Code
Salesforce Developers
 
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
 
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
Keir Bowden
 
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview Webinar
Salesforce Developers
 
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
Salesforce Developers
 
Create Kpi fiori apps
Create Kpi fiori appsCreate Kpi fiori apps
Create Kpi fiori apps
Ajay593954
 
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 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 PhoneGap
Salesforce Developers
 
ISV Tech Enablement Webinar April 2017
ISV Tech Enablement Webinar April 2017ISV Tech Enablement Webinar April 2017
ISV Tech Enablement Webinar April 2017
Salesforce 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 Webinar
Salesforce 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 Bootstrap
Keir Bowden
 
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
Salesforce 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_xx
Lokesh Modem
 
Spring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSpring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview Webinar
Salesforce Developers
 
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
 
JavaScript Integration with Visualforce
JavaScript Integration with VisualforceJavaScript Integration with Visualforce
JavaScript Integration with Visualforce
Salesforce 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 Heroku
Igor Androsov
 
Process Automation on Lightning Platform Workshop
Process Automation on Lightning Platform WorkshopProcess Automation on Lightning Platform Workshop
Process Automation on Lightning Platform Workshop
Salesforce Developers
 

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
 
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!
 
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
 
Summer '13 Developer Preview Webinar
Summer '13 Developer Preview WebinarSummer '13 Developer Preview Webinar
Summer '13 Developer Preview Webinar
 
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
 
Create Kpi fiori apps
Create Kpi fiori appsCreate Kpi fiori apps
Create Kpi fiori apps
 
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
 
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
 
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
 
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
 
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
 
Spring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview WebinarSpring '14 Release Developer Preview Webinar
Spring '14 Release Developer Preview Webinar
 
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)
 
JavaScript Integration with Visualforce
JavaScript Integration with VisualforceJavaScript Integration with Visualforce
JavaScript Integration with Visualforce
 
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
 
Process Automation on Lightning Platform Workshop
Process Automation on Lightning Platform WorkshopProcess Automation on Lightning Platform Workshop
Process Automation on Lightning Platform Workshop
 

Viewers also liked

Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)
Edwin Vijay R
 
Interview questions
Interview questionsInterview questions
Interview questions
mallareddy0107
 
Salesforce course-training-material
Salesforce course-training-materialSalesforce course-training-material
Salesforce course-training-material
sfdc232
 
MVC - Introduction
MVC - IntroductionMVC - Introduction
MVC - Introduction
Sudhakar Sharma
 
A research on- Sales force Project- documentation
A research on- Sales force Project- documentationA research on- Sales force Project- documentation
A research on- Sales force Project- documentation
Pasupathi Ganesan
 
Web api
Web apiWeb api
Salesforce crm projects
Salesforce crm projects Salesforce crm projects
Salesforce crm projects
Advanz Knowledge Systems P Ltd
 

Viewers also liked (7)

Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)Visualforce css developer guide(by forcetree.com)
Visualforce css developer guide(by forcetree.com)
 
Interview questions
Interview questionsInterview questions
Interview questions
 
Salesforce course-training-material
Salesforce course-training-materialSalesforce course-training-material
Salesforce course-training-material
 
MVC - Introduction
MVC - IntroductionMVC - Introduction
MVC - Introduction
 
A research on- Sales force Project- documentation
A research on- Sales force Project- documentationA research on- Sales force Project- documentation
A research on- Sales force Project- documentation
 
Web api
Web apiWeb api
Web api
 
Salesforce crm projects
Salesforce crm projects Salesforce crm projects
Salesforce crm projects
 

Similar to Angular-ifying Your Visualforce Pages

AngularJS App In Two Weeks
AngularJS App In Two WeeksAngularJS App In Two Weeks
AngularJS App In Two Weeks
Peter 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 Platform
Salesforce 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 Heroku for Java
Enterprise Heroku for JavaEnterprise Heroku for Java
Enterprise Heroku for Java
Ayumu Aizawa
 
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
 
Singapore dev user group
Singapore   dev user groupSingapore   dev user group
Singapore dev user group
Troy Sellers
 
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
CzechDreamin
 
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
Salesforce Developers
 
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
Salesforce Developers
 
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
Doug Ayers
 
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
Salesforce Developers
 
Spring '16 Release Preview Webinar
Spring '16 Release Preview Webinar Spring '16 Release Preview Webinar
Spring '16 Release Preview Webinar
Salesforce Developers
 
Lightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE EvolvedLightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE Evolved
Salesforce Developers
 
Migrating Visualforce Pages to Lightning
Migrating Visualforce Pages to LightningMigrating Visualforce Pages to Lightning
Migrating Visualforce Pages to Lightning
Salesforce Developers
 
Lightning Experience with Visualforce Best Practices
Lightning Experience with Visualforce Best PracticesLightning Experience with Visualforce Best Practices
Lightning Experience with Visualforce Best Practices
Salesforce Developers
 
Building Lightning Components for ISVs (Dreamforce 2015)
Building Lightning Components for ISVs (Dreamforce 2015)Building Lightning Components for ISVs (Dreamforce 2015)
Building Lightning Components for ISVs (Dreamforce 2015)
Salesforce Partners
 
Lightning Workshop London
Lightning Workshop LondonLightning Workshop London
Lightning Workshop London
Keir Bowden
 
Forcelandia 2016 Wave App Development
Forcelandia 2016   Wave App DevelopmentForcelandia 2016   Wave App Development
Forcelandia 2016 Wave App Development
Skip Sauls
 
Building Mobile Apps on Salesforce Platform with Mobile SDK
Building Mobile Apps on Salesforce Platform with Mobile SDKBuilding Mobile Apps on Salesforce Platform with Mobile SDK
Building Mobile Apps on Salesforce Platform with Mobile SDK
Salesforce Developers
 
Suisse Romande SF DG - Lightning workshop
Suisse Romande SF DG - Lightning workshopSuisse Romande SF DG - Lightning workshop
Suisse Romande SF DG - Lightning workshop
Gnanasekaran Thoppae
 

Similar to 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
 
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 Heroku for Java
Enterprise Heroku for JavaEnterprise Heroku for Java
Enterprise Heroku for Java
 
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)
 
Singapore dev user group
Singapore   dev user groupSingapore   dev user group
Singapore dev user group
 
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
 
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
 
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
 
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
 
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
 
Spring '16 Release Preview Webinar
Spring '16 Release Preview Webinar Spring '16 Release Preview Webinar
Spring '16 Release Preview Webinar
 
Lightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE EvolvedLightning Developer Experience, Eclipse IDE Evolved
Lightning Developer Experience, Eclipse IDE Evolved
 
Migrating Visualforce Pages to Lightning
Migrating Visualforce Pages to LightningMigrating Visualforce Pages to Lightning
Migrating Visualforce Pages to Lightning
 
Lightning Experience with Visualforce Best Practices
Lightning Experience with Visualforce Best PracticesLightning Experience with Visualforce Best Practices
Lightning Experience with Visualforce Best Practices
 
Building Lightning Components for ISVs (Dreamforce 2015)
Building Lightning Components for ISVs (Dreamforce 2015)Building Lightning Components for ISVs (Dreamforce 2015)
Building Lightning Components for ISVs (Dreamforce 2015)
 
Lightning Workshop London
Lightning Workshop LondonLightning Workshop London
Lightning Workshop London
 
Forcelandia 2016 Wave App Development
Forcelandia 2016   Wave App DevelopmentForcelandia 2016   Wave App Development
Forcelandia 2016 Wave App Development
 
Building Mobile Apps on Salesforce Platform with Mobile SDK
Building Mobile Apps on Salesforce Platform with Mobile SDKBuilding Mobile Apps on Salesforce Platform with Mobile SDK
Building Mobile Apps on Salesforce Platform with Mobile SDK
 
Suisse Romande SF DG - Lightning workshop
Suisse Romande SF DG - Lightning workshopSuisse Romande SF DG - Lightning workshop
Suisse Romande SF DG - Lightning workshop
 

More from Salesforce Developers

Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Salesforce Developers
 
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Salesforce Developers
 
Local development with Open Source Base Components
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base Components
Salesforce Developers
 
TrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer Highlights
Salesforce Developers
 
Why developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX India
Salesforce Developers
 
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local Development
Salesforce Developers
 
CodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web Components
Salesforce Developers
 
TrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsTrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer Highlights
Salesforce Developers
 
Live coding with LWC
Live coding with LWCLive coding with LWC
Live coding with LWC
Salesforce Developers
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and Testing
Salesforce Developers
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura Interoperability
Salesforce Developers
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce data
Salesforce Developers
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An Introduction
Salesforce Developers
 
Migrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPMigrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCP
Salesforce Developers
 
Scale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in Salesforce
Salesforce Developers
 
Replicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data Capture
Salesforce Developers
 
Modern Development with Salesforce DX
Modern Development with Salesforce DXModern Development with Salesforce DX
Modern Development with Salesforce DX
Salesforce Developers
 
Get Into Lightning Flow Development
Get Into Lightning Flow DevelopmentGet Into Lightning Flow Development
Get Into Lightning Flow Development
Salesforce Developers
 
Integrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS Connect
Salesforce Developers
 
Introduction to MuleSoft
Introduction to MuleSoftIntroduction to MuleSoft
Introduction to MuleSoft
Salesforce Developers
 

More from Salesforce Developers (20)

Sample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce DevelopersSample Gallery: Reference Code and Best Practices for Salesforce Developers
Sample Gallery: Reference Code and Best Practices for Salesforce Developers
 
Maximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component PerformanceMaximizing Salesforce Lightning Experience and Lightning Component Performance
Maximizing Salesforce Lightning Experience and Lightning Component Performance
 
Local development with Open Source Base Components
Local development with Open Source Base ComponentsLocal development with Open Source Base Components
Local development with Open Source Base Components
 
TrailheaDX India : Developer Highlights
TrailheaDX India : Developer HighlightsTrailheaDX India : Developer Highlights
TrailheaDX India : Developer Highlights
 
Why developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX IndiaWhy developers shouldn’t miss TrailheaDX India
Why developers shouldn’t miss TrailheaDX India
 
CodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local DevelopmentCodeLive: Build Lightning Web Components faster with Local Development
CodeLive: Build Lightning Web Components faster with Local Development
 
CodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web ComponentsCodeLive: Converting Aura Components to Lightning Web Components
CodeLive: Converting Aura Components to Lightning Web Components
 
TrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer HighlightsTrailheaDX and Summer '19: Developer Highlights
TrailheaDX and Summer '19: Developer Highlights
 
Live coding with LWC
Live coding with LWCLive coding with LWC
Live coding with LWC
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and Testing
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura Interoperability
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce data
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An Introduction
 
Migrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCPMigrating CPQ to Advanced Calculator and JSQCP
Migrating CPQ to Advanced Calculator and JSQCP
 
Scale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in SalesforceScale with Large Data Volumes and Big Objects in Salesforce
Scale with Large Data Volumes and Big Objects in Salesforce
 
Replicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data CaptureReplicate Salesforce Data in Real Time with Change Data Capture
Replicate Salesforce Data in Real Time with Change Data Capture
 
Modern Development with Salesforce DX
Modern Development with Salesforce DXModern Development with Salesforce DX
Modern Development with Salesforce DX
 
Get Into Lightning Flow Development
Get Into Lightning Flow DevelopmentGet Into Lightning Flow Development
Get Into Lightning Flow Development
 
Integrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS ConnectIntegrate CMS Content Into Lightning Communities with CMS Connect
Integrate CMS Content Into Lightning Communities with CMS Connect
 
Introduction to MuleSoft
Introduction to MuleSoftIntroduction to MuleSoft
Introduction to MuleSoft
 

Recently uploaded

Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
UiPath Community Day KrakΓ³w: Devs4Devs Conference
UiPath Community Day KrakΓ³w: Devs4Devs ConferenceUiPath Community Day KrakΓ³w: Devs4Devs Conference
UiPath Community Day KrakΓ³w: Devs4Devs Conference
UiPathCommunity
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 

Recently uploaded (20)

Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
UiPath Community Day KrakΓ³w: Devs4Devs Conference
UiPath Community Day KrakΓ³w: Devs4Devs ConferenceUiPath Community Day KrakΓ³w: Devs4Devs Conference
UiPath Community Day KrakΓ³w: Devs4Devs Conference
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 

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