Download - Building Office 365 Apps with TypeScript
![Page 2: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/2.jpg)
www.winsmarts.com [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
![Page 3: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/3.jpg)
www.winsmarts.com [email protected]
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!!
![Page 4: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/4.jpg)
www.winsmarts.com [email protected]
Disclaimer
• I do not work for Microsoft
• All opinions presented here, are mine
![Page 6: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/6.jpg)
www.winsmarts.com [email protected]
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
![Page 7: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/7.jpg)
www.winsmarts.com [email protected]
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
![Page 8: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/8.jpg)
www.winsmarts.com [email protected]
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
![Page 10: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/10.jpg)
www.winsmarts.com [email protected]
Authorization Code Grant Flow
• #1 Request an Authorization Code
![Page 12: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/12.jpg)
www.winsmarts.com [email protected]
Authorization Code Grant Flow
• #3 Request access token with auth code
• #4. Access token response
![Page 15: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/15.jpg)
www.winsmarts.com [email protected]
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.)
![Page 19: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/19.jpg)
www.winsmarts.com [email protected]
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
![Page 20: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/20.jpg)
www.winsmarts.com [email protected]
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.
![Page 21: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/21.jpg)
www.winsmarts.com [email protected]
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
![Page 22: Building Office 365 Apps with TypeScript](https://reader031.vdocuments.net/reader031/viewer/2022030316/5872a1601a28ab07208b5caf/html5/thumbnails/22.jpg)
www.winsmarts.com [email protected]
Single Codebase
Cordova Electron Web
UWPiOSAndroidothers Mac Linux IE8 and above
Still pimping xcode/xaml/etc?..