Tim Williams Portfolio

SalesforceDX2018: Notes, link, ideas, etc. from the Salesforce Developer's conference in San Francisco

Youtube Channel Link

Day 1

1. Heroku Kiosk
2. Heroku Connect (Integration with Salesforce)
3. 3 Trailhead badges completed for sweatshirt
4. Salesforce DX, the App Development Lifecycle, and You
5. Open CLI Framework: Create Command Line Tools Your Users Love

Day 2

1. JavaScript for the Salesforce Platform: A Beginner's Guide
2. The Salesforce Lightining Design System
3. Sforce connect: The APEX Connector Framework
4. Build Your First Lightining Component

Day 1

Heroku Kiosk

• Heroku has come a long way since the first time I used it (LONG time ago), can deploy almost any popular web language app (php, nodejs), uses the new Heroku CLI (built on OCLIF, talked about later down the page). Really cool stuff
• Heroku takes all your code and compiles it down to a (binary?) 'slug' they then inject this slug into a server container when you create a heroku instance.

https://devcenter.heroku.com/articles/getting-started-with-php#deploy-the-app

Questions:

• What access do you have over the server rules? Like rewrite's to use a front controller pattern in PHP and route all your requests through index.php?

Heroku Connect (Integrating custom Heroku apps with Salesforce)

https://devcenter.heroku.com/articles/heroku-connect http://sfdcworkshop.com/workshop/heroku-connect/hc-py-flask/

Heroku Connect Dashboard: Dashboard Image Linke

Database Mapping:

3 Trailhead badges completed for sweatshirt

https://trailhead.salesforce.com/en/projects/quickstart-reports

https://trailhead.salesforce.com/projects/quickstart-visualforce

https://trailhead.salesforce.com/projects/quickstart-devzone-app

Salesforce DX, the App Development Lifecycle, and You

https://developer.salesforce.com/blogs/2018/02/getting-started-salesforce-dx-part-1-5.html

https://trailhead.salesforce.com/en/modules/sfdxdevmodel/units/sfdxdevmodel_release

Open CLI Framework: Create Command Line Tools Your Users Love

https://oclif.io/

https://news.ycombinator.com/item?id=16629733

https://blog.heroku.com/open-cli-framework

Oclif Framework

• Written in Node.js, they wanted and partially wrote it in Go but scraped that in the end and went full on with node.js
• Packed with a bunch of cool features that get to

Day 2

JavaScript for the Salesforce Platform: A Beginner's Guide

Bitly Link for the talk info

JSforce: Develop Salesforce apps with JavaScript

Nforce: Node.js REST api wrapper for Salesforce

Salesforce CLI

Recommended

Recommended Talk On the Event Loop

Lookup Later

• Salesforce Quip Live Apps?

The Salesforce Lightining Design System

https://www.lightningdesignsystem.com/

Components:

• Problem SLDS Tries to Solve is keeping a consistent feel accross different apps in Salesforce
• SLDS is a single source of truth for the designers
• Design Tokens ==> Varibles like sass for your style guide
• You can download it to play around with the UI kit on NPM, it's all frontend code (html/css/js) it is basically Bootstrap for Salesforce https://www.npmjs.com/package/@salesforce-ux/design-system

Designing:

• Let designers do the designing because mine are terrible
• ?? Profit

Developing:

• Embracing the SLDS lets developers focus on impementation on the interfaces

• 3 Main Tools you'll use when developing:

  1. Design system

  2. Component library -- (design system + React, whatever library you want to use)

  3. Developer organization

  Utilities Component gives you things like margins slds-m-top-small gives you a small margin on whatever element you are adding to it

Questions:

• Where would you put your custom CSS if you HAD to end up using it?

Create yourn own design token (?) thing to extend and SLDS for use across different components

Links:

https://www.lightningdesignsystem.com/components/cards/

https://www.lightningdesignsystem.com/downloads/

https://github.com/salesforce-ux/design-system/issues

https://www.sketchapp.com/

https://www.lightningdesignsystem.com/design-tokens/

Sforce connect: The APEX Connector Framework

Sforce connect and the apex connector framework https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apexconnectorstart.htm

3 Types of connectors

1. Cross Org:
2. Odata connector:
3. Custom (This demo is about this one): Join multiple tables into an external objects External Objects store metadata about external api data structures
4. A custom apex connector built with this framework will allow you to consume REST endpoints of other applications anywhere, and intake that data into your Salesforce instance.

Most important methods to know:

• DataSource.Connection
• DataSource.Provider
• the sync() method:
• indirectLookup() function is what connects this external data and links it into your Salesforce database
• externalLookup() Passes your datas uid over to salesforce database, using both these methods you can now join tables between 2 different data sources
• Documentation links on setting up the connection

Debugging:

• Odata and Cross-Org, apex user -> debug log will show you the callout debug info, including all the HTTP request/response information
• They are building out a better, easier debugger to use and releasing it soon

Take Aways:

• Sforce is great for the apps that customers want a ton of UI customization control over
• Connectors are great for app you want to build with very custom buisness logic, but have data that eventually need to get into Salesforce or the app needs data from Salesforce

Build Your First Lightining Component

Project: Quick Start Lightning Components

Trailhead we walked through

Alternative Trailhead link I have no idea what it's for

Building a component

• Visual Force is the server side rendered version of Salesforce frontend.
• Lightining is not server side rendered, it is it's own frontend js framework, just like any other frontend app, so how does it get data?
• @AuraEnabled on the Apex controller, this allows lightining to call data from the apex controller.
• ?? Profit

Lightining Components:

• What is a component?
• Is a bundle of different things needed to manage the component
• It encapsulates logic and presentation resources for THAT component, and can be shared across app exchange

• Look through the pieces of a component bundle:

  • Component File - Contains the Markup for the view presentation
  • Controller - Controllers will handles event in the components markup with client-side JS
  • Helper - Javascript HELPER functions, can be called from any other JavaScript in the component bundle, let's you factor out re-usable pieces of JavaScript
  • Style - This is your CSS only applied to its component's markup

  Explore the rest in the Component Developer Guide on your own:

  • Documentation -
  • Renderer -
  • Design -
  • SVG -

Calling out to apex backend from a lighning controller:

Go through this code:

({
  myAction : function(component, event, helper) {
    var action = component.get("c.getContacts");
    action.setParams({
      recordId: component.get("v.recordId")
    });
    action.setCallback(this, function(data) {
      console.log(data);
      component.set("v.Contacts", data.getReturnValue());
    });
    $A.enqueueAction(action);
  }
})

• Component Initialization is an event that indicated that the component has been built, but not yet rendered.

• init() is that event, client side controller function, action is the action function name from you Javascript controller

  <aura:handler name="init" value="{!this}" action="{!c.myAction}" />

• @AuraEnabled - Adds the ability for a lightining component to call an apex controller but doesn't it's the ONLY thing that can call it.

Question's:

1. What is SOQL? Hear it mentioned everywhere, assuming it is SForce