May Meetup (now June) – AngularJS, Ionic, Heroku Connect and RemoteObjects

Salesforce meetups seem to be coming thick and fast these days. It seems I’m requesting a pass from the wife every week to attend yet another geeky meetup, although this one was unavoidable as my good friend is the EMEA Marketing Manager for Appirio. Hello, Mr Abl. Plus, his extremely welcoming Marketing Assistant Hind Adamou!.

appirio-office
It’s a certainly a busy time of year at the moment, with the recent Salesforce1 tour quickly following the awesome Salesforce1 developer week, whose UK session was held at Tquila’s swanky offices in Farringdon.

This time we headed back over to the West End for the very first meetup at the Appirio offices located just off Oxford Street. They have to be some of the poshest rented offices you can get.

Once inside we are treated to a spread of nibbles (not the norm for meetups), an assortment of alcoholic beverages and the promise of Dominos pizza! Appirio are seriously out to impress the community and are pulling out all the stops.

The first speaker up was Christophe Coenraets, originally from Adobe Cordova and now turned Salesforce developer evangelist. His blog is legendary in the mobile space. He kicked off his presentation using an app he made for the Salesforce1 mobile application. Here is the code on GitHub and link to his blog posting:

Code – https://github.com/ccoenraets/Keypoint1

Blog – http://coenraets.org/blog/2014/05/running-your-slide-presentations-in-the-salesforce1-app/

Video – http://youtu.be/5oVvtp2bbAY

Christophe swiftly talks over the different development options for mobile – Native, Hybrid and HTML5 – before settling on a hybrid approach. Moving on to the main presentation content, he outlined some of the most popular JavaScript frameworks out there, which rolls us into the main topic of “AngularJS and UI framework Ionic”. I will include some useful links at the bottom for getting started.

2014-05-14 18.54.45

AngularJS and Ionic complement each other well and using the “Single Page Application” mobile design pattern where dependency injection inserts the relevant subpages and content into a single HTML page on the device.

2014-05-14 19.09.05

A quick flash on then screen of index.html for his app demonstrates this concept well. It’s skinny with a single script tag. You still need to write HTML/CSS, but the process is now much declarative than before. In my eyes this approach is comparable to building a Visualforce page and pulling in different components as the page is rendered, except it’s super fast and responsive.

The final part of Christophe’s talk centres around how Salesforce are closing the gap between Force.com and Heroku for business and consumers users. Salesforce largely focuses Heroku around consumer app development with Force.com for the enterprise.

Screenshot 2014-06-25 16.26.13

Christophe kindly requested that we didn’t take any pictures for this part, as he pulls up a console screen to show off Salesforce Connect for Heroku. As someone who heavily works in the data integration space on a daily basis this is really exciting; you no longer need to develop complex integration to connect the two clouds. At a very high level, you can pick objects in Salesforce and have these objects created automatically on Heroku (e.g. Postgres), then within a few more simple clicks you have configured uni or bi-directional data synchronisation – not quite real-time, but as close as, leaving you with just the fun stuff to do: building apps on the respective clouds.

Christophe closes out his presentation just as the pizza arrives. (Domino’s)

Short break to grab pizza and another beer then the final talk for the evening is from BlueWolf’s Florien Hoehn.

Florien is talking about the new RemoteObjects functionality, common use cases, limitations and best practices. Remote objects is available in developer preview which you will need to request to be enabled in your org. Remote objects moves us completely inside the browser and takes JavaScript remoting one step further by removing the need to create controller classes moving controller methods into visualforce page in the form of models.

<apex:page>
    
    <!-- Remote Objects definition to set accessible sObjects and fields -->
    <apex:remoteObjects >
      <apex:remoteObjectModel name="Warehouse__c" jsShorthand="Warehouse" fields="Name,Id">
            <apex:remoteObjectField name="Phone__c" jsShorthand="Phone"/>
        </apex:remoteObjectModel>
    </apex:remoteObjects>

    <!-- JavaScript to make Remote Objects calls -->
    
        fetchWarehouses = function(){
            // Create a new Remote Object
            var wh = new SObjectModel.Warehouse();
            
            // Use the Remote Object to query for 10 warehouse records
            wh.retrieve({ limit: 10 }, function(err, records){
                if(err) alert(err.message);
                else {
                    var ul = document.getElementById("warehousesList");
                    records.forEach(function(record) {
                        // Build the text for a warehouse line item
                        var whText = record.get("Name");
                        whText += " -- ";
                        whText += record.get("Phone");
                        
                        // Add the line item to the warehouses list
                        var li = document.createElement("li");
                        li.appendChild(document.createTextNode(whText));
                        ul.appendChild(li);
                    });
                }
            });
        };
    

    <h1>Retrieve Warehouses via Remote Objects</h1>

    <p>Warehouses:</p>

    <ul id="warehousesList">
    </ul>
    <button onclick="fetchWarehouses()">Retrieve Warehouses</button>

</apex:page>

Full details can be found here:
http://docs.releasenotes.salesforce.com/en-us/api/release-notes/rn_vf_remote_objects.htm

Worth noting, this doesn’t replace the robust nature of pure Visualforce development / MVC architecture, everything has it’s place. Business critical apps will still need to follow that path, but I can see general UX productivity going up and non-critical apps taking advantage of remote objects in some areas of the overall solution, for example lookup /drop-downs can simply be created in the page without relying on complex controller code and logic.

As with every Meetup the final few words and thanks come from Anup, the Meetup co-organiser. You can find his blog here – http://anupjadhav.com/

Leave a Reply

%d bloggers like this: