tap4373pu acting as one: plug in to vsphere or distribution › vmware › vmworldus17 › sess ›...

Yiting Jin, VMware Product ManagementIna Uzunova, VMware Engineering, Product OwnerLaurent Delamare, VMware EngineeringVladimir Velikov, VMware Engineering

TAP4373PU

#VMworld #TAP4373PU

Acting as One: Plug in to vSphere

VMworld 2017 Content: Not fo

r publication or distri

bution

• This presentation may contain product features that are currently under development.

• This overview of new technology represents no commitment from VMware to deliver these features in any generally available product.

• Features are subject to change, and must not be included in contracts, purchase orders, or sales agreements of any kind.

• Technical feasibility and market demand will affect final delivery.

• Pricing and packaging for any new technologies or features discussed or presented have not been determined.

Disclaimer

#TAP4373PU CONFIDENTIAL 2



bution

Speaker Introduction

3

• Yiting Jin, VMware Product Management • Palo Alto, California

• Ina Uzunova, VMware Engineering and Product Owner • Sofia, Bulgaria

• Laurent Delamare, VMware Engineering • Palo Alto, California

• Vladimir Velikov, VMware Engineering • Sofia, Bulgaria

• vSphere accelerates the transition to the HTML client

• Provide HTML-based plugin solutions using the vSphere Client SDK

• Lifecycle management tools

• Standardized user experience guidelines

• Regular support and informational webinars throughout the year

Who

Why

#TAP4373PU CONFIDENTIAL



bution

Session Agenda

1 Introduction

2 Customer Feedback

3 History of vSphere Client Extensibility

4 Today: SDK 6.5 and 6.5u1

5 Where Do I Start?

6 Design Standards and Best Practices

7 Roadmap and Future Ideas

4#TAP4373PU CONFIDENTIAL



bution

Overview

• VMware announced deprecation of the vSphere web client (Flash)

• Integration with the vSphere client provides maximum awareness of

your solution, seamless workflows, and optimal user experience

• vSphere client SDK today provides APIs for building plugins that are

compatible with both the vSphere HTML client and the Flash client

• Focus on building your solution for the vSphere client (HTML), not

vSphere web client (Flash)




bution

6

100+ vSphere Client Plugin Partners

VSPHERE CLIENT



bution

Personas

7

“I am building an HTML plugin for the vSphere client from

scratch.”

“I have a Flex plugin today, and am building a plugin that

can run in both clients.”

“I have a Flex plugin today, and am looking to transition a plugin so that

it only works for the vSphere client.” (no Flex testing)

1 2 3

“I want to reuse as much

as possible of what I built

in my Flex plugin, but for

the vSphere client.”




bution

8



bution

9



bution

10



bution

11



bution

12



bution

Customer FeedbackOr, “Why should I build a plugin for the vSphere client?”



bution

“We Bought the Partner Solution, but We’re Not Using It”




bution

15

Benefits of having a plugin:

▪ Seamless “single pane of

glass” experience

▪ Similar look and feel

▪ Preserve object context

▪ Fewer clicks, logins, and

toggling between UIs

▪ Increased awareness of

partner solution – without

the user having to do

anything extra!


vSphere Client Plugins Provide Customers with aSeamless experience



bution

vSphere Client (HTML): Faster Performance, Better Workflows


There's only a couple of things you can't do

in the HTML client so every now and then

we have to drop back to the Flash client

but for the most part that's what we've

moved to. It’s been great. It’s easy.

I want to say thank you for the

hard work you and your team

have put in. I've loved watching

the Fling come to life and now

use it daily.

I'm really loving what you are doing

with the HTML Client. It is exactly

what I always wanted in a [vSphere]

web client. Love at first sight!!!!

One thing screenshots won't

show you is how FAST it is. The

biggest drawback of the web

client has always been how slow

it is, going from page to page.

The fling is insanely fast, even

faster than the installed client.



bution

Over 53% of Customers Are Still Using the vSphere Thick Client

• Expect many customers to switch directly from vSphere thick client to vSphere client (HTML)

• No cost of switching clients

• No one will miss the Flash client!

• Don’t be that plugin to force users to go back to the Flash client!

17

Less than 35% customers are using the Flash Client


Source: vSphere customer survey, Aug. 2017



bution

Hot off the Press: Deprecation of vSphere Web Client (Flash)




bution

History of vSphere Extensibility



bution

vSphere Client SDK – Quick History


SDK 5.1Jul 2012

SDK 5.5.1Mar 2014

SDK 6.0Mar 2015

SDK 6.5Nov 2016

SDK 6.5.1Jul 2017

SDK 5.5Sept 2013

Flex and Java APIs

Multiple extension points

“HTML Bridge”

offers alternative

to Flex UI

Small Flex / Java

API updatesNo change in

Flex SDK

HTML Bridge

improvements

New HTML SDK

offers plugin

compatibility with

Flex & HTML Client

New bootstrapping

of JavaScript APIs

1st HTML Client! HTML Client

workflows at 90%

Web Client full featured

SDK Flings

Plugin-seed

Clarity



bution

Evolution of vSphere Client Solutions

21

If you wrote your plugin

based on:Flex-only APIs

Bridge API +

Flex SDK

Bridge API only

(No Flex SDK)

New JavaScript

API (future)

vSphere Client SDK version 5.1-6.5u11 5.5u1-6.5u1 5.5u1-6.5u1 > 6.5u1

View from Flex client —2

View from HTML client —

A Old functionality written with Flex-only SDK only for Flex client (earlier than vSphere 5.5u1)

B Functionality introduced with “Bridge” API: vSphere 5.5u1 to present (6.5u1)

C Future: New JavaScript API only for vSphere client (HTML), no Flex dependency

A A B

B

B

B C

Flex-native Mixed H5-native

B

1 No change to Flex APIs since vSphere 6.02 Nothing will be displayed in Flex client if developer bypasses Flex setup steps in SDK documentation




bution

Today: vSphere client SDK 6.5 and 6.5u1What’s New



bution

vSphere Client (HTML)




bution

Sample Workflows

1. Extend vSphere Client Navigation

2. Extend Monitor View

3. Extend list of actions on standard and custom objects

24



bution

VMware Flings: Latest vSphere Client and SDK Updates


SDKs release

regularly with

vSphere client flings



bution

Plugin Seed

26

• Make it easier to start a plugin from scratch

• Increase developer productivity with a fast development process and robust patterns

• Use a state of the art UI Tech Stack for enterprise web applications

Tool added to VMware HTML Client Fling with three main goals in mind:

Dev Mode => standalone app Plugin Mode => same UI in vSphere Client




bution

UI Tech Stack


Angular is the leading JS Framework for enterprise applications

VMware Clarity- Open source- UX consistency

Typescript is the industry standard for web applications

Angular-CLI handles builds, configurations, new components,…



bution

Partner server

Workflow of Plugin Installation

3rd party

plug-in1. Plugin is hosted 5. Plugin is checked for compatibility

with the current vSphere Client version

2. Plugin is registered as an entry

pointing to the plugin.zip on host

vSphere Client

3rd party

plug-in

3. vSphere Client requests all

registered plugins at user login

4. Plugin is

downloaded

from the URL

6. Plugin is deployed on the vSphere Client

vCenter Server

Plugin name: …

URL: …

7. Plugin is shown in the vSphere Client

6.5: Plugin registration dev tool 6.5 U1: Login-time optimizations

6.5: Compatibility matrix

6.5: Plugin best practices validator6.5 U1: Plugin OSGi sandboxing

6.5 U1: Show plugin certification status




bution

Four Easy Steps to Certify vSphere Client Plugins via VMware Code (Developer Center)


BuildvSphere Client

Plugin

Join SDDC

Integration Program

CertificationProvide Test

Results to VMware

{VMware Code}: code.vmware.com

vSphere Client SDK

Access to web client certification

Install Workbench, fill questionnaire and run

manual tests

Open SR and submit results. Receive signed plugin from VMware on

successful PASS

List on VMware Compatibility

Guide (VCG) and VMware Solutions

ExchangeVMworld 2017 Content: N

ot for publicatio

n or distribution

Where Do I Start?



bution

Personas

31

“I am building an HTML plugin for the vSphere client from

scratch.”

“I have a Flex plugin today, and am building a plugin that

can run in both clients.”

“I have a Flex plugin today, and am looking to transition a plugin so that

it only works for the vSphere client.” (no Flex testing)

1 2 3

“I want to reuse as much

as possible of what I built

in my Flex plugin, but for

the vSphere client.”




bution

How to Start HTML Plugin from Scratch

1. Get Familiar with the vSphere client

– Navigation menu, global views, vSphere objects

2. Initial Setup: Install SDK zip file, set up Java environment, configure Virgo server for pure HTML5 plugins

– Skip Flash builder and Adobe Flex setup

3. Create plugin template for pure H5 plugin

– No content is in the plugin yet

4. Write plugin content: Determine and develop extension points

5. Get and Display Data from vSphere Objects: Develop Service layer extensions (custom objects, extend columns and menu items)

6. Create and deploy plugin packages / XML Manifest file

7. Check that you followed best practices: Recommended for optimal user experience,Required for certification

32

Flex-only plugin to dual-client plugin:

1. Reuse back-end

2. Expand UI code to both clients


Source: vSphere client SDK Programming Guide 6.5u1



bution

Check Out Our Hands on Lab on Plugin Development!

• labs.hol.vmware.com

• Build a plugin from scratch

• Easy plugin lifecycle management

• Try out the lab (HOL-1811-07) at VMworld

• Also available after VMworld




bution

Design Standards: Best Practices for Building a Plugin



bution

Clarity Design System

35

• Open Source• Since vSphere 6.5• Growing rapidly




bution

vSphere Client Extensibility

37

Object Navigator

Guideline 1: Single plugin entry point

Custom objects

Guideline 2: Use top level views

vSphere objects: Summary Portlets

Guideline 3: One portlet per pluginGuideline 4: Only simple summarized info

vSphere objects: Monitor & Configure views

Guideline 5: One category with plugin viewsGuideline 6: TOC items always displayedGuideline 7: Loading indicators for view data

Actions

Guideline 8: Single action category per object




bution

Roadmap and Future Ideas



bution

Technology Directions

39

Flex HTML5

Thick Java layer

Light Java layer

Today

Ro

ad

map




bution

Architecture

vCenter 1.. N

UI layer

(Browser)

Service layer

(Virgo)• Core Services

• Data Service (DS) API

• User Session API

HTTPS

vSphere Web Service SDK

Java Platform

Back-end layer

Main UI, core plugin views

Data Service

Adapters

3rd party plugin views

Web

Controllers

HTML Platform

• Container and views

• JavaScript API

• Extension points

HTTPS calls to

get/post data

Partners

Client Platform/SDK

VMware vSphere

JavaScript API

Java Services

Back-end Server

Any remoting

protocol

JavaScript API

Light proxy-servlet in plugin




bution

Plugin Lifecycle Improvements – without Needing to Leave the vSphere Client




bution

Pre-check for Compatibility with Current vCenter Version & Build




bution

User Can only Install or Update Approved Compatible Plugins




bution

To Summarize…

44

• VMware announced deprecation of the vSphere web client (Flash)

• Integration with the vSphere client provides maximum awareness of your solution, seamless workflows, and optimal user experience

• vSphere client SDK provides APIs for building plugins that are compatible with both vSphere HTML client and Flash client

• Focus on building your solution for the vSphere client (HTML), not vSphere web client (Flash)

• Reduce dependency on Java layer

Want a “best practices” consultation for your plugin?

Sign up with [email protected]

Q&A on VMware Communities forum




bution

Resources for Reference

VMware {code} www.code.vmware.com

vSphere Client SDK https://code.vmware.com/web/sdk/65/web-client

vSphere Client and SDK Fling https://labs.vmware.com/flings/vsphere-html5-web-client#summary

45

vSphere Client SDK Forum https://code.vmware.com/forums/4974/vsphere-web-client-sdk

vSphere Client SDK Blog Posts https://blogs.vmware.com/code/html-client-sdk/

TAP enrollment https://www.vmware.com/partners/tap-access.html

@VMwarevSphere




bution

http://www.code.vmware.com/

https://code.vmware.com/web/sdk/65/web-client

https://labs.vmware.com/flings/vsphere-html5-web-client#summary

https://code.vmware.com/forums/4974/vsphere-web-client-sdk

https://blogs.vmware.com/code/html-client-sdk/

https://www.vmware.com/partners/tap-access.html

Related Sessions


Session Day / Time Session Type

ELW181107U – vSphere HTML Client SDK - Build a Plugin

WorkshopSunday, 1:30 pm – 3:00 pm Hands on Labs

SER3101PU – Acting as One: Plug in to vSphere Monday, 2:30 pm – 3:30 pm Panel Discussion

SER3100GU – Discuss Plug-In Experience with the vSphere

ClientTuesday, 11:30pm – 12:30 pm Group Discussion

SER1411BU – vSphere Clients Roadmap: HTML5 Client,

Host Client, and Web ClientTuesday, 1:00 pm – 2:00 pm Breakout

SER3084BU – Mind Your Foundation: Extending the Power of

the vSphere PlatformTuesday, 5:30 pm – 6:30 pm Breakout

SER3107PU – Running on Zero Downtime, Zero Data Loss:

Real-Life Cases with vSphere Fault Tolerance UsersWednesday, 8:30 am – 9:30 am Panel Discussion

SER1792GU – Discussion of vSphere Web Client (HTML5)

and the Transition Experience

Wednesday, 11:30 pm – 12:30

pmGroup Discussion

SER2790BU – Journey to a vSphere HTML Client

Ecosystem: Deep Dive with Big Switch NetworksWednesday, 3:30 pm – 4:30 pm Breakout



bution

Questions?




bution



bution

Thank YouFollow us on Twitter: @VMwarevSphere



bution



bution

51

Mobile Apps for iOS and Android devices (phones and tablets) are now available for

various Partner Sales Briefcases. Access App Store (iTunes) or Google Play and simply search for the briefcase you need (e.g., NSX briefcase).

Interactive Online Desktop Versions of these Sales Briefcases are also available for Partners to access via desktop/laptop/PC. Follow the link

below to learn more.

Mobile Apps for Partner Sales Readiness Briefcases Now Available on App Store and Google Play!

www.vmware.com/go/SalesBriefcase#TAP4373PU CONFIDENTIAL



bution

http://www.vmware.com/go/SalesBriefcase

Appendix



bution

Dev Mode vs. Plugin Mode

53

Plugin UI is a standalone app in dev modeFaster to develop and testCan use mock data or “live data”

Same view when plugin is deployed with vSphere Client




bution

tap4373pu acting as one: plug in to vsphere or distribution › vmware › vmworldus17 › sess ›...

Documents