Building Office 365 Apps with TypeScript

Post on 16-Apr-2017

196 views 5 download

Transcript of Building Office 365 Apps with TypeScript

www.winsmarts.com contact@winsmarts.com

Office365 Apps with TypeScript

sahilmalik@winsmarts.com | @sahilmalik

www.winsmarts.com contact@winsmarts.com

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

www.winsmarts.com contact@winsmarts.com

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!!

www.winsmarts.com contact@winsmarts.com

Disclaimer

• I do not work for Microsoft

• All opinions presented here, are mine

www.winsmarts.com contact@winsmarts.com

Office365

Azure AD

www.winsmarts.com contact@winsmarts.com

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

www.winsmarts.com contact@winsmarts.com

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

www.winsmarts.com contact@winsmarts.com

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

www.winsmarts.com contact@winsmarts.com

Authorization Code Grant Flow

www.winsmarts.com contact@winsmarts.com

Authorization Code Grant Flow

• #1 Request an Authorization Code

www.winsmarts.com contact@winsmarts.com

Authorization Code Grant Flow

• #2 Authorization Code Response

www.winsmarts.com contact@winsmarts.com

Authorization Code Grant Flow

• #3 Request access token with auth code

• #4. Access token response

www.winsmarts.com contact@winsmarts.com

Now lets talk a little about TypeScript..

www.winsmarts.com contact@winsmarts.com

Now lets talk a little about TypeScript..

www.winsmarts.com contact@winsmarts.com

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.)

www.winsmarts.com contact@winsmarts.com

If you are writing enterprise apps using JavaScript

www.winsmarts.com contact@winsmarts.com

Endorsement

• Angular2 is written using TypeScript

www.winsmarts.com contact@winsmarts.com

Demo Time!!

www.winsmarts.com contact@winsmarts.com

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

www.winsmarts.com contact@winsmarts.com

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.

www.winsmarts.com contact@winsmarts.com

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

www.winsmarts.com contact@winsmarts.com

Single Codebase

Cordova Electron Web

UWPiOSAndroidothers Mac Linux IE8 and above

Still pimping xcode/xaml/etc?..