SharePoint Framework, Angular & Azure Function: The Modern SharePoint Developer Tool Belt

00:04 hello and welcome to today's European

00:07 SharePoint office 365 and Azure

00:09 community webinar

00:11 my name is Shane and I am delighted to

00:13 be joined by Sebastien levert who will

00:16 be talking to you about SharePoint

00:19 framework angular and Azure functions

00:22 the modern SharePoint developer tool

00:25 belt remember to join in the

00:29 conversation about today's webinar on

00:31 twitter our twitter handle is as

00:33 european SP and our hashtag is ESPC 18

00:40 want to be part of something truly

00:42 special speak and engage with 1700 plus

00:46 leading experts IT professionals

00:48 developers and business decision makers

00:50 at ESPC 18 Europe's premier SharePoint

00:54 office 365 and Azure conference taking

00:58 place in Copenhagen Denmark from the

01:01 26th to the 29th or November 2018 submit

01:05 to speak today after the webinar we will

01:10 have a questions and answer session type

01:13 any questions you have for sebastian in

01:15 the questions window some questions will

01:17 be selected and answered at the end of

01:20 the presentation this webinar will be

01:22 recorded and you will be notified by

01:25 email when it is available and now I'm

01:28 going to pass you over to our webinar

01:30 presenter Sebastian levert hello

01:33 Sebastian hello everyone good morning

01:38 good afternoon good evening wherever you

01:41 are on that planet I'm so happy today to

01:45 be able to do that session is that a

01:48 favorite of mine because I really love

01:52 those different topics SharePoint

01:54 framework angular and as your functions

01:57 so before we before we start I would

02:00 like me to introduce a bit myself so my

02:04 name is sub Sebastian

02:07 I am a productive Angeles and partner

02:09 manager at Valu intranet battle Internet

02:13 is a Internet in a box and digital

02:16 workplace

02:17 for office 365 and SharePoint if you

02:19 want to know more you can check us out

02:20 at bellow internet.com you can also

02:23 follow my blog on Sebastiana viacom and

02:27 maybe follow and engage with me on

02:29 twitter at sebastian alive today we have

02:33 a fairly simple agenda and I want to

02:38 make sure that we are focused mainly on

02:42 demos today so I want to show code I

02:45 want to show how although things are

02:48 working in a Shirin and Shepard

02:51 framework type of solution so we will

02:54 start by covering one of my favorite I

02:59 was a companion solutions to the

03:01 SharePoint framework which will be as

03:03 your functions how can we leverage as

03:05 your functions and why should we

03:07 leverage as your functions with our own

03:10 office 365 and SharePoint solutions as

03:13 our back-end strategy then we'll move on

03:16 to SharePoint framework and angular if

03:19 you've been around the SharePoint

03:21 framework environment for the last

03:22 couple of years you know that those

03:25 through those two big boys so a

03:28 SharePoint framework and angular are not

03:31 playing very nicely together but stuff

03:35 changed I think it's time to look back

03:38 and maybe have a new way of

03:40 understanding those two different

03:42 solutions and how we can mix be mixed

03:45 together that will be absolutely a great

03:48 thing so we'll cover that and then

03:50 afterwards we're gonna make it happen

03:52 we will build together a web part using

03:57 SharePoint framework and anger as our

04:00 front-end development framework that

04:04 will use the azure function that's we

04:06 would ask build a bit earlier and then

04:09 what will be your next steps for your

04:12 learnings and what will be where you can

04:15 find all this information so as your

04:18 functions if you're like me you're

04:21 coming you coming out of a SharePoint

04:24 developer background I've been working

04:27 for a long time

04:29 with SharePoint developing

04:30 solutions using server-side object model

04:35 client-side object model a ton of

04:37 different options a ton of different

04:40 solutions and were built mainly on the

04:43 server and then a couple of years ago we

04:46 were brought to that nice modern way

04:50 modern stack that is the SharePoint

04:53 framework we're all happy about it but

04:56 something that they were missing is that

04:58 background processing type of power that

05:02 does not exist anymore you can do a lot

05:06 of stuff in the browser but very secure

05:09 access to data or even jobs cannot run

05:14 in the browser you need to run somewhere

05:15 else and this is where I think in that

05:18 cloud world modern world

05:20 this becomes a masterpiece this becomes

05:25 really like the focus of our back-end

05:29 strategy so why as your functions so

05:34 first of all after functions is a part

05:35 of a sure it is a app service type of

05:39 offering that exists in Azure where you

05:41 can host any type of api's or any type

05:45 of code that runs in only in the cloud

05:48 you can actually now run either

05:49 functions on-premises using Azure stack

05:52 also first it is very very very cheap to

05:57 run other functions you can get from a

06:00 thousand or two thousand dollar type of

06:04 solution and you need to pay per month

06:07 to a very like a couple of dollars per

06:10 month because the way it is structured

06:12 the way it is architectured it is very

06:16 very very easy to run cheap solutions in

06:20 the cloud it is also cool because now

06:24 you know you don't only use the language

06:27 that we forced you to use but we kind of

06:31 require you to use any of your favorite

06:33 language so you can use JavaScript C

06:37 sharp F sharp PHP PowerShell even Python

06:42 and those languages are our

06:44 see the most popular languages today in

06:46 that cloud world so I think it makes a

06:48 lot of sense to maybe use javascript to

06:51 not only code JavaScript on the client

06:54 but also code JavaScript on the server

06:57 same thing for C char cuz probably

07:00 you're coming from a c-sharp background

07:02 so maybe it's more natural for you I'm

07:04 more of a powershell and lazy guy so i

07:07 will go today with partial but any of

07:09 those languages could be used it is the

07:12 perfect companion for any spa or

07:14 JavaScript component it doesn't need to

07:16 be inside office 365 or it doesn't need

07:20 to be inside the SharePoint framework

07:21 anything that would require an endpoint

07:24 to do something more specific or an API

07:27 that you don't have access to from the

07:29 client should be leveraged using Azure

07:32 functions today and now something that

07:35 is even more awesome is the fact that we

07:37 can elevate permissions in this it is so

07:40 much easier way that it becomes almost

07:43 too easy to use we can secure those API

07:47 to can elevate permissions within those

07:50 api's so it really makes if you remember

07:53 I do remember back in the days when

07:56 we're doing SharePoint stuff there was

07:58 one function that were always using what

08:02 was that function whose called run with

08:04 elevated privileges it meant that we

08:07 were running some of our code using the

08:10 wool application identity so kind of a

08:14 god inside our web application and our

08:17 in that case we could do anything can

08:19 creates like collections we could do

08:21 some farm setup we could be able to do

08:25 some configuration that's we were not

08:27 able to do using our regular code now in

08:30 the brand-new world of JavaScript

08:32 everything runs on there the user

08:34 context so those type of very very

08:37 specific actions that should not happen

08:39 all the time but that needs to happen at

08:41 some point arm is more difficult to

08:43 build and now using Azure functions to

08:46 elevate permissions because you can

08:48 actually run server code in Azure

08:51 functions makes it a lot easier so I

08:53 think that those are the reason why

08:54 either functions is so cool

08:58 today our scenario will be pretty simple

09:00 so we will all this session will be

09:04 about creating a site provisioning tool

09:06 with angular and as your function so

09:09 what we're gonna do we will leverage as

09:12 our function using the the PowerShell

09:14 type of solution it will then use the

09:19 pnp powershell commandlets so those

09:22 current lengths are part of the PNP

09:25 initiative by SharePoint where the

09:28 community is building a set of new

09:30 comment let's to help you play with the

09:33 Microsoft graph or play with sharepoint

09:35 online in a much more easier way and

09:37 we'll show you that we will connect to

09:39 the graph we will connect also to a

09:41 national AV application where we will

09:44 create a modern themed site in under 15

09:49 seconds or approximately the time it

09:50 takes to create those modern team sites

09:52 based on a set of parameters I'm pretty

09:56 sure this point you'll guess that those

09:58 parameters in a couple of minutes when

10:00 they go in 10 or 15 minutes we will send

10:04 them through our angular application so

10:07 we will invoke that actually function

10:10 with the set of parameters and then our

10:12 other function will execute that

10:15 creation of more insights and also we

10:18 will apply a provisioning template so we

10:21 one of the best feature of the ple

10:23 powershell or actually PNP Initiative

10:25 part of precise core is the fact that we

10:28 now have an a provisioning engine that

10:30 is available on there so we will

10:32 leverage it to create a modern team side

10:34 then afterwards we create a list a

10:36 couple of columns and then BOOM we're

10:39 gonna have our full solution ready so

10:41 let me show you actually what is at your

10:44 function before we go into any of those

10:46 details so let me show you that here so

10:51 here we are in adder let me go actually

10:54 go back to home I think it's gonna be a

10:55 lot easier um here you're gonna see here

10:59 a function app my function app is

11:02 actually an app service that runs it's

11:04 called Sebastian of our functions that

11:05 will host all of my

11:08 adder functions so this is a nap service

11:11 that is created by by Microsoft in Azure

11:15 for me and in that after this I have

11:18 three different applications one that

11:21 we're using and Vala one that is for

11:23 creating site collections of classic

11:25 cycle I shouldn't care one that we

11:26 create a modern theme site so let's go

11:29 check it out so when I click on my quit

11:35 Martin team site I will see a set of

11:38 different lines of code here so let me

11:41 walk you through all of that so first of

11:43 all we will import a module that module

11:47 will be the PNP powershell commandlets

11:50 so by loading that it means that my

11:52 powershell session that we have right

11:54 now will now have inside in memory all

11:58 the common let's available by the

12:00 powershell by the PMP powershell come in

12:02 line so it means that I will be able to

12:04 leverage all of the goodness that exists

12:07 right there if you don't know what the

12:09 PMP PowerShell ill is I will recommend

12:12 really to go to github and type in get

12:16 on that SharePoint /v + p - powershell

12:20 and here you will see all the different

12:24 documentation you will also be able to

12:25 go and releases and download the latest

12:28 bits it's available on SharePoint 2013

12:31 sharepoint 2016 and sharepoint online

12:33 and please make sure you download that

12:35 before because this is one of the best

12:37 tools that can you can use as part as

12:41 your daily work inside the office 365

12:44 world then afterwards we will do the

12:48 following here so here what we're gonna

12:50 do here we're gonna actually get the

12:53 content of their request so we will send

12:55 a JSON payload to that as your function

12:58 the way we would do it with any type of

13:00 API and in there we will actually get

13:03 the JSON version of it inside my request

13:06 body so it's just gonna get the pail

13:08 that I'm sending I'm gonna get a JSON

13:10 object from there hasn't it also created

13:13 me a PowerShell object that would be I

13:15 will be able to access very very easily

13:18 then afterwards once I get all that

13:21 information I know what who we might

13:23 parameter

13:24 we'll need to send my different

13:26 powershell commandlets but now i need to

13:29 connect i need to get a an

13:33 initialization of my connection to

13:35 office 365 and Azure ad so here I will

13:39 connect to the PNP Microsoft brass I

13:42 will connect to the Microsoft graph

13:43 because this is where we need and we

13:46 should create a group a modern theme

13:50 site that will automatically come with

13:51 the griot so here I will connect to the

13:53 Microsoft graph based on an app ID and

13:55 app secret that I already created to

13:57 that specific domain so in my case it's

14:00 gonna be my own eyes or tenant in that

14:03 case I will be connected I will keep an

14:06 active connection to my mark subgraph

14:08 meaning meaning that I will be able to

14:12 invoke some requests that will be

14:16 automatically effective authenticated by

14:19 the marks of wrath

14:21 and here that's the only comment I need

14:23 to run to create a new unified group or

14:25 a modern theme site in that case so

14:28 we'll run that new PNP unified group

14:30 comment let I will pass in a set of

14:33 parameters in that case it'll pass in a

14:35 display name I will pass in the

14:38 description I will pass in the mail

14:42 nickname which is actually the URL of my

14:44 of my site that I want to create I'm

14:49 gonna pass in who are the owners in that

14:50 case that's just that's a constant I've

14:54 here but it could be anything else I'm

14:57 gonna hit pass in if it's private and

14:59 I'm gonna force that request to happen

15:01 so you can see here that I'm using my

15:03 request buddy death title my request

15:05 buddy that description my request buddy

15:07 that URL those are all part of my JSON

15:11 fiddle that witch that was sent in by

15:13 the one that is requesting access to

15:16 this function so I'll just undo that and

15:20 if I have a template so if I specified a

15:23 PNP template I will actually go in here

15:27 get a secured password get a credentials

15:30 from my environment I will create I will

15:34 connect actually to my site using a

15:37 tenant URL /t

15:38 / the URL of my request buddy and I will

15:41 apply the PNP provisioning template to

15:44 that specific URL meaning here that I

15:47 will only need to do that to create a

15:50 customized version of a modern thing

15:52 site without anything else so very very

15:55 very easy for anyone to use and

15:57 afterwards I will just send that

15:59 information back I will create here a

16:01 simple object that will be used in my in

16:05 my in my caller to know what's the newly

16:10 created ID title description email and

16:13 URL of that site so I can get access to

16:16 it and I will then afterwards

16:19 automatically output this information to

16:23 my color so it's gonna be able to

16:25 leverage that so let's see what we can

16:28 do actually here I think here we can use

16:30 the test here so let's call it demo the

16:33 SPC - zero one and then I'll do the

16:39 exact same thing here demo ESPC - zero

16:43 one I will call it also same thing here

16:46 is PC Cintron I don't want that site to

16:49 be private

16:50 I want the template to be true so I want

16:53 to have a specific template so that's

16:57 absolutely good for me my template URL

17:01 will be the following so actually I will

17:03 do that here / I / lab so I'm gonna do

17:13 it right here I'm just gonna pose that

17:16 in here I think I don't need that I

17:18 don't think so and I will just the cool

17:23 thing about agile functions that you can

17:25 actually run it directly in the cloud

17:28 and that's just great so here you will

17:32 see that I will be running that right

17:36 here so I will run and automatically I

17:39 will see my logs coming in so I will run

17:42 it and you see here automatically that

17:45 window popped up and it says that that

17:47 that function is currently started so it

17:50 should run

17:51 to create anything it has to create it

17:54 will connect to the micrograph it will

17:56 quit in UPnP unified group and then

18:00 afterwards it will automatically apply

18:05 the template once this PNP unified group

18:08 was created and now I just saw that it's

18:11 actually printed that URL so let's go

18:14 see if it actually worked

18:16 so I'll go to my other role that is

18:17 already connected so let's say it was

18:20 demo - yes we see - your one slash team

18:26 sorry about that and now I just said I

18:29 just created that how quick was that it

18:31 was insanely quick I love it other

18:34 because it's quick and gives me an

18:36 instant feedback on what I'm doing and

18:37 now if I go back here it should be close

18:40 to be done so now let's give it a bit of

18:42 time here

18:43 now it says I'm done function completed

18:46 what did it do it actually applied a

18:49 provisioning template let's see what it

18:51 did so this is go to the site content

18:53 and I will see that in that brand new

18:56 site that I just created

18:57 I have something called fallow documents

19:00 final documents is our custom site our

19:04 custom list or got some document I read

19:07 that we just created I go in and I will

19:09 find a bunch of different columns in

19:13 here that are not regularly valid temple

19:15 tax whole template choice all template

19:18 number so the good thing about that is

19:20 that it is extremely easy takes a minute

19:22 and then you have a fully customized

19:24 version of your of your site collections

19:28 and modern theme sites and that's using

19:31 PowerShell that is fifty three lines of

19:35 code including way too many comments

19:37 from my end it is a great solution so

19:40 how do we actually come to a point where

19:43 we can create that it's very easy it's

19:45 good to function you can create a new

19:47 function right here you can go in a

19:50 experimental language support just

19:52 enable that type PowerShell in here off

19:57 PowerShell here so I can go in to create

20:00 an HTTP triggers that's gonna be

20:01 triggered by an HTTP call you can also

20:03 as a timer

20:04 trigger so we can run every three hours

20:08 every two minutes or whatever it can

20:09 also come from power bi or from a cue

20:12 directly so let's go

20:14 it should be right here I can create

20:18 it's gonna automatically create that new

20:20 function in here and now I can see

20:23 everything right there so means that if

20:26 I'm calling that here I'm gonna be able

20:29 to see a hello with the name if I pass

20:32 it they passing in that environment so

20:35 let me run that actually here I will go

20:40 and test and have a name that will be a

20:43 sure I will run that automatically this

20:46 function will start but I cannot see

20:48 what is happening so what we can do here

20:51 is use one of our good friend which is

20:53 called postman postman is a great tool

20:57 to test out multiple I'll just close dad

21:02 I will create a new here and I will just

21:06 go here and copy that URL that is the

21:08 URL so you can see here it's lesson

21:10 about that function - your website's at

21:12 that slash API slash

21:14 that plus a code the code is kind of a

21:16 security aspect it's not full secure as

21:19 if you give that code away pretty much

21:21 anyone can use that but you can also

21:23 secure it with using as your ad so I'd

21:26 let me go here put in my url in okay and

21:31 my buddy here I will be able to send

21:35 that here it's actually said oh I have

21:38 nothing hello nothing because I was not

21:41 able to actually put in that information

21:44 so if I was able to put my name I would

21:48 have seen the result coming back

21:51 directly from my from my environment so

21:53 that is really how this should and will

21:57 work for either functions and we'll use

22:01 that same strategy a bit later on in our

22:04 angular applications that means said I

22:10 want to discuss a bit about anger matter

22:14 we feel free to

22:16 ask any question do we lie pleasure to

22:20 help in in the end of this session so

22:22 feel free to put in any question I will

22:24 try to answer all of them so SharePoint

22:27 framework an angular so it's been a

22:29 while I've been trying to understand a

22:32 bit better than the integration of

22:34 SharePoint framework and angular but one

22:37 of the most requested question will be

22:39 which version of angular we know there's

22:41 a ton of them it wears very well with

22:46 angular 1.6 so if you're looking into

22:48 really going in production ready type of

22:51 solution right now I would advise to

22:53 stick to angular 1.6 because today it's

22:56 the only angular that really really

22:58 works without some experimental API is

23:02 very clean in the SharePoint frameworks

23:05 so this is still the recommended

23:07 approach angular 15.6 if you want to

23:11 move on to the brand new angular so

23:13 angular 1 points is it's actually called

23:15 angularjs if you want to use anger as

23:20 its current state you could a year ago

23:23 use angular 2 well it works if you're

23:28 only using one web part on any page but

23:31 if you want to use more than one web

23:33 part which will probably be your case

23:34 everything is just breaking apart so I

23:36 wouldn't have to commit at all to go

23:38 with angular 2

23:39 it works with some hacks in angular 4 so

23:44 it means that it is doable I have a set

23:48 of articles on my blog is called the

23:50 angular boilerplate that was retired but

23:53 still can be used if you want to use

23:56 angular 4 but today we're now up at

23:59 angular 5 and it even works better with

24:01 angular 5 because of something called

24:03 angular elements but I'll come back to

24:06 anger elements in a couple of seconds so

24:10 what was a challenge actually for a long

24:13 time was just not possible it was not

24:14 viable it was not suitable for any ship

24:17 with framework type of solutions it was

24:21 working so you were testing your stuff

24:22 and everything was working because

24:24 everything was in there you felt like a

24:27 god you were able to make angular

24:29 work directly with several framework so

24:33 you were working on your workbench

24:35 testing your one webpart

24:36 everything was good everyone was happy

24:38 they were shipping that piece of code to

24:41 your administrator and he was putting

24:44 that in the SharePoint app catalog and

24:46 then your users were starting to add

24:49 that Web part to a lot of pages in your

24:52 SharePoint environment it was working

24:54 well until it was not when someone added

24:59 a second instance of a web part or was

25:01 doing something more funky with his web

25:03 part all the pages was breaking not only

25:06 your angular web parts with all the page

25:08 it was not possible

25:10 they're just impossible because the way

25:12 angular works it needs to own the entire

25:15 the entire screen and that screen means

25:19 that if you own the screen everything

25:21 needs to work inside that and in

25:24 multiple instances of anger was

25:26 colliding with each other

25:27 anger is that made to be a composable

25:30 framework it's meant to be a full single

25:33 page application type of framework so

25:35 how can we manage that how can we push

25:39 that a bit further before we go any four

25:43 in any in any type of news now something

25:46 I don't really exist for a long time

25:48 it's called the web components web

25:50 components are standard and in the HTML

25:56 world that actually defines a component

26:00 or a little widget that comes with his

26:04 own logic its own UI Insull its own

26:07 templating and it's supported by a vast

26:11 majority of the browser's it's it's

26:13 coming even to more browser now Firefox

26:16 is working on it

26:17 Internet Explorer and AD are also

26:19 working on it to make those of

26:22 components a standard in there our

26:26 components are like super small what

26:29 part web component can be considered to

26:33 be one web part or one piece of a web

26:37 part the same way we act components are

26:39 actually are in the same way angular

26:41 applications with

26:42 all of its controllers and components

26:44 are also so what about we try to

26:50 leverage the web component that is

26:53 already something that exists and maybe

26:58 use angular to build those up components

27:02 so that means that angular becomes kind

27:05 of in the back end

27:07 and not in the front end anymore the

27:09 front end will be all built by web

27:11 components because web components are is

27:14 technology that is well established all

27:16 over the place so what can we do so

27:19 let's say we want to build a fence seed

27:22 a picker how many of you already built a

27:25 date picker I think I did that

27:26 probably 267 times in the past using a

27:31 ton of different technologies jQuery UI

27:34 or office to our fabric or Google

27:36 material or whatever but I want to build

27:40 a fancy date picker that I want to reuse

27:43 across my my organization but maybe I

27:45 want to use that as a web part maybe I

27:47 want to display a date picker as a web

27:49 part maybe have the best example but we

27:52 never know so what about I could do that

27:57 directly in my page or in my HTML I do

28:01 fancy date bigger well you're gonna tell

28:06 me

28:07 okay sab that looks awesome that's very

28:09 similar to what react is all about or

28:11 angular or it's all about but that is

28:14 not native to the browser the browser

28:17 doesn't know one thing about the fancy

28:20 date picker well that's not what the web

28:24 components are when the web components

28:27 are loaded in your page automatically it

28:30 registers you HTML Dom element so we

28:33 call them custom elements that has all

28:36 that definition in the backend so all

28:38 the logic all the JavaScript code

28:39 running in the backend and then that

28:42 means that fancy date picker can be used

28:44 anywhere like any other HTML elements

28:53 now

28:54 about angular web components why not

28:56 just create web components if you've

28:59 never seen a web component code like

29:02 that's awful it's very very complex

29:05 there's a ton of code that needs to be

29:07 written and you need to speak dumb you

29:12 need to speak the document object model

29:14 which is extremely performant that I

29:18 give you but it is a complex language I

29:21 don't want you to be to have to play

29:23 with all the events orchestrations and

29:25 all of that inside your own application

29:27 so what happened but even the angular

29:30 actually sat down and thought about

29:33 something and they actually showed it at

29:37 the latest ESPC what happened they

29:41 showed that ng hello world web part and

29:44 J meaning anger it means that we can now

29:49 use angular and angular elements to

29:54 build custom web components that will be

29:57 understood by all the different browsers

30:00 without the need of having all that very

30:03 very heavy load of angular in your

30:06 solutions meaning that now you can have

30:07 multiple web parts on the same page

30:09 multiple types of web parts using all

30:12 angular on the same page and yes

30:15 everyone it is happening we now have a

30:19 solution a pretty nice solution that

30:21 will make you much more performant with

30:28 angular inside your own SharePoint

30:30 framework solutions so what is actually

30:33 angular elements how did it came to life

30:37 well actually angular elements is a

30:39 project from angular labs angular Labs

30:43 is kind of the R&D branch of the angular

30:47 project they build new scenarios they

30:51 build new concepts that they will bring

30:54 back in the future to angular in the

30:57 main branch of angular angular elements

31:00 actually adds a new usage scenario of

31:02 angular to become more of a dev tool

31:05 than to be a framework so you

31:08 using angular to build and generate web

31:11 components rather than full-fledge spa

31:14 framework it is supporting the self

31:17 bootstrapping so you don't need to have

31:20 to host too old a grasp on the entire

31:26 page you just need to bootstrap that

31:29 specific small and tiny web component

31:33 that's it

31:34 zones are becoming optional meaning that

31:37 you don't need to rely on angular zones

31:40 aka this is key to the success of this

31:44 approach you don't need to have the

31:46 entire page at you control which is

31:49 awesome and then you generate your web

31:53 component from any type of angular

31:54 component so now we have kind of a

31:58 translation between angular to web

32:00 components and now what we're gonna do

32:03 today we're actually gonna make it

32:05 happen so the first scenario will be we

32:09 will build a SharePoint framework web

32:10 part so we're gonna start with the NGO

32:12 world I'm gonna walk you through all the

32:14 different things that needs to happen

32:16 before you can actually could will use

32:19 angular as our main framework

32:21 indle and the second demo we will use

32:24 angular material as are you our

32:26 framework so it means that any type of

32:28 components any type of open source

32:32 projects out there utilizing angular is

32:35 all valid inside the SharePoint

32:38 framework that is also and I will use

32:41 our previous answer function I was as

32:43 our back-end provisioning API let me

32:49 show you some code right now so here I

32:53 am I'll just zoom in for you guys here I

32:58 have a full project so here's my SPF x

33:01 ng hello world you can actually find all

33:05 of that on my home github so you can go

33:07 to github.com /st vessel of a slash SPF

33:13 X slash ng - webparts and you will find

33:17 the L world the material list a material

33:20 design type of

33:21 usage out too much data how to use

33:24 SharePoint REST API how to do some site

33:27 provisioning so everything I'm showing

33:28 today is all available on my github so

33:30 you can have a good feel of what is

33:33 happening right there and there are some

33:37 special things that need to come in mind

33:39 by the way I have a full series on my

33:42 blog on how to do that so you can start

33:45 from the first article and go through

33:47 each and every one of the articles to

33:48 make sure that you can actually learn a

33:50 bit more so first of all what's

33:52 happening first thing that needs to

33:55 happen you need to understand you need

33:56 to add some packages to your SharePoint

33:59 framework webpart so here are the

34:01 packages you need to add regular angular

34:06 packages here very very regular ones

34:09 angular animations coming to compiler

34:11 the CLI core elements path home browser

34:15 and platform server the only one that is

34:18 a bit tricky is this one right here why

34:20 well you can see it here we are using a

34:24 specific labs project meaning that it is

34:28 still a really sort of very early alpha

34:32 better version of angular elements so

34:35 this is the part that is still a bit

34:38 tricky it's not yet fully available up

34:40 there it's still not the ga version or

34:42 whatsoever but we can play with it which

34:45 is for me just good enough so that's the

34:49 first thing that needs to happen right

34:50 there pretty much you add angular

34:53 elements and all the angular pieces

34:56 that's pretty much it then afterwards we

34:59 need to do some tweaks - sorry about

35:02 that - our - our elements to our let our

35:07 elements but to our way of working when

35:13 we build our solutions so we need to

35:16 change a bit of how the gulp file

35:18 actually reacts basically what it does

35:22 it does the following the biggest thing

35:27 here is that instead of building our

35:29 typescript using just typescript

35:34 we're actually using our types trip file

35:37 using the web pack that is embedded

35:39 inside the angular framework what does

35:42 it mean well it means that now angular

35:46 is aware that you're building stuff so

35:48 angular can interject itself inside your

35:53 build process and then building your now

35:57 amazing web components using an angular

36:00 element so this is really really how

36:02 this is working

36:04 did you also say that I want to roll out

36:07 my HTML same thing for CSS something for

36:11 my s CSS

36:13 maybe I will be able to do some nice CSS

36:17 debugging and embedding with anger so

36:21 that's pretty much it that's the two

36:25 things and it's happening at a very

36:28 large scale so that needs to happen on

36:30 any type of new releases or new projects

36:34 that you're building with angular the

36:35 last thing this happen is in your kind

36:38 of thing that JSON you need to actually

36:41 add those two different files here

36:45 actually all those four different entry

36:48 points those needs to be specified

36:50 because they will be loaded inside your

36:53 angular web pack build process so it

36:57 will require the entry point manifest

36:59 the entry module and entry module name

37:01 that's who we'll use later so you need

37:03 to add those here usually it's a J's

37:05 file need to change that to be a TS file

37:07 besides that we nothing else needs to be

37:12 changed so what's left

37:13 well there's code that is left so once

37:16 you add your go file package of JSON in

37:19 that config file then you're ready to

37:22 start building your components so you go

37:25 to the web part and you build a hello

37:26 world weapon and then the L world web

37:31 part is just the following hello world

37:35 with a name with the regular SharePoint

37:39 frame word type of parameters that is

37:41 available in your panel and he'll work

37:45 that is ladies and gentlemen

37:48 a custom web component the L world

37:51 custom web component that has a name

37:53 attached to it what about I show you

37:57 actually what's happening so I'm gonna

38:00 go here I'm gonna do

38:01 gulp serve and I will open my browser

38:06 here so I can actually see it coming

38:09 away in 3 so I'm gonna build it

38:13 finally right now I'm using the local

38:16 workbench which is it which is

38:17 absolutely ok so it's gonna load as soon

38:21 as it's ready I will be able to go in

38:24 and see my own it's in reloading and see

38:26 my hello world right there and then I

38:30 will click on it

38:30 and then I see welcome to angular

38:33 elements in SharePoint customized

38:35 SharePoint experiences using webparts

38:37 using angular and it's all about the

38:40 angular angular ok so it's all about the

38:43 anger it's all about the angular baby so

38:47 here you see I have a full refresh of

38:51 that so by using a web components that

38:55 will get overridden every single time so

38:57 that means it's gonna be extremely

38:58 performant to use I one of the things

39:02 that was I was telling earlier is when I

39:05 was clicking on that second web part

39:06 everything would go boom oh here I have

39:10 two different web parts it sounds about

39:12 the angular magic so here we have two

39:16 different web parts that I can see in

39:18 preview mode and add all their own type

39:21 of configuration I'm very happy about it

39:24 this is exactly what I was expecting in

39:27 terms of anger integration and it's easy

39:29 so let's go see the code of how this web

39:35 component is actually generated so here

39:38 you see I'm using the web component ok

39:41 so what is happening actually where's

39:44 the magic happening well the magic is

39:45 happening right here I'm importing

39:48 elements I'm importing angular elements

39:52 also and I'm importing my actual element

39:55 which is my component which is used as

39:58 my type from my base side Weber

40:01 based client-side web part so first I'm

40:03 going to show you that elements here

40:06 which is the following it's actually

40:09 nothing it's very very empty in there so

40:13 very simple it's just an element module

40:15 just an empty module that we're

40:16 leveraging that will automatically

40:18 bundle everything for us we're also

40:21 leveraging the shim here so here if

40:23 you're using IE or ad or any other

40:27 browser that does not support web

40:28 components we will include automatically

40:31 to support of web component Derrick in

40:33 your browser so it means that even

40:35 though you're using an old-school

40:36 browser like IE or whatever you still

40:39 get angular elements in there so there's

40:41 no worries about over there by the way

40:43 this is the same one is being by the

40:46 polymer project polymer is also a

40:48 project by Google that is aimed at

40:51 providing web components also type of

40:55 framework so we're kind of very similar

40:58 to them and make sense that angular is

41:00 working with polymer for that and then

41:03 we have the last one the hello world so

41:05 let's go see what's in there so here you

41:08 see in my elements sorry about that my

41:11 elements here I have an index a hello

41:13 world the index is actually nothing to

41:15 say a registration of the rest I will

41:16 show you the afterwards I have a hello

41:18 world at TS and actually ask nothing I

41:22 have a selector that's gonna be the

41:23 sector I will use I will use that will

41:25 become my Dom element hello

41:27 - world I also use a template URL cause

41:31 I'm probably like you guys you don't

41:34 want use it you don't want to create

41:36 your JavaScript HTML all mixed up in the

41:39 same file for a long time I was being

41:41 told please do separate your concerns

41:44 please separate HTML from JavaScript

41:46 please do stuff yeah that's how angular

41:50 works it's at our reactors working I

41:51 would really prefer the window for

41:53 angular working and also have that s CSS

41:56 file so this is where I will define all

41:57 my styles for that specific hello world

42:00 application here I have my contract or

42:04 my interface we're gonna say have a name

42:06 and here have my module that will

42:08 automatically bootstrap and that's it

42:11 all the rest is taking care by taking

42:14 care of by my HTML

42:15 with my HTML I have here very very very

42:19 simple div class helloworld container

42:22 row column title here at my my dad and

42:26 here I have the regular templating

42:29 syntax of angular so hey I can do it's

42:31 all about the angular whatever the user

42:34 puts as the name variable that will be

42:37 automatically bound to my here to my

42:42 name here that will be automatically

42:45 transferred from my web component here

42:48 from the panel in my SharePoint

42:50 framework my part that's it and here I

42:54 have a ton of different artifacts here

42:57 to style it I changed my case I'm not

42:58 even stunning it but I could be able to

43:01 cite it I can also import part of parts

43:03 of the espy fabric core pretty cool and

43:06 that's the only code from my web part

43:09 that's it

43:10 the rest is on that index that TS that

43:15 exists at the elements for my hello

43:17 world component and here what it does it

43:20 influence of that and it does the

43:23 automatic bootstrap for me so I'm not

43:27 using ng zone reducing zone here I want

43:30 to register that as a custom elements

43:33 and this is the glue this is exactly

43:37 where everything is actually happening

43:39 and then afterwards when I build

43:42 automatically I will generate my energy

43:45 factory this is using a OT so ahead of

43:49 time compiling with angular meaning that

43:52 you will only have in your resulting

43:56 bundles and your web pack bundle when

43:57 you bundle your SharePoint framework

43:59 solution you will only have what you

44:01 need which is very cool so if you don't

44:04 use the if statement in angular inside

44:07 your templates you will not have the if

44:09 statement in your bundle which will

44:11 bring your bundle from like two

44:13 megabytes to 10 kilobytes which is

44:17 absolutely fine for a web pack bundle so

44:20 we're very excited about that

44:21 and then when we run it we have this

44:24 specific environment and works very well

44:28 but it is very simple that's a hello

44:30 world so let me show you something a bit

44:33 more I would say insightful for you guys

44:37 so I will go here and I will move to

44:40 another folder which will be my side

44:43 provisioning example and then this is

44:45 where we'll leverage our asura function

44:46 so let me go to code and that's gonna

44:51 open the code of that solution so I will

44:53 skip everything around I will close

44:56 everything actually here I will skip all

44:58 the packages and config cause it's

45:00 exactly the same

45:01 I will have my SCI provisioning web part

45:03 very similar approach the only

45:05 difference here is that I put it dynamic

45:08 in terms of tag name here so I'm gonna

45:10 render the tag name here using sorry

45:16 here using that here so I'm gonna get

45:18 the custom element and I'm gonna create

45:21 an app in the child right here bypassing

45:24 all the different things here the good

45:25 thing here is that I could pass in

45:27 complex object using this approach no

45:31 just strings literals if you're using

45:33 the regular printing of a web component

45:37 the issue is you cannot put in like a

45:40 JSON object in that case I might want to

45:42 use the JSON object so it might be

45:43 easier to use that and then I refer to

45:46 my side provisioning web part which is

45:48 my site provisioning that TS that exists

45:50 right here let's go see it

45:54 well here I have a lot more stuff a lot

45:57 more elements in there so I'm using a

46:00 lot of Matt so Matt a result all Matt

46:04 step method but those are all material

46:06 design component that I'm using in to

46:09 really really enhance my UI I'm

46:13 referring to my site provisioning HTML

46:15 to my site provisioning scss I am using

46:18 a provider so if you're used to

46:20 providers it's exactly the same things I

46:22 can have generic providers dynamic

46:25 providers mocking providers so very very

46:27 cool I have a full article on mocking in

46:29 my on my blog so if you want to check it

46:31 out it's it's great how it enables you

46:34 to code very quickly instead of having

46:37 access to the pager function or even

46:39 when you're in a plane you can use all

46:41 of that

46:42 um all my inputs of those will be the

46:44 one that will be provided by my custom

46:46 element so I will be able to refer to my

46:48 function URL function key in my

46:50 templates list ID and what I want to

46:54 really show you today is what is

46:56 happening so I will show you an example

46:58 actually of this solution working so let

47:01 me golf serve no browser because I don't

47:07 want that to pop in my local workbench I

47:09 will serve that element and I will

47:13 create everything I need to create and

47:17 using that so here its current currently

47:20 web packing so I will go here so I will

47:23 use my hosted workbench directly in my

47:26 office 365 tenant just want to make sure

47:28 here it's still packing so we're still

47:31 building here as soon as the building

47:34 part will be done we're gonna be ready

47:36 to to to push to push our code and there

47:43 we're ready everything is done then here

47:47 I will reload my workbench and I will

47:50 have that right here so let me show you

47:54 how this is actually working so here I

47:58 have the title of my office 65 group so

48:02 here I have my web part you see it I

48:03 have the title of my office 365 group

48:06 let's put it es pc e SP c Rox ESPC Rox

48:18 I will have my url ESPC Rox as you can

48:21 see this is not good SharePoint stuff or

48:24 office to buy fabric or whatsoever it's

48:26 really really really really the material

48:31 design very easy to configure all

48:33 different types of themes if you want

48:35 you can also make the things that your

48:36 office uses very fabric very cool and go

48:39 next to say I want that group to be

48:41 private or not

48:42 Nike start keep it public I want that to

48:44 have an Associated templates I will

48:46 select my template 0 1 I was already

48:50 connected guys here actually it you see

48:52 here I have my function URL our in there

48:55 my funk

48:56 in there and also my template repository

48:58 so it knows in which template repository

49:01 to go so I'll just put it back here

49:03 because I open it any ESPC rocks

49:07 yes PC rocks go to next here template

49:14 zero one I'm going next and here have a

49:16 nice recap before I complete so we'll

49:19 hit complete and what's gonna happen the

49:22 same exact thing is going to happen that

49:25 happened later on so here I'm connecting

49:30 to my office six five my as a function

49:32 is actually running and I can prove that

49:33 it's running because you will see here

49:35 that the log will actually pop in so it

49:38 should actually I should see in a couple

49:41 of seconds the fact that I will have a

49:46 new I'm not in it right in the right

49:50 function actually so if I go here you

49:53 will see that stuff is actually

49:55 happening in here it is quitting my

49:58 office 65 group it is applying my

50:00 different templates and as soon as this

50:04 is ready I will be provided with a brand

50:09 new site that I will come back later on

50:12 so you can jump to the code and I will

50:13 come later on to see if it actually

50:15 works so what happened well the thing

50:18 that happened is the following this is

50:19 what I really want to show you that's I

50:21 think the most impressive piece that

50:24 isn't there and that's that one when I

50:29 hit on that create site button it does

50:31 the following

50:32 it creates an object called a I site

50:35 creation info I'm getting all the

50:38 information from my form and because

50:41 we're using angular we can have what we

50:43 call the two-way data-binding so the

50:45 form the are formed text box is

50:48 automatically connected with my object

50:53 so here my group title of my group

50:54 description

50:55 everything works automatically temperate

50:57 you are L I open the dialog and in when

51:00 I open dialog I just call this site

51:02 service my site service will create a

51:04 site so let's go see what's that create

51:06 site here and here

51:09 I build my URL I like simply post to

51:14 that URL a JSON version our swing a 5

51:18 version sorry of my site information

51:20 that was passed in so I'm just doing a

51:23 simple HTTP post with the information

51:27 that I just created automatically my

51:29 address functions will work once it's

51:32 ready it's gonna be subscribed to it I'm

51:34 gonna say okay that was success close

51:39 the dialog and maybe move to our next

51:42 screen to show what just happened and if

51:46 I'm going back here I see here

51:48 congratulations

51:50 click on the following link to visit

51:52 your site I can click on ESPC rocks

51:55 right here and we used to here it's such

51:57 things as ESPC rocks I can go in my site

52:00 contents and see that again my valid

52:04 documents library was just created so

52:08 this is really how it is it is simple to

52:11 publish any type of environment and here

52:15 the good thing I want to show that here

52:19 it's cool because we're using actually

52:22 all the different math inform so if that

52:25 is really angular regular type of

52:27 application that we're using to build or

52:30 HTML and all of our form right in here

52:34 so how cool is that

52:36 I I really think that is an amazing

52:38 piece of software that is now available

52:42 to us directly in there and now that

52:48 this is done we were created that we

52:51 really accomplished what we wanted to do

52:52 today which was to play with a Azure

52:54 function as our back-end element create

52:56 an angular web part as a nano world

52:58 would also ask something that does a lot

53:00 more using external API is external

53:03 libraries so very very very cool stuff

53:07 but should you use it in production

53:09 that's a good question

53:13 today the this approach is the only

53:16 approach that works and will be the only

53:18 approach that works so should still use

53:20 it in production I really would not

53:23 silhouette for now as long as angular

53:26 elements are in preview I will hold any

53:28 prediction code you can start to

53:31 experiment though to learn and ship when

53:33 framework and how it's it's an angular

53:35 but please nothing around playing that

53:39 layers into productions so it will be

53:42 your next steps out of the resources I

53:44 showed today are in there there's one

53:47 thing I couldn't show today is the last

53:48 one which is a YouTube video go check it

53:50 out this is called the ng rad the

53:52 angular rap and just a funny thing about

53:56 angular so you can check this out

53:59 if they want to know more about what is

54:02 happening in the angular and office365

54:05 development space please feel free to

54:07 follow the following a hashtag so ash

54:09 like angular ashtag office365 dev ash

54:13 like marks of Wrath I just like astral

54:15 functions and ashtag SP FX this is where

54:17 you will get the latest and shiniest

54:19 from even from the team of Microsoft so

54:21 this is really really where you should

54:23 be looking at to know more about all of

54:26 that have any questions about my repo

54:29 about my code lung any issues in the

54:31 github repo I'd like to thank you so

54:34 much for sticking with me for this

54:36 entire time Shane do we have any

54:41 question it could be my pleasure to be

54:42 able to answer them at this point thanks

54:45 Sebastian for a great presentation yeah

54:46 we do have some questions and should you

54:48 wish to ask for busking any question

54:51 type it into the questions window okay

54:54 first question Sebastian when will angle

54:56 er elements be released as part of

54:59 angular okay so very good question so

55:01 angular elements is currently being

55:04 worked on it is not yet are ready so

55:08 they're expecting to ship angular

55:10 elements within the angular 5 time frame

55:13 which should bring us to the end of

55:15 March if not that's gonna be shipped to

55:18 angular 6 which should be before the end

55:20 of September so it's coming in the next

55:23 few months I would say great it looks

55:27 great but what will that work on will it

55:29 work on on-premise also good question it

55:35 is something that

55:37 we'll work on premises absolutely so

55:39 using the ship went to a sixteen or ship

55:41 when 2019 just make sure you're on

55:44 feature-packed to to actually have

55:46 access to the SharePoint framework there

55:49 are some different differences because

55:51 of the way the the packaging is done for

55:56 one point one for HR point front with

55:58 one point one compared to one point four

56:00 so that is something we're still working

56:02 on to make sure it's gonna work but it

56:04 will work in the end okay how have you

56:07 imported P and P module to function up

56:10 oh that's a good that's a good one so

56:14 you need to add your your you can import

56:19 directly in your function app your

56:22 common let's and your modules directly

56:25 in there so you can just use the file

56:27 explorer drag and drop of your files

56:29 right here in there and then in the end

56:31 you can just import the PSD one or the

56:34 PSM one the module file directly inside

56:39 your function and then it's gonna make

56:41 it available for all the for all the

56:43 session in partial okay

56:46 next questions wash about react support

56:48 oh it actually works alongside we

56:53 actually if you want to play with

56:55 angular and react is possible not sure

56:58 if i would do it but it is absolutely

57:02 possible the the exact same thing for a

57:05 sure function let's say you want to use

57:07 as your function at your back into a

57:09 react component that is a hundred

57:11 percent supported that is exactly the

57:13 same way you would do it with react or

57:17 with angular but it's really on the the

57:20 mix between angular and react this is

57:22 the part I'm not 100% sure where I would

57:24 do it but it is supported okay

57:27 after a way to do the same an SP 16

57:30 on-prem yes absolutely so that's the

57:33 same question earlier when you can maybe

57:35 like same thing with SP 16 on for

57:37 absolutely okay how would annular

57:40 elements work with reusable react

57:42 controls on github oh that's a good one

57:47 it would I

57:50 the word would add some dependencies

57:52 especially on the property controls are

57:54 done by Elio I would not see angular

57:59 take that responsibility and I would not

58:01 build them using angular angular is more

58:03 of a complex solution it's not a

58:05 component solution so if you're building

58:08 complex components I would stick to

58:10 angular if you're building more like

58:12 controls

58:14 I would probably more stick to react if

58:16 anything how comfortable you are but I

58:18 don't think the reusable controls will

58:20 leverage angular because just of a style

58:24 of coding they started with react I

58:25 think they should continue with react

58:27 also okay I can we insert JavaScript

58:31 code and new community side SharePoint

58:34 Online yes it is possible it's exactly

58:37 what I was doing actually here by

58:39 building a web part so there's two

58:41 different supported scenarios the web

58:43 parts and i/o like the one I showed

58:44 which is typescript or JavaScript that's

58:47 up to you and the extension so it's

58:49 SharePoint framework extension so you

58:51 can actually add it sure about a

58:52 framework extension that can run

58:54 JavaScript on the page so that is

58:57 something that those are the two real

59:00 supported scenarios for communication

59:02 sense okay what about using ng office UI

59:06 fabric it is so you can actually use the

59:15 office right fabric in there you can mix

59:18 the styles in there so that is

59:20 absolutely possible something with

59:22 Google material you can also use that so

59:25 it can actually be mixed together there

59:29 in there so you can leverage the theming

59:30 options of office 365 in the canisters

59:32 okay in a general way should I use SPF

59:36 x4 developed for develop enterprise

59:39 applications yes that's absolutely yes

59:43 specially if you're targeting SharePoint

59:46 to a 16 and shipment online I would not

59:48 hesitate to go to share a framework

59:51 especially if you're more into the web

59:52 part type of solutions and extensions

59:55 type of solutions there are some still

59:58 limitations that are the frameworks that

59:59 they've complete but yes absolutely

00:01 that's the best code quality you will be

00:04 able

00:04 to get using SharePoint framework

00:07 absolutely okay and just one more

00:09 question how can display elements of

00:12 lists

00:12 how can you display element of lists

00:15 with PHP oh so that might so inside

00:21 SharePoint that is not possible if you

00:23 want to do that using PHP in the azure

00:26 function though so you might want to use

00:28 PHP as a scripting language in Azure

00:30 functions then you would use the

00:32 SharePoint REST API is directly in there

00:36 there are some very very good examples

00:39 on the dev office.com on how to use PHP

00:43 to connect to SharePoint Online so I

00:45 would use that as a starting point and

00:48 then sky's the limit for you pregnant

00:51 sebastien thank you so much for your

00:53 time today we're pretty much out of time

00:54 for today so we're gonna leave it at us

00:56 and for everybody else thanks for

00:58 attending thanks everyone

01:01 okay brilliant so just let me come back

01:04 here okay so um that is it for today

01:13 join us for our next webinar on Tuesday

01:15 March 6th 2018 at 1:00 p.m. CET see

01:20 sharepoint europe calm forest / register

01:23 - four - webinars for further details

01:27 thank you all for attending and have a

01:29 great day

01:38 you