Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.

687 views

Published on

Introductory slide set on the new client side framework on SharePoint platform which introduces by Microsoft. This slide-deck has been used by me in the local user group speak-up had in the year 2016. @kushanlahiru

Published in: Software
  • Be the first to comment

  • Be the first to like this

SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.

  1. 1. The future of SharePoint/ O365 developer ecosystem Kushan Lahiru Perera PgD(UGC), PGD(UK), MCP, CCNA
  2. 2. kushanlahiru.wordpress.com @kushanlahiru kushanlahiru@live.com Kushan Lahiru Perera Full stack developer Works for VirtusaPolaris Post Graduate Diploma holder
  3. 3.  Introduction to SharePoint Framework  Get introduced SharePoint Framework developer ecosystem  Develop with SharePoint Framework  Deploying SharePoint Framework Solutions Line up
  4. 4. Office Blog blogs.office.com
  5. 5. SharePoint Farm Solutions Sandbox Solutions SharePoint apps/add-ins • Server-side object model • Declarative code • HTTP Handlers • Runs on SharePoint • CSOM/ REST • Also runs in cloud • Runs separately from SharePoint SharePoint Framework
  6. 6. “A Page and Part model that enables fully supported client- side development, easy integration with the Microsoft Graph and support for open source tooling” – office.com  Higher user experience with consistency  Responsive and Mobile ready  SharePoint Online  OneDrive  Same look & feel as Microsoft built(UI Fabric)
  7. 7. Deep customization is highly capable. Since more tooling and libraries can be used Enabled for both cloud (O365) & on premise Allow developers to dive towards other web technologies and gain the potential of those…such as AngularJS, EmberJS, React and etc.
  8. 8.  Better user experience (UI & UX)  Decoupled systems with REST (Cleaner contact points)  Evolution of SaaS solutions and O365  Client-side scripting
  9. 9.  JS and performance  Extensions and extended tooling  Responsive interfaces for all browsers(web, tab, mobile..)  User focused app development (User Centered Design- UCD)
  10. 10. Now, with the SharePoint Framework, we have a structured approach to modern app development, end-to-end, that’s not dependent on .NET “This means SharePoint evolving to extensibility”
  11. 11. Despite the different forms of add-ins the model has some limitations, one of which is the use of iframes for integrating add-ins on pages. Its another tool for your toolbox, its up to you to pick the best for your job Modern team sites look great and offer improved user experience in the mobile-first world
  12. 12. Responsive mobile friendly No iframe Dynamic properties List-based and Page-based No need for cross-domain library to access SharePoint resources
  13. 13. 1. Infrastructure No isolated app domain. No changes in DNS or setting up high- trust. 2. Responsive Web parts are not made as iframes and thereby can be made as responsive and mobile friendly 3. Dynamic properties Properties in SharePoint add-ins are defined decoratively in XML. They can't be changed in runtime.
  14. 14. Tooling Frameworks
  15. 15. model provides dramatically better experiences, performance, mobile support and more while broadening our developer ecosystem from .NET and beyond – extended capabilities from .NET developer ecosystem Uses JS frameworks like Angular and React
  16. 16. SharePoint Framework will be available to existing SharePoint sites You will be able to host client-side web parts developed with the new SharePoint Framework on existing SharePoint pages
  17. 17. New>Project>Project Template
  18. 18. You are free to use your favorite • Sublime - https://www.sublimetext.com • Windows – PowerShell/ cmder - http://cmder.net • Mac – oh my zsh - http://ohmyz.sh
  19. 19. Is develop time hosting platform Cross-platform Open source Local JS runtime environment Same as IIS express in typical Microsoft dev stack Also capable of working with server side code https://nodejs.org/
  20. 20. Package manager for JavaScript Used to consume 3rd party libraries Equivalent for nuget package manager Node package manager https://www.npmjs.com
  21. 21. Scaffolding tool for development (template engine) Runs on top of Node.js Can be used “npm” to install Yeoman is responsible for creating the project structure with all the files and folders, just as Visual Studio does, but using the console instead. Template Repo http://yeoman.io/
  22. 22. Provide automation for your build tasks Classically this has done by  Microsoft Build/ Maven/ Ant Test Automation Task and build manager http://gulpjs.com/
  23. 23. open-source language created and maintained by Microsoft super set of JavaScript that extends the language Can code both client-side and server- side All concepts same as C# Typed JS typescriptlang.org
  24. 24. Its your flavor!! Light weight frameworks Fully fledged frameworks https://facebook.github.io/react/ https://angularjs.org/ http://emberjs.com/
  25. 25.  The page structure will allow developers and enthusiasts of all skill levels to extend SharePoint capabilities  more efficiently  reliability  faster than ever  mobile ready  responsive from day one
  26. 26. gulp upload-cdn manual upload of the app
  27. 27. Local development time experience Test your changes immediately even in offline mode No need to deploy and see Increases dev productivity Reduced development cost
  28. 28. You can deploy this to where you want. It may be; CDN Azure Web App (If you have subscriptions) SharePoint Library (If you addicted to this)
  29. 29. .js file in Style Library .js file in the Scripts folder .js file on CDN
  30. 30.  Client web parts and client-side applications are the new building blocks.  these go along with the new page model.  It’s a JavaScript world!  Config files are in JSON  Code is implemented in JavaScript on the client-side.  The packaging of artifacts is different!  There are new manifest files to learn about (e.g. a web part manifest)  Other files such as bundle.json, package-solution.json, upload- cdn.json and more.  Gulp tasks are used for packaging.  Files for your web part or app can live anywhere Anywhere that can be accessed on a URL by the end-user basically.  The “local development” model is very different –  Gulp and node.js are used to host files locally, so you don’t need to use IIS on your local machine. All you need to know about SharePoint Framework
  31. 31.  No particular JavaScript framework is mandated – You are free!!  But if you are used React in the past continue with that since less load and libraries on the page  You should consider learning TypeScript  At least the key parts such as modules, the type system and so on.  You no longer NEED to stick for Visual Studio  Other lightweight code editors such as Visual Studio Code or Sublime…or etc.  SharePoint Webhooks – these are the new “event receivers”  Standardized to work with both On-prem and Online All you need to know about SharePoint Framework
  32. 32.  The App Catalog is used as a packaging and registration method  Both client web parts and client-side applications are packaged in this way (moving away from the web part gallery we’re used to do)  Page security needs some consideration  Because all magic are done in the clients browser  Since that server side validators & restrictions need to be highly considered All you need to know about SharePoint Framework
  33. 33.  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 (Bundling of JS)- webpack.github.io  React - facebook.github.io/react  Angular - angularjs.org  Knockout - knockoutjs.com  Handlebars - handlebarsjs.com
  34. 34. kushanlahiru.wordpress.com @kushanlahiru about.me/KushanPerera
  35. 35. kushanlahiru.wordpress.com @kushanlahiru about.me/KushanPerera

×