SharePoint Framework at a glance
Download as PPTX, PDF2 likes381 views
The document outlines a monthly meeting for the San Diego SharePoint User Group focused on the SharePoint Framework, covering key tools, technologies, and development practices. It highlights the importance of using modern web tools like Node.js, TypeScript, and Gulp for building SharePoint solutions, as well as the Office UI Fabric for user interface design. The document also provides a step-by-step guide for setting up a local development environment and resources for developers to enhance their SharePoint Framework skills.
SharePoint Framework at a glance
- 1. San Diego SharePoint User Group Monthly Meeting
- 2. SharePoint Framework at a glance Haaron Gonzalez Solutions Consultant Office Server and Services MVP @haarongonzalez [email protected]
- 3. Modern Team Sites Modern Lists Modern Document Libraries Authoring Experience / OOB SPFx Web Parts SharePoint in your pocket
- 5. • Tools • Node.js • Yeoman • Gulp • Typescript • Visual Studio (Code) • Frameworks • React • Angular.js • Knockout • Etc. Open Source Tooling
- 6. Comparing tools with MS IIS Express VS Project New <Template> C#
- 7. Node.js – Open-source, cross-platform JavaScript runtime environment https://nodejs.org/en/
- 8. npm – Node Package Manager https://www.npmjs.com/
- 9. Yeoman – Project Templates http://yeoman.io
- 10. gulp – Build process manager http://gulpjs.com/
- 11. Typescript is a typed superset of JavaScript that compiles to pure JavaScript Allows enterprise developers to create better JavaScript-intensive applications by introducing variable typing, classes and modules Typescript – Typed JavaScript https://www.typescriptlang.org/
- 12. Office UI Fabric – UI for SharePoint Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language Office IU Fabric is supported in SharePoint http://dev.office.com/fabric
- 13. Local development time experience Test your changes immediately even in offline mode SharePoint Workbench
- 15. Prepare your computer 1. Download and install Visual Studio Code - https://code.visualstudio.com 2. Download and install NodeJS - https://nodejs.org 3. Install the build tools for windows using the following command (run PowerShell as local admin): npm install --global --production windows-build- tools 5. Install Yeoman and Gulp using the following command: npm i -g yo gulp 6. Install Yeoman project template for SharePoint using the following command: npm i -g @microsoft/generator- sharepoint
- 16. Client-side Web Part Build Flow
- 18. Our first SPFx web part
- 19. Our first SPFx web part
- 20. Our first SPFx web part
- 21. Our first SPFx web part
- 23. Controls supported in the property pane Simple and dynamic property pane fields Lots of controls to simplify data entry For example: Text Boxes Check Boxes Drop Down Toggle
- 24. Controls supported in the property pane 1. Import the controls we need MyDemoSPFx.ts 2. Define the data structure of our property pane IMyDemoSPFxWebPartProps.ts 3. Optionally define default data in MyDemoSPFxWebpart.manifest.json
- 25. Controls supported in the property pane
- 26. Conceptual process – Checkout “JavaScript embed models” with add- in model implementations from PnP Learn used technologies – Web stack tooling Install node.js and cmd tooling for testing web stack development on your computer Learn webpack for bundling your applications Learn JavaScript Framework(s) Light-weight frameworks - Knockout, Handlebars etc. Fully-fledged frameworks – Angular, React, Ember etc. Get understanding on how they can be used and what the benefits are of using them Learn Office UI Fabric usage By default available for SP Framework customizations. Other UX frameworks can also be used How can you become a SPFx master?
- 27. Node.js and npm - www.nodejs.org Gulp – www.gulpjs.com TypeScript - https://www.typescriptlang.org Yeoman - www.yeoman.io Git - www.git-scm.com/ Office UI Fabric - dev.office.com/fabric Webpack - webpack.github.io React - facebook.github.io/react Angular - angularjs.org Knockout - knockoutjs.com Handlebars - handlebarsjs.com Resources
Editor's Notes
- #5: En los últimos años, la evolución de Office 365, el desarrollo de soluciones de SharePoint ha detectado un nuevo conjunto de desafíos: mientras por un lado TI y administradores de arrendatario requiere un nuevo conjunto de herramientas para controlar cómo obtener acceso y se consumen en contratos de arrendamiento de datos , los desarrolladores, por el contrario, quieren controlar de forma automática todo el ciclo de vida de las capacidades, experiencia y acceso a los datos de un sitio. Desafortunadamente, los desarrolladores hoy en día se encuentran restricción torno a la construcción de aplicaciones partes como resultado de iFrames, un conjunto reducido de APIs, y no hay integración con Office 365 cruz cargas de trabajo. Esto a su vez limita su capacidad para desarrollar portales de gran alcance que se extienden de SharePoint. El marco de desarrollo en el cliente entregará capacidades que ayudarán a los desarrolladores de los dos primeros partidos y de terceros crear aplicaciones potentes, ricos y proporcionar una experiencia web agradable en Office 365 para usuarios finales que son a la vez intuitiva y fácil de consumir.
- #6: SharePoint will also support open source tooling to drive greater efficiencies when developing Parts and Apps. These tools should not be considered a replacement of an organizations traditional tools, but rather an extension of those, providing new opportunities to quickly get up and running with SharePoint development. If you’re familiar with Visual Studio development with SharePoint, this tools carry a lot of similarities with the tools you may already be familiar with for example: Yeoman provides a generator ecosystem. A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts. yo scaffolds out a new application, writing your build configuration (e.g Gruntfile, Gulpfile) and pulling in relevant build tasks and package manager dependencies (Bower, npm) that you might need for your build. This is similar to Project Scaffolding in Visual Studio. Gulp Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms. Strong Ecosystem - Use npm modules to do anything you want + over 2000 curated plugins for streaming file transformations Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. event driven JavaScript runtime, Node is designed to build scalable network applications similar to VS SharePoint development: Gulp = MSBuild, NodeJS = IIS (Express), YeoMan = project scafolding in VS, TypeScript= typed superset of JavaScript