Visualforce to the rescue?

You probably expected I would highlighting be the new Lightning Component Framework. However I would argue, that because our app is completely standalone, Visualforce is actually the superior choice.

Visualforce truly is a horrible framework for web applications. It’s slow, monolithic, extremely limited and has been neglected worse than our countries crumbling infrastructure.

Q: So why did we stick with it?

A: Visualforce is GREAT when it does not contain any Visualforce

Our rewritten app in it’s entirety ;)

The B.A.S.S. Stack

So yea… we’re just using Visualforce as a container. Nothing ground breaking; you may have seen/done something similar. What I really want to demonstrate is how this approach can be combined with the latest and greatest in web development to give you a truly “modern” app & development experience.

I’ve extracted the tooling, frameworks, configurations & scripts that make up our app into something I’ve dubbed the Bad Ass Salesforce Stack starter:

BASS like the fish

React: proven, lightweight, fast, and it doesn’t hurt to officially be supported by a tech giant. Falls somewhere in between the over-engineering of Angular2 & the minimalism of vuejs. Quick & Easy to learn.

Redux (optional): Since our app is heavy in business logic, we needed dedicated state management. However, for applications that are primary data display & CRUD, you probably don’t need this. You could also swap redux with other frameworks like mobx.

Typescript: While I’ve listed it 3rd, this is my favorite part. You could easily make a case for Angular2, VueJs or any other framework to replace the rest of this stack, but (IMO) Typescript is CRITICAL to writing enterprise javascript applications. Advanced typing system, code-completion, additional language features, compilation errors, improved refactoring… the list goes on…

antd (optional): Component library. There are a lot of options to choose from in this category, but I’ve really enjoyed working with antd. If it’s important that your app looks for “salesforcey”, you could swap with React LDS.

ts-force (optional): a strongly typed Salesforce ORM. Uses code generation to created concrete classes for SObjects. (Disclaimer: I’m the author and this package is still in development… that said, it’s been surprisingly stable). You could replace with js-force or any other javascript client, but you’d lose productivity & type safety.

webpack: Used to package app and as a local development server

sfdx-cli: used to authenticate & deploy to salesforce

It’s worth noting, the specific choices above could be replaced with pretty much any modern frameworks/libraries. The true goal of this repo is really just to demonstrate how you can apply modern develop & build processes to Salesforce. It works well as a “starter” which can then be modified to fit your needs.

The important thing is that our solution is no longer “owned” by Salesforce.

Dev Workflow

Local Development

B.A.S.S. is optimized to give the best possible developer experience (B.A.S.S.D.X?). Salesforce recently opened up custom CORS, which allows us to use it’s API’s with localhost.