EUGENE OKSMAN: My name is Eugene, and this is Akhilesh.
And together we run the mobile SDK for Salesforce.
Our mission is pretty simple-- to help developers create
amazing mobile apps that are powered by the enterprise data.
So when it comes to creating apps
that you use at your job, your employee-facing applications,
Salesforce is a great platform that
allows you to consume your enterprise data
and put that inside any mobile experience.
Obviously no mobile conversation is
complete without getting into the debate between native
and HTML5.
You've all been there.
Our position is pretty straightforward.
It depends on you.
You make the decision on an app by app basis.
That's why when we talk about our mobile SDK, we layer it.
And we provide you with all the essential functionality
that you need to create a really solid enterprise mobile app.
So we start by providing identity
via the OAuth2 standard.
We have a secure offline database in case
your app needs to work when it's completely disconnected.
We have API wrappers and data synchronization techniques
so that you can easily move objects and data back and forth
between the cloud and your mobile applications.
But when it comes to creating the user interface,
we give you the choice-- especially when
it comes to creating HTML-based apps.
There are a lot of great frameworks out there.
All of them have their merits, and it's really up to you
how you leverage them.
So now by combining your HTML with a hybrid container
that we have based on PhoneGap, web developers
become mobile developers.
And ultimately, we believe that is the future,
enabling every web developer to become a mobile developer.
But I'm here to talk about our journey with Polymer.
About a year ago, I was on Hacker News,
like I start my daily morning, and I saw this link
to this brand new framework.
I was like, all right.
I'll go check it out.
I started watching the video with Matt from Google I/O,
and I was just completely blown away.
This is from last year.
So in my excited state, I ran over to Akhilesh
and started ranting.
It's like, come on!
We have to try this framework.
It's amazing.
It's easy.
It's powerful.
Look at Designer.
Look at Sandbox.
It's so cool.
He was like, yeah, whatever.
You talk to me in [? bren. ?] You framework every single day.
But as we started this conversation,
we realized that Polymer was unique.
It was based on polyfills.
A lot of the platform stuff was going
to go away and be baked into the browser.
And that was a really attractive to us.
That's why we released our first version of our components
based on Polymer at our annual conference.
And we demoed that on stage in front of a large audience.
So now I'll go into Sandbox and show you what we demonstrated.
So what I have here is an instance of Sandbox
that we wired up with several Salesforce components.
So I'll start by dragging over the visual components
for the navigation.
Pretty simple components of starting up.
And then I'll drag over a list.
And the idea here is that we want
to build a product catalog for L'Oreal, a branded product
catalog that they could submit to their employees
and into their apps.
So now that I've dragged this UI list element,
you just saw a lot of data.
Well, this component behind the scenes,
made according to our cloud, it got all of the information,
with the proper security permissions,
and rendered this list.
Pretty cool.
It was that simple.
And if you look at the code, all it is right
now is just three lines.
But now I want to transform this list.
I'm pointing to one of our accounts tables,
but I'm building a product catalog.
So I'll change this to point to the product table.
And just like that, everything changed.
New REST API call, new data.
I can then further decorate this particular table
by changing some of the exposed attributes.
Let's add a picture.
And just like that, new data has been sent back
to this visual element.
No change in code, just changing the parameters.
And the behaviors and this list automatically reflect that.
But this app was supposed to be branded.
It was supposed to be for L'Oreal.
Now Akhilesh and I are not web developers,
so we decided to leverage the power of the web
by going to L'Oreal's website and taking their stylesheets.
So we literally went to this website,
copied some of the style properties,
put them into our app.
And now when we change the stylesheets to that of L'Oreal,
immediately the look and feel changes
of this particular component.
And it's that simple.
It's the same 20 lines of code.
And it looks like magic, but it's really
the power of web components, all the complexities hidden.
And as a developer, this is all you have to use.
So this was our first release, and we've
learned a great deal about Polymer.
And I'll hand it over to Akhilesh
to talk about what we built next.
AKHILESH GUPTA: Thanks so much, Eugene.
So as Eugene sort of showed us the journey,
all we started with simple elements.
Actually, we have come quite a long way now.
We have kind of built up our own sort of gallery
of our own elements here.
And initially when we started, we really
did not have much of an element.
We started with some basic data elements.
And you can see in this category, and lot of people
sort of talked about this beforehand,
you need to think about elements in two different categories.
The ones which are just data elements,
or non-visual elements, they just do behind the scenes
all the work for you and help other visual elements
to really render properly.
So we have few data elements, such as S Object collection
here to sort of point to some tables inside Salesforce
and gather some list of records from Salesforce
and the detail to fetch any record detail from Salesforce.
But then we started to work on some UI elements,
and we had some the simplest in view elements initially,
just to show simple application.
But then we actually started to work around
with the rest of our colleagues, and we
realized that our user experience
team had been working on a prototyping
framework with Angular.
And they were building a bunch of different components
in Angular, like web directives almost,
to help build a design framework so that they
can test new designs and do some user research with them.
So we talked to them.
We told them about Polymer, and they were super excited
about that.
And within actually few hours, they
were able to turn their Angular components
into Polymer components.
And you can see the gallery here--
and this is all hosted on a Heroku website--
you can see there is a whole gallery of more than 100+
components.
And you can see if I drag and drop, like for example
this element.
It's a simple anchor doc element,
we call it, and exposes all the properties on the right side.
Through our designer tool, I can go change anything here.
I can put my name.
And that's the beauty of Polymer.
I change any attribute that start to show up.
So all these elements which were, like whatever, Angular
earlier, were now Polymer with live binding capabilities.
We have a calendar component.
We have a navigation component I can pull down here.
So if you're building an application,
you want to have some navigation on the left side-- we all
are used to that through Facebook
and other applications.
A notification section.
So we have your built, building these sort of core elements
for prototyping.
But now when we could attach them with real data,
they really can come alive and may
help you build a proper application, which is exactly
which I kind of want to show you here.
So what we can do here, for example,
I can pull a simple list element,
which is nothing but a static HTML.
It's creating simple list of [? ULL and LIs. ?]
And what I can do is I can bind with real data coming
from Salesforce.
But to do that, I'll first just log into Salesforce account.
It will ensure that OAuth flow and give me
a session from Salesforce.
And I can drag and drop this invisible element
behind the scenes which is just running
a query against our account table.
And I can bind these two together now,
just by simply selecting my collection object
and using the collection property.
And while it quickly just pulls all my account records,
sales account records from Salesforce,
or the box using other APIs, I can go back
to my collection element, change anything here.
If I want to look at, say, Contact Table,
look at the recent items from there.
I can just change some properties,
and now I have a list of contacts
coming from Salesforce.
So let me show you some more stuff.
I can put some list header in there
to make it more contextual.
I can go to my list header element.
Drag it up there on the top.
Give it more context.
Bind back to my data element.
And specify the object on our table am I looking at.
Give some visual indication of the icon.
So now it shows exactly which kind of information I'm
looking at.
But this is, again, the simple view.
When we look at these demos, we're
always concerned about, OK.
Can I really build an application with this?
So what I was doing was we actually
built up a scaffold element, which
basically nothing but a container in some ways,
where you can put a navigation area.
So I can drag and drop my navigation element here,
which I showed you guys a little bit earlier.
So I can just drag and drop it here.
So I have now navigation working.
I have a notifications area.
I can drag and drop notifications here.
And then I was centrally sort of manager of it,
I can build my application.
And I can put these elements now back into this guy,
and bind this whole application from my navigation
on the left side.
So what I could do is go back to my collection object.
Instead pointing at the start value,
I can select it from a navigation
and say, selected as object property.
And voila! it automatically pulls in accounts.
So now if I tap on opportunities,
it's pulling my opportunities list.
And so I was able to build that quickly.
And it's kind of a cooking show that I'm
showing you now the final product.
So like this is the full application.
But I can select any object-- and it's kind of the designer
is a little broken here.
But ultimately, it gives me the simple [INAUDIBLE],
which is just 20 lines of simple HTML tags
which anyone can understand.
And the power which comes with Polymer and Mobile SDK, which
we as a product are working on, I
could just copy/paste the simple HTML.
Go back to Xcode where I can create a new project
with Mobile SDK, which works across on iOS platform.
It's a simple HTML page.
I can just drop this HTML here.
Save this guy, and run this in my iOS simulator.
It will launch this application.
Authenticate against Salesforce, using my Salesforce login flow.
And I have now the same application
running as a native application.
I can just choose any object, look at the details right here.
I have notifications.
It's a fully-fledged working application
that I could build in just 20 lines of code.
[APPLAUSE]
AUDIENCE: Say that link is available?
EUGENE OKSMAN: So yeah.
So this is part of our announcement.
Yeah.
So here's the link.
You go to bitly/mobilepacks.
We're an open company, and so we encourage everybody
to start playing with these frameworks.
All of the source is available on GitHub,
and we're putting Designer Host on Heroku onto this website.
So if you want to build an enterprise app,
get a free developer account and start using Polymer.
And together we're going to change the world.
[APPLAUSE]