SharePoint Saturday Durban - Introduction to AngularJS with the Microsoft Graph

Nov 21, 2016Download as PPTX, PDF0 likes119 views

Every developer hears about AngularJS and all the magic it does for you applications. In order to kickstart you AngularJS journey, this session is an introduction to the AngularJS concepts applied to any Office 365 development. Different workloads will be targeted (Mail, Calendar, Files) and the Office 365 API will be our main datasource. We will also cover SharePoint Online specific data access (Office 365 API, REST, CSOM and Search) to meet your current development needs. The 3 key takeaways of this session are : - You will understand the basics of the AngularJS framework - You will learn how to communicate withthe Office 365 through AngularJS - You will be able to apply those new skills in your next project

Introduction to AngularJS with the Microsoft Graph
Sébastien Levert
29 October 2016
Durban, SA
#SPSDBN

Who’s Sébastien Levert !?
Montreal, Canada 2toLead.com
Office Development
MVP
Web Developer @sebastienlevert sebastienlevert.com

Agenda
• What AngularJS and why should I use it ?
• What is the Microsoft Graph ?
• What is an Azure AD Application ?
• Demos
• Resources

SharePoint Saturday Durban - Introduction to AngularJS with the Microsoft Graph

What is AngularJS
• Superheroic JavaScript MVW framework
• Developed by Google
• Started in 2009
• Used by Netflix, Youtube, Vevo, MSNBC, …, You ?
• A game changer in web development
• Angular 2.0 coming in 2015 2016

Why should I use AngularJS ?
• Getting closer to client-side development
• Start thinking like a web developer, not like a SharePoint
developer
• Living on the edge
• It’s a mighty beast
• Building applications faster, with less code
• Because everyone is heading towards it

Key concepts of AngularJS
• Architecture pattern
• Enhanced HTML templating
• 2-way data-binding
• Routing engine
• Dependency injection
• Unit testing

What is the Microsoft Graph ?
Single endpoint for:
Accessing data
/me, /users, /groups, /messages, /drive, ….
Traversing data
/drive/<id>/lastmodifiedByUser
Accessing insights
/insights/trending
Work/School and Personal
https://graph.microsoft.com/

Come as you are and get your data
• Use your favorite technology
and host it anywhere
• Code in your favorite IDE
• Use standards to connect to
your data
• Get data, insights and
relationships from the Office
Graph

Single authentication flow for Office 365
• Sign users in using
OpenID Connect
• Supports MFA and federated user
sign-in
• Device apps, web sites,
SPAs, and service apps
• Pin apps to Office 365 app
launcher from My apps

Common consent
• Admin and end-user consent
• Secure protocol
• No capturing user credentials
• Fine-grained access scopes
• Long-term access through refresh
tokens

Authentication options
• Azure AD only
• Azure AD and Microsoft Accounts (Preview)

Resources
• https://dev.office.com
• https://graph.microsoft.io
• http://github.com/officedev
• http://github.com/microsoftgraph
• http://github.com/sebastienlevert
• http://github.com/richdizz
• https://github.com/maliksahil

Sébastien Levert presented on introducing the AngularJS framework and the Microsoft Graph API. The presentation covered what AngularJS is and why developers should use it, an overview of the Microsoft Graph and how it provides a single endpoint to access data from Office 365 and Microsoft services, and how to authenticate and build applications using the Microsoft Graph through Azure Active Directory applications. Code samples and resources were provided to help developers get started with AngularJS and the Microsoft Graph.

Interoperability of components built with different frameworksSouvik Basu

As React, Vue, Angular and other Frontend frameworks mature, more and more projects embrace them in production. It has reached a point where a project written in React wants to use Angular or Vue components (and vice versa). We will explore pragmatic ways to use components created using different frameworks in the same app. I am working on an Angular project for one of our clients. It recently acquired a company which is invested into React for few years. There is a plan to merge our products which has a lot of feature overlap. To use capabilities of existing teams, it was decided to use React components within Angular app. This is when we explored all possibilities of inter operations between frameworks. This talk will be case study of our work and what you can take away from it

SPTypeOutGrid: Knockout + TypeScript + SharePoint 2010 = Cool Grids in List F...Sam Larko

This document provides an overview of using TypeScript, Knockout, and model-view-viewmodel (MVVM) frameworks to create editable grids in SharePoint list forms. It introduces TypeScript as a strongly typed superset of JavaScript, Knockout as a library for two-way data binding, and how MVVM frameworks like Knockout separate the model and view. The document then demonstrates editable grid code using these technologies and provides resources for further information.

PresentationNikhilesh Sharma

Mootools is an object-oriented JavaScript framework that makes JavaScript easier to write and enhances its functionality. It provides a powerful, flexible and cross-platform way to make websites dynamic and interactive by handling everything on the client side. While jQuery is easier to learn and focuses only on the DOM, Mootools requires more advanced JavaScript knowledge but offers additional functionality beyond the DOM. The document provides steps to download, link, and use Mootools for creating demos like a slider tool.

JavaScript in Universal Windows Platform appsTimmy Kokke

Angular vs react vs vueSina Mirhejazi

This document compares the Angular, React, and Vue frameworks. It discusses their origins, popularity, usage, features like data binding, state management, performance, and developer experience. Angular is supported by Google and is a full framework. React is supported by Facebook and is a library requiring additional dependencies. Vue falls between the two. All have similar performance. Angular has more out-of-the-box functionality while React and Vue offer more flexibility.

WebSite development using WinJSAlexandre Marreiros

Intro to modern web technologyChris Love

The document introduces modern web technologies including starting mobile/touch first, HTML5, CSS3, and AJAX/JavaScript. It provides overviews of new HTML5 features like semantic markup, forms, geolocation, web storage, canvas, and offline capabilities. It also discusses CSS3 features, single page applications enabled by AJAX and JavaScript improvements, and how these technologies can be used together to provide rich user experiences.

From zero to hero with DockerMaurice De Beijer [MVP]

High performance apps with TitaniumRene Pot

Windows Azure Webs SitesShiju Varghese

Iconus 2016Mark Roden

Presented at the virtual ICONUS 2016 conference Many companies run a mixed IBM Notes and Microsoft Office 365 (O365) environment. SharePoint/Outlook and Domino should be viewed as a new opportunity to create rich and engaging user experiences. Using both IBM and Microsoft REST services as the core to the solution, this presentation will show how both technologies stacks can be integrated to maximize application functionality and present a seamless experience to the user. Mark will provide lots of demonstrations including Office Web Add-Ins, how to access O365 data from your Domino applications and many others. Come and see how your core Domino webdev skills are equally applicable to the Office 365 environment.

Swedish SharePoint UserGroup Göteborg Oct 5 2016 SharePoint FrameworkDavid Opdendries

Getting Started with ASP.NET vNextLohith Goudagere Nagaraj

Lohith G N presents on ASP.NET 5 and how it enables modern web development. The key points are that ASP.NET 5 is open source, totally modular, allows for seamless transitions between on-premises and cloud, and allows developers to choose their own editors and tools. It also offers faster development cycles, is cross-platform, and prioritizes agility, speed, cloud capabilities. Lohith demonstrates ASP.NET 5 in action and summarizes how it provides a cloud-optimized, modular design with features like dependency injection, consistent debugging, and faster development without build steps.

Modern web technologiesOday Alqarra

How we use Silverstripe CMS to deliver bilingual and accessible websitesMichaelPritchard21

#spsbe Get Typing with TypescriptDavid Opdendries

This document outlines a presentation on using TypeScript. It introduces TypeScript, highlighting that it is a typed superset of JavaScript that compiles to plain JavaScript. It discusses TypeScript features like classes, interfaces and generics. It also covers using TypeScript with Visual Studio 2015 and definition files. Additional sections discuss using Promises in TypeScript for asynchronous code and modular development with RequireJS. The presentation includes demos of TypeScript, Promises and modular code.

Interactive web prototypingEcommerce Solution Provider SysIQ

The document discusses different approaches to web development with and without prototyping. It outlines standard and profound processes, noting that prototyping allows for research, technical documentation, and changes before design and development. Reasons to prototype include creating interactive versions quickly, showing functionality, downloading designs, and communicating with teams and customers.

Build Hybrid Mobile Applications for Nokia Lumia DevicesLohith Goudagere Nagaraj

This document discusses building hybrid mobile applications using Telerik Kendo UI. It defines hybrid apps as those written with web technologies but run natively on devices by leveraging the device's browser engine. Hybrid apps allow targeting multiple mobile platforms while still accessing device capabilities. Telerik Kendo UI is an HTML5 framework for building such hybrid mobile apps using its widgets. Telerik AppBuilder is a hybrid mobile app IDE, and it also has a Visual Studio extension to facilitate hybrid app development. The document concludes with a demo of a media player hybrid mobile app.

Top Frontend Framework 2022ElenorWisozk

The document discusses several popular front-end frameworks: Angular.js converts static HTML to dynamic HTML using directives and data binding; React.js is a component-based framework that helps build complex interfaces predictably; Vue.js is preferred for smaller projects as it is easier to learn and faster; jQuery handles browser events, animations, and AJAX to make development easier; Bootstrap provides tools for responsive, mobile-first apps; and SASS extends CSS with features like variables, inheritance, and nesting.

React vs Angular Appinventiv

Micro frontends with react and redux dev dayPrasanna Venkatesan

Alexandra, Matthias, and Prasanna have been working on a project with micro frontend architecture for the past year. This project involves 4 teams distributed over two countries - Germany and India, each of the teams delivering one or several micro frontends that are consolidated into one product in the browser. This talk is based on our practical insights into micro frontends using React and Redux. We will discuss the differences between this technique and micro-services, our approaches to solving the common issues, the advantages it offers and the challenges it brings.

Introduction to Modern and Emerging Web TechnologiesSuresh Patidar

From zero to hero with DockerMaurice De Beijer [MVP]

This document provides an overview of using Docker containers to run an ASP.NET Core 1.0 application. It introduces containers and Docker, explaining how containers isolate applications using namespaces and cgroups. It demonstrates building Docker images for the ASP.NET Core app, and running the app in both Linux and Windows containers, using Docker on Linux and Windows. The document aims to help developers get started with containerizing their ASP.NET applications with Docker.

Architecting, testing and developing an mvc applicationMaxime Rouiller

The document discusses architecting, testing, and developing an MVC application. It covers the speaker's architecture which uses a 3-tier (presentation, business logic, data) separation with projects for each layer. Benefits include reusability, testability, and avoiding references issues. The speaker recommends using common libraries like Entity Framework, Ninject, jQuery, and NUnit and provides a demo of unit testing a controller and project structure. Questions are welcomed via social media.

Building applications in a Micro-frontends wayPrasanna Venkatesan

This document discusses micro-frontends, an approach to building applications where the frontend is split into independent modules. It introduces micro-frontends as a way to achieve independent releases for the frontend like microservices do for the backend. It outlines some key things to consider with micro-frontends like composing multiple frontends, sharing data between them, ensuring consistent UX, and testing strategies. It describes options for composing frontends at build time vs run time and approaches for sharing data. It also discusses the importance of design consistency and provides testing strategies like consumer driven contracts and functional tests. In summary, micro-frontends allow independent teams to work on different parts of the frontend while ensuring a consistent user experience.

Intro to Front End FrameworksProduct School

Automated perf optimization - jQuery ConferenceMatthew Lancaster

DevTeach 2016 - Introduction to AngularJS in an Office 365 ContextSébastien Levert

Every developer hears about AngularJS and all the magic it does for your applications. In order to kickstart you AngularJS journey, this session is an introduction to the AngularJS concepts applied to any Office 365 development. Different workloads will be targeted (Mail, Calendar, Files) and the Office 365 API will be our main datasource. We will also cover SharePoint Online specific data access (Office 365 API, REST, CSOM and Search) to meet your current development needs.As a developer, you will learn the basic concepts of AngularJS and will be able to use those in an Office 365 context. You will be able to build rich applications (Single Page Application) and forms that will simplify your development process.

SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft GraphSébastien Levert

Every developer hears about AngularJS and all the magic it does for you applications. In order to kickstart you AngularJS journey, this session is an introduction to the AngularJS concepts applied to any Office 365 development. Different workloads will be targeted (Mail, Calendar, Files) and the Microsoft Graph will be our main datasource. As a developer, you will learn the basic concepts of AngularJS and will be able to use those in an Office 365 context. You will be able to build rich applications (Single Page Application) that will speed up your development process while using your Office 365 tenant data. The 3 key takeaways of this session are : - You will understand the basics of the AngularJS framework - You will learn how to communicate withthe Office 365 through AngularJS - You will be able to apply those new skills in your next project

More Related Content

What's hot (20)

From zero to hero with DockerMaurice De Beijer [MVP]

High performance apps with TitaniumRene Pot

Windows Azure Webs SitesShiju Varghese

Iconus 2016Mark Roden

Swedish SharePoint UserGroup Göteborg Oct 5 2016 SharePoint FrameworkDavid Opdendries

Getting Started with ASP.NET vNextLohith Goudagere Nagaraj

Modern web technologiesOday Alqarra

How we use Silverstripe CMS to deliver bilingual and accessible websitesMichaelPritchard21

#spsbe Get Typing with TypescriptDavid Opdendries

Interactive web prototypingEcommerce Solution Provider SysIQ

Build Hybrid Mobile Applications for Nokia Lumia DevicesLohith Goudagere Nagaraj

Top Frontend Framework 2022ElenorWisozk

React vs Angular Appinventiv

Micro frontends with react and redux dev dayPrasanna Venkatesan

Introduction to Modern and Emerging Web TechnologiesSuresh Patidar

From zero to hero with DockerMaurice De Beijer [MVP]

Architecting, testing and developing an mvc applicationMaxime Rouiller

Building applications in a Micro-frontends wayPrasanna Venkatesan

Intro to Front End FrameworksProduct School

Automated perf optimization - jQuery ConferenceMatthew Lancaster

From zero to hero with DockerMaurice De Beijer [MVP]

High performance apps with TitaniumRene Pot

Windows Azure Webs SitesShiju Varghese

Iconus 2016Mark Roden

Swedish SharePoint UserGroup Göteborg Oct 5 2016 SharePoint FrameworkDavid Opdendries

Getting Started with ASP.NET vNextLohith Goudagere Nagaraj

Modern web technologiesOday Alqarra

How we use Silverstripe CMS to deliver bilingual and accessible websitesMichaelPritchard21

#spsbe Get Typing with TypescriptDavid Opdendries

Interactive web prototypingEcommerce Solution Provider SysIQ

Build Hybrid Mobile Applications for Nokia Lumia DevicesLohith Goudagere Nagaraj

Top Frontend Framework 2022ElenorWisozk

React vs Angular Appinventiv

Micro frontends with react and redux dev dayPrasanna Venkatesan

Introduction to Modern and Emerging Web TechnologiesSuresh Patidar

From zero to hero with DockerMaurice De Beijer [MVP]

Architecting, testing and developing an mvc applicationMaxime Rouiller

Building applications in a Micro-frontends wayPrasanna Venkatesan

Intro to Front End FrameworksProduct School

Automated perf optimization - jQuery ConferenceMatthew Lancaster

Viewers also liked (18)

DevTeach 2016 - Introduction to AngularJS in an Office 365 ContextSébastien Levert

SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft GraphSébastien Levert

Every developer hears about AngularJS and all the magic it does for you applications. In order to kickstart you AngularJS journey, this session is an introduction to the AngularJS concepts applied to any Office 365 development. Different workloads will be targeted (Mail, Calendar, Files) and the Microsoft Graph will be our main datasource. As a developer, you will learn the basic concepts of AngularJS and will be able to use those in an Office 365 context. You will be able to build rich applications (Single Page Application) that will speed up your development process while using your Office 365 tenant data. The 3 key takeaways of this session are : - You will understand the basics of the AngularJS framework - You will learn how to communicate withthe Office 365 through AngularJS - You will be able to apply those new skills in your next project

SharePoint Saturday Ottawa - From SharePoint to Office 365 DevelopmentSébastien Levert

Collab Montréal 2016 - SharePoint Framework : De A à ZSébastien Levert

SharePoint SaturdayVancouver 2016 - AngularJS with the Microsoft GraphSébastien Levert

SharePoint Fest Chicago - From SharePoint to Office 365 DevelopmentSébastien Levert

ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...Sébastien Levert

The world around the Office Developer is changing and for someone with a heavy SharePoint background, it can be somewhat scary to make the move to the cloud. But don’t be scared SharePoint Developer – From SharePoint to Office Development, become an added-value Office Developer and contribute to maximise the productivity of your enterprise. In this session, we will cover every aspect of the new Office Developer paradigm and we will ensure that you can make yourself at home in such a new world. The topics covered will be : – SharePoint Add-In – Office 365 Apps – Office Add-In – Microsoft Graph Benefits of Attending this Session: Learn what an Office Developer is See code in action representing the Office Developer day-to-day Leverage the most active community around productivity development

SharePoint Fest Chicago - Introduction to AngularJS with the Microsoft GraphSébastien Levert

Every developer hears about AngularJS and all the magic it does for you applications. In order to kickstart you AngularJS journey, this session is an introduction to the AngularJS concepts applied to any Office 365 development. Different workloads will be targeted (Mail, Calendar, Files) and the Office 365 API will be our main datasource. We will also cover SharePoint Online specific data access (Office 365 API, REST, CSOM and Search) to meet your current development needs. The 3 key takeaways of this session are : You will understand the basics of the AngularJS framework You will learn how to communicate withthe Office 365 through AngularJS You will be able to apply those new skills in your next project

SharePoint Saturday Toronto 2016 - Introduction to AngularJS with the Microso...Sébastien Levert

Pré-Conférences - SharePoint Saturday Paris 2016 - Le développement Office...Sébastien Levert

Office Add-Ins - Introduction aux add-ins - Introduction au framework Office UI Fabric - Développement d'add-ins pour le web le desktop et le mobile avec MVC.NET - Développement d'add-ins avec un stack open source (AngularJS, Node, Yeoman) - Retours sur les nouveautés de la //Build Microsoft Graph - Développement Microsoft Graph : où quand pourquoi ? - Résolution des problématiques d’authentification Azure AD : Que nous cache Visual Studio ! - Exploration du graph - Développement from scratch d’une application universelle avec Microsoft Graph - Développement et migration d’une application MVC ASP.NET avec Microsoft Graph - Développement d’une application Web avec VS Code, Node.js et Angular.JS - Retours sur les nouveautés de la //Build

SharePoint Saturday Houston 2016 - Microsoft Graph - Deep DiveSébastien Levert

Since the launch of the Microsoft Graph, a ton of new possibilities are being made available for IT Pros and Developers. This session is a deep-dive into the Microsoft Graph by analyzing the current /v1.0 version of the API and what is coming on the future /beta endpoint. We will also learn how we can build multiple types of applications that integrate nicely with the Microsoft Graph. The 3 key takeaways of this session are : - You will be able to connect to the Microsoft Graph from multiple platforms (.NET, PowerShell, AngularJS, ...) - You will understand the impact of the Graph in the new Microsoft and how you will benefit from this API - You will have access to a ton of code letting you reproduce every demos from the session

ESPC15 - Introduction to AngularJS in an Office 365 contextSébastien Levert

Every developer hears about AngularJS and all the magic it does for your applications. In order to kickstart you AngularJS journey, this session is an introduction to the AngularJS concepts applied to any Office 365 development. Different workloads will be targeted (Mail, Calendar, Files) and the Office 365 API will be our main datasource. We will also cover SharePoint Online specific data access (Office 365 API, REST, CSOM and Search) to meet your current development needs. As a developer, you will learn the basic concepts of AngularJS and will be able to use those in an Office 365 context. You will be able to build rich applications (Single Page Application) and forms that will simplify your development process.

SharePoint Saturday Cape Town - Introduction to AngularJS with the Microsoft ...Sébastien Levert

SharePoint Saturday Ottawa 2015 - Office 365 and PowerShell - A match made in...Sébastien Levert

This document summarizes a presentation about using PowerShell with Office 365. Sébastien Levert, an Office 365 MVP, gave the presentation at SharePoint Saturday Ottawa on November 21, 2015. The presentation covered connecting to and managing SharePoint Online and Office 365 APIs using PowerShell. It provided demonstrations of common tasks like getting all site collections, exporting list content, adding themes, querying data via REST, and automating user and site provisioning for DevOps scenarios. The document concluded by advertising the post-event social at the Observatory Student Pub and providing parking and transportation details.

Collab365 - Office 365 API & PowerShell : Le meilleur des deux mondes!Sébastien Levert

Dans un monde où nous entendons plus en plus parler de DevOps et d'intégration continue, vos déploiements Office365 pourraient être victimes de quelques pratiques doûteuses et d'une automatisation de vos processus manquante. Dans cette session, nous couvrirons comment vous pouvez utiliser PowerShell pour faciliter vos déploiement de vos applications, de monitorer vos tenants Office365 et de maintenir chacun des produits couverts par la suite de productivité. Étant donné que cette session est très orientée vers les démos, n'ayez pas peur d'apercevoir beaucoup de code PowerShell et Office365 API! Les 3 éléments que vous pourrez soutirer de cette session sont : - Vous apprendrez comment communiquer avec les API Office365 via PowerShell - Vous serez introduit aux principes de DevOps dans un contexte Office365 - Vous serez en mesure de reproduire simplement ces acquis lorsque vous serez de retour au boulot

MSDEVMTL - Le Microsoft Graph et le développement Office 365Sébastien Levert

Ça y est! Après des années à souffrir à développer sur des plateformes comme SharePoint, le développeur est maintenant gâté dans les sphères de la plateforme de productivité de Microsoft. En pivotant au modèle Office 365, Microsoft a introduit le Microsoft Graph comme unique passerelle vers les données de l'entreprise contenues dans Exchange Online, SharePoint Online, Skype for Business, OneDrive for Business, etc. Dans cette session, il sera question d'une introduction aux concepts du Microsoft Graph ainsi que différents scénarios d'exploitation du Graph. (Application web ASP.NET, AngularJS, etc.) Nous discuterons aussi d'un élément fondamental qui est Azure AD et comment nous pouvons intégrer le Microsoft Graph dans vos applications existantes. Pour terminer, nous discuterons des surfaces d'intégration de vos applications dans l'environnement Office 365 qui sont les Office Add-Ins, les SharePoint Add-Ins ainsi que les Office 365 Apps.

SharePoint Saturday Paris 2016 - AngularJS with the Microsoft GraphSébastien Levert

Introduction à AngularJS dans un contexte Office365Sébastien Levert