Microsoft 365 Community PnP Webcasts, 21 Aug 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Web Cast - Preparing for SharePoint Framework - What should I learn?

Description

In this PnP Web Cast we concentrated on sharing how to get prepared for the upcoming SharePoint Framework. We are showing some of the tools used commonly with SharePoint Framework development and also how to use Visual Studio as your development environment for SharePoint Framework.

Key objective of the web cast is to provide you additional insights on the upcoming capabilities and how to get prepared for them. SharePoint Framework will be available, with limited capabilities, for first release tenants during summer 2016.

Presentation covers following topics:

- Typical tooling for SharePoint Framework
- Web stack tooling vs classic Microsoft tools
- Walk-through of the different tools and their purpose
- Training path for mastering SharePoint Framework
- Getting started with tooling
- Demo section concentrates on showing following topics:

Walk-through of the different tooling and their purpose
Demonstration of the SharePoint Framework development with Visual Studio 2015

* Notice. It's important to notice that we used preview tooling in this video, which is not yet available for the community to consume, when this video was released. When official tooling will be available, there might be also some changes on the exact commands and also on the capabilities in Visual Studio side.

- Web cast presenters: Waldek Mastykarz, Vesa Juvonen

Waldek works in Rencore AB and is one of the external members in the Office 365 Dev PnP Core team.

Presentation used in this web cast is available from http://docs.com/OfficeDevPnP.

Additional resources:

- The SharePoint Framework - an open and connected platform
- PnP Web Cast - Getting started on the web stack in SharePoint development
- PnP Web Cast - Getting started with SharePoint Framework
Tools mentioned in the web cast

- Node.js & npm
- Gulp
- TypeScript
- Yeoman
- Git
- Office UI Fabric
- Webpack
- React
- Angular
- Knockout
- Handlebars
- Visual Studio Code
- Sublime
- Cmder
- Oh my zsh

Thanks for your interest on the PnP initiative.

If you have any feedback or comments related on this web cast, please use the Office 365 network at http://network.office.com for questions. Thx for your interest advance.

A

Welcome everybody. This is office, 365, developer patterns and practices webcast, and this time we're going to talk about how to prepare for the chiffon framework. So what should you learn? What are the resources? What are the technologies, which would be worthwhile of spending your time while we want to actually prepare for the upcoming sharepoint framwork, which isn't out yet when this video is recorded, if you're watching this video after it has been released for a first released, tenant or even to the production, the technologists are still exactly the same. Obviously, the some of the demos.

A

What we're showing have well technology have slightly evolved, like the visual studio or the the node yeoman templates, probably have means changed a little bit so we'll pinpoint them throughout the webcast. But basically we wanted to record a session where we will explain the technologies. We will explain how to spend your time of getting prepared, or what do you need to learn to be able to muster the SharePoint framework? My name is Reza. You wanna I'm, a senior program manager in ship and engineering and with me is Baltic. Baltic really do your interests.

B

And work senior developer rank or oh it's.

A

A senior two developer as the title, so it's not a man and then this.

B

That's my official well so and then I turn into men and a myth. Yeah.

A

Cool, let's actually get going so one of the things there's always new people watching this videos just to clarify the the PNP and office 365, develop abundance and practices or ship on Patterson practices. It's a PNP initiative where we share code samples cards, documentation, zin, MSDN and also in qatar. We have monthly community calls. We have case studies as well.

A

The themes are on the sharepoint site quite often, and the shippin framework share, but that ends, but we also do other office 365 development as well, so like Microsoft graph, so there's a lot of Arab assets out there. So if you're looking into starting development on a sharepoint or with Microsoft graph, you probably want to have a look on the on our code or goat gallery or search tooling and and what are the assets available and then download samples from the github as well.

A

Excellent, let's go back on the SharePoint framework, so just a kind of a vision slide on what do we want to do from a SharePoint extensibility perspective? So there are certain principles which we we really wanted to tackle with this new SharePoint framework. So we wanna wanna truly build a long-term value audits and services for enterprise, mobility and and they, the immediate first reaction, might be that what I mean with mobility.

A

Well, it means that whatever we actually implement from a customization perspective, your device doesn't actually matter so that the shipment framework will be fully responsive and the SharePoint UI and the new UX will pay for a responsive as well. And the whole point is that any way you can access those pages using whatever device and the debaters are adapting based on device. So we as a developer, we need to obviously take that into account as well.

A

The domain principles are essentially the fact that we want to provide an application development framework which aligns with first and third parties, and you might might understand what it means or you might not. So if the first parties means actual Microsoft teams in or SharePoint engineering teams who are developing their new experiences on top of SharePoint. So this exactly the same shape on framework is used, for example, by the portal guys or the video guys for implementing their new.

A

You is on top of the the SharePoint sites of hysteresis define, and the third parties then means the the community customers and partners and ISPs and and whoever who are implementing their customizations on top of the SharePoint, and this is kind of a fundamental change in our well in. It's not really fundamental change in our thinking, but it's a fundamental change within our behavior in the old. In the past, the engineering was using a slightly different tooling.

A

When then, the community was tolling, because engineering had access on the server-side API, but now we are falling back on this truly client-side development. So whatever you develop also SharePoint engineering is taking advantage or using the exact same models. We truly want to build industry-leading client solutions in on-premises, sending clouds so that the sharepoint framework will be released in on-premises as well.

A

The timelines are have not been confirmed, but it will be first available within the sharepoint cloud, as a preview version for first released tenants during summer 2016, I say initial version and initial capabilities will keep on evolving dots and developing new capabilities released and in autumn and then in spring. In 2017, and then we want to unlock the potential sharepoint and the marks of craft on desktops or any device, and that really comes down on the mobility part as well, so you can use whatever device you.

A

What is your preference and the beige experience will adapt based on your device?

A

Good, let's go back on a more detailed on a ship on framework. This is, I think this is a good statement on the sharepoint framework. Shipment framework is all about typical web stocks tooling, and you might or might not be familiar what the web stack, tooling actually means, but it's more that the way how people have been implementing the websites or web experiences using an open community tooling.

A

So what we're looking into is taking making sure that whatever you, you do not have to have explicitly, let's say, super deep sharepoint skills to take advantage of the shipment framework and implement sharepoint customizations on top of the sharepoint with the new model. At the same time, if you're, an old scholarship on developer old college may be a wrong way of putting that.

A

But if you, if you come from a server-side development background, this learning to sharepoint framework will mean that you are a been able to do development among the other webs web development platforms as well.

A

So the tooling accepted is exactly the same, and if we'll have a quick look on the tooling and that's kind of a summary slide on the tooling and on the frameworks, the tooling will be in general noches as the the hosting platform so to say for development time yeoman for the templates group for the task management types for the development and then vsauce2 redcoat as one of the options for the editors there's other options for editors as well and we'll come back on this and in a second, and since this is client-side development, you can actually choose the JavaScript framework, what I'm going to use for the development.

A

So, if you're familiar with react or knocking out or handlebars, you can continue using them with the SharePoint framework, so implement. Truly, your customizations towards SharePoint, using your preference framework and.

B

Is there any advantage to use one over another or it doesn't make any sense like or or doesn't matter at all, and you can just use any framework you want without any pros and cons. Well,.

A

There's kind of an advantages and disadvantages on on some of these because angular or amber as an example, they're kind of full fledge frameworks and they take over the angular kind of a takes over the page and the implementation is slightly different. Then, when you are doing using a lightweight framework like react or orc, knockout or handlebars, so it's matter of kind of a choosing your preference and then stick into it. If you don't know, if you don't have any experience of any of this, I would actually start with a a lightweight framework.

A

First like react or not knockout and learner, or learn doing the development on their native little bit inertia pond engineering. We are using react as the ask the framework, but it doesn't mean that you need to do your development using react, so you can use whatever. Is your preference nice just kind of a clarifying, because there's obviously does this may be some uncertainly for some some of the audience? What's actually what then? What does it mean? What we're saying in BM I, don't know what it actually means.

A

So what is a ghoul up or yo man? Yo man, especially every single time we we mentioned yo man and in an presentation for audience, there's always people who are starting laughing because it's your shipment or your office.

A

It is what it is so at, but but what it actually means is that the noches can play kind of a simplified well oversimplifying things. It's it's an ayah same Esaias Express used to be within a for example, intership and adding development. So it's the the Hoklo call javascript hosting engine which will then host your JavaScript, implement your JavaScript implementation from your local machine. So we're able to do kind of a testing locally as well.

A

You can use no chance also as a server-side engine and that's why we have the dotnet mentioned in the noches right next to the node.js logo.

A

Npm is a node package manager, so essentially oversimplifying things well, it is actually pretty close. It's almost the same as new get gallery, so even in a classic managed code development in Visual Studio. It wasn't really a good practice anymore to to download SDKs with install a simplistic local assembly CAC, and then you reference those from AG AG, because it's actually pretty difficult to manage those versions.

A

And then you need to install a managed install to your development machines, those things you took advantage of the or you still do take advantage of the new get gallery where you're able to pinpoint which of the versions your application is using across the Internet and whenever you compile the stuff is actually pulled down from the Internet automatically within a visual studio. The NPM is kind of a similar thing, you're able to pull down your needed frameworks and in quotes JavaScript the same place.

A

Well, there's no such thing as shallow check the JavaScript the same place, but your JavaScript components or packages from the Internet and then you can do a local development within your machine group is more around task management. So it's almost like TMS built so you're able to do automation of these tasks within your project, yeoman yo-yo office. It's almost like the the templates or it is the templates we used in Visual Studio.

A

We used to always go and create a new visitors to their project and then we say add a new item to the project and that was the template. Yeoman is a a essentially a centralized to repository for this kind of a templates in the and and the engine which is scuffling. Those templates you will install those templates using NPM, but then yeoman is the one with just extract and execute the template flow for you and then typescript is essentially its upper set sub subset. It's a nut. Subset come on I'm losing my breath.

A

Well, they killed me. It's five script, this development language. Anyway, it's a or typed JavaScript, so you're able to do the the development of the of the code in a more secure way because, typically in JavaScript, you don't have a development time checking of your variables or your types in typescript. You do it compiles completely to JavaScript in the end and everything is JavaScript when you're actually executing the stuff. So you might say that the typescript is almost like this sure there are some similar ideas with that one its uppers.

A

So again, let's find the words.

A

No can do no can do so one more time if we walk through all of these items. No chance is really for the development time hosting there's an HTTP, no chance org as less Ian. If you're looking into the English version of things, so you're able to actually get or download the Noches and have a look on the documentation. What does it actually do? So? That's development time hosting platform, it's really like local JavaScript runtime environment.

A

So you can actually do that in the client side or who, as a host engine or you can do a server-side code as well, if needed so over simplifying things, you might consider that as the I is Express, which we used to have it with Visual Studio, or we still do no doubt NPM node package manager. Whenever the the node has been installed, then we're able to start installing packages from internet using a command line. So we open up a command line.

A

We will write NPM installed in the package name and then there are certain switches and options available in this case. As an example, npm install typescript will mean that the typescript will be download from the internet to your development machine, and then you are able to do the development locally within the machine, so package manager for SharePoint, sorry for JavaScript, losing my my words, use the long side with no chance for local JavaScript development and used and its really used for consume the third-party libraries in your customization.

A

So burster, you can write all of the stuff by yourself, but there's a lot of NPM packages out there for complex operations or all the libraries or frameworks like the react, is as an example is available or typescript. Again this example and then, if you have actually created a a nice set of JavaScript by yourself or you want to only want to share them, you're able to publish them in the NPM gallery as well and as a package for other peoples to consume.

A

Yo man yeoman dot IO. It always makes me smile. Why? Why are some of this are using the dot IO mattress.

B

They're cool right, like so graph IO graph, is cool traffic school yeah. It's.

A

It's the Nick, it's another kid on a plum, it's kind of interesting to say: what's that rest in five years? Will it be something completely different when the I/o is no longer the new cane? But whenever you have installed that the needed packages to a machine, some of those packages could be templates. Then you do anniversa need to install the yeoman using the MPM manager as well.

A

Then you do yo as an example office which would actually start to office templating creation process, and so the yeoman is really there for scaffolding and their development projects for client, side and server side actually- and it's also used to deliver the SharePoint framework templates to your development machine. So you need to get download the stuff again whenever the SharePoint framework will be available for you right now at the recording time of the real video. It's not yet it's gonna come soon.

A

We will make big fuss out of it when it's available, but you're then able to actually create the projects using the yo option. What we will be calling at the time will appear your SharePoint or your some we'll see, we'll see how we can nothing.

B

A

B

Think that's the interesting thing to mention is that if you want, if you have specific template structure or process or anything that isn't available out of the box, you can quite easily create your own templates. Yes, that's good, for example, take the template that will be made available by Microsoft, and you could customize that extend that build on top of that to build a template for your own team right. That would work for you. That would be. That would actually give you a start ahead. The way you do it every single time sure.

A

Sure absolutely a good point, because if you want to have a standardization among your development team, you can easily do that with your custom templates as well.

A

Absolutely cute, the following fellow, which we went kind of a mentioned already it was the goal colchester come gulp is essentially a task manager, so you're able to then order do automation of your build tasks, munis, simple automations, and but it actually has really strong ecosystem, any variable that additional I think they're called plugins vertigo Hawkins well additional things which are plugins in the conceptual perspective and face so there's a really big ecosystem around doing a growing ecosystem with cool but in the individual studio or well.

A

Sorry, in the SharePoint framework perspective, it's really the task manager making sure that when you execute, for example, gulp serve command. What will then happen? And and that's all about it- it's almost like the NS built, but we had individuals to their projects, which, quite often you don't need to worry about as long as you understand the command or AAA action. What you're executing so all of the automation is already default.

A

Automation is available there within the templates, if needed, you're able to do additional tasks and addition things within the build automation flow, which time script is types JavaScript and typescript is typed. Super state of JavaScript I was losing the superset word in the past, but it key.

B

Point yes, yes,.

A

To keep on here to understand it's it's the development time, time experience, so it compiles to the JavaScript and then so. Whenever somebody is consuming your web application, it is actually JavaScript it's just for helping the development time experience. If you do have a large project, making sure that the variable names and types are our consistent might be really difficult when you're using typescript, it's going to help you to do that, and the language is still JavaScript or it's really rare. Well, it is JavaScript still yes and and type here.

A

This is really the native development language for base templates in a SharePoint framework. Technically, you can take a native JavaScript, which you have developed outside of the shipment framework and push it in to the templates, but you would still have to well. You would be using typescript in the in the client-side web part base classes, but then that would then start calling the the JavaScript, which is not touch script.

A

If that's needed, I would say that they keep on around there is that you don't need to rewrite everything whenever, if you, if you are moving any of your existing JavaScript applications to the SharePoint framework, you are able to take advantage off the typescript and then you're able to double Java Script this typescript as well or well, yeah, so you're able to actually make your existing JavaScript work together with this typescript base classes.

A

And one of final kind of a piece of a fellow which didn't have a logo, so I just took a picture from their website, so Delta dove comes last fabric. It's actually giving you a responsive, mobile, first collection of styles and components.

A

Well, not really that components, the actual functionality isn't tell it's more on styling how things are actually working, but it's really around giving you consistency across your applications and making sure that your application is looking consistent in the context of SharePoint as well.

A

The SharePoint framework and our other way around UI fabric is natively supported in SharePoint SharePoint itself, when you are writing a chevron framework customizations, so you're able to just reference those Styles and you don't be good to go and there's quite a lot of individual components up, and this is also open source available in a key tab as well. So if you go deaf that offers that comes less fabric, you can have a look what's actually available. So.

B

If you want to use it with react or angular, and you just use that as this or is there additional effort in involved before you will be able to benefit of it so I.

A

Would say you can use the styles as is, but if you really want to have the actual functionality included in your particular framework, then there are open source projects out there. For example for angular you remember the angular project name, voltic, I'm,.

B

Ng office, you.

A

Life-Energy office, your FF requests, which will help you to integrate the the UI office UI fabric directly within the angular, and there's a lot of work and done by the community on this site, together with other people in the community and Microsoft on helping to do the office fabric in an efficient way. We're looking into having a similar kind of thing for react as well and more announcements and information around these things are coming sooner or later, good.

A

Let's actually have a quick demo, so this is just a a walkthrough, so waldek it's going to do the demo and let's walk through those individual technologies. What does the gold mean? What does the yeoman mean? What is no chance from a demo perspective, so you have a some sort of a kind of an idea. What does it actually mean and then let's continue with slides and do a few more slides and another demo within the session as well, but let's jump on the demo and then piebald egg. All.

B

Right so for a first demo, we would like to show you how you can use the new new epic tools to projects I'm here on a Mac, but that works exactly the same way on OS X, Windows Live. In it it looks anything you want to use. So the only thing that I've done already is to installed. Node I have installed node, and the next thing I want I'm. Gonna do is I'm going to install your yeoman, so here in the command line, I'll type NPM I for install gee gobo.

B

So that means that I don't want to install that in project. I want to be available all the time on my dev box, so that every single time I can just use that and not install it every time and then I will say yo, and that means compare yes, yo NPM and basically what it does is that it gets all dependencies from the Internet and installs comen on my patent, a box just going to take a while. So we will skip that and it's actually done there. You go.

A

But when you think of it, this is essentially just a replacement of winning within the windows. You would be downloading an MSI or an EXO, you would be installing something and then that would bring to just stuff in.

B

Exactly exactly that, just command-line way to install your your tools right, make.

A

B

That we have now we have now yeoman, but we don't have any and any generators yet. So the message that we want to do is to install generator and let's pick one that's already available today. So with that we'll go like NPM I for install global and then we will say generator office and that will basically install the template generator for office so for office edits and that also take a while.

B

We will cut through that not to take you through all dependencies and next step will be to use that to build up a project alright, so our generator is now installed. So now, let's create a new project based on the and what so? First, let's create a new folder office EMP for you and then go into that, and then the next thing that we do is we say your office and that's basically how you call generators that you already have on your box.

B

So it would be your office, your SharePoint yo anything and you can create your own templates right. So that would be like yo yo yo, my app, you can have anything you want and then, depending on the project that you you have you'll, be asked questions like project name, ruse, false holder, you, you and everything that you see from now on depends on template right.

B

The questions that you see here are actually up office add-ins, but if you would build a web app or web part, these questions might be and will be different right. So let's just stick with default and that will take a while to build selectors start, creating it and skip that alright. So now our project is created. Let's have a look at the code, so let me open vs code, but you can do that with any editor or IDE you want.

B

So you can do that in brackets, Adam Visual, Studio, anything you want- and here you see the the project that's been created for me by your office. So here you see files pages directories and then the one thing that we wanted to talk about for a second, it's gulp. So, as we said, gulp is the task manager that you can use to automate your build or anything you want.

B

You can compare, build gulp to Emma's, build and what's gob, you can really easily create tasks for bump for on linear app for optimizing it transpiling typescript anything you want so here you see gulp file, yes, and it's always the same name in your project that will be gulp file. Yes, you'll be able to see that and to see like which tile dust are there. So here you see, for example, gulp dust help, there's also another one. Golf dust serve static, gulp test validate, and you can call all these tasks directly from command line.

B

So here, if you would go to say, gulp serve static, you'll be able to call exactly this task here. So we will local this test here in command line, and you can invoke them and depending on the task, it will do whatever you want it to do in the task. So it's as easy as that.

A

That's pretty easy, don't kind of a difference for a Windows developer if you're coming from a Windows background is that why do I need to use a command line and we'll touch that one in an isolated mo? No doubt yep I think that's! That's it for for this one just walking through the main main steps that what is no no chase, that's now actually serving that particular chase or that application in the localhost 8 4 4 3, as we can see. In this case we went through the NPM.

A

We went through the yeoman I'm, going to the gulp as a task manager as well. There's a few other elements which were mentioned on the slides but I. Think that clarifies already what are these fellows and what did they actually do? So, let's switch back on the slides and come back back with the demo in a second excellent thanks Walter for that one. So let's have a few slides before we do the second demo as well. So we kind of a touched, the the following topic already, but two bigger questions.

A

What where, for example, getting is that I want to use angle or a knockout in my development? Is that fine? What kind of event is true already within the presentation, but that's absolutely fine as well. So it's really up to you to choose the chosen framework. Well in Microsoft, SharePoint framework does use, react and, and that's relatively lightweight framework, which is pretty flexible for this kind of development. You can use angular as well or AK knockout as well.

A

There are different advantages and disadvantages of this framework and probably will come up with a a kind of a consideration map slightly later, so we're not going to do it within this call, or maybe we'll do another webcast where we go through individual of one or a maybe assemble, which have been implemented using a knockout and a react and a angular. So what's the difference is what what's that vendor taste and so on and.

B

I think the great thing about it is that, from development point of view, there is nothing specific to happen framework that would influence like how you use angular, knockout, react or anything else. So, probably if you've worked with with these in the past, you've already done research like. Would you like to use angular or react or knockout? And why? And what are the pros and cons and I think that, eventually, when things will be available, I think it would make a lot of sense to have the guidance like okay.

B

So if you would like to do angular think about this, and if you would like to do knockout project, think about that, so perhaps not really, like an overview of, should you use angular, knockout or react right, because that's that has nothing to do with SharePoint framework by itself. Absolutely it's more development web development thing in general, right, yeah, yeah,.

A

But then that's what I'm essentially meant with with the statement as well, so what does it actually mean if it used to hang Miller in the context of SharePoint framework? What are the considerations and, and how do we make it actually happen, so that that's something which we absolutely will release as part of the release and documentation within a SharePoint sooner or later or shipment framework? Sooner or later?

A

The other thing about my typical question is that especially the people who've been doing more form solutions and or even adding the developments outside of the web stack. You might be really familiar with with us to the IDE, the development of our development environment, and then it's like. Oh my god, what are those common clients? What no chairs? Why are making this so difficult.

B

By the way from my ID, yes,.

A

Why are you pulling me away from my IDE?

A

Why I can't use my favorite tooling, which is brilliant, and it has all of the different capabilities, and the answer is actually you can so you can take advantage of the visual studio and we are working on a additional tooling on the visual studio to make it even even easier, but the solution already from day one and already right now we're going to do a quick demo out of it as well, is to use the noches project template in Visual Studio, which is clever enough to understand individual tasks which you have in the node node project, and essentially what you do is that you import the existing node project or a folder the business to do, and then visitors to there is kind of automatically create a template out of it, and then you will have a task manager or the task UI is to actually run to individual tasks which are without a command line.

A

Interception. As such, you will actually see the command line inside of the visual studio, but you will be in the in the familiar IDE, whatever your chosen set up, but I think the best thing to understand what it means is that let there is to see it in practice.

A

So, let's jump on the on the demo and well that's going to show you how to resource to the experiences with the no change in J's projects, so we're going to use one of the early builds of the SharePoint framework to show you this one in practice and just to kind of make sure that it's mentioned quite a few times. This is preview projects and we're looking into having additional extensibility. We are. We are in Visual Studio for helping the development to be even easier what it is when it will be available.

A

We can't actually tell that right now, but we're getting there and Visual Studio is absolutely a a first-class development experience. First-Class development environment as well for SharePoint framework, all.

B

Right and I demoed that we wanted to show how you is actually to prove to you that you can use your favorite IDE that that you've you've used um until now to build these new. So here I am in Visual, Studio 2015 and what I've already done is I imported my SharePoint framework project into the node.js project template.

B

So no no GS project template comes with the no GS tools that you can install additionally for Visual Studio and after you do that you will get a new template that you can use to import your SharePoint from SharePoint framework projects or.

A

In general, no J's projects when I think of it. Yes,.

B

That's correct so, as you can see, that's exactly the same project that we've already had, and here you can go to view author went windows, task runner exploit Explorer, and here you will see all the gulp tasks available in our project. So here is, for example, serve that we can use to test the project in the war bench right and I've hooked that up already with my f5x experience. So let's just show you or prove to you that that it actually works. Let me just start the project in I.

A

And, what's going to start that happen right now in the background, is that the visitors today is integrating directly with the node chest, and so it's actually starts the needed operations in the noche assignment yep.

B

Yes, so here you can see how God built the project and opens I uh with the web part. So here you, you can see that we are now in the workbench in which we can edit the web part, and we can change it to say, let's not presume, like PMP hello world, and you can see that as we change stuff in a pane. The web parts should change. Is that in that.

A

Yeah, in the same way, yeah absolutely- and one thing to notice here- is that the URL after of the page, we're in a local host in here. So essentially, what we are doing is that now in in the let's say, adding model development we used. Visual Studio with the I is Express in this case, we're using visual studio with Noches as the as the hosting platform or the JavaScript. Yes,.

B

We actually use the same stack that we used on a Mac, and the only thing is that we have now an IDE that does all of the task command lines stuff for us, so that we can focus on on on the code and not command-line yeah.

A

Absolutely and from a Microsoft perspective and shape and engineering perspective or visual studio, guys perspective day, we're working on a additional tooling on this one as well. So the the exact steps on how to do this, how to import an import and OJ's project inside of the auto visual studio.

A

It will be absolutely documented available when the shape and framework will be released and then we're working on additional extensibility in the Visual Studio for SharePoint framework as well, so even further make these things more easily available or exposed for Visual Studio sign so that you can take advantage of all the innovation and all the all. The capabilities like you can do within the command line and the visitors to their code site as well. Yeah.

B

And also all of these tools are open source. So if you want to have some other extensions or abilities that are not available out of the box, you are free to build them, because the whole stack is open-source. You have the access to commands to the tasks to all of the tools and it UK you could easily integrate them within IDE to make things even easier. True.

A

So that's actually a good point just as well. We could have a community tool which is extending the visual studio with the certain operations if, if something is missing so which is actually a great opportunity again for community to to contribute between each other, so great point well the con that one but I think that's.

A

That's it from a experience perspective, relatively simple, but and actually extremely fast to do the only thing when you're importing that no J's project, that's that process isn't super fast, so it takes a while and that's the reason why we didn't. It actually showed that within the video, but you'll have all of the needed guidance on how to do this whenever the ship on framework will be available for you to take, take into a use at the recording time of this video or release.

A

Time of this, video in the SharePoint framework is not yet available for you, so we're using a preview version with with me and Walt act right now and we'll make a big fuss out of it whenever the first released tenants will get and to SharePoint framework to be available. But we absolutely wanted to show that this is possible using the visual studio as well and we'll keep on evolving that experience in the future as well cool, let's go back on the slides and and close up the way past Thank You, buldak, Thank, You Alec.

A

For that one and few more slides before we close up the thing so just kind of a summary of the whole presentation, we went through different things. We had a look on the visual studio side and we had a look on the toolings in the in the demo as well. I would actually now start mastering the SharePoint framework. Well how the master master is a pretty strong word of saying, but at least we have a cranium plant training path to get started on understanding the conceptual the concept in a much more detailed way.

A

The number one thing actually which I would start is to go to existing of Steff pnpn have a look on our JavaScript embedding patterns. We do have a MSDN basis around MSDN documentation around this one as well, and and what the JavaScript embed model actually means is that you take.

A

For example, adventists of the script editor web part, where you add a div and a reference to a JavaScript, and then you put that one on your page and you can automate that all absolutely and whenever that's executed by a process, the JavaScript itself will essentially troll whatever is inside of to do over simplifying things. That's exactly what the chevrons framework is do but again oversimplify things.

A

Chevonne framework is much more than that as well, and it provides you consistency and additional services for development, developing those things, and you will actually have a native web part or client fit pods, not not that you need to do a script. Editor web part modifications.

A

Other then, then it's a good thing to learn about use technology, so the web stack tooling, installed nodejs and a command-line tooling. Is it a Mac or are you having a Mac or a PC? It doesn't matter both it works in both and then kind of a tested. The web stack development on your computer and that's really also run learning the web pack for bundling your applications. So what what is a? How does it actually work as well? And how do you start actually doing the web stack development, then?

A

Obviously, it's a good thing to learn about JavaScript frameworks might already know about some of them. You might already have a chosen one and that's absolutely fine and I'm just noticing a small typo. The reactor should be in a lightweight framework sign, but let's fruit, it there on the official slide, but there's a lightweight frameworks. There's a full-fledged frameworks and I know birth dates again debatable. What is the lightweight?

A

What is the full-fledged, but still but really kind of a getting understanding how they they can be used and what's the benefit of using them and then also learn about the UI fabric usage? How can I use that already X within the existing JavaScript based implementations and what's kind of a cool? If you go through all of this already right now- and you might be using all of this already right now, because right now today, within a sharepoint online or in on-premises, you get just as well.

A

Do all of your development in a web stack using react which is taking advantage of office UI fabric and then you're using the javascript embedding model. So the model conceptually is exactly the exactly the same with sharepoint framework as well did I miss anything there. Wall deck.

B

And everything is that if you compare that, you actually see that you have like enlightened eye, deep percent is available already right, I think that's only the last 10% that ties the the things that that you you build using this approach to PowerPoint that basically normalizes the contract, if you will between solution and a SharePoint right button, but other than that, as you said, everything that's on this slide is available today, yeah.

A

Exactly exactly and that's actually the right way of putting that formalizing the contract between the SharePoint under developer and then providing additional services within the framework as well I. Think that's, really nice way of putting what is a shape and framework, but but you can do this already today and if you haven't done it and just have a look on the conceptual thinking and the conceptual and development models, what we have with the JavaScript embedding patterns within the PNP, and that will help you to to understand what are we talking?

A

This is just a a more kind of a reference line. What does it mean of getting started? We would say that install first of all to pay fair, get, isn't truly needed, but most likely you will be using kit to pull down anyway stuff from the key top rather than just downloading a zip file which works as well. You would install no chance.

A

You can go the no chase or for doing that, then it would install comment line tooling, of your choice for Windows I'm using commander I know that wall deck is using well you're using both, but in oh, my is is what this is yeah.

A

B

A

Then, in stock code editor ID of your choice, and so like me, like we showed in the demo, you can do it with do the stuff in a visual studio or you can do lightweight as well. Opening up a visual studio project can take for a long time like well, that's all we're saying: well, you can go to the visitors to there and you can do the development in this Osteria. But by the time the visitors to their project is opened up. I'm already finished, with Visual Studio code.

A

B

Dad depends a lot by what you want to do. On the other day, we had to talk about the fact that whatever we're going to build in everyone's name, work does not end with UX right. There is also a big chance and I think that, eventually we will see that it's more often the case that it's not, that you will need some kind of server side component, API or anything that light like that, and with that it will make total sense to integrate all of that and the project in your Esalen right.

B

So your visuals video might still be the the IDE that you want to use, because it's not only the UX part, but it's all of it. It allows you to have a singular view at your whole project. Sure.

A

To having multiple projects within your solution in Visual Studio and then understanding what those projects are doing relatively typical case, no doubts for a larger projects and the Web API side of it and web services on yeah, absolutely but anyway that and then, when it, when you have installed, and when you have chosen your code editor, then it's just a matter of testing with the web stack and there's quite a nice github templates and repositories and hands-on labs material already available and well that's just to kind of a puff or promote your stuff as well, while the Kasai a really nice as an example, react blueprint which you can pull down and start playing with and start building your testing.

A

The web stack development on top of it, and then this is just a a reference list of all of the links which we mentioned already as we as we went through the individual technologies just to have a a reference link for them. You'll find all of these links, also in the in the description of the video. So you can easily go and start start learning more around the specific technology. At this sign, we close up just a reminder and office: deaf B&B, our SharePoint patterns and practices.

A

We will use the shipment, others and practices from an engineering perspective as the channel for the community facing guidance, samples and all the messaging that the AKMs office, deaf B&B, lends you to the deaf. That officer comes less PNP Atris, which is a one-pager where we are collecting all of the different resources. It's quite a lot of stuff out there.

A

So there's channel one on videos where this webcast is available as well, there's MSDN, where we will start actually adding Chevonne framework stuff and until we'll have a new location for for some of this, these elements Yama curb the Twitter channel. The monthly calls the repositories and the rosters come for presentations and being a partner backer self reference target for heading model, development or assure ad based applications in office. Resist fine but I think that's it for this webcast any last words from your side holding.

B

Yeah I think that, even though, currently when we according this, the framework is not preferable. Yet I would only encourage you to give rise to all these new frameworks and tools and to already earn them so that when the framework becomes available, you'll be able to start start building cool splooshed.

A

Absolutely it's always a matter of time. No doubts because obvious that we do have our day job job and then we do have our family and hobbies and all of that. But it would be great if you can actually say spot few hours here and there to start kind of slowly investigating those things or faster depending on your availability, because this is the direction where we're heading and that's gonna, help also outside of the Octagon dose of chef.

A

So it's it's absolutely available thing to learn from a any for any developer who's doing any web development within the well within the world, but I think that's it. Thank you for listening or watching and we'll come back with a a new webcast sooner or later.