js talks 2016 - gain superpowers with office js

Gain superpowers with Office JS

by Jivko PetiovChief Architect, Abilitics

Largest payment processor192 million customers

Paypal Invoicing for Excel

Paypal Invoicing for Excel

• Office.js• SPA• jQuery• Dust.js

Evernote

Wikipedia

Zendesk

Agenda

• What is Office JS• Demo – hello world• Demos – real world• The big picture

What is Office JS

What is Office JS• Development platform• Extend MS Office with web

technologies• Office.js API library

• Launched in 2013• Hype since 2015

Supported platforms

Word Excel PowerPoint

Outlook Onenote

Office 2013/2016 for Windows

Yes Yes Yes Yes -

Office Online Yes Yes Yes Yes YesOffice for Mac Yes Yes Yes Yes -Office for iOS Yes Yes Yes - -

Android – “Working on it”

Wide reach• 1.2 billion MS Office users• 60 million Office 365 users• Office Store - 1000+ apps• Payment model (MS gets 20%)

Who else• SAP• Brittanica• MailChimp• iGlobe• Adobe• ZenDesk• TeamViewer• Evernote• Youtube• DocuSign• Salesforce• Uber

• Boomerang• Wunderlist• Zoho CRM• Wikipedia• SugarCRM• Insightly• Dropbox• XING• Sage One• Bing Maps• Shutterstock• ImageBank

Anatomy of an Office JS app

What can an Office app do?• Task Pane• Content add-in• Ribbon button, ribbon tab• Dialog

Task Pane

Content add-in

Ribbon button, ribbon tab

Dialog

Demo - Hello World

Demos – real world

Deployment

• Side-loading VS• Side-loading manually• File share & trusted catalog• Office Store• SharePoint App catalog• Office 365 centralized deployment

Security

• App isolationo Web-browser control (or iframe)o Async office.js APIo Resource limits – CPU, memory,

crashes• App permissions (none, read, write,

etc)• Same origin policy – JSONP, CORS,

Server-side proxy• SSL• Secure server authentication

The Big Picture

• 1.2 billion Office users• Office 365 ++• 1000+ apps in Store

• Form factors:o 1. Desktopo 2. Tableto 3. Phoneo 4. Office

Thank You

• jivko@abilitics.com• twitter.com/jivkopetiov• github.com/abilitics – code to be

uploaded here

Questions?