Taking Gliffy to the Cloud – Moving to Atlassian Connect - Mike Cialowicz

Preview:

DESCRIPTION

To take advantage of Atlassian Connect, the Gliffy team had to re-architect several components of our popular diagramming plugin. Learn about the challenges we faced, how we overcame them, and tips on how you can take your P2 plugin to the cloud.

Citation preview

#atlassian

MIKE CIALOWICZ • ATLASSIAN PLUGINS LEAD • GLIFFY • @MikeCialowicz

Taking Gliffy to the CloudMoving to Atlassian Connect

Taking Gliffy to the Cloud

Taking Gliffy to the Cloud

A B O U T G L I F F Y

Taking Gliffy to the Cloud

A B O U T G L I F F Y

P 2 V S C O N N E C T

Taking Gliffy to the Cloud

A B O U T G L I F F Y

P 2 V S C O N N E C T

G L I F F Y J I R A C O N N E C T A D D - O N

Taking Gliffy to the Cloud

P 2 V S C O N N E C T

A B O U T G L I F F Y

G L I F F Y J I R A C O N N E C T A D D - O N

10,000+ Organizations in 100+ Countries

Taking Gliffy to the Cloud

P 2 V S C O N N E C T

A B O U T G L I F F Y

G L I F F Y J I R A C O N N E C T A D D - O N

+

We’re already in Atlassian’s cloud!

We’re already in Atlassian’s cloud!…formerly known as

…but it’s our P2 plugin

a download product in a cloud service

…but it’s our P2 plugin

P2 in OnDemand: Not Ideal

• Rely on Atlassian to push updatesP2 in OnDemand: Not Ideal

• Rely on Atlassian to push updates• Plugins consume host resources

P2 in OnDemand: Not Ideal

• Rely on Atlassian to push updates• Plugins consume host resources

P2 in OnDemand: Not Ideal

P2 in OnDemand: Not Ideal

• Restricted tech stack: Java

P2 in OnDemand: Not Ideal

• Restricted tech stack: Java• OSGi = sad developers

P2 in OnDemand: Not Ideal

• Restricted tech stack: Java• OSGi = sad developers• Constant API changes

P2 in OnDemand: Not Ideal

What is Connect?

• A new way to build add-ons

What is Connect?

• A new way to build add-ons• It’s in the cloud: you host, you control

What is Connect?

• A new way to build add-ons• It’s in the cloud: you host, you control• Everyone can sell in OnDemand!

What is Connect?

Benefits

• Continuous delivery & rapid updates

Benefits

• Continuous delivery & rapid updates• Well-designed, well-defined API

Benefits

• Continuous delivery & rapid updates• Well-designed, well-defined API• Choose your tech stack

Benefits

• Continuous delivery & rapid updates• Well-designed, well-defined API• Choose your tech stack

Benefits

$$

Taking Gliffy to the Cloud

P 2 V S C O N N E C T

A B O U T G L I F F Y

G L I F F Y J I R A C O N N E C T A D D - O N

• Editor launch• Diagram save

Two Gliffy JIRA Use-Cases

Editor Launch

Editor Launch Dialog

Editor Launch Dialog

Editor Launch: Components

• HTML5 editor

Editor Launch: Components

• HTML5 editor• Shape libraries

Editor Launch: Components

• HTML5 editor• Shape libraries• Templates

Editor Launch: Components

Resources in P2

#ToTheCloud!

#LensFlare

Web App Resource Delivery

• Fast• Cacheable

Web App Resource Delivery

• Fast• Cacheable} 1. Fetch using GET

2. Use GZIP3. CDN4. HTTP cache headers

HTML5 Editor

HTML5 Editor

STATIC

Shapes

Shapes

STATIC

Templates

Templates

STATIC

•HTML5 Editor•Shapes•Templates

Gliffy JIRA Connect Resources

•HTML5 Editor•Shapes•Templates } +

CDN!

S3 CloudFront

Gliffy JIRA Connect Resources

CDN Cache Invalidation

S3:

CloudFront:

P2: atlassian-plugin.xml

Connect: atlassian-connect.json

• Editor launch• Diagram save

Two Gliffy JIRA Use-Cases

Diagram Save

Diagram CRUD

• RESTful Services• open• save/update• delete• history• import• export

Diagram CRUD

P2: RESTful ServicesAtlassian REST Service

P2: RESTful Services

#ToTheCloud!

Gliffy JIRA Connect Services

•Diagram CRUD•JWT Auth•Transform

Gliffy JIRA Connect Services

}}

atlassian-connect-express

Common Gliffy Service

•Diagram CRUD•JWT Auth

•Transform

•Diagram CRUD•JWT Auth }

} Common Gliffy Service•Transform

Gliffy JIRA Connect Services

•Diagram CRUD•JWT Auth }

} Common Gliffy Service•Transform

Gliffy JIRA Connect Servicesatlassian-connect-express

+RDSBeanStalk

+S3

Connect: RESTful Services

Connect: RESTful Services…running on our stack

Connect: RESTful Services…running on our stack

#darkIDEtheme4life

Save Request

Save Request

Save Request elite h4xx0r view

Gliffy Connect Cloud • Latest diagram• Older versions

!

• Latest diagram as attachment

Diagram Storage

Gliffy Connect Cloud • Latest diagram• Older versions

!

• Latest diagram as attachment

Easy migration to Server / Data Center

Diagram Storage

Why AWS?

• Simplicity: easy to get started

Why AWS?

• Simplicity: easy to get started• Power: many advanced features/services

Why AWS?

• Simplicity: easy to get started• Power: many advanced features/services• Flexibility: grows with you

Why AWS?

• Simplicity: easy to get started• Power: many advanced features/services• Flexibility: grows with you• Reliability: fault tolerant

Why AWS?

• Simplicity: easy to get started• Power: many advanced features/services• Flexibility: grows with you• Reliability: fault tolerant• Economy: relatively inexpensive

Why AWS?

Elastic Beanstalk

#atlassianKey takeaways:

#atlassianKey takeaways:

• Using Connect, sell in OnDemand!

#atlassianKey takeaways:

• Using Connect, sell in OnDemand!• Use Atlassian frameworks as examples

#atlassianKey takeaways:

• Using Connect, sell in OnDemand!• Use Atlassian frameworks as examples• AWS / Heroku are great ways to get started

#atlassianKey takeaways:

• Using Connect, sell in OnDemand!• Use Atlassian frameworks as examples• AWS / Heroku are great ways to get started• CDN-ify static resources!

#atlassianKey takeaways:

• Using Connect, sell in OnDemand!• Use Atlassian frameworks as examples• AWS / Heroku are great ways to get started• CDN-ify static resources!• Plan for scale

#atlassianKey takeaways:

• Using Connect, sell in OnDemand!• Use Atlassian frameworks as examples• AWS / Heroku are great ways to get started• CDN-ify static resources!• Plan for scale• Plan for “BTF” migration to Server / Data Center

• Find me wandering around the conference• Get free stuff: visit Gliffy’s conference booth• Use the tweeters: @MikeCialowicz• Use the interbots on port 465: mike@gliffy.com !

Resources:• Connect Guide & API https://developer.atlassian.com/static/connect/docs/guides/introduction.html• Connect Express

https://bitbucket.org/atlassian/atlassian-connect-express• Connect Play

https://bitbucket.org/atlassian/atlassian-connect-play-java

Questions?

Thank you!

MIKE CIALOWICZ • ATLASSIAN PLUGINS LEAD • GLIFFY • @MikeCialowicz

Recommended