Building Office 365 Apps with TypeScript

www.winsmarts.com [email protected]

Office365 Apps with TypeScript

[email protected] | @sahilmalik

mailto:[email protected]


Obligatory about me slide ..

• Twitter: @sahilmalik

• Hands on developer!• C#, SP, O365, JS, TS, Cordova, Electron, iOS, Android, etc.

• Worked in 18 countries, 5 continents.

• Author of 20+ books, videos, trainings, etc. etc.

• MVP for 15ish years.• C#, SharePoint, Office365

• Office Servers and Services, Visual Studio and Development Technologies


What am I doing here?

• Two sessions,• This session: Where I put AzureAD and O365 dev in perspective, a lay of the

land. And end with a demo.

• Another session: Where is more hands on, where we do stuff with TypeScriptand Office365. Pretty cool stuff!

• So lets get started!!


Disclaimer

• I do not work for Microsoft

• All opinions presented here, are mine


Office365

Azure AD


What can talk to Azure AD?

• Web Browser to Web Application

• JavaScript SPA

• Native App

• Web application calling Web API• Application Identity

• Delegated user identity

• Daemon


What can talk to Office 365 APIs?

• Web Browser to Web Application

• JavaScript SPA*

• Native App*

• Web application calling Web API• Application Identity

• Delegated user identity

• Daemon

* can also call CSOM+REST also with user identity


What is special about these?

• JavaScript SPA*

• Native App*

* can also call CSOM+REST also with user identity

• Registered as native apps

• Use OAuth2 implicit flow


Authorization Code Grant Flow



• #1 Request an Authorization Code



• #2 Authorization Code Response



• #3 Request access token with auth code

• #4. Access token response


Now lets talk a little about TypeScript..


Now lets talk a little about TypeScript..


I wish I had time to go in depth on TypeScript

• .. So I’ll just say this .. • JavaScript sucks!

• Typescript makes JavaScript usable, especially for larger applications.

• Strong typing

• Better paradigms (classes, modules, etc.)


If you are writing enterprise apps using JavaScript


Endorsement

• Angular2 is written using TypeScript


Demo Time!!


Two demos ..

1. ng2ADAL (well it’s not Microsoft ADAL)1. https://github.com/maliksahil/Angular2AzureADAuthLib

2. Electron App using TypeScript + Angular2 + Office365 APIs1. https://github.com/maliksahil/AngularJS2ElectronOffice365App


https://github.com/maliksahil/Angular2AzureADAuthLib

• .. Implements Authorization Code Grant flow for you, so you don’t have to write all that crap!

• Also takes care of renewing the token for you.

• Open source, feel free to extend it or fix it.


https://github.com/maliksahil/AngularJS2ElectronOffice365App

• Electron• Lets you write desktop apps (mac/windows/linux) using web technologies

• You can do some really fancy things very easily• Tap into bluetooth, filesystem, camera, notifications, jump lists, dock bar,

everything you can imagine a desktop app doing

• Also distributable as a UWP or Mac App

• And the code translates to Cordova too


Single Codebase

Cordova Electron Web

UWPiOSAndroidothers Mac Linux IE8 and above

Still pimping xcode/xaml/etc?..

Technology

Building Office 365 Apps with TypeScript