AngularJs 2.0 or Polymer ? Open Discussion and Views



+Mohit srivastav and I have written couple of years back blog of post on 'Getting Started on AngularJs with Salesforce'. Things are matured so much from there on, we have received massive feedback from people and some contribution on changes to make a template from Karthik on Github

What's new about Angular 2.0 ?

I like the new approach from Architects, team have approached carving this new framework by providing documents beforehand, which offer a rare opportunity for developer to understand and participate in Angular from early on.

I'll briefly review the cutting edge subjects, specially what Angular is focused and what new features are introduced or likely be introduced

  • Lose Coupled Components : Angular have detached is module from its core and are released in versions now. NgModules.Org holds vast components revision and have developed an active community of participants.

  • Less Code more Application focus : Likewise Salesforce platform, Angular want's its developer to focus less on code but more on application business objective. New Annotation and ESC6 offers/provides this these standards

  • Mobile First Approach : As we see mobile is future, and is biggest potential marketing around the globe, angular team wants the adaption of this framework in the world of mobile development to a massive level. As we know, the mobile is all about improving performance, reducing memory consumption and load time. Improving on these measures will clearly upscale desktop application performance.

Few interesting features that Angular is focused on, are available in many new framework like Polymer, React, Brick and in Salesforce its Aura/Lightning they all offer component driven architecture or approach for development.

Polymer vs Angular 2 ? What's their status relationship ?


Is polymer a framework ? Well, effectively its not, its more of a library that provides sugar layer of top of web-components that effectively lets you deal with components smoothly.

Question that I keep hearing is, will Polymer Kill Angular2 or since Angular2 is on it way to complete rewrite, should I wait or adapt Polymer or React ?

Are AngularJs or Polymer related ?

No, they are not, Angular 2.0 is rewritten with intention to support web-components, as we know creating components in Angular directive is relatively complex, while on the other hand polymer make it much easier with their polyfills. Since Polymer adoption is increasing inside google (check google I/O homepage) made on top of polymer and material design, I see polymer had bright future at the same time. Google Chrome team is working closely with Polymer and empowering the relationship in each release cycle.

AngularJs have wide adoption among developers and I believe it is the most graduated javascript framework existing on planet, clearly it needs to be future proof which is component driven model, rewriting is right choice. But few topics that I most interested to see are Dependency Injection, Templating, Anotation, Scaffolding and Touch Routing.

Those in angular snippets below demonstrates few of this topics clearly

Templates in AngularJS 2.0 

@ComponentDirective({
          selector: 'oye-hello',
          template: 'Oye Hello!'
        })

<oye-hello></oye-hello>

Touch Animations 

Angular have provided design documents for touch animation and gestures for devices programming here

Scaffolding 

Likewise Yomen in Polymer (read post on creating polymer apps with Yomen) Angular is working on develop a Yomen for AngularJS 2.0 but at the same time they have tailored workflow for Angular applications available here at NgTrailer


Yes, Angular is also working on Gulp to support AngularJs 2.0


Change Detection 

Polymer offer promising and easy feature for change detection, while Angular is progressing and its own its way to handle this using watchtower.js and zone.js. VictorSavin have written a blog post about change detection on AngularJS 2.0 here.

ESC6 Support 

Angular will be designged to follow ES6 for which you need to transpile. Read more about compiler here. For those who don't know what is ESC6, I recommend watching slidshow by  +Christophe Coenraets here.

Stay tuned for angular updates  and meantime you can check out the video by +Alex Eagle on getting started with Angular2.0 (Googler working on Angular)




Google Polymer Component for Salesforce List View API



Having worked with +Akhilesh Gupta  and +Martin Meyer on multiple +Polymer assignments, we have done some cool work on polymer and developed some fancy dashboard for big-screen in +Salesforce for in house projects, a dashboard manifesting cool stats on large screen all through latest Polymer components. We wrote many cool components, animated pages and on top of Visualforce integrating latest of Polymer, with its evolving capabilities. 

Recently I wrote a component for generating list view for Salesforce standard objects, in here I'll explain how to built a list-view component but before we proceed, I would like you to read, this post about Salesforce Labs project for Mobile  and Polycharts on Salesforce Blog to get brief idea about, how we have developed a complete library (open-sourced) on top of Salesforce for generating mobile application using Polymer. I am reusing some of the data-components, from this libraries as well and will explain as we move forward.Clearly, polymer is all about reusing components and write minimum code and produce more. 

Salesforce offer listview API , while working one of the application requiring list view, I took standard approach of querying saleforce through Ajax,  and while googling for help, I saw very detailed post written by +Andrew Fawcett  on ListView API and another interesting post by +Karanraj Sankaranarayanan

Components driven models is all about, reusing components, so I thought of writing a Google Polymer Component for Salesforce ListView API that do the same job but with a very little code. 

Using workbench, you easily query all list the view available for a standard objects
List Views : /vXX.X/sobjects/{sobjectType}/listviews

Returns the list of list views for the specified sObject, including basic information about each list view. You can also call this resource for a specific listview entity ID to return information for only a specific list view. 


To retrieve the results on page, using ajax to make call to API as shown below


Now it is fairly easily to convert this into a +Polymer script using Google Polymer API


Now lets define this components and attribute, and the attributes you want to define



Once components are ready, follow the instruction on the Mobile UI Library written by Mobile Sdk Team to play with it.



Create an html or visualforce page to consume component, the component will return the list of values, you can consume it and display, however you want. I recommend reading another example bootstrap table component explaining, how to import and use Polymer Components with Visualforce Pages or simply run this html (pass access-token of Salesforce) on your local machine using either Node.js or any other local server.


Full Github Repository can be access here

Trialforce | Using custom Salesforce API to work with Restforce gem on Ruby on Rails


In the last post, I talked about architecture and product details of Trialforce, in here I'll be discussing

the viable workaround for set of audiences who develop application on rails, host on heroku (or similar) platform and consume SignupRequest object to spin application trials. Primarily there two popular gem in the world of Ruby on Rails (Database.com gem and RestForce gem). I'll be talking about, the advantages of using RestForce over Database.com gem, and how we use it to talk to custom salesforce api that can spin trials. Below are some easy code-snippets that you find on the their restforce gem docs to play with to salesforce resources.

To get started with RESTForce, just include gem in your rails application and run bundle install


You can perform few of the coolest methods you can use with RESTForce gems like shown in snippet here, but I recommend reading Bruno Fangundez post here


What special does Restforce have, over database.com gem ?

Basically, RestForce gem support proxy_url while database.com gem do not and at the same time, you can write custom endpoint or api in Apex (salesforce) and consume them through Restforce.

Does RESTForce Gem support Trialforce object (SignupRequest) ?


No, RestForce do not recognize this new standard object, but workaround is that RestForce support custom endpoints, so if we can expose SignupRequest through an custom API, we can consume this object from here.I have written a blog post  here with some good design practices, explaining how to built custom endpoint and design your own api in Apex. I have built a sample API that post (insert) a record in SignupRequest object and another method to check the status of spinning org through these endpoints to resolve this issue.

Since I render JSON on client to read response from API, I stress on writing a response handler class that return custom classtype object as response.

Create an API class with bunch of attributes that we want to our client to consume


Now I wrote a simple API class in Apex exposing custom method through endpoints (@Trailforce) which simply insert a new record in SignupRequst, which in turn spin the org. In here, since we have exposed custom class, we can easily consume it through RestForce Gem.

Below are POST method of API to spin Trials


Get method retrieve the current status of trial account


Use RESTForce gem to create client connection and get the status of the trial by calling @HttpGet Method


Read more about RestForce on the official repo here

Trialforce : Create Trials for your app-exchange application using SingupRequest API

Trialforce offer a service to provision free trials for your app-exchange customers. If you have an app-exchange application want to deliver 30 days trial for your app, Trialforce is product for you. With Trialforce you can bundle up all your application and deliver to customer for a limited time with expiry date through the salesforce web-store (app-exchange). 

You can host a webpage on any platform for customer to signup for free trials and using SignupRequest API, you can spin orgs and deliver trials

Some other pleasant features that Trialforce offer are 

  • Power to customize app-exchange app, improve branding quality and design experience.
  • Control, monitor customers and trials for applications
  • Manage version, multiple trials for multiple applications, editions
I recommend reading ISVForce guide here to have complete understanding of the product, detailed explanation of the product is beyond scope of this post. My focus here to explain, how you can use SignupRequest to leverage trials to your customers.

SingupRequest API exposes a new standard object called SignupRequest, which can be enabled by contacting Partner Community at Salesforce through support. With SignupRequest object,  you an spin up free-trials.

Before moving further, we need to understand the basic model of Trialforce. Broadly, Trialforce have two prime segments

TMO org - Open a case with Partner Community to log case and receive your org. This is one central management place for all your activity, you can create more than one Trialforce Source Org (TSO) from a management org, one for each app, if you have more than one application to serve. You can create all custom branding in TMO like email on signup, email of password recovering, support emails and more.

You can manipulate email template here, this is the email user receive when they signup for your app. You can customize all sorts of emails (see picture below)
         



TSO org - you can install your application, packages, custom object whatever you want to deliver to customer, when they signup for trials. Once you are ready to serve your application, you can create a template of this org, this template have an ID called TemplateID and through SignupRequestAPI you can pass on this template ID, which in turn replicate your organization (exact replica) and spin a brand new salesforce account (org) and deliver to customer.

After configuring TMO and TSO, you can use SignupRequestObject (dedicated standard object designed for spinning custom trials), you have to reach Partner Community, request them to enable 'SignupRequest Object' on the org that you want to use to spin trials and once you are approved, you can login and locate SignupRequest object in your our setup window as shown below


Which org should I get SignupRequest Object enabled for ?

You can get SignupRequest object enabled on any org it need not have to be TMO/TSO, you have pass templateID and SignupRequest recognize your TSO and template with this unique Id and serve new trial account to customer.

Remember SignupRequest object do not work in 'sandbox' and do no spin trial account in any sandbox org.

Trialforce Source Org : Template
Templates are snapshot of salesforce trial account, that you wish deliver to your clients. Go to your Trialforce Source Org (TSO) bundle all components of your application (workflow/apex/visualforce) and create a template of it as shown in picture below



How do I spin Trials for my app ? 
Design a webform on visualforce and insert a new record on SignupRequest object to spin trial account org (expires in 30 days) and you require templateId for inserting a new record SignupRequest



Can I host my web-form for my application Trials outside of Visualforce ? 
Yes, can you use SignupAPI instead, to insert a new record to SignupRequest Object and which in-turn send custom branded email for your application.

JSON body for posting through SignupRequest API looks like the gist shown below

Below is the code sample, explaining how send a post request to create free trials using SignupAPI (covered from docs) here


Read the next post here, to learn, how to use RESTForce Gem for Rails application, to create SignupRequest Records using custom built API, and as well some of the good practices on writing custom-api in Apex.

Also read an interesting post on Using Signup API to manage your Leads by ISV team and my friend/colleague William Yeh (Evangelist ISVForce).

Salesforce Apex Performance Best Practices | Apex



There are bunch of articles out there talking about best practices in Salesforce. I see some of the common practices that every salesforce developer should be aware of, I developed notes over period of time with some examples to follow.  I added references to bunch of key sources and articles down at the bottom covering some official articles and as well as good StackExchange articles where people have done amazing job responding to questions.

Querying Salesforce in Trigger : 

Make sure you have no SOQL in for loop

Wrong Approach



Recommended Approach


Bulkify Trigger with Set and Map: 

Salesforce provides standard data-structures like Maps and Set to per-filter and pre-populate data to avoid repeated SOQL calls, this allows user to handle bulk data, often called bulkification of code. Triggers in salesforce are intentionally designed to handle bulk data, so here we simple pull Ids into a set which is used to iterate and populate a Map holding all values. The map is our data storage and used for querying Salesforce

Recommended Approach


SOQL In for loop for large datasets : 

SOQL-IN for loops, allow you to set the range of for loops through a SOQL query, example below shows two ways of writing for-loops. First approach may throw error of 'heap size' governor limit.


Avoiding SOQL Injection :

SOQL injection, allows user to pass set of keywords input, which becomes wildcard to access all data in Salesforce, if query is pro-actively designed to handle those wild card. A simple example below demonstrates SOQL injection in action.

Vulnerable to SOQL Injection


Dynamic SOQL



Querying Child Items :

Inefficient way of querying child item would iterating through each parent object and querying child item, which is ugly. Smartly this can be done as show below.

Wrong Approach

Recommended Approach


@future method in Salesforce : Making integration/service communication future proof.

Annotate a method with future, when you want to perform a job asynchronously, like making an outbound call to Facebook, Twitter on a field update.Ideally if it is not 'asynchronous', then salesforce hang up and wait for response and this delay or hang up process. But key is, writing logic of @future method in separate class.

Recommended Approach : Write your @future method and logic in separate class


Call Asynchronous class through Apex Trigger

Things to remember

  • Future cannot call another future method neither a batch job can call @future method
  • Use callout=true for making callouts
  • You cannot guarantee order of execution
  • Future call have limits and can run concurrently
  • Check video, below if you want to get-around these limits in some ways 
  • Video covers, future calling future and chaining asynchronous calls

Better {get; set;} method using pattern called 'Lazy Loadin

Try to  add filter if possible in your get property to only query salesforce conditionally, when some criteria is met, and avoiding querying salesforce every time the class constructor called.

Recommended Approach : Adding conditional logic in getter


Transient Keyword and Properties to reduce view state

Transient keyword is used for properties or variable, which don't want to store on the view part of the application, this can be used primarily to reduce down the view state of visualforce page,  you should remember that static method are by default transient and simple example to understand usage of transient is shown here and then another awesome discussion in here on stackexchange, which talk about another side of visualforce, when your UI has many components and result in heavy view state

I strongly recommend reading this article mentioning some read best practices for improving visualforce performances

How to make Salesforce Properties Transient : Check out similar blog post here for explanation in detail



Best Practices for View State 


Best Practices for Asynchronous Apex 


Read More :

Design Patterns by +Andrew Fawcett :

 Other Resource for Best Practices

How to add Google Map in Salesforce (featuring Google Map V3) Revised Post


Watching data on map with Geo-location is always fascinating, I had written a blog post here  couple of year back, about adding Google Maps in Visualforce and adding them accounts layout, many of you might have already implemented or might have seen implementation on account layout, this article is written for people who are requesting me to update old code matching new API standard and features, at the same time a  revision to old blog post.

Lately in one of the project, I recently was working with Geo-location API intensively and  I learned that there are cool changes on Google Map API V3. I have updated the code to meet new standard for V3 static map api and sharing code snippets on varied instances and features of Google Maps

How to get coordinates from address using Google Geo-code Services  ?
Google Map API needs geolocation coordinates,  using Geocode service from google, you can get coordinates for a location address.



How will your account address look like ? 
Your address would be combination of couple of standard fields shown below, which can generate complete address

 var accountLocation = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";
  
Binding Address to convert to Geo-location ?       
In the JavaScript call back method, simply pass on the address of Account to get back latitude and longitude
       

Once you know the latitude, you can pass on values to initiate the Map. To check full code, scroll down in bottom for complete source code hosted on Github repository.

You can do couple of cool effects on top of map as well using simple tweaks.

Adding Marker Drop Effect
 

 
Adding Bounce Effect to Toggle Bounce 

 
Adding Circle Effect : 
Get the List of accounts which are in Texas, California and New York and then create a method in Javascript to draw circle based on count


Controller behind simply bring count of accounts state wise


Plugging properties to inject value to draw radius of circles

Adding RoadMap and 45 degree Tilt : 


Source Code

The Source Code is available in this Git-hub repository

Read more :

Show Salesforce Data on Google Maps using Salesforce Reports by my colleague Arun
Avinava Maiti BlogForce9 Google Map Component
Youtube for Amazing Implementation and Ideas

Beautify Visualforce Pages with Google Material Design and Paper Elements




Twitter Boostrap is fairly popular design framework and I have written bunch of blog post on them, then learned about Flat UI, which were slick and beautiful, but not good enough to leverage real touch feel to application. 

Not too long ago, Google introduced Material Design, a brand new set of guidelines for designers and developers alike. Material Design introduces a fresh perspective on user interfaces, motion, and interaction states, and are a great foundation for you to build a product upon.

Material design offer more power to to users, as it is quicker to get back to and find a certain state withing an application and clearly adds more intuitiveness, feel and productivity to application


In recent android version called Lollipop, you might have seen massive changes in the designs, transition and feel of applications, Inbox by Gmail is another email application that have caught lot of attention by offering a  brand new experience, so I thought of giving kick start on material design, I simply started by importing Paper-elements on the page. Paper-element are set of elements design to produce paper type touch feel to the application, I used the CDN resource to the HTML

To get started, I created a codepen, embedded below that you can navigate here switching tabs below

See the Pen Google Material Design Paper Elements by Harshit Pandey (@oyecode) on CodePen.

Implementation
Create a visualforce page and import cdn resource for paper element and polymer core-elements as shown in the code below and start implementing check out Live Page here


Source Code
Check out the code to new Visualforce page available at this Github Gist

Summary
After importing, you can add custom style to arrange elements properly on page and them implementing paper-elements as shown in the snippet below and that's it,  the visualforce page is ready to serve. Moving further, there are more interesting resources out there, check out polymer apps using material design and this page will give the most fun you can imagine for the next five minutes using Material Design. Stay tuned for next post on more of my experiments using Material Design with Visualforce applications

Other important resources are

Make realtime mobile and web application in minutes using Firebase



Real-time application are fascinating and comes with lot productivity, like if you see Google Drive real time integration or Socket.io node base application, they are productive and offer wide range of implementations. I recently meat, Firebase team in Google Cloud Platform Live in San Francisco. I was surprise to see, how quickly you can make real-time application using Firebase, and recently learned that they are acquired by Google.


How easy is to make real-time application ? 
Making a real-time application is still tricky and require lot of coding, and powerful architecture to sync data back and forth, Firebase resolve this problem for us and offer three-way data binding to us.

What is Firebase ? 
Firebase is an API oriented service that store and sync data in database real time. With that it mean, you don't have to worry about your server, database, or real-time components. Firebase manage that all for you. With the API provided, you simple retrieve or push data to Firebase and it will take care of saving and syncing data to all connected devices and applications.


Future Prospects of Firebase ? 
Google recently acquired Firebase and more likely be offering Firebase features pretty soon . Google has a history of integrating the services it acquires for Cloud Platform rather quickly. I am expecting a tight integration with Google Cloud Platform which is will power instant real-time data integration and synchronization, it would be interesting to see, how this will take shape and Google Cloud Platform offer number of services already, so clearly this will be powerful and promising integration of technologies

Let us get started, create an account on Firebase and click to create a new application, like I created application name Oyecode, shown in the picture above. Once you create an application you can see that its fairly easily to define your data structure as the data stored as key values pair, pretty similar to Couchdb and Mongo.

Firebase store data as key-value pair, so once you populate the data, you can see your data in the wizard, as shown below


Building Real-time, Responsive Application only with HTML and JavaScript

In the video below, I am explaining how quickly you can build an application using simply HTML and deploy on Firebase platform, I have explained the code in the embedded video here. As we know that talk is cheap, and developers want to see code. Below is the code and live application, feel free to edit code live here on Codepen

To play with live hosted version : Go to Firebase Hosted Application
See the Pen raLpKb by Harshit Pandey (@oyecode) on CodePen.









Check the video below, explaining how to built this application 
Once you built an application, simple you can install Firebase Command Line Tool to deploy your application on Firebase cloud hosting services. Type in this command on your command line

 

Check out the application in action

 Check the video below,  where I demonstrated the real time behavior of the application


Further References :
Firebase Docs 
Firebase Samples 

How to make Google Polymer powered Salesforce1 Mobile Apps in Minutes


In this mobile first era of software development, making an mobile app powered by enterprise data is still not a smooth process. Salesforce offered variety of tools to make power packed enterprise applications, last year Salesforce released mobile packs, dedicated for most of the popular libraries, offering jump start to developers coming from varied platforms.

Web components on the other hands offer promising future, and have fundamentally changed the way developers think of application building. Google Polymer have done wonderful job of offering framework to built components. At salesforce, mobile sdk team took early lead and developed Mobile Pack for Polymer.

Who are working on web-components ?

Major of known companies, are working on building components driven frameworks,  Salesforce released Lightening Framework, which is based on Aura project offer components driven development pattern.  In Dreamforce' 15 +Samantha Ready at Salesforce had showcased, leading frameworks

Mobile Pack for Polymer is offered with Polymer Designer tool, this tool host all components that mobile team have built, and can be easily assembled to make mobile apps in minutes, you can toggle from designer to see the code behind. In other words, you can easily build mobile application by dragging dropping components,  in a mobile designer fueled by Salesforce data, this experience was never so easy.

Recently, I spoke at Google workshop for Polymer called ItsHackademic in Mountain View, CA.  I presented our work at Salesforce. To our surprise, it turn out, that we at Salesforce, have done one of the best implementation of Web-components. As Google quoted us in talks,

"Salesforce have radically changed application building experience of mobile apps just by web components, like no other"  - Google 

I have written about this library previous post here, but today ,I recorded a video demonstrating, how easily you can built an application by components re-use them to add more values.

The video below takes you to the journey of building a Salesforce powered mobile application and I'll explain here how to make Salesforce 1 mobile Apps in minutes. You can re-use this component to pull data and create more components on top of it, not just mobile but can be web.



Make web applications by reusing components 

I took data-component, shown in video, at added Javascript library called Amcharts, to populate charts with data. Check out my another library here demonstrating, how to built visually appealing and responsive (mobile ready charts) in minutes here on official Salesforce blog.

Google Polymer with Salesforce

Check out presentation slides below, for lightning talks covering only highlights not full presentation coverage



Learn how to use Salesforce Communities Designer for Self Service Portal


Salesforce community portal have been in use for long time, but was limited in offering pleasant features and specially custom configuration. To introduce as new feature, lot of additional works needs to be done, both from development and design perspective, which include using HTML, CSS and Javascript on top of Visualforce. 


Clearly powerful user-experience and clean user interface adds high user engagement. In person, we have spend weeks to leverage an impactful customer experience with Salesforce Communities 

Salesforce introduced community designer and have fascinated me in person, I have been working on this platform for about three year, and I find this tool be very productive. I teamed up with +Harshit, and decided to write this blog post here explaining how to create google looking customized community portal with 'No-Code' by using Salesforce Community Designer Tool released in Winter'15.

To explain a functionality, I am choosing a business scenario, covering business activity in an financial institution, and covering mundane activities like resolving credit-card/loans issues. My objective is to explain this all with no-code, and just deal everything with 'Point and Click'. 

Prerequisites

1) Let us set up a new developer org . spin up for an org from salesforce developers home

2) If you are not familiar with communities, we recommend reading this setup guide here .

3) Knowledge articles is the soul for this whole set up. Get some coffee and go to this setup video here

Having installed Prerequisites (Note : three of mentioned resources, are mandatory) , we will look up Salesforce Community Builder and Templates, to set up Self-Service Portal

Navigate to Set up>Communities>All Communities


Note : As shown in picture above, two new additional setting are introduced as  ‘Administration Settings’ and ‘Community Management’

Salesforce Community Templates 

Primarily, three important templates available to jump start, but I would like to share the amenities, each templates offer, and make choice easier for you.

1) Kokua - Uses data categories, case and Salesforce Knowledge.
2) Koa- Designed for Mobile, features include, articles search and case management.
3) Napili- Offer most features, with Q&A, Knowledge Articles and Case Support. Clearly, I’ll use this template moving forward

Pickup template of your choice, In here, I have created a community named ‘FunCommunity’ as you can see in drop-down,




Setup Navigational Topics 

Got to Community Setup shown as above and you will see salesforce settings screen similar to
one shown below



Bind Topics 

Go to (Setup -> Topics -> Topics for Objects) to bind topics to every knowledge article. Clearly, this make it easier to locate or navigate in the community

Screen shot below explains, how to add banner images for each topic. I have created three topics for here to demonstrate, Credit Card, Debit Card and Loan Processing




Assign Data Category


Locate arrow on top-right, to assign data-category for each topic, in the picture below



Featured Topics

Every featured topics, pop as thumbnail on homepage, add feature topics here


Video Summary 

With that said, community is configured and in shape, this has all done with  'no-code' involved. I have compiled these steps in a video below and discussed some more feature(s). Feel free to provide us feedback and share your knowledge with us.



 

About the Author 

I have worked with +Mohit Srivastav  while writing our last post on Angular Js with Salesforce, after Winter'15 Salesforce release, he decided write another blog post here and connected with me to coordinate resources and I would like to thank him for taking time out of his schedule and like to congratulate for winning 'Summer of Hacks in India', follow him on his blog 'CloudyWorlds'